WPII - JS - Intro

1 - Javascript:Intro - Variables

JavaScript has 3 main types of variables:

(1) Number -- A variable containing a number. It can be whole or decimal.

Examples: 4
4.4
44

(2) String -- A variable containing a string of characters. It may include numbers and any other characters. Strings are assigned to a variable or otherwise manipulated in a JavaScript program by enclosing them between either single (') or double (") quotes.

Examples: '4b'
"Hello, world!"
"12 + 24"

When it is enclosed between single or double quotes it is a string variable, even if all the characters are numerical.

Example: "4"

Because "4" is between quotes, it signals the browser that it is a string rather than anumber.

(3) Object -- An object is a variable which can contain more than one value. It can contain number(s) and string(s), together, in the same object. An object variable can also contain functions and even other objects.

Here are some basics about each of the variable types.

Numbers
Number variables are used when number comparisons or mathematical calculations are required.

Here are some basic calculations that can be done:

Note: The equal sign used in the context of assigning a value to a variable is "determine the value or equation on the right and then let the variable on the left equal that determination". The programming code assigning a value to a variable is referred to as an assignment statement.

var n = 2; // variable n now holds the value 2
n = n * 3; // (* is multiply) variable n now holds the value 6
n = n / 4; // (/ is divide) variable n now holds the value 1.5
n = n - 7; // (- is subtract) variable n now holds the value -5.5
n = n + 13.5;// (+ is addition) variable n now holds the value 8
n++; // (++ is increment by 1) variable n now holds the value 9
n--; // (-- is decrement by 1) variable n now holds the value 8
n = n % 3; // (% is modulus -- the remainder of a division) variable n now holds the value 2
n = n * n; // variable n now holds the value 4

One could build a calculator using the above mathematical operators. A graphical calculator with a scrolling tape, operated entirely by clicking with no keyboard input being accepted, and with memory keys used to assign and display the results of interim calculations, may be a nice project for later in this series when a few more of the basics of program decision and flow control have been introduced.

Program flow is often determined by the content of a variable. This

if(n == 10) { document.write('It is 10.'); }

will print "It is 10." on your page if the variable n equals 10.

Program flow can also be decided by comparing two or more variables and determining whether they are equal or in what way they are unequal.

Here are some number variable comparisons that can be done. Each comparison yields either "true" or "false":

(n == b) // true if both n and b contain the same number. Otherwise, false.
(Note: "==" is a test for equality while "=" is an assignment statement symbol.)
(n < b) // true if n is less than b. Otherwise, false.
(n <= b) // true if n is less than or equal to b. Otherwise, false.
(n > b) // true if n is more than b. Otherwise, false.
(n >= b) // true if n is more than or equal to b. Otherwise, false.
(n != b) // true if n is not equal to b. Otherwise, false.

In the above examples, the variable b could be an actual number. For example,

if(n < 10) { document.write('Is less than 10.'); }

will print "Is less than 10." on your page if the variable n is less than 10.

Strings
String variables are used when a sequence of characters (any characters not to be treated as numbers) are required for display or program control.

String variables have several symbols in common with number variables.

"=" means the same as it does in numbers, "assign the value on the right to the variable on the left".

"==" means "is equal to" except the comparison is character
by character rather than the numerical value. Examples:

var s = 'hi'; // assigns "hi" to variable s
s == 'hi'; // is true
s == 'hi ya'; // is false (is not exactly the same)
s == 'HI'; // is false ("==" is case sensitive)
s == 'bye'; // is false

The program code:

var s = 'hi';
if(s == 'hi') { document.write('The same!'); }

will print "The same!" on your page if the variable s contains 'hi'.

Another symbol that string and number variables have in common is the "+" symbol. For number variables, it means addition. However, for string variables it means concatenation:

var a = "Hello,";
var b = "world!";
var s = a + b;

stores the string "Hello,world!" in the variable s.

If you know ahead of time what the variables a and b will contain, you can accomplish the same thing with:

var s = "Hello," + "world!";

If you want a space in between, you could use either one of the following two lines:

var s = a + " " + b;
var s = "Hello," + " " + "world!";

With the above value in s, the code:

s = s + ' -- real loud :)';
document.write("My program says: " + s);

will print "My program says: Hello, world! -- real loud :)" on your page.

Objects
An object can contain many variables and entire functions, and even other objects, within itself. In order to use the stuff in the object, the object must be assigned to a variable.

(Although you can make your own objects, this article deals only with objects that are built into the JavaScript language.)

To assign an object to a variable, the name of the object must have a pair of parenthesis at the end (which can have values in them, like functions) and you must use the word: new

Date
Here is an example of assigning the Date object to a variable.

var d = new Date();

The variable d is now an object variable and has access to all the variables and functions within the object. To accomplish an access, type the object variable's name, then a period, then the name of the function or variable inside the object.

The following example will access several functions and store the results. Wherever you put the following code, it will print the current date and time on your page:

Notice the line: month = month + 1;

It is there because JavaScript's numerical representation of the calendar months are the digits 0 through 11, rather than the human representation of digits 1 through 12. In other words, JavaScript uses a zero-index numbering system, humans tend to use a 1-index numbering system. The line adds 1 to the value returned by d.getMonth()

Also, notice the line beginning with: if(year

It is there because some browsers will display the correct 4-digit year and some browsers will display the year minus 1900. The line checks to see if year is less than 2000 and, if so, adds 1900 to it.

Let's do an example with another object.

String
Sometimes, knowing the length of string variables can be essential to your program. To determine the length, you must create an object variable using the built-in: String

var s = new String('William');

The variable s is now an object variable which contains the string "William" along with several other values and functions. One of the values stored in s is the length of the string it contains. Two of the functions it contains are toUpperCase() and toLowerCase().

This code uses the mentioned value and functions (note that it will print the <pre> and </pre> HTML tags):

Note that a line break is represented in string variables with the two-character sequence: \n

Functions

Table of Contents