Javascript Lesson 2

Foreword

In this lesson we are going to begin with the basics of the JavaScript Language. Most of the things you will learn here are common to most programming languages. It is important that you fully understand everything in this lesson to avoid problems later on.

2.1 Values

A value in JavaScript is a piece of information that can be a string, number, Boolean, Null, Object, or a Function as listed below:

  • String: A series of characters inside quote marks.
    • Example: “This is a string”

  • Boolean: A true or false value.
    • Example: true

  • Number: Any numeric value (without quotes)
    • Example: 169.13

  • Null: Empty, has no value
    • Example: null

  • Object: Properties and methods of an object


  • Function: Value returned by a function

We will be using each of these values in this lesson to make them more clear to you.

2.2 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 you can easily refer to it. Declaring a variable is easy.
All you have to do is precede the variable name with the word “var” as follows:

var thisIsAVariable

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

thisIsAVariable = 169.13

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

thisIsAVariable = 76

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:

thisIsAVariable = "This is a string"

Note that the variables in some other languages, such as Java and 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 thisIsAVariable = "This is not to difficult, is it?"

You will be using this method most of the time to declare and initialize variables.

You probably have noticed that the variable name "thisIsAVariable" contains four words with the first letter of the second,third and fourth 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 four words.

I advice that you already try out some of these variables in a simple code like this one:

<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript">
<!-- hide from old browsers
var thisIsAVariable = 123
document.write(thisIsAVariable)
//-->
</script>
</body>
</html>

Now try to change the value of the variable into whatever you like (you should try a boulean, string and a null value):

<script language="JavaScript">
<!-- hide from old browsers

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

myVariable = 1234  // 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>

You probably have noticed the double slash "//", anything after a double slash will be interpreted as comment by your browser.

2.3 Operators

Operators are symbols that are used with variables to allow us to perform certain functions, such as adding, subtracting, multiplying 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)

Operators What it does
x + y (numeric) Adds x and y
x + y (string) Concatenates x and y
x - y Subtracts x from y
x * y Multiplies x with y
x / y Divides x by y
x % y Modulus (remainder of x / y)
x++, ++x x = x + 1
x--, --x x = x - 1
-x Reverses the sign of x

2.4 Some exercices

Declare and initialize two variables, x and y, with the values 23 and 42, respectively.
Declare a third value z and set it equal to the sum of x and y. Now use document.write(z) to display the results.
The result should of course be 65. (Save the script, we will use it later on)

Declare and initialize two variables xString and yString with the values "This is " and "a string." respectively.
Declare and set a third variable zString equal to xString + yString. Now type document.write(zString).
The result should be: This is a string.

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 script and see what happens when we combine a string with a number.
Now it is time to go back to the script from the first exercise, and just add this little line of code:

document.write("The sum of " + x + " + " + y + " = " + z)

This should be the result: The sum of 23 + 42 = 65

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 and z) that contain numbers.
When you combine numbers with a string, the result is a string.

The solution of all three exercices in one script:

<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript">
<!-- hide from old browsers
var x = 23
var y = 42
var z = x+y
var xString = "This is " 
var yString = "a string."
var zString = xString+yString
document.write(z)
document.write("<br>")
document.write(zString)
document.write("<br>")
document.write("The sum of " + x + " + " + y + " = " + z)
//-->
</script>
</body>
</html>

It is important that you understand everything completely to continue with the next lesson, if there still are any problems, try to solve them first before going on.

Home | Code | Learn
© 2007-2008 ProgLogic, all rights reserved. | ProgLogic.com is created by Stijn Strickx. | e-mail