JavaScript

1
JavaScript loops and arrays
2
Arrays as cubbyholes

• Array is an ordered collection of data
• The content in the array is sometimes known as
  the array elements
• You reference an array using its index. So if
  there are 10 cubbyholes in the array, it is index
  from 0 to 9.

3
Create an Array declaration

• In order for you to use an array, you need to
  declare an array. You need to know prior to
  declaration, what size you want ie. how many
  cubbie-holes you want in this array.
• var sampleArray new Array(7) or
• var daysOfWeek new Array(7)

4
Putting values in cubbie-holes.

• var daysOfWeek new Array(7) / declaration /
• daysOfWeek0 "Mon"
• daysOfWeek1 "Tue"
• daysOfWeek2 "Wed"
• daysOfWeek3 "Thu"
• daysOfWeek4 "Fri"
• daysOfWeek5 "Sat"
• daysOfWeek6 "Sun"
• / declaration and initial assignment /
• var daysOfWeek new Array("Mon", "Tue", "Wed",
  "Thu", "Fri", "Sat", "Sun")

5
Loops (remember VB) for, while

• The syntax for loops are
• for (i0 ilt7 i)
• // instructions here
• For example to flash message box of the days
• for (i0 ilt7 i)
• alert("Today is " daysOfWeeki)
• Or you could take one more step and do the
  following instead
• for (i0 ilt7 i)
• showDay daysofWeeki
• alert("Today is " showDay) / you are more
  comfortable this way /
• For example to initialize an array to all 0s
• var sampleArray new Array(7)
• for (i0 ilt7 i)

6
Loops for, while

• The syntax for while loops is
• while (countlt7)
• // instructions here
• count // increment count
• The syntax for do while loops is
• do
• // instructions here
• count // increment count
• while (countlt7)

7
elementsn

• In the POP/TART exercise when we reset the
  values for the button, we physically go to each
  button ie. b1.value "" and b2.value "" and so
  on.
• There is an easy way using arrays.
• When a form is loaded on the browser, an element
  array was created (without telling you) in the
  background. So instead of referencing it by its
  name ie. b1.value, you can use the generic
  reference array elementsn.value where n is a
  number from 0 onwards depending on the order of
  how the element is arranged. So the the first
  element would be
• document.formName.elements0.value and the next
  one would be
• document.formName.elements1.value and so on.

8
Example using element

• While you reset the buttons, you might want to
  use a for loop to reset the values
• document.simpleForm.elementsi.value ""
• However, if you are not sure which element index
  goes with which GUI, you might want to just
  simply do this
• document.simpleForm.elementsi.valuei
• (for i0, i lt n, i) where n is the number of
  GUI objects (buttons, input text, message, labels
  etc) that you created.
• Once you know which index goes with which object,
  you can now perform a for loop to reset the
  values of the buttons and labels.

9
Illustration of element
10
Pull-down menu with button

• ltSCRIPT LANGUAGEJavaScriptgt
• function change()
• var idocument.colorform.colormenu.selectedIndex
  
• document.bgColordocument.colorform.colormenu.opt
  ionsi.value
• //lt/SCRIPTgt

• ltform name"colorform"gt
• ltpgtltselect name"colormenu"gt
• lt option value "777777"gtflint
• lt option value "7465DC"gtviolet dusk
• lt option value "2F8B20"gtclover
• lt option value "DA456B"gtcarnation
• ltoption value"FFCCCC"gtsubtle pink
• lt/selectgt
• ltinput typebutton name "updateButton"
  value"Update Color onclick"change()"gt
• lt/formgt

11
Pull-down menu without button
This is new

• ltFORM name"colorform" gt
• ltPgtltSELECT NAME"colormenu" onchange"change()"
  gt
• ltOPTION VALUE"777777"gtflint
• ltOPTION VALUE"7465DC"gtviolet dusk
• ltOPTION VALUE"2F8B20"gtclover
• ltOPTION VALUE"DA456B"gtcarnation
• ltOPTION VALUE"FFCCCC"gtsubtle pink
• lt/SELECTgt
• ltINPUT TYPEbutton VALUE"Update Color"
  onclick"change()"gt
• lt/FORMgt

12
Exercise jex9.html

• Using the code from the previous two examples.
  Create the following page. Make sure you name the
  two menu with different names. (WARNING DO NOT
  JUST COPY AND PASTE WITHOUT KNOWING THIS)

13
Image Object and images array

• Using ltimg src "abc.gif" gt allows us to display
  images on webpages. What if we want more control
  of what to show?
• When a webpage with images is loaded by a
  browser, an images array is created. The first
  image is loaded onto images0 and so on.
• Unlike, GUI such as buttons etc, where they are
  the properties of the FORM, images are properties
  of the DOCUMENT.
• In order to display an image using javascript.
  The command is straight forward as such.
• document.images0.src "abc.gif"

14
Object Hierarchy for images
15
Simple Example

• ltscript languageJavaScriptgt
• function changeCreate()
• document.images0.src"create.gif"
• function changeImpact()
• document.images0.src"impact.gif"
• function changeDrive()
• document.images0.src"drive.gif"
• function changeDiscover()
• document.images0.src"discover.gif"
• lt/scriptgt

• ltBODYgt
• ltIMG src"create.gif"gt
• ltFORMgt
• ltINPUT typebutton value"CREATE"
  onclick"changeCreate()"gt
• ltINPUT typebutton value"IMPACT"
  onclick"changeImpact()"gt
• ltINPUT typebutton value"DRIVE"
  onclick"changeDrive()"gt
• ltINPUT typebutton value"DISCOVER"
  onclick"changeDiscover()"gt
• lt/formgt
• lt/BODYgt

16
(No Transcript)
17
Pre-loading of images to arrays

• You can pre-load your image into arrays and when
  you need a particular image, you can assign
• First a new array has to be declared
• myPic new Array()
• Then you need to write a loop to define or
  construct the image object for each array element
• for (i0 iltn i)
• myPici new Image() // make sure Image is I
• Note that n is the number of pictures you like to
  pre-load.
• You can then define
• myPic0.src "pic1.gif"
• myPic1.src "pic2.gif"

18
Simple Example - revisedjex10.html

• ltscript languageJavaScriptgt
• // declare array
• var myPicnew Array()
• //declare image objects for each array
• for (i0 ilt4i)
• myPicinew Image()
• // preload the pictures
• myPic0.src"create.gif"
• myPic1.src"impact.gif"
• myPic2.src"drive.gif"
• myPic3.src"discover.gif"

• function changeCreate()
• document.images0.srcmyPic0.src
• function changeImpact()
• document.images0.srcmyPic1.src
• function changeDrive()
• document.images0.srcmyPic2.src
• function changeDiscover()
• document.images0.srcmyPic3.src
• lt/scriptgt
• ltBODYgt same as before .

19
The onload event handler

• The onload handler says that when the browser
  loads the page, you can execute the javaScript
  function immediately

20
Example of onload handler

• function disFirst()
• // load the first image in my array
• document.images0.srcmyPic0.src

Here is displaying an image using a ltIMG SRC ..
gt command even though The image file name is

• ltBODY onload"disFirst()"gt
• ltIMG src""gt
• ltFORMgt
• ltINPUT typebutton value"CREATE"
  onclick"changeCreate()"gt
• ltINPUT typebutton value"IMPACT"
  onclick"changeImpact()"gt
• ltINPUT typebutton value"DRIVE"
  onclick"changeDrive()"gt
• ltINPUT typebutton value"DISCOVER"
  onclick"changeDiscover()"
• lt/formgt
• lt/BODYgt

21
Small exercise random picture jex11.html

• You will create a similar webpage, except that
  the first image that is pre-loaded will not be
  fixed. Previously it was set to myPic0.src
• Use the Math.random() function that returns 0..1.
  So if you want a number between 0 to 3 (for 4
  pictures). You will do the following
• kMath.round(Math.random()3)
• Now that you have the index k, you can apply to
  myPick.src to get a random picture.

22
Assignment 2 due soon!
Lesson Learnt All of us will be spiderman or
spiderwoman at the end of the semester.