11 – Array Variables
description
Transcript of 11 – Array Variables
Mark Dixon Page 1
11 – Array Variables
Mark Dixon Page 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
Mark Dixon Page 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>";}
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
1 – eins2 – zwei3 – drei4 – vier5 – funf6 – sechs7 – sieben8 – acht9 – neun10 – zehn
Mark Dixon Page 7
Example: German Numbers v0var 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
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:
var varname = new Array(lastElement);
• Specific examples:
var HR = new Array(16); var x = new Array(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
Questions: ArraysConsider 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
Mark Dixon Page 13
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
Mark Dixon Page 14
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
Mark Dixon Page 15
Example: German Numbers v1var 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; } }
ArrayDeclaration
ArrayUse
ArrayAssignment
Mark Dixon Page 16
Example: German Numbers v0 vs. v1var 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; } }
v0 v1
25 lines
50 lines
Mark Dixon Page 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;
Mark Dixon Page 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;
Mark Dixon Page 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;
Mark Dixon Page 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";}
Mark Dixon Page 21
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 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
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?
Mark Dixon Page 24
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] + "?"; }
Mark Dixon Page 25
Example: Drinks v1
Clears array
Displays array
Total of array
Searches array
Mark Dixon Page 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]; }
….
Mark Dixon Page 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"; } }
Mark Dixon Page 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
Mark Dixon Page 29
Example: Drinks v2 (Reset)• Use loop counter variable (i) as array index:
Mark Dixon Page 30
Example: Drinks v2 (Total)
Mark Dixon Page 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
Mark Dixon Page 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
Mark Dixon Page 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).