11 – Array Variables

1. 11 – Array Variables

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

3. Questions: Loops • Simplify the following code, so that it is easy to change the number of faces:parFaces.innerHTML = parFaces.innerHTML + "<img src=face.jpg>";parFaces.innerHTML = parFaces.innerHTML + "<img src=face.jpg>";parFaces.innerHTML = parFaces.innerHTML + "<img src=face.jpg>";parFaces.innerHTML = parFaces.innerHTML + "<img src=face.jpg>";parFaces.innerHTML = parFaces.innerHTML + "<img src=face.jpg>";parFaces.innerHTML = parFaces.innerHTML + "<img src=face.jpg>";parFaces.innerHTML = parFaces.innerHTML + "<img src=face.jpg>"; var f; for (f = 1; f<=7; f++){ parFaces.innerHTML = parFaces.innerHTML + "<img src=face.jpg>"; }

4. 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

5. Example: German Numbers • 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-functionalshould be easy to use • User Requirements • describe user's objectivesno mention of technology • Software Requirements • Functional • list facilities to be provided (often numbered) • Non-functional • list desired characteristics(often more subjective)

6. 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

7. Example: German Numbers v0 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?"; } } } } } } } } } } } 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; } } • Pick random number • Use If statements • one inside another

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

9. Arrays Variables

10. Array Variables (Declaration) • General syntax:var varname = new Array(lastElement); • Specific examples: var HR = new Array(16); var x = new Array(8);

11. 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;

12. 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 age 15.37

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

14. Arrays: why? (use) 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; } var Num; Num = parseInt(Math.random() * 5); Res = Name[Num]; Single line of code picks any element

15. 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 Assignment Array Use

16. Example: German Numbers v0 vs. v1 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; } } 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; } } v0 v1 25 lines 50 lines

17. 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;

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

19. 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;

20. 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 18th element of the array. • Write some code that makes the background red, but only when the 12th array element is larger than 6 var Books = new Array(55); Books[17] = 45; if (Books[11] >6){document.bgColor = "red"; }

21. 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-functionalshould be easy to use

22. Example: Capital Cities • Two arrays – stored in same order: Country City

23. Example: Capital Cities • How many array: • declarations? • assignments? 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] + "?"; }

24. Question: Arrays • Write a statement that will decide whether the answer given by the user is correct: 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] + "?"; } if (txtNum.value == City[Num]){

25. Example: Drinks v1 Total of array Clears array Displays array Searches array

26. 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]; } ….

27. 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"; } }

28. 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

29. Example: Drinks v2 (Reset) • Use loop counter variable (i) as array index:

30. Example: Drinks v2 (Total)

31. 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

32. 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

33. 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).