Today we are going to begin our discussion of the basics for the JavaScript Language. Much of what we will be discussing is common to most programming languages. It is important that you get a good grasp of the material so that you will be ready to tackle objects in Lesson 7. So spend some extra time in the lab working with the concepts here and trying them out for yourself.

Values

A value in JavaScript is a piece of information that can be a string, number, Boolean, Null, Object, or a Function as defined in the following table:

We will be using each of these values in this course.  Those that are not clear now will hopefully become clear as we use them.

Variables

A variable is a place holder in your computer's memory for information that can change.  This place in memory  is given a name in JavaScript so that the you can easily refer to it. Declaring a variable is easy.  All you have to do is precede the variable name with the JavaScript reserved word var as follows:

var myVariable

Once the variable is declared, you can set it to any one of the values shown in the above table. Here is an example:

myVariable = 5

Later on in the program you can change its value to something different:

myVariable = 33

You can even change its type by simply assigning it a different type of value. For instance our variable was originally assigned a number. We can make it a string later in the program by simply assigning it one as follows:

myVariable = "this is a string"

Note that the variables in some other languages, such a C, are strongly typed and you are not allowed to randomly change the variable's type as we did here.

You can initialize a variable and assign it a value at the same time as follows:

var myVariable = "JavaScript is cool"

This is method that you will probably use most of the time to declare and initialize your variables.

You can even leave out the var keyword as follows:

myVariable = "this is not too cool"

I personally do not use the last technique because I think the others make it clear that you are defining a variable.  Also, as you will learn later, this technique makes the variable available throughout your code  which may not be what you want.

You will note that the variable name myVariable contains two words with the first letter of the second word capitalized. It is common practice in JavaScript to use small letters for variable names and to capitalize the first letter of every new word starting with the second word. Also note that there is no space between the two words.

Lets try some of these variables in our Lab. Type in the following code in the area that is provided in the BODY of our lab. Remember that the <SCRIPT> tags are already provided for you. All you have to do is type in the two lines shown in the lighter blue.

<SCRIPT Language="JavaScript">
<!-- hide from old browsers

myVariable = "JavaScript is Cool" 
document.write(myVariable)

//-->
</SCRIPT>

You should see the words 'JavaScript is Cool' in the top frame when you press the Test Button.

Modify the code in our lab by replacing the string "JavaScript is Cool" with each of the following values, the number 4.5, the Boolean true, and the Null value null. Make sure you press Test for each change to view the results in the upper frame.

JavaScript is loosely typed

Take a look at the following script. Note that the variable myVariable is first initialized with a string and then changed several times to different types of variables. This demonstrates an important feature of JavaScript, the fact that the variables are loosely typed. This is contrasted with many other languages, such as Java and C which require that you define the type of variable when it is originally declared. Doing something like we did here would cause errors in either one of those languages. The script also demonstrates every type of variable you can have in JavaScript except for the one that gets initialized with a return from a function. We will be discussing functions in the next lesson.

Also note the // prior to the words string, number, Boolean, Null, and object. Anything on the line that appears after the // is a comment and is ignored when the browser interprets the rest of the script.

The last variable we initialized is an object type. We will start our discussion of objects in lesson 7.

<SCRIPT Language="JavaScript">
<!-- hide from old browsers

var myVariable = "This is a String"  // string
document.write(myVariable)
document.write("<BR>")

myVariable = 45.55  // number
document.write(myVariable)
document.write("<BR>")

myVariable = true  // Boolean
document.write(myVariable)
document.write("<BR>")

var myVariable = null  // Null
document.write(myVariable)
document.write("<BR>")

myVariable = new Date  // object
document.write(myVariable)
document.write("<BR>")

//-->
</SCRIPT>

To save you some typing, I put the above script in the electronic chalkboard below so you could test it. When you press Test, the results are displayed for each change of the variable with no error. Using the electronic chalk board, you can change any of the variables to a different type value to see for yourself the results.

Electronic Chalkboard <HTML> <HEAD></HEAD> <BODY bgcolor="CCFFFF"> <FONT size=2> <SCRIPT language="JavaScript"><!-- var myVariable = "This is a String" // string document.write(myVariable) document.write("<P>") myVariable = 45.55 // number document.write(myVariable) document.write("<P>") myVariable = true // Boolean document.write(myVariable) document.write("<P>") var myVariable = null // Null document.write(myVariable) document.write("<P>") myVariable = new Date // object document.write(myVariable) document.write("<P>") //--></SCRIPT> </FONT> </BODY> </HTML>

Operators

Operators are symbols that are used with variables to allow us to perform certain functions, such as adding, subtracting and etc. The table below lists the operators available in JavaScript and describes its function (assuming the two variables x and y that have been declared and initialized with a value)

The best way to learn about some of these operators is in our lab. At the same time you will get your first chance at writing the JavaScript code yourself. In the past labs, I have given you the code step by step. For this lab, I am going to let you write the code yourself. If you need to, feel free to look back at what we did in the past labs and lessons.

Declare and initialize two variables, x and y, with the values 12 and 27, respectively. Declare a third value z and set it equal to the sum of these two variables. Now use document.write(z) to display the results. When you press Test, you should of course get 39 displayed in the top frame.

Compare what you have so far to my solution to step 1.

Now that you have that working we are going to add to it. Under the first two variables, declare and initialize two more variables xStr and yStr with the values "<BR>This is " and "fun!" respectively. Declare and set a third variable zStr equal to xStr + yStr. Now type document.write(zStr) under the line document.write(z). When you press Test you should get the following:

39 This is fun!

Compare what you have so far to my solution to step 2.

We have demonstrated that if you use the + operator between two variables (or values) that are numbers then you will add them. If you use the + operator between two strings you will make it into one string. Now lets make one more change to our script and see what happens when we combine a string with a number. Lets change the line document.write(z) to read
document.write("The sum of " + x + " + " + y + " = " + z)
Now when you press Test, you should get the following:

The sum of 12 + 27 = 39 This is fun!

Take a close look at what we included in the document write. There are three strings ("The sum of ",  " + " and " = ") and there are three variables (x, y, z) that contain numbers. When you combine numbers with a string, the result is a string.

Take a look at my solution to this lab exercise and see if your final version agrees.

Try changing the values for the variables x and y to something different and pressing test to see the results. Doing this should have given you some feel for the advantage of using variables.

Assignment

There is no additional assignments with this lesson. Please read over the lesson again and make sure your understand it all before proceeding. Also, make sure you understand the exercises that we did in our Lab and Electronic Chalkboard. Don't forget that we also have a Library available that can be used to learn more about the concepts presented in each lesson.