Javascript TUTORIAL


Javascript Variables and Operators


We will start this chapter wil the simple example below that takes in length and breadth of a rectangle and calculates and displays the area of the rectangle. Take a look at the following example. 

  1. <html>
  2. <body>
  3. <script type="text/javascript">
  4. <!--
  5. length = 20 ;
  6. width = 10 ;
  7. area = length * width;
  8. document.write(" Area of rectangle is ", area);
  9. //-->
  10. </script>
  11. </body>
  12. </html>


If you "run" the above javascript code you should see the following output

Area of rectangle is 200

This was expected. You may like to try this example at the following link. Try making changes and see what works and what breaks.

Javascript Rectangle Area Example

Let us now understand two fabrics of javascripts that we have already used in the above example - the variables and the operators.

JavaScript Variables


As you might have already guessed, the length, width and the area are the variables. The variables are the containers to store value or information.

You will also like to keep in mind two simple rules for naming a variable.

* Variable names are case sensitive - so area is different from Area.

* They must begin with a letter or the underscore character - so 1length is an invalid variable name.
* JavaScript is case-sensitive, variable names are case-sensitive.

Declaring JavaScript Variables


Take a look at the following three equivalent examples. All three are equivalent but differ in the way the variables are declared. 

  1. length = 20 ;
  2. width = 10 ;
  3. area = length * width;
  4. document.write(" Area of rectangle is ", area);
 


  1. var length = 20 ;
  2. var width = 10 ;
  3. var area = length * width;
  4. document.write(" Area of rectangle is ", area);
 


  1. var length = 20 ;
  2. var width = 10 ;
  3. area = length * width;
  4. document.write(" Area of rectangle is ", area);


We can create a variable with a var statement

var length = 20;

We can however create a variable name without a var statement

length = 20;

The variable name is on the left side of the expression and the value you want to assign to the variable is on the right.

Let us now take a look at the operators. Look the following line in the above example

area = length * breadth ;

The * is a multiplication operator. You should also note that = is a assignment operator. The purpose of the assignment operator is to "assign" the value. The value on the right of the = operator is assigned the to variable on the left of the = operator.

Exercise


It is time to do some really simple exercise to strengthen your understanding.

1. In the Area example here, define another variable perimeter. Change the program so that it calculates and prints the perimeter of the rectangle.

2. Take the Area example here, and change it to find the area of a right angle triangle. It will have a given height and base and the area will be calculated using the formula area = height x base /2.