JavaScript Variables

Data Types and Variables

Data

Types of Data in JavaScript

Numerical Data

Text

Boolean

Variables—Storing Data in Memory

Variable Names

Declaring Variables and Giving Them Values

Try It Out – Declaring Variables

Assigning Variables with the Value of Other Variables

Try It Out – Assigning Variables

Calculations and Basic String Manipulation

A Basic Calculation

Try It Out – Calculations

  • ch2_examp3.htm
  • var firstNumber = 15;
    var secondNumber = 10;
    var answer;

    answer = 15 / 10;
    alert(answer);
    alert(15 / 10);

    answer = firstNumber / secondNumber;
    alert(answer);

Increment and Decrement Operators

  • The increment and decrement operators are represented by ++ and .
  • They increase or decrease a variable's value by one.
  • We could use the normal + and – operators to do this, for example:
    myVariable = myVariable + 1;
    myVariable = myVariable – 1;
  • However using the increment and decrement operators shortens this to
    myVariable++;
    myVariable--;

  • The result is the same—the value of myVariable is increased or decreased by one—but the code is shorter.

The += Operator

  • The += can be used as a shortcut for increasing the value held by a variable by a set amount.
  • For example,
    myVar += 6;
  • does exactly the same thing as
    myVar = myVar + 6;
  • We can also do the same thing for subtraction and multiplication, as shown here:
    myVar -= 6;
    myVar *= 6;
  • which is equivalent to
    myVar = myVar – 6;
    myVar = myVar * 6;

Basic String Operations

  • Concatenation is joining two strings together to make one string
  • To concatenanate we use the + operator
    var concatString = "Hello " + "Paul";
  • The string now stored in the variable concatString is "Hello Paul".

Try It Out – Concatenating Strings

  • ch2_examp5.htm
  • var greetingString = "Hello";
    var myName = prompt("Please enter your name", "");
    var concatString;

    document.write(greetingString + " " + myName + "<br>");

    concatString = greetingString + " " + myName;

    document.write(concatString);
  • We make use of document.write() to write the result to the page.

Arrays

  • An array is similar to a normal variable, in that you can use it to hold any type of data.
  • A normal variable can only hold one piece of data at a time.
  • The difference between such a normal variable and an array is that an array can hold more than one item of data at the same time.
  • Each place where a piece of data can be stored in an array is called an element.
  • You can look at an array as a column in a spreadsheet.

Array Example

  • The array, myArray can hold both the numbers 25 and 35.
  • We give each piece of data an index value to distinguish between these two pieces of data in an array
    myArray[0] = 25
    myArray[1] = 35

  • Notice that the index values start at 0 and not 1.
  • Computers start from 0, and think of the first item as the zero item.
  • Arrays can be very useful since you can store as many or as few items of data in an array as you want.

Create An Array

  • To create a new array, you need to declare a variable name and tell JavaScript that you want it to be a new array using the new keyword and the Array() function.
  • For example, the array myArray could be defined like this:
    var myArray = new Array();
  • To create an array that will hold six elements, we write
    var myArray = new Array(6);

Fill An Array With Values

  • We can fill our array with values when creating it. For example:
    var myArray = new Array("Paul",345,"John",112,"Bob",99);
  • Here, the first item of data, "Paul", will be put in the array with an index of 0. The next piece of data, 345, will be put in the array with an index of 1, and so on.
  • This means that the element with the name myArray[0] contains the value "Paul", the element with name myArray[1] contains the value 345, and so on.

Fill An Array With Values

  • This leads us to another way of declaring data in our array. We could write the preceding line as
    var myArray = new Array();
    myArray[0] = "Paul";
    myArray[1] = 345;
    myArray[2] = "John";
    myArray[3] = 112;
    myArray[4] = "Bob";

Try It Out – An Array

  • ch2_examp8.htm
  • var myArray = new Array();
    myArray[0] = "Bob";
    myArray[1] = "Pete";
    myArray[2] = "Paul";

    document.write("myArray[0] = " + myArray[0] + "<br>");
    document.write("myArray[2] = " + myArray[2] + "<br>");
    document.write("myArray[1] = " + myArray[1] + "<br>");

    myArray[1] = "Mike";
    document.write("myArray[1] changed to " + myArray[1]);

How it works#

A Multi-Dimensional Array

  • A multi-dimensional array is one with two or more indexes for each element.
  • Suppose we want to store a company's personnel information in a single dimension array.
  • It might look like this:
    #

A Multi-Dimensional Array

  • This would work, but there is a neater solution: using a multi-dimensional array.
  • For example, this is how our personnel array could look as a two dimensional array:
    #

Try It Out – A Two-Dimensional Array

  • ch2_examp9.htm
  • var personnel = new Array();

    personnel[0] = new Array();
    personnel[0][0] = "Name0";
    personnel[0][1] = "Age0";
    personnel[0][2] = "Address0";
    ...
    document.write("Name : " + personnel[1][0] + "<br>");
    document.write("Age : " + personnel[1][1] + "<br>");
    document.write("Address : " + personnel[1][2]);

Questions?