ECT 270 Clientside web application development

1
ECT 270 Client-side web application development

• Introduction to JavaScriptPart 2

2
Arrays in JavaScript

• An array is an ordered collection of values
  referenced by a single variable name
• When you create an array variable you are in fact
  defining a new object.
• Arrays have dynamic length
• The lowest index of every array is zero
• The length of an array is the highest subscript
  to which a value has been assigned, plus 1.
• Only the assigned elements of an array actually
  occupy space

3
Creating and populating an Array

• var variableName new Array()an empty array of
  unspecified length
• variableNamei valueassign a value to the
  ith element of the array

var week new Array()week0Sundayweek1
Mondayweek2Tuesdayweek3Wednesday
4
Referring to Array elements
07_JSGallery.htm

• document.write(week2) refers to the third
  element in the array Tuesday
• The length of an array refers to the number of
  elements.weekweek.length-1 //last element
• You may increase the length of an array by
  assigning a value to an element with higher index
  than the current length of the arrayweek20Any
  day

5
Repeating commands
07_JSGallery_auto.htm
07_JSSLideShow.htm
variablesetInterval(fctName(), of millisec)
tells the script to run the function fctName at
the specified interval of milliseconds.

• clearInterval (variable)

Cancels the setInterval command
6
Time delayed commands
08_CycleBan.htm

• variable setTimeout(fctName(), of millisec)

tells the script to run the function fctName
after the specified number of milliseconds
clearTimeout (variable)
Cancels the time delayed command
7
Cycling banner ads (images)
08_CycleBan.htm

• adImages is an array containing the URLs of the
  banner images
• adBanner is the name in the ltIMGgt tag where the
  ads are displayed
• function next()document.adBanner.srcadImagesc
  ountersetTimeout(rotate(),31000)
• Every 3 seconds the src of the image tag is
  updated

8
Conditional statements

• A conditional statement is one that runs only
  under certain conditions
• The three types of flow control structures well
  consider are
• If - else statement
• for loops
• while loops

9
if Statements

• if (condition) JavaScript Commands if true

The if statement runs a set of commands if the
condition is true, but does nothing if the
condition is false
var week new Array(Sunday,Monday, Tuesday,
)if (week5Friday) document.write(The
w.e. is almost here)
The w.e. is almost here
10
if else Statements
07_JSDateFct.htm
07_JS_IFGuessNumber.htm
if (condition) JavaScript Commands if true
else JavaScript Commands if false

• The first set of commands is run if the condition
  is true, the second one if the condition is false
• If-else structures can also be nested

11
Nested if else statements

• var week new Array(Sunday,Monday, Tuesday,
  )if (weekiFriday) document.write(The
  w.e. is almost here) else if
  (weekiMonday) document.write(Another
  work week begins) else document.write(Hav
  e a nice day)

i5 The w.e is almost here, i1 Another work week
begins
12
Comparison operators
13
Comparison operators

• If two operands are not of the same type
  JavaScript attempts to convert them to a type
  that can be compared.
• If you want to prevent that use
• strictly equal to instead of
• equal to
• ! strictly non equal to instead of
• ! not equal to

14
Comparison operators

• var1 3 is true only if var1 is the number 3,
  is false if var1 is 3
• var1 3 is true if var1 is 3 or 3
• var1 !3 is false if var1 is 3, different type,
  same value are considered equal
• var1 ! 3 is true if var1 is 3, different
  type, same value are considered different

15
Logical operators
16
for loops

• The for loop allows you to create a group of
  commands that will be executed a set number of
  times through the use of a counter
• The counter tracks the number of times the
  command block has been run
• You set an initial value for the counter
• Each time the command block is executed the
  counter changes in value

17
for loops
for (start condition update_counter) JavaScri
pt Commands

• Start is an expression defining the starting
  value of the for loops counter
• Condition is a boolean expression that must be
  true for the loop to continue
• Update_Counter is an expression defining how the
  counter changes as the for loop progresses

18
for loops
07_JSGalleryPreload.htm
for (Num1 Numlt4 Num) document.write(Value
of Num is NumltBRgt)

• Value of Num is set to 1
• If the condition is true commands are executed
• If the condition is not true the loop terminates
• The value of Num is increased by 1
• Check the condition on the new value of Num

Value of Num is 1 Value of Num is 2 Value of Num
is 3
19
while Loops

• The while loop is similar to the for loop and
  runs a command block as long as a specific
  condition is met, but it does not employ any
  counters.
• Use a while loop instead of a for loop when there
  is no counter available and you want more
  flexibility in halting the loop

20
while Loops
07_JS_WHILE_GuessNumber.htm
while (condition) JavaScript Commands

• As long as the condition evaluates to true the
  command block will execute repeatedly
• Once the condition evaluates to false the loop
  ends and the next statement following the loop
  executes

21
Calculate homework average
07_JSGrades.htm
var hwCurrent, // current hw score
hwTotal 0, // total of hw scores hwCount
0 // number of hw scores while(hwCount lt 6)
// get current score
hwCurrentparseInt( window.prompt("Please enter
hw grade","0") ) hwTotal hwCurrent
// update total hwCount // update
homework count hwAvg hwTotal/hwCount //
compute hw average hwAvg hwTotal/hwCount //
compute hw average
Prompt the user 6 times for hw scores Compute the
homework average