> var name = 'commonlounge'; < undefined > name < "commonlounge" > console.log(name) commonlounge < undefined
When you just type
name, which is the letters c-o-m-m-o-n-l-o-u-n-g-e, surrounded by double quotes,
"". When you say
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
<script> document.write("Hello world! " + "....Bye Bye World!", "<br>"); </script>
Some things to note:
- The HTML
- We are using the
document.writefunction 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.writefunction again, the values will be printed on the next line.
- 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.
- Wait for user to type something and press
- 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.
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.
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
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
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
b directly (without converting them to
ints), then the result we would get would be
"1412" instead of
+ operation on strings joins them together.
In the last few exercises you learned about:
- printing things using the
- asking the user for input using the
Time for the next lesson!