JavaScript Lesson #6
Prompts and Variables

Use these to jump around or read it all

The Concept The Script The Script's Effect Deconstructing the Script
What You've Learned Your Assignment

The Concept

I have two concepts in this primer. One you'll only use when you want to prompt the user for information. The second, creating variables, you'll use throughout the remainder of your JavaScript life.
     By the way, we're now back to creating full JavaScripts rather than just adding Events to HTML, so we'll need to once again start using the full <SCRIPT LANGUAGE="javascript"> to </SCRIPT> format. Here's what we're going to do: We'll ask the user for his or her name and that name will have a variable assigned to it. Once the variable is assigned, then we can enter it into a "document.write" line that will post the user's name to the page.

I will tell you that this lesson is a little long, because I wanted to stop for a moment and review what you've done so far.

The Script

<SCRIPT LANGUAGE="javascript">

/* This script is intended to take information
from the user and place it upon the page */

var user_name = prompt ("Write your name in the box below","Write it here");
document.write("Hello " + user_name + ". Welcome to my page!");


The items above within the parentheses should all be on one line.

The Script's Effect

Deconstructing the Script

Wait! What's that /* and */ thing?

Yeah, I stuck in another extra command. These are commands that comment out text in the script. If you remember about three lessons ago, we showed you the double slash command (//) to comment out lines of text. Well, this one does the same thing, but it's a little better. The double slash is called a single line comment. You have to have double slashes at the beginning of each new line. These comment commands allow for multiple lines. Just have /* at the beginning and */ at the end and everything in between will comment out.

Creating a Variable

This concept is paramount in JavaScript. You must know how to do this. Here's the scoop: What you are doing is denoting a one-word title for the output of a JavaScript function. Remember when we were posting the date to the page using the method "getDate()"? When we placed it into the document.write statement we wrote out the entire getDate() method. Since we only did it once, it wasn't so hard. But what if we wanted to write it ten times across the same page? Writing those nine characters again and again would get boring.
     So, we assign a variable to represent the output of the method. Let's say we choose the variable "d". That way, we would only have to write getdate() once and assign "d" to it. Then the rest of the way through, we'd only write "d" when we wanted the date. With me? Let's get back to this example:

Here's the line from above that denotes the variable:

var user_name = prompt ("Write your name in the box below","Write it here")

Notice I create the variable following this format:

  • var proclaims that the word that immediately follows will be the variable name.
  • user_name is the name of the variable. I made this up. It didn't have to be this long. In fact, I could have made it "N" if I wanted. It's just always best to make the variable names so that you can easily remember what they represent.
  • Remember that JavaScript is case sensitive, so if you spell your code word "Dog", then the "D" has to remain capitalized every time you call for it or the browser will see it as two separate names.
  • Please notice that there are no quotes in this run of text. Just follow one word with the next as shown above.
  • The equals (=) sign denotes that the variable name will equal the output of the commands that follow.
  • In this case, the variable will represent the output of the prompt box.

The Prompt Command

I used a new command in this example, the "prompt." Prompt is a method that pops up that box you saw when you first came in. If you want to see it again, then reload the page. Here's the format of the prompt:

var variable_name = prompt("Text on the gray box","Text in the white box")

You'll notice that the var and the variable name you assign are included in the format. It has to be, otherwise, you'll get the prompt, but nothing will be done with the data the user enters in.

In case you're wondering...

  • To get a blank white box on the prompt, do not write any text between the second set of quotes.
  • If you do not put the second set of quotes in, the box will read "undefined."
  • If you have written something in the white box and the user chooses OK without entering anything new, then what you wrote in the box will appear in the output.
  • If there is nothing in the white box and the user chooses OK without entering anything, then the word "null" will appear in the output.

Back to the Deconstructing...

Now that you know all the parts, here's the meat of the script again:

               var user_name = prompt ("Write your name in the box below","Write it here");
               document.write("Hello " + user_name + ". Welcome to my page!");

Here's the process:

  • The variable name "user_name" is assigned to the output of the prompt.
  • The prompt asks the user to write his/her name in the box.
  • The white box reads "Write it here."
  • Semicolon to end the line.
  • The "document.write" statement calls for the text "Hello" (space for continuity).
  • The plus sign (+) denotes these items will all go together.
  • "user_name" is representative of the output of the prompt. No quotes -- we don't want it printed.
  • Another plus sign.
  • ". Welcome to my page!" with period and space for continuity completes the text.
  • Semicolon.

Please make a point of truly understanding the concept of variables. They are used extensively in this language. They are quite useful.

Let's Review

Okay, we've gone through six lessons. Now let's take a second or three and look at what we've learned.

What You Have Learned

Your Assignment a review.

Okay, we've gone through six lessons. It's now time for you to start looking at more involved JavaScripts. The purpose is not to confuse you but to show you that you already know enough to create some pretty snazzy effects using multiple JavaScript commands. Your assignment this time around is to look at the JavaScript below and explain what each part is and how it works. Write it out like I did above. You'll be surprised at how fast these monsters crumble into easily understood portions once you understand what's going on.

Here is the JavaScript and its effect
(this will open a new window)

The Concept The Script The Script's Effect Deconstructing the Script
What You've Learned Your Assignment

On To JavaScript Lesson #7

Back To JavaScript Lesson #5