JavaScript in Plain Language (2015)

PART I: AT THE GATES OF ENLIGHTENMENT

1.13 Lab work 5

Getting feedback from a user

In this lab session we will work together step by step. Please turn on your JavaScript Console and play along with me:

1- Let’s use prompt() to ask a visitor for his/her name:

prompt("What is your name");

2- A popup window should appear on your browser after you press ENTER, asking for your name.

Answer the question but do not write your name in quotes. Being a text box you don’t need quotes. The input mechanism will put the quotes automatically:

Write Tony or your first name, and then press ENTER

Ok, what happened? Nothing much happened, right? The name was displayed on the Console as an automatic feedback and that’s about it.

This is because we didn’t catch the input name given by the user to the prompt() mechanism. In order to grab the input name, we need to assign the result to a variable.

Let’s start from the beginning by doing it all over again:

3- Declare a variable name userName and assign to it the same prompt() as before. I’m not using the word name by itself because it is a reserved word in the browser, which makes it a forbidden term to use as a variable name):

var userName = prompt("What is your name?");

When the popup window appears type your first name on the box and press ENTER.

We still can’t see the name, but on our next step we are going to use console.log() to display the value of variable userName which should be your first name. By the way, the automatic feedback message was probably the term undefined, right? That’s because the feedback happened when the variable was declared, and then the assignment happened. You don’t need to know this; I just want to inform you so that you don’t get distracted trying to figure out what really happened there.

4- Use console.log() to display the value of userName:

console.log(userName);
Mine displays Tony

If you get an error like for example "ReferenceError: myName is not defined", make sure the name of the declared variable and the variable name you used on the console.log() are the same. A common mistake is to write username and then on the second time write userName. As you know, they are not the same.

5- Let’s make our output a bit prettier. Use console.log to display the following sentence:
“Hi, Tony! Nice to meet you” where Tony is the name you have entered on the prompt. You will have to use the variable userName as a placeholder (see the next explanation).

console.log("Hi, " + userName + "! Nice to meet you.");

Notice the white space after Hi, also notice that I have used the variable userName instead of the real name. That’s because as programmers we create scripts to work with any name, not just our name. Always code generically!

6- Did it work for you? Did you get the correct name displayed on your output sentence?

Now it’s your turn...

On the next few exercises you are going to repeat what we’ve just done. Are you ready to do it on your own? Please read the following recipe instructions and then program it yourself.

1- Declare a variable color and assign to it a prompt() asking a user to define his/her favorite color.

2- Program a console.log that says Hmmm... orange is also one of my favorites! where orange is the variable color which represents the color picked by the user.

3- For practicing purposes, add an extra line with a confirm() to display this message:
“Are you ready for more JavaScript?”.

( See the results on the next page).

Results:

1- Declare a variable color and assign to it a prompt() asking a user to define his/her favorite color:

var color = prompt("What is your favorite color?");

2- Program a console.log that says Hmmm... orange is also one of my favorites! where orange is the color they have picked.

console.log("Hmmm... " + color + " is also one of my favorites!");

3- For practicing purposes, add an extra line with a confirm() to display this message :
“Are you ready for more JavaScript?”:

confirm("Are you ready for more JavaScript?");

END OF LAB

Congratulations!

You should now be ready for the second level of this programming adventure.

Let’s start by introducing conditional branching techniques so that we can go a little faster on the highway!

Thanks for sticking around.