Javascript: for Loops and Arrays

1
Javascript for Loops and Arrays
2
JavaScript Looping

• Looping statements in JavaScript are used to
  execute the same block of code a specified number
  of times.
• The for loop lets us set a variable as a count to
  control how many times the body of the loop is
  executed
• For example

for (i1 ilt3 i) Document.write(Hello
there ltBRgt)
3
Syntax
for (i1 ilt3 i) Document.write(Hello
there ltBRgt)

• for statement

• Thus the three parts of the for statement are
• Initialisation statement done at the start of
  the loop
• Condition The condition controlling the loop
• Increment The statement done at the end of
  each pass through the loop body

4
Example (1)

• Use a For loop to run the same block of code a
  specified number of times

lthtmlgtltbodygt ltscript type"text/javascript"gt for
(i 0 i lt 5 i) document.write("The
number is " i) document.write("ltbrgt") lt/s
criptgt ltpgtExplanationlt/pgt ltpgtThe for loop sets
ltbgtilt/bgt equal to 0.lt/pgt ltpgtAs long as ltbgtilt/bgt
is less than , or equal to, 5, the loop will
continue to run.lt/pgt ltpgtltbgtilt/bgt will increase by
1 each time the loop runs.lt/pgt lt/bodygtlt/htmlgt
RUN
5
Example (2)

• How to use the For loop to write the HTML headers.

lthtmlgt ltbodygt ltscript type"text/javascript"gt for
(i 6 i gt 1 i--) document.write("lth" i
"gtThis is header " i) document.write("lt/h"
i "gt") lt/scriptgt ltpgtExplanationlt/pgt ltpgtThe
for loop sets ltbgtilt/bgt equal to 6.lt/pgt ltpgtAs
long as ltbgtilt/bgt is greater than , or equal to,
1, the loop will continue to run.lt/pgt ltpgtltbgtilt/bgt
will decrease by 1 each time the loop
runs.lt/pgt lt/bodygt lt/htmlgt
RUN
6
The Array object

• An Array object is used to store a set of values
  in a single variable name. Each value is an
  element of the array and has an associated index
  number. 
• You can refer to a particular element in the
  array by using the name of the array and the
  index number. The index number starts at zero. 

0
1
2
3
5
4
7
The Array object (more)

• Declare an array variable -- create an instance
  of the Array object with the "new" keyword
• var colour new Array(5)
• var days new Array (Monday, Tuesday,
  Wednesday, Thursday, Friday)
• var months new Array(12)

8
The Array Object (more)

• Assign data to each of the elements in the array
• colour0red
• colour1blue
• colour2yellow
• colour3green
• colour4pink
• Retrieve data from any element array name
  index
• var tie colour2var hat colour0

9
Example (3)

• This example demonstrates how you can make an
  array that stores colours.

lthtmlgt ltbodygt ltscript type"text/javascript"gt //D
eclare and Assign var colour new
Array(red",blue",yellow",green,pink) //Re
trieve var tie colour2 var hat
colour0 document.write(Tie colour tie
"ltbrgt") document.write(Hat colour hat
"ltbrgt") lt/scriptgt lt/bodygt lt/htmlgt
RUN
10
JavaScript Loop-Array Example

• ltHTMLgt
• ltHEADgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• lt!-- Hide script
• //Create and Populate days
• var days new Array (Monday, Tuesday,
  Wednesday, Thursday, Friday, Saturday,
  Sunday)
• // End hiding --gt
• lt/SCRIPTgt
• lt/HEADgt
• ltBODYgt
• lt/BODYgt
• lt/HTMLgt

11
JavaScript Loop-Array Example
ltHTMLgt ltHEADgt ltSCRIPT LANGUAGE"JavaScrip
t"gt lt!-- Hide script //Create and
Populate days var days new Array (Monday,
Tuesday, Wednesday, Thursday, Friday,
Saturday, Sunday) //List the working
days for(count 0 count lt4 count)
document.write(Working Day " count " "
dayscount "ltBRgt") document.write("ltBRgt")
//List the week-end days for(count
6 count gt5 count--)
document.write(Week-End Day " count "
" dayscount "ltBRgt") // End hiding
--gt lt/SCRIPTgt lt/HEADgt ltBODYgt lt/BODYgt
lt/HTMLgt
RUN