Lesson Monday

So far, none of the JavaScript we've learned has let us do anything with a web page. Let's try something a little more interesting:

> alert("Hello world!");

Wow! When you press enter, the page pops open a dialog box that says "Hello world!". Exciting stuff!

alert() is a function. A function is something that performs an action. Just like a method, a function can take an argument. The alert() function pops up a dialog box with the string that you pass in as an argument.

Here's another JavaScript function that takes a string as an argument:

> prompt("What is the air-speed velocity of an unladen swallow?");  // I'm going to type "African or European?"
"African or European?"

In JavaScript, everything after the // is a comment, and is ignored. Comments are a convenient way to leave notes in your code for yourself or other programmers.

This dialog box lets you type in a response, and then that response is returned from the prompt() function. One cool thing we can do here is set a variable equal to the response, like this:

> var favoriteColor = prompt("What is your favorite color?"); // I'm going to type "green"
undefined
> favoriteColor;
"green"

Here we created a variable named favoriteColor and assigned it to hold the string inputted by the user.

Just like we could chain methods to each other, we can also chain methods to a function:

> prompt("Type something in lowercase:").toUpperCase(); // I'm going to type "lowercase"
"LOWERCASE"

Another built-in function that allows us to interact with the webpage user is the confirm() function. This too takes a string as an argument.

> confirm("Are you sure?"); // I'm going to press the OK button
true

Try it out for yourself in the JavaScript console. You should have seen that confirm() returns one of two values: true or false. Notice that there are no quotes around these values. That is because these are booleans, not strings. They simply represent being true or false. You saw them before when you worked with comparison operators.

And on that note, you might have noticed that alert() returned undefined, also without quotes. undefined simply represents that nothing has been returned from the function, or, as you saw earlier, that a variable hasn't been assigned a value.

It is good to be conscious of what arguments a function takes, and what data type it returns. Here is a table showing that information for the three built-in functions introduced in this lesson:

function arguments and return values table

The alert() function does not return anything useful, which is fine because you would just use it to display some information to the user - it is a way of outputting information, not of collecting information. On the other hand, you would want to somehow collect the user's response to the prompt() or confirm() functions - likely by assigning the returned value to a variable as demonstrated above with var favoriteColor = prompt("What is your favorite color?");. That way you can actually do something with the inputted information rather than just ignoring it.

Terminology


  • Function: A function is a block of code that performs an action and returns a result; optionally takes arguments

  • Comment: anything following // on a line in JavaScript is ignored by the computer. Comments are a convenient way to leave notes in your code for yourself or other programmers.

Functions


  • alert() opens a dialog box and returns undefined.

  • confirm() opens a dialog box and returns a boolean.

  • prompt() opens a dialog box and returns a string.

Return Values


function arguments and return values table