Java Script Programming

Page 2

Now it is time to get into the fundamentals of programming. I will teach you how to use variables. A variable is a declaration in coding that stores information. The information is stored in the computer's memory. For instance, take the variable X and the expression "X = 5". In this case, the variable X stores the number 5. This is all you have to do in Java Script to declare variables. However, it is good practice to use the keyword var before the declaration. In context, we declare X = 5 like so: var X = 5. I remind you again that Java Script is case-sensitive. The keyword var must be lower-case, just as other Java Script keywords must be used in the case they were designed in. The variables we declare are also case-sensitive. We could say var x = 5; and var X = 10; on different lines. If we used an alert to display the value of "x" and the value of "X", you find they do not conflict with each other and are different. Let's write some Java Script to illustrate this concept.

Open a new plain text document.
Set up the document like so:

<html>
<head>

<Script Language = "JavaScript">
    
</script>

</head>
<body>

</body>
</html>

Between the comment tags (), type the following lines:

var MyFruit = "Apple";
var MyValue = 10;

document.write("Variable MyFruit stores " + MyFruit + "<p>");
document.write("Variable MyValue stores " + MyValue);

Line 1: Store string Apple in variable MyFruit.
Line 2: Store value 10 in variable MyValue.
Line 3: Write on the document Variable MyFruit stores and (+) the value of variable MyFruit (Apple), then make a paragraph, thus creating a carriage return at the end of the line.
Line 4: Write on the document Variable MyValue stores and (+) the value of variable MyValue (10).

Because the variable MyFruit is set to a string (Apple), this variable is a string. The variable MyValue is set to 10, making this variable an integer type. The difference becomes relevant especially when adding values together. We will later learn about a function called eval which treats numbers and variables as values, not strings. Variables can store three different types in Java Script: boolean (true or false), numbers, and strings. Each different type must allocate a specific amount of the system's memory. Boolean values use the least. In Java (not Java Script), a boolean variable uses 1 bit of memory. This is quite small considering 8 bits make up 1 byte.

Modify the line document.write("Variable MyValue stores " + MyValue); to what you see below:
document.write("Variable MyValue stores " + ++MyValue);

Notice that we added "++" in front of the variable MyValue. If you test the web page again, you will see the page says Variable MyValue stores 11 and not 10 as it did before. The "++" simply increments the value by 1. We could have also written MyValue++, but the variable still reads 10. This adds 1 to the variable after it is displayed. Therefore, we do not see the value of MyValue unless we were to display it again. If were to write the following:

document.write("Variable MyValue stores " + MyValue++);
document.write("Variable MyValue stores " + MyValue);

Assuming MyValue is initially 10, the first line writes Variable MyValue stores 10. The second line will read Variable MyValue stores 11 because the variable MyValue was previously incremented by 1.

Let's try something else now.

Erase the Java Script we wrote from your text document so it looks like the following:

<html>
<head>

<Script Language = "JavaScript">


</script>

</head>
<body>

</body>
</html>

Between the comment tags, enter the following code:

var Name = prompt("Enter your name visitor:");
document.write("Welcome to the world of Java Script " + Name);

The first line sets the variable Name to a prompt. This is a function programmed into Java Script's environment. It loads a prompt dialog with prompt Enter your name visitor:. When the user enters something into the prompt and selects OK, the entry is stored in the variable Name. The function prompt has parameters (arguments) like so: prompt(prompt, text). If we were to enter something into the argument for text, the prompt dialog displays with something already entered in the text box. For example:

var Name = prompt("Enter your name visitor:", "Name");

is displayed as you see below:

Test the web page. You should see that what ever you enter into this prompt dialog is written on the web page after selecting OK.

Between the two lines we entered, type:
alert("Welcome to my page " + Name);

This code simple displays the text seen in quotes and (+) the data stored in the variable Name (stored by the prompt).

Now I will introduce another type of dialog; the confirm dialog.

Below the last line of Java Script written, enter the following lines:

var answer = confirm("What is your answer?");
document.write(answer);

The first line we entered displays a confirm dialog window (includes choices OK and Cancel). The selection is stored in the variable as true or false. As you can guess, OK = true and Cancel = false. The next line writes on the web page the information in variable answer. The web page either has true or false written on it.

Moving right along now, you may proceed to Page 3.

Return Home