Mark Dixon 1 11 – Array Variables

Mark Dixon 2 Questions: Loops What is the value of t, after this code executes? t = 0 For x = 4 To 6 t = t + x Next 15

Mark Dixon 3 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 + " " Dim f For f = 1 To 7 parFaces.innerHTML = parFaces.innerHTML + " " Next

Mark Dixon 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

Mark Dixon 5 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 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

Mark Dixon 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

Mark Dixon 7 Random Numbers Rnd() * Int( )

Mark Dixon 8 Example: German Numbers v0 Option Explicit Dim n Sub window_onLoad() Randomize End Sub Sub btnStart_onClick() n = 1 + Int(10 *Rnd()) If n = 1 Then parQuest.innerText = "What is eins?" Else If n = 2 Then parQuest.innerText = "What is zwei?" Else If n = 3 Then parQuest.innerText = "What is drei?" Else If n = 4 Then parQuest.innerText = "What is vier?" Else If n = 5 Then parQuest.innerText = "What is funf?" Else If n = 6 Then parQuest.innerText = "What is sechs?" Else If n = 7 Then parQuest.innerText = "What is sieben?" Else If n = 8 Then parQuest.innerText = "What is acht?" Else If n = 9 Then parQuest.innerText = "What is neun?" Else If n = 10 Then parQuest.innerText = "What is zehn?" End If End Sub Sub btnCheck_onClick() If CInt(txtAns.value) = n Then parRes.innerText = "Correct!" Else parRes.innerText = "Sorry, please try again." & n End If End Sub Sub btnStart_onClick() n = 1 + Int(10 *Rnd()) If n = 1 Then parQuest.innerText = "What is eins?" Else If n = 2 Then parQuest.innerText = "What is zwei?" Else If n = 3 Then parQuest.innerText = "What is drei?" Else If n = 4 Then parQuest.innerText = "What is vier?" Else If n = 5 Then parQuest.innerText = "What is funf?" Else If n = 6 Then parQuest.innerText = "What is sechs?" Else If n = 7 Then parQuest.innerText = "What is sieben?" Else If n = 8 Then parQuest.innerText = "What is acht?" Else If n = 9 Then parQuest.innerText = "What is neun?" Else If n = 10 Then parQuest.innerText = "What is zehn?" End If End Sub Pick random number Use If statements –one inside another

Mark Dixon 9 Array Variables (what) Value multiple values – stored in single variable Index index – identifies individual values (called elements) the value of element 3 is 155 last element

Mark Dixon 10 Arrays Variables

Mark Dixon 11 Array Variables (Declaration) General syntax: Dim varname(lastElement) Specific examples: Dim HR(16) Dim x(8)

Mark Dixon 12 Array Variables (Assignment) General syntax: arrayname(index) = expression Specific examples: HR(0) = 134 HR(5) = b x(5) = x(7) = (y ) / 2

Mark Dixon 13 Questions: Arrays Consider the following code: Dim x Dim res Dim age(2) x = 2 age(0) = 19.6 age(1) = age(2) = res = age(x) How many arrays are there? Name the array(s). What is in res after the code executes? age

Mark Dixon 14 Arrays: why? (declaration) Dim Name(4) Name(0) = "Bob" Name(1) = "Sally" Name(2) = "Jo" Name(3) = "Fred" Name(4) = "Alison" Dim Name1 Dim Name2 Dim Name3 Dim Name4 Dim Name5 Name1 = "Bob" Name2 = "Sally" Name3 = "Jo" Name4 = "Fred" Name5 = "Alison" Single array declaration5 variable declarations

Mark Dixon 15 Arrays: why? (use) Dim Num Num = Int(5 * Rnd()) Res = Name(Num) Dim Num Num = Int(5 * Rnd()) If Num = 0 Then Res = Name1 ElseIf Num = 1 Then Res = Name2 ElseIf Num = 2 Then Res = Name3 ElseIf Num = 3 Then Res = Name4 Else Res = Name5 End If Single line of code picks any element

Mark Dixon 16 Example: German Numbers v1 Option Explicit Dim Nums(10) Dim n Sub window_onLoad() Randomize 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" End Sub Sub btnStart_onClick() n = 1 + Int(10 * Rnd()) parQuest.innerText = "What is " & Nums(n) & "?" End Sub Sub btnCheck_onClick() If CInt(txtAns.value) = n Then parRes.innerText = "Correct!" Else parRes.innerText = "Sorry, please try again." & n End If End Sub Array Declaration Array Use Array Assignment

Mark Dixon 17 Example: German Numbers v0 vs. v1 Option Explicit Dim Nums(10) Dim n Sub window_onLoad() Randomize 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" End Sub Sub btnStart_onClick() n = 1 + Int(10 * Rnd()) parQuest.innerText = "What is " & Nums(n) & "?" End Sub Sub btnCheck_onClick() If CInt(txtAns.value) = n Then parRes.innerText = "Correct!" Else parRes.innerText = "Sorry, please try again." & n End If End Sub Option Explicit Dim n Sub window_onLoad() Randomize End Sub Sub btnStart_onClick() n = 1 + Int(10 * Rnd()) If n = 1 Then parQuest.innerText = "What is eins?" Else If n = 2 Then parQuest.innerText = "What is zwei?" Else If n = 3 Then parQuest.innerText = "What is drei?" Else If n = 4 Then parQuest.innerText = "What is vier?" Else If n = 5 Then parQuest.innerText = "What is funf?" Else If n = 6 Then parQuest.innerText = "What is sechs?" Else If n = 7 Then parQuest.innerText = "What is sieben?" Else If n = 8 Then parQuest.innerText = "What is acht?" Else If n = 9 Then parQuest.innerText = "What is neun?" Else If n = 10 Then parQuest.innerText = "What is zehn?" End If End Sub Sub btnCheck_onClick() If CInt(txtAns.value) = n Then parRes.innerText = "Correct!" Else parRes.innerText = "Sorry, please try again." & n End If End Sub v0v1 27 lines 54 lines

Mark Dixon 18 Error: Subscript Out of Range Index too big/small Option Explicit Dim x(3) x(0) = 9 x(1) = 5 x(2) = 21 x(3) = 23 x(4) = 12 x = 5

Mark Dixon 19 Error: Type mismatch index missing Option Explicit Dim x(3) x(0) = 9 x(1) = 5 x(2) = 21 x(3) = 23 x = 5

Mark Dixon 20 Error: Type mismatch index given for non-array variable: b Option Explicit Dim x(3) Dim b x(0) = 9 x(1) = 5 x(2) = 21 x(3) = 23 b(3) = 12

Mark Dixon 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 Dim Books(55) Books(17) = 45 If Books(11) >6 Then document.bgColor = "red" End If

Mark Dixon 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

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

Mark Dixon 24 Example: Capital Cities Option Explicit Dim Country(4) Dim City(4) Dim Num Sub 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" Randomize End Sub Sub btnStart_onClick() Num = 1 + CInt(Rnd() * 3) parQuest.innerText = "What is the capital of " & Country(Num) & "?" End Sub How many array: –declarations? –assignments?

Mark Dixon 25 Question: Arrays Write a statement that will decide whether the answer given by the user is correct: Option Explicit Dim Country(4) Dim City(4) Dim Num Sub 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" Randomize End Sub Sub btnStart_onClick() Num = 1 + CInt(Rnd() * 3) parQuest.innerText = "What is the capital of " & Country(Num) & "?" End Sub If txtNum.value = City(Num) Then

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

Mark Dixon 27 Example: Drinks v1 Dim Units(6) Dim curUnit Sub window_onLoad() curUnit = 0 End Sub Sub btnAdd_onClick() Units(curUnit) = txtUnit.value curUnit = curUnit + 1 End Sub Sub 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 End Sub Sub btnShow_onClick() parRes.innerText = "" parRes.innerText = parRes.innerText & Units(0) & " " parRes.innerText = parRes.innerText & Units(1) & " " parRes.innerText = parRes.innerText & Units(2) & " " parRes.innerText = parRes.innerText & Units(3) & " " parRes.innerText = parRes.innerText & Units(4) & " " parRes.innerText = parRes.innerText & Units(5) & " " parRes.innerText = parRes.innerText & Units(6) End Sub ….

Mark Dixon 28 Example: Drinks v1 …. Sub btnTotal_onClick() Dim 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) parRes.innerText = total End Sub Sub btnFind_onClick() If txtUnit.value = Units(0) Then parRes.innerText = "Found in slot 0" ElseIf txtUnit.value = Units(1) Then parRes.innerText = "Found in slot 1" ElseIf txtUnit.value = Units(2) Then parRes.innerText = "Found in slot 2" ElseIf txtUnit.value = Units(3) Then parRes.innerText = "Found in slot 3" ElseIf txtUnit.value = Units(4) Then parRes.innerText = "Found in slot 4" ElseIf txtUnit.value = Units(5) Then parRes.innerText = "Found in slot 5" ElseIf txtUnit.value = Units(6) Then parRes.innerText = "Found in slot 6" Else parRes.innerText = "Not Found" End If End Sub

Mark Dixon 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

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

Mark Dixon 31 Example: Drinks v2 (Total)

Mark Dixon 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 Do Until new value different from previous Task 6: Modify your page so that it plays appropriate sounds when the user gets the answer right/wrong

Mark Dixon 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

Mark Dixon 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).