COM271, Week 7

Javascript Overview: Assignment and comparison operators; expressions

Syllabus | Table of Pages | Assignments | References and Useful Links

Statement Basics

Assignment statements use = to place the value on the right side of the statement into the memory represented by the variable on the left side
a=15;
x = a + 3;
assigns the values 15 and 18 to variables a and x.

Whitespace in expressions is ignored; whitespace between JavaScript keywords (e.g., new) and variables is not ignored: it must be there. Statements must be terminated with a semicolon. Placing statements on separate lines is treated as though they were terminated with a semicolon: don't use this as an excuse to drop semicolons (bad practice).

Blocks: Curly brackets { } group related series of statements together into a single block.

Operators

Arithmetic, Comparison, and Logical Operators: The assignment operator ( = ) assigns a value to a variable. Arithmetic operators include addition ( + ), subtraction ( - ), multiplication ( * ), division ( / ), and modulus (%, also known as the remainder operator). JavaScript may mishandle numerical operations which lead to underfined values (e.g., infinity caused by division by zero). Note that the plus sign is also used for string concatenation, in which one string is appended ("added") to another to form a longer string, and the minus sign is used to create a negative value (e.g., -3).

++ is used to increment (add 1) the value of a variable, and -- to decrement. i++; is equivalent to i = i + 1;.

Comparisons: Comparison operators evaluate to a Boolean value; this means that if you compare two quantities, you produce either true or false. You may then use this true or false to decide what to do next (e.g., in effect, "do this if true; do something else if false"—see below). They include:

• < (less than) and > (greater than)
• <= (less than or equal to) and >= (greater than or equal to)
• != (not equal to)
• == (equal to, the identity operator)
• === (equal to AND have the same type)
• !== (not equal to OR don't have the same type)

Example:

MoneyInWallet=50;
CostOfDinner=75;
if(CostOfDinner >MoneyInWallet) alert ( 'This dinner will be too expensive!' );

Again, comparison operators produce Boolean values. Combined with logical operators && (AND), || (OR), and ! (NOT), very complicated Boolean evaluations may be performed.

Other Operators:

• The ?: operator creates a quick conditional branch of the form
  (expression) ? if-true-statement : if-false-statement;
  if there is a need for more than one if-true or if-false statement, an if statement is needed.
• The typeof operator returns a string indicating the data type of its operand.

Operator precedence and associativity follow standard language conventions: In complicated, multi-variable expressions, multiplications and divisions will be performed before additions and subtractions. Expressions are otherwise evaluated from left to right. Parentheses can help force the evaluation (things in parentheses get evaluated first).

Conditional Statements

If Statements: This is the most basic decision-making control statement. Its form is
if (expression) statement;
the expression is evaluated as a Boolean and if true, the statement is executed.

Else extends this to a second statement which is executed if the Boolean is false; this is of the form:
if (expression) statement or block; else statement or block;

Else if extends still further, as
if (expression 1) statement or block;
else if (expression 2) statement or block;
else if (expression 3) statement or block;
...
else statement or block.

Switch provides another branching mechanism. It provides an expression to evaluate and several different statements to execute base on the value of the expression, plus a default in case nothing satisfies the condition. Basic syntax is
Switch (expression)
{
Case condition 1 : statement (s)
break;
Case condition 2: statement (s)
break;
Case condition 2 : statement (s)
break;
default : statement (s)
}

The statement(s) which follow each condition do not require curly braces to group together the block of statements. The next case will create an end to the block. You do have to insert the break; or else the code will continue through to execute the next case as well.

While Loops permit actions to be performed over and over again, as long as a condition remains true. For example,
var count = 0;
while (count < 10)
{
  document.write(count + "<br />");
  count++;
}
document.write("exit from loop");

Make certain that there is a condition within the loop such that it can terminate, and that an element (e.g., a counter) within the loop is changing. Otherwise, the loop will attempt to execute forever, and the page will crash (the browser may give an error message, or not!).

Do-while Loops: This is like a while loop, but the condition check occurs at the end of the loop, meaning the loop will always execute at least once.
do
{
statement(s);
}
while (expression);

Note the semicolon at the end of the do-while loop.

For loops: This compact form of a loop contains a loop initialization, test statement, and interation statement in a single line:
for(initialization; test condition; iteration statement)
loop statement or block of statements

For example
for (var i = 0; i < 10; i++)
document.write ("Loop " + i + "<br />>"):

Using a block of statements and a for loop, you can do several things over and over, as

document.write ("T-10 and counting...");
for(var i=10; i>=0; i--)
{
document.write("<strong>"+i+"...</strong><br />");
)
document.write("Blastoff!");

Note that there is NO semicolon on the link with the for statement