CIS 89C Client-Side Programming with JavaScript

Unit 7 - Control structures (week 4)

References:

McDuffie - Chapter 6 Control Structures

Topics:

Opening statement

What is a control structure - McDuffie page 162

if - McDuffie page 162

else - McDuffie page 163

Chaining - McDuffie page 165

switch - McDuffie page 169

for - McDuffie page 172

while - McDuffie page 174

do while - McDuffie page 175

break - McDuffie page 177

with - McDuffie page 179

Ternary operator - McDuffie page 180

Summary - McDuffie page 181

***********************************************************

Opening statement

if … else conditional control structures in JavaScript are similar to other languages.

Repetition is similar to other programming languages.

There are for, while, and do while loops.

Most of this stuff can be skipped in the lecture, because students already know this material.

Lecture on:

for ( var i = 0; i < MAX; i++ ) // using var in a for

switch (day) // switch on a string

Mention:

avoid break and continue.

(The net is equivalent to about 3 pages of lecture.)

***********************************************************

What is a control structure

There are three control structures that control the flow of execution of code in structured programming:

- Sequence of instructions

- Selection of alternatives

- Repetition

In this unit we will look at selection of alternatives.

***********************************************************

if

Example:

if( x < y )

{

alert("x is larger");

}

The alert is executed if the x < y condition is true.

This is similar to other languages.

***********************************************************

else

Optionally, you may provide and else branch, which is executed when the condition is false.

Example:

if( x < y )

{

alert("x is larger");

}

else

{

alert("x is not larger");

}

One alert or the other is executed, depending on the logical value of x < y

This is similar to other languages.

***********************************************************

Chaining

Sometimes you may wish to chain a sequence of if else statement.

if( x < 0 )

{

alert("x is negative");

}

else if ( x < 10 )

{

alert("x is small");

}

else if ( x < 100 )

{

alert("x is medium");

}

else

{

alert("x is large");

}

The chain usually ends with an else.

This is similar to other languages.

Some languages have a special contraction for: else if

JavaScript does not; you must write it out: else if

***********************************************************

switch

The switch statement works like in C, except that, the switch value is NOT required to be an integer. It must be an integer in C.

Example:

switch (day)

{

case "Monday" : alert("Moon day");

break;

case "Sunday" : alert("Sun day");

break;

default: alert("I do not know what day it is.");

}

Do not forget the break at the end of each case.

The default is optional.

***********************************************************

for

for is coded with an initial expression, a test, and a change values.

Example:

// calculate the sum of integers from 0 to MAX

var total = 0;

for ( var i = 0; i < MAX; i++ )

{

total += i;

}

var i = 0;

The initial value variable is often declared within the for loop.

This is similar to the latest version of C.

i < MAX;

The loop stops when the test is false

i++

The change made at the bottom of the loop.

***********************************************************

while

While loops only have the test.

You must code the initialization and change where they occur.

Example:

// calculate the sum of integers from 0 to MAX

var total = 0;

var i = 0;

for (i < MAX)

{

total += i;

i++;

}

while is easier to read because the initialization and change are coded where they actually occur.

for is easier to write because the initialization, test, and change are all coded together in one line.

I suggest you use a for loop for simple counter loops.

Use a while loop when there are more complicated initiation, test, and change.

***********************************************************

do while

do while loops have the test at the end of the loop.

// calculate the sum of integers from 0 to MAX

var total = 0;

var i = 0;

do

{

total += i;

i++;

} while (i < MAX);

The do while loop is good when you do not have the information available to make the test at the top of the loop.

The do while loop always executes at least once.

The while loop test may fail before the loop even starts.

Do not forget the semicolon at the end.

***********************************************************

break

The keyword break causes execution of a loop to stop.

Use of break is poor programming style.

Some people find break acceptable, I do not.

***********************************************************

continue

The keyword break causes execution of a loop to go to the top of the loop.

Use of continue is poor programming style.

Some people find break acceptable, I do not.

***********************************************************

with

This is part of unit 7

When using the McDuffie book, use this section HERE in unit 7.

When using the Pollock book, use this section in unit 9.

This is something different.

There is no particular reason why it is in this unit,

except that, for some reason, McDuffie put it here.

Remember that there is always a local scope (which is sometimes "global" to the window).

Remember that there is also a current object (which is usually the current window).

When you want to have a different current object, you can specify it using: with

Example:

A document (page) can have several forms. The corresponding form objects are kept in an array called: document.forms

Suppose we wish to work with the first form in the array; that would be: document.forms[0]

We might wish to do a number of things with that form, without specifying which form we are using each time.

We can use with to specify the form once, and then it will be the current object for the entire block of code following the with specification.

with ( document.forms[0] )

{

document.write("Form name: ", name);

… // more statements using document.forms[0]

}

This is good to make the code easier to type and easier to read.

When you just coded name you meant document.forms[0].name

***********************************************************

Ternary operator

Sometimes you can just use the ternary operator, rather than building an

if … else structure.

Example:

var largest;

largest = a > b ? a : b;

***********************************************************

Summary

if … else can be used to select one of two blocks of code to execute.

switch is an alternative way to select which code to execute.

switch is more difficult to code, but is good when making the selection between several specific values of the test expression.

The ternary operator is good for a simple choice of values.

Repetition is very similar to many other programming languages.

with allows specification of the current object, to be used in a block of code.