11 array variables n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
11 – Array Variables PowerPoint Presentation
Download Presentation
11 – Array Variables

Loading in 2 Seconds...

play fullscreen
1 / 33

11 – Array Variables - PowerPoint PPT Presentation


  • 51 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '11 – Array Variables' - trang


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
questions loops
Questions: Loops
  • What is the value of t, after this code executes? t = 0; for (x = 4; x <= 6; x++){ t = t + x; }

15

questions loops1
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>";

}

session aims objectives
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
example german numbers
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)
example german numbers1
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

example german numbers v0
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
array variables what
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
array variables declaration
Array Variables (Declaration)
  • General syntax:var varname = new Array(lastElement);
  • Specific examples: var HR = new Array(16); var x = new Array(8);
array variables assignment
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;
questions arrays
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

arrays why declaration
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";

arrays why use
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

example german numbers v1
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

example german numbers v0 vs v1
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

error subscript out of range
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;

error type mismatch
Error: Type mismatch
  • index missing

var x = new Array(3);

x[0] = 9;

x[1] = 5;

x[2] = 21;

x[3] = 23;

x = 5;

error type mismatch1
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;

questions arrays1
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";

}

example capital cities
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
example capital cities1
Example: Capital Cities
  • Two arrays – stored in same order:

Country

City

example capital cities2
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] + "?";

}

question arrays
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]){

example drinks v1
Example: Drinks v1

Total of array

Clears array

Displays array

Searches array

example drinks v11
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];

}

….

example drinks v12
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";

}

}

array algorithms
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
example drinks v2 reset
Example: Drinks v2 (Reset)
  • Use loop counter variable (i) as array index:
tutorial exercise german numbers
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
tutorial exercise capital cities
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
tutorial exercise drinks
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).