> var name = 'commonlounge';< undefined> name< "commonlounge"> console.log(name)commonlounge< undefined
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.
We're going to need more than one line of code for the next few tasks, so we'll quickly need to:
- 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:
- We are using the document.write function to write something to the HTML.
- <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 time.
- Always remember to end each line with a semicolon ( ; ).
Hello world! ....Bye Bye World!
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.
- 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.
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.
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.
In the last few exercises you learned about:
- printing things using the document.write function
- asking the user for input using the prompt function
Time for the next lesson!