JavaScript in Plain Language (2015)

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.log

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.

Examples:

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.

Another example is log(x). If x is a declared variable, this will display the value of x. If x is not a variable, JavaScript will throw an error because any word that is not a variable should be in quotes like this: log("x").

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);

NOTE:

log( ) by itself will not work. We need to use Dot syntax to bind log( ) to the Console (lower c):

console.log("Hello " + x);

That is the correct way of using log(), attaching console to log() with dot syntax. Notice how console is in lower case. The correct way to refer to the Console when programming is console in lowercase. It is an object named console. Capitalization for console will not work because JavaScript is case sensitive.

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.

alert( )

Before console.log(), there was alert(). Contrary to console.log(), alert() is a true JavaScript command (console.log is not really from the JavaScript core, it is a method introduced by browsers and for test purposes). Programmers were getting tired of having to create a popup box with alert() just for testing a quick output, and that’s how console.log() was invented.

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:

window.alert("hello!!");

Why window?

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:

window.console.log("hello!");

However, since we are coding inside of the Console, we don’t really need to explicitly address the outer part of the Console in the browser. I mean, console.log() is good enough since JavaScript starts looking from where we are coding and moves outward from there. So it finds the commandlog() as part of the Console. In any case, even alert does not need to use its parent window in order to work (because Console is a child of window and a child has access to its parent’s variables, properties and methods.).

This is the most popular way to code an alert:

alert("hello!");

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.

For example:

var answer = prompt("yes or no?");

Then we could further manipulate the answer by evaluating it with a Boolean result:

answer === "yes";

That is actually a question for which JavaScript will answer back as true if the answer is "yes", or as false if the answer is "no".

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.