PART I: AT THE GATES OF ENLIGHTENMENT
1.11 Introducing console.log, alert, prompt, confirm
So far we have been testing the value of variables by just typing the name of the variable and pressing the ENTER key.
This works because we are using a test Console.
However, as our scripts get more complex we will need to have a more explicit mechanism for outputting data to the screen.
That’s where console.log( ) comes handy .
The Console has a way to explicitly log data to the screen by using a mechanism called log( ).
The data to be displayed goes inside of the parentheses. If this data is in the form of string we wrap it in quotes. However, if the data comes from a variable or from a number, we always write the variable name or the number without quotes.
log(“Hello bluebird”); <-- This will not work as written. Please wait to read the note on the bottom of the page before you try it on your Console.
We can also combine strings and variables:
Like for example:
var x = "big bird";
log("Hello" + " " + x);
Which displays Hello big bird
Or if you remember, we could do it this way:
log("Hello " + x);
log( ) by itself will not work. We need to use Dot syntax to bind log( ) to the Console (lower c):
console.log("Hello " + x);
Here are some more examples:
console.log( 3 + 5); <-- It displays 8
console.log( 3 > 5); <-- It displays false
Or a combination of a string and a number comparison:
console.log("3 > 5 is " + (3 > 5) );
It displays: 3 > 5 is false.
We will use console.log() extensively throughout the book.
When we transfer a program from testing to production, we need to convert all console.log()s into something that works with HTML, and alert() is one of such output statements. There are many other output implementations, which is a good thing since alert() is synonymous with ugly advertisement popup boxes.
Just like log() is called from the Console, such as console.log("Hello!"); alert is called from object window, like this:
The object window is the mother of everything we do on a browser. Even the Console itself runs under window. (no relation to Microsoft Windows). The complete statement is actually:
This is the most popular way to code an alert:
We will have an opportunity to try using alert() on the next lab assignment.
confirm() and prompt()
Another popular popup box is confirm()
Just like alert(), confirm() also comes from object window and we normally code it like this:
confirm("are you sure you want to proceed?");
It pops up a message and we click one of the two possible buttons:
Ok or Cancel
Ok will return a Boolean true, and Cancel will return a Boolean false. We don’t have to take advantage of these Booleans, but we could and we will when we do a project on conditional statements.
Another useful output method is prompt() which also acts as an input method.
prompt() is very useful to gather information from a user because prompt() will open a widow where the user can introduce some data. We can then assign this data to a variable and use the value to create some other outcome.
var answer = prompt("yes or no?");
Then we could further manipulate the answer by evaluating it with a Boolean result:
answer === "yes";
This will make more sense when we arrive a conditional statements. I just don’t want to give you all the information in bulk when you get there and that’s why I’m introducing these concepts right now. Hopefully when we get to conditional statements you will remember the basic ingredients used on a conditional recipe, but don’t break your head over these concepts, we will revisit them again.