Mark Dixon Page 1

09 – Array Variables

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

Questions: Loops• Simplify the following code, so that it 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>"

Dim fFor f = 1 To 7 parFaces.innerHTML = parFaces.innerHTML + "<img src=face.jpg>"Next

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

Example: German Numbers•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)

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

Mark Dixon Page 6

Example: German Numbers• Problem: can't directly pick random word• Can: pick random number, and then

work out word1 – eins2 – zwei3 – drei4 – vier5 – funf6 – sechs7 – sieben8 – acht9 – neun10 – zehn

Mark Dixon Page 7

Example: German Numbers v0<script language=vbscript>Option Explicit Dim n Sub Window_OnLoad() Randomize End Sub Sub btnStart_OnClick() n = 1 + Int(Rnd() * 10) 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 If End If End If End If End If End If End If End If 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</script>

Sub btnStart_OnClick() n = 1 + Int(Rnd() * 10) 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 If End If End If End If End If End If End If End If End If End Sub

• Pick random number

• Use If statements– one inside another

Mark Dixon Page 8

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

Mark Dixon Page 9

Arrays Variables

Mark Dixon Page 10

Array Variables (Declaration)

• General syntax:

Dim varname(lastElement)

• Specific examples:

Dim HR(16) Dim x(8)

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

Mark Dixon Page 12

Arrays: why? (declaration)

Dim Name(4)

Name(0) = "Bob" Name(1) = "Sally" Name(2) = "Jo" Name(3) = "Fred" Name(4) = "Alison"

Dim Name1Dim Name2Dim Name3Dim Name4Dim Name5 Name1 = "Bob" Name2 = "Sally" Name3 = "Jo" Name4 = "Fred" Name5 = "Alison"

Single array declaration5 variable declarations

Mark Dixon Page 13

Arrays: why? (use)

Dim Num Num = Int(Rnd() * 5) Res = Name(Num)

Dim Num Num = Int(Rnd() * 5) 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 Page 14

Example: German Numbers v1<script language=vbscript>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(Rnd() * 10) 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</script>

ArrayDeclaration

ArrayUse

ArrayAssignment

Mark Dixon Page 15

Example: German Numbers v0 vs. v1<script language=vbscript>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(Rnd() * 10) 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</script>

<script language=vbscript>Option Explicit Dim n Sub Window_OnLoad() Randomize End Sub Sub btnStart_OnClick() n = 1 + Int(Rnd() * 10) 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 If End If End If End If End If End If End If End If 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</script>

v0 v1

27 lines

54 lines

Mark Dixon Page 16

Error: Subscript Out of Range• Index too big/small

<script language="vbscript">Option ExplicitDim x(3) x(0) = 9 x(1) = 5 x(2) = 21 x(3) = 23 x(4) = 12 x = 5</script>

Mark Dixon Page 17

Error: Type mismatch• index missing

<script language="vbscript">Option ExplicitDim x(3) x(0) = 9 x(1) = 5 x(2) = 21 x(3) = 23 x = 5</script>

Mark Dixon Page 18

Error: Type mismatch• index given for non-array variable: b

<script language="vbscript">Option ExplicitDim x(3)Dim b x(0) = 9 x(1) = 5 x(2) = 21 x(3) = 23 b(3) = 12</script>

Mark Dixon Page 19

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

Dim Books(56)

Books(18) = 45

If Books(12) >6 Then document.bgColor = "red"End If

Mark Dixon Page 20

Example: Capital CitiesSPECIFICATION

• 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

Mark Dixon Page 21

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 Page 22

Example: Capital Cities• Two arrays – stored in same order:

Country City

0 UK

1 France

2 Spain

3 Greece

0 London

1 Paris

2 Madrid

3 Athens

Mark Dixon Page 23

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 Page 24

Example: Drinks v1

Clears array

Displays array

Total of array

Searches array

Mark Dixon Page 25

Example: Drinks v1 <script language=VBScript> 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() 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) End Sub

….

Mark Dixon Page 26

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) lblRes.innerText = total End Sub

Sub btnFind_OnClick() If txtUnit.value = Units(0) Then lblRes.innerText = "Found in slot 0" ElseIf txtUnit.value = Units(1) Then lblRes.innerText = "Found in slot 1" ElseIf txtUnit.value = Units(2) Then lblRes.innerText = "Found in slot 2" ElseIf txtUnit.value = Units(3) Then lblRes.innerText = "Found in slot 3" ElseIf txtUnit.value = Units(4) Then lblRes.innerText = "Found in slot 4" ElseIf txtUnit.value = Units(5) Then lblRes.innerText = "Found in slot 5" ElseIf txtUnit.value = Units(6) Then lblRes.innerText = "Found in slot 6" Else lblRes.innerText = "Not Found" End If End Sub </script>

Mark Dixon Page 27

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

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

Mark Dixon Page 29

Example: Drinks v2 (Total)

Mark Dixon Page 30

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 hides and shows the buttons appropriately

• Task 3: Modify your page to allow the user 3 attempts only.• Task 4: Modify your page to prevent same random number

appearing twice– store used numbers– use Do Until new value different from previous

• Task 5: Modify your page so that it plays appropriate sounds when the user gets the answer right/wrong

Mark Dixon Page 31

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

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