CSC 100 Lecture 4 JavaScript

1
CSC 100 - Lecture 4 JavaScript

• Beekman pgs 551-570
• At the end of this lecture you will be able to .
• Understand and use arrays
• Create a repetition for loop in JavaScript
• Change a while loop to a for loop
• Identify and modify the elements in an HTML form.
  

2
Arrays

• Oftentimes we want a variable name to refer not
  to a single value, but a set of values
• Arrays are often used for this purpose
• An array is an ordered set of variables
• See arrayEx.html

3
Repetition

• Oftentimes we want to perform the same task many
  times
• We could either
• Write the same code many times
• Or
• Use a loop!

4
Loops in Javascript

• Two main flavours
• For
• While

var i 1 while (i lt 10) doSomething i i
1
for (i 1 i lt 10 i) doSomething
5
Looping (cont)

• Note that both for and while were equivalent (did
  the same thing)
• Why would we use one over the other?
• If we know exactly how many times a loop will
  execute use a for
• If we want to repeat (loop) until some condition
  is reached use a while
• See forWhile1.html, forWhile2.html, and
  arrayLoop.html

6
What you will need to do for Task 4

• Copy animate.html to your www folder.
• Copy all 13 images to your www folder.
• Work with your copy of animate.html so that the
  bush grows and dies
• AFTER you have animate working with the bush,
  change the while loop to a for loop.
• When this is working, copy the code from
  animate.html into assign4.html
• Copy the code from within the BODY tagsDO NOT
  copy the BODY tags themselves!

7
Task 5 - the While loop
T1.gif
T2.gif
T3.gif
T4.gif
T5.gif
T6.gif
T7.gif
T8.gif
T9.gif
T10.gif
i 1 while(i lt 10) imgsi new
Image() //T1.gif thru
T10.gif imgsi.src "T" i ".gif"
i //i i 1
8
Q1 In lab 4 you have 13 images. What changes do
you need to make to the while loop to get it
working with 13 images?
B).function initImages() var i 1
while (ilt14) imgsi new Image()
imgsi.src "T" i ".gif" i i
1
A). function initImages() var i 13
while (ilt13) imgsi new Image()
imgsi.src "T" i ".gif" i i
1
C).function initImages() var i 1
while (ilt13) imgsi new Image()
imgsi.src "T" i ".gif" i i
1
9
Q1 In lab 4 you have 13 images with the names
fl1.gif to fl13.gifWhat do we need to change to
get these images to appear correctly?
B).function initImages() var i 1
while (ilt13) imgsi new Image()
imgsi.src fl" i ".gif" i i
1
A). function initImages() var i 1
while (ilt13) imgsi new Image()
imgsi.src "T" i ".gif" i i
1
C).function initImages() var i 0
while (ilt13) imgsi new Image()
imgsi.src fl" i ".gif" i i
1
10
The for Statement

• The for statement has the following syntax

for ( initialization condition increment )
statement
11
Task 5 - Changing to a For loop
T1.gif
T2.gif
T3.gif
T4.gif
T5.gif
T6.gif
T7.gif
T8.gif
T9.gif
T10.gif
i 1 while(ilt10) imgsi new Image()
//T1.gif thru
T10.gif imgsi.src "T" i ".gif"
i //i i 1
for(i 1 ilt10 i)
12
We need to change our code to show 13 images
(fl1.gif to fl13.gif using a for loop. Which
code does this?
A). // Loads images fl1.gif to fl13.gif into
array function initImages() for(i1ilt13
ii1) imgsi new Image( ) imgsi.src
"T" i ".gif"
C). // Loads images fl1.gif to fl13.gif into
array function initImages() for(i1ilt13
ii1) imgsi new Image( ) imgsi.src
"fl" i ".gif"
B). // Loads images fl1.gif to fl13.gif into
array function initImages() for(i1ilt13
ii1) imgsi new Image( ) imgsi.src
"fl" i ".gif" i i 1

13
ltIMG SRC"T1.gif" WIDTH"32" HEIGHT"32"
ALIGN"bottom" name"anim"gt
File name is T1.gif Name for THIS entire IMG tag
is anim
ltinput TYPE"button" NAME"Button" VALUE" Wave
" onclick"runit()"gt
ltinput TYPE"button" NAME"Button" VALUE" Stop
" onclick"stopit()"gt
14
form and function
ltform ACTION METHOD"POST"gt ltpgt ltimg
SRC"T1.gif" WIDTH"32" HEIGHT"32
ALIGN"bottom" name"anim"gt ltbrgt ltinput
TYPE"button" NAME"Button" VALUE" Stop "
onclick"stopit()"gt ltinput TYPE"button"
NAME"Button" VALUE" Wave " onclick"runit()"gt
lt/pgt lt/formgt
anim