1. Mark Dixon Page 1 10 – Array Variables

2. Mark Dixon Page 2 C1 – In-class test Results mixed: –quite a few fails 34% (13/38) –some very good (91% max) ask more questions in tutorials do you understand? –understand roughly (follow when it is explained) –deep understanding, could you explain it in detail to someone else? don't just copy code do all exercises, ask for help (expected)

3. Mark Dixon Page 3 Questions: Loops What is the value of t, after this code executes? t = 0; for (x = 4; x <= 6; x++){ t = t + x; } 15

4. Mark Dixon Page 4 Questions: Loops Simplify the following code, so that it is easy to change the number of faces: parFaces.innerHTML = parFaces.innerHTML + " "; parFaces.innerHTML = parFaces.innerHTML + " "; parFaces.innerHTML = parFaces.innerHTML + " "; parFaces.innerHTML = parFaces.innerHTML + " "; parFaces.innerHTML = parFaces.innerHTML + " "; parFaces.innerHTML = parFaces.innerHTML + " "; parFaces.innerHTML = parFaces.innerHTML + " "; var f; for (f = 1; f<=7; f++){ parFaces.innerHTML = parFaces.innerHTML + " "; }

5. Mark Dixon Page 5 Session Aims & Objectives Aims –To introduce the main concepts involved in handling more complex (multi valued) data Objectives, after this week’s sessions, you should be able to: –declare arrays –assign values to array elements –use array elements –use for loops with arrays

6. Mark Dixon Page 6 Example: German Numbers User Requirements –describe user's objectives no mention of technology Software Requirements –Functional list facilities to be provided (often numbered) –Non-functional list desired characteristics (often more subjective) SPECIFICATION User Requirements –help people learn German numbers 1 - 10 Software Requirements –Functional: –show German word for numbers (between 1 and 10) –user enter digits –check if correct –Non-functional should be easy to use

7. Mark Dixon Page 7 Example: German Numbers Problem: can't directly pick random word Can: pick random number 1 – eins 2 – zwei 3 – drei 4 – vier 5 – funf 6 – sechs 7 – sieben 8 – acht 9 – neun 10 – zehn

8. Mark Dixon Page 8 Example: German Numbers v0 var n; function btnStart_onClick(){ n = 1 + parseInt(Math.random() * 10) if (n == 1){ parQuest.innerText = "What is eins?"; }else{ if (n == 2){ parQuest.innerText = "What is zwei?"; }else{ if (n == 3){ parQuest.innerText = "What is drei?"; }else{ if (n == 4){ parQuest.innerText = "What is vier?"; }else{ if (n == 5){ parQuest.innerText = "What is funf?"; }else{ if (n == 6){ parQuest.innerText = "What is sechs?"; }else{ if (n == 7){ parQuest.innerText = "What is sieben?"; }else{ if (n == 8){ parQuest.innerText = "What is acht?"; }else{ if (n == 9){ parQuest.innerText = "What is neun?"; }else{ if (n == 10){ parQuest.innerText = "What is zehn?"; } function btnCheck_onClick(){ if (parseInt(txtAns.value) == n){ parRes.innerText = "Correct!"; }else{ parRes.innerText = "Sorry, please try again." + n; } function btnStart_onClick(){ n = 1 + parseInt(Math.random() * 10) if (n == 1){ parQuest.innerText = "What is eins?"; }else{ if (n == 2){ parQuest.innerText = "What is zwei?"; }else{ if (n == 3){ parQuest.innerText = "What is drei?"; }else{ if (n == 4){ parQuest.innerText = "What is vier?"; }else{ if (n == 5){ parQuest.innerText = "What is funf?"; }else{ if (n == 6){ parQuest.innerText = "What is sechs?"; }else{ if (n == 7){ parQuest.innerText = "What is sieben?"; }else{ if (n == 8){ parQuest.innerText = "What is acht?"; }else{ if (n == 9){ parQuest.innerText = "What is neun?"; }else{ if (n == 10){ parQuest.innerText = "What is zehn?"; } Pick random number Use If statements –one inside another

9. Mark Dixon Page 9 Array Variables (what) Value 141 151 143 155 139 127 134 multiple values – stored in single variable Index 6 5 4 3 2 1 0 index – identifies individual values (called elements) the value of element 3 is 155 last element

10. Mark Dixon Page 10 Arrays Variables

11. Mark Dixon Page 11 Array Variables (Declaration) General syntax: var varname = new Array(lastElement); Specific examples: var HR = new Array(16); var x = new Array(8);

12. Mark Dixon Page 12 Array Variables (Assignment) General syntax: arrayname[index] = expression Specific examples: HR[0] = 134; HR[5] = 151 + b; x[5] = 23.87; x[7] = (y + 189.2516) / 2;

13. Mark Dixon Page 13 Questions: Arrays Consider the following code: var x; var res; var age = new Array(2); x = 2; age[0] = 19.6; age[1] = 11.23; age[2] = 15.37; res = age[x]; How many arrays are there? Name the array(s). What is in res after the code executes? 1 15.37 age

14. Mark Dixon Page 14 Arrays: why? (declaration) var Name = new Array(4); Name[0] = "Bob"; Name[1] = "Sally"; Name[2] = "Jo"; Name[3] = "Fred"; Name[4] = "Alison"; var Name1; var Name2; var Name3; var Name4; var Name5; Name1 = "Bob"; Name2 = "Sally"; Name3 = "Jo"; Name4 = "Fred"; Name5 = "Alison"; Single array declaration5 variable declarations

15. Mark Dixon Page 15 Arrays: why? (use) var Num; Num = parseInt(Math.random() * 5); Res = Name[Num]; var Num; Num = parseInt(Math.random() * 5) if (Num == 0){ Res = Name1; }else if (Num == 1){ Res = Name2; }else if (Num == 2){ Res = Name3; }else if (Num == 3){ Res = Name4; }else{ Res = Name5; } Single line of code picks any element

16. Mark Dixon Page 16 Example: German Numbers v1 var Nums = new Array(10); var n; function window_onLoad(){ Nums[1] = "eins"; Nums[2] = "zwei"; Nums[3] = "drei"; Nums[4] = "vier"; Nums[5] = "funf"; Nums[6] = "sechs"; Nums[7] = "sieben"; Nums[8] = "acht"; Nums[9] = "neun"; Nums[10] = "zehn"; } function btnStart_onClick(){ n = 1 + parseInt(Math.random() * 10); parQuest.innerText = "What is " + Nums[n] + "?"; } function btnCheck_onClick(){ if (parseInt(txtAns.value) == n){ parRes.innerText = "Correct!"; }else{ parRes.innerText = "Sorry, please try again." + n; } Array Declaration Array Use Array Assignment

17. Mark Dixon Page 17 Example: German Numbers v0 vs. v1 var Nums = new Array(10); var n; function window_onLoad(){ Nums[1] = "eins"; Nums[2] = "zwei"; Nums[3] = "drei"; Nums[4] = "vier"; Nums[5] = "funf"; Nums[6] = "sechs"; Nums[7] = "sieben"; Nums[8] = "acht"; Nums[9] = "neun"; Nums[10] = "zehn"; } function btnStart_onClick(){ n = 1 + parseInt(Math.random() * 10); parQuest.innerText = "What is " + Nums[n] + "?"; } function btnCheck_onClick(){ if (parseInt(txtAns.value) == n){ parRes.innerText = "Correct!"; }else{ parRes.innerText = "Sorry, please try again." + n; } var n; function btnStart_onClick(){ n = 1 + parseInt(Math.random() * 10) if (n == 1){ parQuest.innerText = "What is eins?"; }else{ if (n == 2){ parQuest.innerText = "What is zwei?"; }else{ if (n == 3){ parQuest.innerText = "What is drei?"; }else{ if (n == 4){ parQuest.innerText = "What is vier?"; }else{ if (n == 5){ parQuest.innerText = "What is funf?"; }else{ if (n == 6){ parQuest.innerText = "What is sechs?"; }else{ if (n == 7){ parQuest.innerText = "What is sieben?"; }else{ if (n == 8){ parQuest.innerText = "What is acht?"; }else{ if (n == 9){ parQuest.innerText = "What is neun?"; }else{ if (n == 10){ parQuest.innerText = "What is zehn?"; } function btnCheck_onClick(){ if (parseInt(txtAns.value) == n){ parRes.innerText = "Correct!"; }else{ parRes.innerText = "Sorry, please try again." + n; } v0v1 25 lines 50 lines

18. Mark Dixon Page 18 Error: Subscript Out of Range Index too big/small var x = new Array(3); x[0] = 9; x[1] = 5; x[2] = 21; x[3] = 23; x[4] = 12; x = 5;

19. Mark Dixon Page 19 Error: Type mismatch index missing var x = new Array(3); x[0] = 9; x[1] = 5; x[2] = 21; x[3] = 23; x = 5;

20. Mark Dixon Page 20 Error: Type mismatch index given for non-array variable: b var x = new Array(3); var b; x[0] = 9; x[1] = 5; x[2] = 21; x[3] = 23; b[3] = 12;

21. Mark Dixon Page 21 Questions: Arrays Write a line of code that declares an array called Books with 56 elements Write a line of code that assigns the value 45 to the 18 th element of the array. Write some code that makes the background red, but only when the 12 th array element is larger than 6 var Books = new Array(55); Books[17] = 45; if (Books[11] >6){ document.bgColor = "red"; }

22. Mark Dixon Page 22 Example: Capital Cities SPECIFICATION User Requirements –help people learn Capital Cities Software Requirements –Functional: –ask user for capital of random country –user enter capital –check if correct –Non-functional should be easy to use

23. Mark Dixon Page 23 Example: Capital Cities Two arrays – stored in same order: CountryCity 0UK 1France 2Spain 3Greece 0London 1Paris 2Madrid 3Athens

24. Mark Dixon Page 24 Example: Capital Cities var Country = new Array(4); var City = new Array(4); var Num; function window_onLoad(){ Country[1] = "UK"; City[1] = "London"; Country[2] = "France"; City[2] = "Paris"; Country[3] = "Spain"; City[3] = "Madrid"; Country[4] = "Greece"; City[4] = "Athens"; } function btnStart_onClick(){ Num = 1 + parseInt(Math.random() * 3); parQuest.innerText = "What is the capital of " + Country[Num] + "?"; } How many array: –declarations? –assignments?

25. Mark Dixon Page 25 Question: Arrays Write a statement that will decide whether the answer given by the user is correct: if (txtNum.value == City[Num]){ var Country = new Array(4); var City = new Array(4); var Num; function window_onLoad(){ Country[1] = "UK"; City[1] = "London"; Country[2] = "France"; City[2] = "Paris"; Country[3] = "Spain"; City[3] = "Madrid"; Country[4] = "Greece"; City[4] = "Athens"; } function btnStart_onClick(){ Num = 1 + parseInt(Math.random() * 3); parQuest.innerText = "What is the capital of " + Country[Num] + "?"; }

26. Mark Dixon Page 26 Example: Drinks v1 Clears array Displays array Total of array Searches array

27. Mark Dixon Page 27 Example: Drinks v1 var Units = new Array(6); var curUnit; function window_onLoad(){ curUnit = 0; } function btnAdd_onClick(){ Units[curUnit] = parseInt(txtUnit.value); curUnit = curUnit + 1; } function btnClear_onClick(){ Units[0] = 0; Units[1] = 0; Units[2] = 0; Units[3] = 0; Units[4] = 0; Units[5] = 0; Units[6] = 0; curUnit = 0; } function btnShow_onClick(){ lblRes.innerText = ""; lblRes.innerText = lblRes.innerText + Units[0] + " "; lblRes.innerText = lblRes.innerText + Units[1] + " "; lblRes.innerText = lblRes.innerText + Units[2] + " "; lblRes.innerText = lblRes.innerText + Units[3] + " "; lblRes.innerText = lblRes.innerText + Units[4] + " "; lblRes.innerText = lblRes.innerText + Units[5] + " "; lblRes.innerText = lblRes.innerText + Units[6]; } ….

28. Mark Dixon Page 28 Example: Drinks v1 …. function btnTotal_onClick(){ var total; total = 0; total = total + Units[0]; total = total + Units[1]; total = total + Units[2]; total = total + Units[3]; total = total + Units[4]; total = total + Units[5]; total = total + Units[6]; lblRes.innerText = total; } function btnFind_onClick(){ if (txtUnit.value == Units[0]){ lblRes.innerText = "Found in slot 0"; }else if (txtUnit.value == Units[1]){ lblRes.innerText = "Found in slot 1"; }else if (txtUnit.value == Units[2]){ lblRes.innerText = "Found in slot 2"; }else if (txtUnit.value == Units[3]){ lblRes.innerText = "Found in slot 3"; }else if (txtUnit.value == Units[4]){ lblRes.innerText = "Found in slot 4"; }else if (txtUnit.value == Units[5]){ lblRes.innerText = "Found in slot 5"; }else if (txtUnit.value == Units[6]){ lblRes.innerText = "Found in slot 6"; }else{ lblRes.innerText = "Not Found"; }

29. Mark Dixon Page 29 Array Algorithms Common tasks to many programs: –Reset all elements –Display all elements –Total all elements –Search all elements –Find maximum value –Find minimum value –Average –Sort

30. Mark Dixon Page 30 Example: Drinks v2 (Reset) Use loop counter variable (i) as array index:

31. Mark Dixon Page 31 Example: Drinks v2 (Total)

32. Mark Dixon Page 32 Tutorial Exercise: German Numbers Task 1: Complete German Numbers Example from lecture. You will need to complete the code for checking the user's answer Task 2: Modify your page so that it disables and enables the buttons appropriately Task 3: Modify your page so that the text box gets the focus (cursor) after the start button is pressed Task 4: Modify your page to allow the user 3 attempts only. Task 5: Modify your page to prevent same random number appearing twice –store used numbers –use while loop, new value different from previous Task 6: Modify your page so that it plays appropriate sounds when the user gets the answer right/wrong

33. Mark Dixon Page 33 Tutorial Exercise: Capital Cities Task 1: Complete Capital Cities Example from the lecture, adding some more cities. You will need to complete the code for checking the user's answer Task 2: Modify your page so that it hides and shows the buttons appropriately Task 3: Modify your page to allow the user 3 attempts only. Task 4: Modify your page so that it is case in-sensitive (i.e. user can type upper or lower case) Task 5: Modify your page so that it displays an appropriate picture of the selected capital city. Hint: create another array for the file names. Task 6: Modify your page so that it plays appropriate sounds when the user gets the answer right/wrong

34. Mark Dixon Page 34 Tutorial Exercise: Drinks Task 1: Get the Drinks v2 example (from the lecture) working. You have the code for Add, Clear, & Show but not for Total and Find Task 2: Modify your page so that it displays a meaningful message when all elements of the array are used up (not the error dialogue below).