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 */ daysOfWeek[0] = "Mon"; daysOfWeek[1] = "Tue"; daysOfWeek[2] = "Wed"; daysOfWeek[3] = "Thu"; daysOfWeek[4] = "Fri"; daysOfWeek[5] = "Sat"; daysOfWeek[6] = "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 (i=0; i<7; i+=) { // instructions here } For example to flash message box of the days: for (i=0; i<7; i++) { alert("Today is "+ daysOfWeek[i]); } Or you could take one more step and do the following instead: for (i=0; i<7; i++) { showDay = daysofWeek[i]; 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 (i=0; i<7; i++) { sampleArray[i]=0; }

6. Loops – for, while The syntax for while loops is while (count<7) { // instructions here count++; // increment count } The syntax for do while loops is do { // instructions here count++; // increment count } while (count<7)

7. elements[n]  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: elements[n].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.elements[0].value and the next one would be document.formName.elements[1].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.elements[i].value= ""; However, if you are not sure which element index goes with which GUI, you might want to just simply do this document.simpleForm.elements[i].value=i; (for i=0, i < 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 function change(){ var i=document.colorform.colormenu.selectedIndex; document.bgColor=document.colorform.colormenu.options[i].value; } // flint violet dusk clover carnation subtle pink

11. Pull-down menu without button flint violet dusk clover carnation subtle pink This is new

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 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 images[0] 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.images[0].src= "abc.gif"

14. Object Hierarchy for images

15. Simple Example function changeCreate() { document.images[0].src="create.gif" } function changeImpact() { document.images[0].src="impact.gif" } function changeDrive() { document.images[0].src="drive.gif" } function changeDiscover() { document.images[0].src="discover.gif" }

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 (i=0; i<n; i++) { myPic[i] = new Image(); // make sure Image is ‘I’ }  Note that n is the number of pictures you like to pre-load.  You can then define myPic[0].src = " pic1.gif " ; myPic[1].src = " pic2.gif " ;

18. Simple Example - revised:jex10.html // declare array var myPic=new Array(); //declare image objects for each array for (i=0; i<4;i++) { myPic[i]=new Image(); } // preload the pictures myPic[0].src="create.gif" myPic[1].src="impact.gif" myPic[2].src="drive.gif" myPic[3].src="discover.gif" function changeCreate() { document.images[0].src=myPic[0].src; } function changeImpact() { document.images[0].src=myPic[1].src; } function changeDrive() { document.images[0].src=myPic[2].src; } function changeDiscover() { document.images[0].src=myPic[3].src; } 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.images[0].src=myPic[0].src; } <INPUT type=button value="DISCOVER" onclick="changeDiscover()" Here is displaying an image using a command even though The image file name is “”

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 myPic[0].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 k=Math.round(Math.random()*3);  Now that you have the index k, you can apply to myPic[k].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.