In the last tutorial, you learnt about variables, arrays and objects. In this tutorial you’ll learn how to save your JavaScript program to a file and run it. You’ll also see how to display things and how to take input. Let’s get started!

The output function: console.log()

Open the JavaScript console and type this:

> var name = 'commonlounge';
< undefined
> name
< "commonlounge"
> console.log(name)
  commonlounge
< undefined

When you just type name, the JavaScript interpreter responds with the string representation of the variable name, which is the letters c-o-m-m-o-n-l-o-u-n-g-e, surrounded by double quotes, "". When you say console.log(name), JavaScript will “log” or “print” the contents of the variable to the console, without the quotes, which is neater.

As we’ll see in the next section, console.log() is required when we want to print things while running code saved in a file.

Saving JavaScript file

So far we’ve been writing all our JavaScript code in the console, which limits us to entering one line of code at a time. Normally JavaScript programs are saved in files, loaded into HTML web pages and executed by interpreters in browsers.

We’re going to need more than one line of code for the next few tasks, so we’ll quickly need to:

• Exit the JavaScript Console
• Open up your code editor of choice
• Save some code into a new HTML file (we use an HTML file because we will be opening the file in a browser, which expects HTML)
• Open the HTML file in a browser

Save the following code in a file called "hello.html".

<script>
document.write("Hello world! " + "....Bye Bye World!", "<br>");
</script>

Some things to note:

1. The HTML script tag can be used to type JavaScript within the HTML file. All the JavaScript code you write, should be inside the script tag.
2. We are using the document.write function to write something to the HTML.
3. <br> (stands for break), is how we tell HTML to go to a new line. This means that when we call the document.write function again, the values will be printed on the next line.
4. Always remember to end each line with a semicolon ( ; ).

To run the JavaScript code, open the HTML file in Google Chrome and the browser instantly runs the JavaScript code. If you see the following, then the setup works fine!

Hello world! ....Bye Bye World!

Alright! You just ran your first JavaScript program that was saved to a file. Feel awesome?

The input function: prompt

We already know what prompt is. So far in the course, we’ve been mostly focusing on printing values. It’s useful to input values as well. For this, you can use the prompt function. Replace your code in hello.html with the following.

var name = prompt("Enter your name:-");
document.write("Hello, " + name + "!");

Then, refresh the window with hello.html. You should see a prompt box, and if you type in "Commonlounge", you should see the following on the console.

Hello, Commonlounge!

Great!

Remember we said a function is a sequence of instructions that JavaScript has to perform? The following is the sequence of instructions for prompt

• Create an alert box with a text field in it.
• print on the alert box, the value the function is called with
• Wait for user to type something and press enter
• Return what the user typed

When we did var name = prompt("Enter your name:-"), the prompt box popped up with the message Enter your name:- and then waited for input from the user. Once I typed Commonlounge and hit enter, the value got stored in variable name. Then, we used the document.write function to greet the user.

Input integer values

The prompt function returns a string. If you want use the prompt function to get a number, don’t forget to use the parseInt() function to convert the value.

Let’s say we want to ask the user to enter two numbers, and output the sum of the numbers. Change the JavaScript code in hello.html to the following and the page.

var a = prompt("Enter the first number: ");
var b = prompt("Enter the second number: ");
document.write("The sum of the two numbers is: " + (parseInt(a) + parseInt(b)));

If you give 14 and 12 as input for the two numbers, the output will be:

The sum of the two numbers is: 26

There’s a bunch going on above, so let’s go step by step. The first variable got the value, "14" and the second variable got the value, "12". Notice that the values are strings, not integers. The document.write line evaluates as follows:

document.write("The sum of the two numbers is: " + (parseInt(a) + parseInt(b)))
=> document.write("The sum of the two numbers is: " + (parseInt("14") + parseInt(b)))
=> document.write("The sum of the two numbers is: " + (parseInt("14") + parseInt("12")))
=> document.write("The sum of the two numbers is: " + (14 + parseInt("12")))
=> document.write("The sum of the two numbers is: " + (14 + 12))
=> document.write("The sum of the two numbers is: " + 26)
=> document.write("The sum of the two numbers is: 26")

If instead we added a and b directly (without converting them to ints), then the result we would get would be "1412" instead of 26, since + operation on strings joins them together.

You’ve gotten very far! You just wrote JavaScript code that interacts with the user and does something useful!

Summary

In the last few exercises you learned about:

• printing things using the document.write function
• saving JavaScript code to a HTML file and opening it with Chrome or any other browser
• asking the user for input using the prompt function

Time for the next lesson!