1 / 32

CFT2111 Introduction to Website Development Module Leader: Matthew Mantle

CFT2111 Introduction to Website Development Module Leader: Matthew Mantle e-mail: m.e.mantle@hud.ac.uk. Arrays. var stuName=prompt("Tell me your name"); var stuMark=prompt("Tell me your mark out of 20"); var percent=stuMark/20*100;

francis-burnett
Download Presentation

CFT2111 Introduction to Website Development Module Leader: Matthew Mantle

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CFT2111 Introduction to Website Development Module Leader: Matthew Mantle e-mail: m.e.mantle@hud.ac.uk

  2. Arrays var stuName=prompt("Tell me your name"); var stuMark=prompt("Tell me your mark out of 20"); var percent=stuMark/20*100; document.write("<h1>"+stuName+" you got "+percent+"%</h1>"); • Previously we have worked on a program that asked the user for a test result out of 20 and displayed the user’s score as a percentage. • Imagine that we wanted to create a similar program for a tutor that would allow them to input results for an class of 20 students. • The program would then need to output a complete list of everyone’s results

  3. Based on what we know so far… var stu1Name=prompt("Enter the student name"); var stu1Mark=prompt("Enter the mark out of 20"); var stu1Percent=stu1Mark/20*100; var stu2Name=prompt("Enter the student name"); var stu2Mark=prompt("Enter the mark out of 20"); var stu2Percent=stu2Mark/20*100; var stu3Name=prompt("Enter the student name"); var stu3Mark=prompt("Enter the mark out of 20"); var stu3Percent=stu3Mark/20*100; • Need a separate variable for each student

  4. Based on what we know so far… var stu1Name=prompt("Enter the student name"); var stu1Mark=prompt("Enter the mark out of 20"); var stu1Percent=stu1Mark/20*100; var stu2Name=prompt("Enter the student name"); var stu2Mark=prompt("Enter the mark out of 20"); var stu2Percent=stu2Mark/20*100; var stu3Name=prompt("Enter the student name"); var stu3Mark=prompt("Enter the mark out of 20"); var stu3Percent=stu3Mark/20*100; if(stu1Percent>stu2Percent && stu1Percent>stu3Percent){ document.write(stu1Name+" got the highest mark"); }else if (stu2Percent>stu1Percent && stu2Percent>stu3Percent){ document.write(stu2Name+" got the highest mark"); }else if (stu3Percent>stu1Percent && stu3Percent>stu2Percent){ document.write(stu3Name+" got the highest mark"); } • What if I want the name of the student with the highest mark? • ‘else if’ statement for each possibility

  5. Arrays var stu1Name=prompt("Enter the student name"); var stu1Mark=prompt("Enter the mark out of 20"); var stu1Percent=stu1Mark/20*100; var stu2Name=prompt("Enter the student name"); var stu2Mark=prompt("Enter the mark out of 20"); var stu2Percent=stu2Mark/20*100; var stu3Name=prompt("Enter the student name"); var stu3Mark=prompt("Enter the mark out of 20"); var stu3Percent=stu3Mark/20*100; if(stu1Percent>stu2Percent && stu1Percent>stu3Percent){ document.write(stu1Name+" got the highest mark"); }else if (stu2Percent>stu1Percent && stu2Percent>stu3Percent){ document.write(stu2Name+" got the highest mark"); }else if (stu3Percent>stu1Percent && stu3Percent>stu2Percent){ document.write(stu3Name+" got the highest mark"); } • This approach is time-consuming and inefficient • Only three students in this example! • The solution is a variable that can store more than a single piece of data • An array

  6. Arrays • An array is a special type of variable. • It is a container for several pieces of data that are related in some way. • We can think of an array as being a bit like a list of information. • Each item in the list is numbered so it can be distinguished from the others • So in the previous example we could create an array called stuScores and use it to store all the student scores.

  7. Creating Arrays • Generic syntax • We can fill an array with any type of data we wish – strings, numbers, Boolean values and as many items of data as we wish. var nameOfArray = new Array("element1","element2","element3") • Examples var shopping = new Array("Tea","Bread","Milk","Cheese","Flour") var testScores=new Array(34,32,21,8,56,45) var countries = new Array("England","Scotland","Wales", "N.Ireland")

  8. Arrays • Creates a new array called shopping and fills it with pieces of text data • Each item in an array is called an element • Starting at 0 each element in the array is numbered var shopping = new Array("Tea","Bread","Milk","Cheese","Flour")

  9. Using Arrays • document.write(shopping[0]) • will output “Tea” to the page • varuserChoice=prompt("Do you like "+shopping[3]) • Asks the user if they like cheese • shopping[4]="Sugar" • Changes the 4th element in the array to sugar.

  10. Using Variables with Arrays • Often we use variables to specify the element in the array that we wish to manipulate. • The following code uses the variable counter to add data to successive elements in an array var ealing = new Array(); counter=0; ealing[counter]="Passport To Pimlico"; counter++; ealing[counter]="Kind Hearts and Coronets"; counter++; ealing[counter]="The Lavender Hill Mob"; counter++;

  11. Arrays and Loops Would output for(i=0;i<5;i++){ document.write(ealing[i]+"<br>"); } Passport To Pimlico Kind Hearts and Coronets The Lavender Hill Mob The Man in the White Suit The Ladykillers

  12. Arrays - The length property The length property tells us how many elements there are in an array • This alert statement will output 5 alert(ealing.length) Passport To Pimlico Kind Hearts and Coronets The Lavender Hill Mob The Man in the White Suit The Ladykillers for(i=0;i<ealing.length;i++){ document.write(ealing[i]+"<br>"); } • It is a good idea to use the length property with a for loop • We can change the number of elements in the array and the loop will still work

  13. Arrays and Loops var numStudents=prompt("How many students do you have?") var stuScores=new Array(); for(var i=0;i<numStudents;i++){ stuScores[i]=prompt("please give me the score for student"+i) } for(var i=0;i<stuScores.length;i++){ document.write("Student "+(i+1)+" scored "+stuScores[i]+"<br>"); } • Loops can be used to populate an Array with data • This program • Asks the user for a number of different student scores • Stores these scores in the stuScores Array • Writes a complete list of all the scores on the page

  14. Array Methods • Array methods are functions an array can perform • Often makes it easier to work with arrays • See w3schools for a complete reference http://www.w3schools.com/jsref/jsref_obj_array.asp • push() • Adds elements to an array var ealing = new Array(); ealing.push("Passport To Pimlico"); ealing.push("Kind Hearts and Coronets"); document.write(ealing) Passport To Pimlico,Kind Hearts and Coronets • splice() • Cuts an element from an array • The first number specifies the number of the element to be removed • The second element specifies how many elements to remove ealing.splice(0,1); document.write("<br>The contents of the array is now "+ealing)

  15. Finding the Highest and Lowest Values • The for loop cycles through each element in turn • If the value of the element is greater than the current largest value • This element’s value is assigned to biggestSize var shoeSize=new Array(5,5,7,9,11,7,12,6,9,10); var biggestSize=shoeSize[0]; for (i=0;i<=9;i++) { if(shoeSize[i]>biggestSize){ biggestSize=shoeSize[i] } } alert("The biggest shoe size is "+biggestSize);

  16. Parallel Arrays • Parallel arrays are used to store related data • E.g. one array for student names, another array for student scores var numStudents=prompt("How many students do you have?") var stuNames=new Array(); var stuScores=new Array(); for(var i=0;i<numStudents;i++){ stuNames[i]=prompt("Please enter a student name"); stuScores[i]=prompt("Please enter the mark for "+stuNames[i]); } • A loop is used to populate the arrays with data

  17. Parallel Arrays • Parallel arrays are used to store related data • E.g. one array for student names, another array for student scores var numStudents=prompt("How many students do you have?") var stuNames=new Array(); var stuScores=new Array(); for(var i=0;i<numStudents;i++){ stuNames[i]=prompt("Please enter a student name"); stuScores[i]=prompt("Please enter the mark for "+stuNames[i]); } for(var i=0;i<stuNames.length;i++){ document.write(stuNames[i]+" scored "+stuScores[i]+"<br>"); } • Another loop outputs the list of results

  18. var numStudents=prompt("How many students do you have?") var stuNames=new Array(); var stuScores=new Array(); for(var i=0;i<numStudents;i++){ stuNames[i]=prompt("Please enter a student name"); stuScores[i]=prompt("Please enter the mark for "+stuNames[i]); } for(var i=0;i<stuNames.length;i++){ document.write(stuNames[i]+" scored "+stuScores[i]+"<br>"); } var highestMark=stuScores[0]; for(var i=0;i<stuNames.length;i++){ if(stuScores[i]>highestMark){ highestMark=stuScores[i]; } } document.write("The highest mark was "+highestMark); Parallel Arrays • Another loop calculates the highest mark • Could have merged these two loops together

  19. Parallel Arrays • Look at the above table of data that shows a list of company employees and their wages • If an employee has performed well they get a bonus • We could store the data in the above table in ‘parallel’ arrays

  20. Parallel Arrays • Each column of the table is implemented as an array var emp=new Array("Bob","Kim","Jane","Pete","Joe"); var wages=new Array(10000,20000,21000,9000,16000); var bonuses=new Array(1000,2000,10000,10,1600);

  21. Parallel Arrays • Each column of the table is implemented as an array var emp=new Array("Bob","Kim","Jane","Pete","Joe"); var wages=new Array(10000,20000,21000,9000,16000); var bonuses=new Array(1000,2000,10000,10,1600); document.write(emp[2]+" earns £"+wages[2]); Jane earns £21000

  22. Parallel Arrays var emp=new Array("Bob","Kim","Jane","Pete","Joe"); var wages=new Array(10000,20000,21000,9000,16000); var bonuses=new Array(1000,2000,10000,10,1600); var name=prompt("Enter an employee name") var indexNum; for(var i=0;i<emp.length;i++){ if(name==emp[i]){ indexNum=i; } } document.write(name+" has a basic wage of £"+wages[indexNum]+" and a bonus of £"+bonuses[indexNum]) • Imagine I want the details for an employee

  23. Parallel Arrays var emp=new Array("Bob","Kim","Jane","Pete","Joe"); var wages=new Array(10000,20000,21000,9000,16000); var bonuses=new Array(1000,2000,10000,10,1600); var name=prompt("Enter an employee name") var indexNum; for(var i=0;i<emp.length;i++){ if(name==emp[i]){ indexNum=i; } } document.write(name+" has a basic wage of £"+wages[indexNum]+" and a bonus of £"+bonuses[indexNum]) • A prompt box asks the user for the name of an employee

  24. Parallel Arrays var emp=new Array("Bob","Kim","Jane","Pete","Joe"); var wages=new Array(10000,20000,21000,9000,16000); var bonuses=new Array(1000,2000,10000,10,1600); var name=prompt("Enter an employee name") var indexNum; for(var i=0;i<emp.length;i++){ if(name==emp[i]){ indexNum=i; } } document.write(name+" has a basic wage of £"+wages[indexNum]+" and a bonus of £"+bonuses[indexNum]) • We loop through each value in the emp array to find a match for the name the user entered.

  25. Parallel Arrays var emp=new Array("Bob","Kim","Jane","Pete","Joe"); var wages=new Array(10000,20000,21000,9000,16000); var bonuses=new Array(1000,2000,10000,10,1600); var name=prompt("Enter an employee name") var indexNum; for(var i=0;i<emp.length;i++){ if(name==emp[i]){ indexNum=i; } } document.write(name+" has a basic wage of £"+wages[indexNum]+" and a bonus of £"+bonuses[indexNum]) • If we find a match for the user’s entry we store the index number of the array element • e.g. if the user entered ‘Joe’ indexNum will have a value of 4

  26. Parallel Arrays var emp=new Array("Bob","Kim","Jane","Pete","Joe"); var wages=new Array(10000,20000,21000,9000,16000); var bonuses=new Array(1000,2000,10000,10,1600); var name=prompt("Enter an employee name") var indexNum; for(var i=0;i<emp.length;i++){ if(name==emp[i]){ indexNum=i; } } document.write(name+" has a basic wage of £"+wages[indexNum]+" and a bonus of £"+bonuses[indexNum]) • Finally we can output the details for the person using the indexNum variable

  27. var emp=new Array("Bob","Kim","Jane","Pete","Joe"); var wages=new Array(10000,20000,21000,9000,16000); var bonuses=new Array(1000,2000,10000,10,1600); var finalSalary=new Array(); for(var i=0;i<emp.length;i++){ var bonus=prompt("Should "+emp[i]+" be paid a bonus?"); if(bonus=="yes" || bonus=="Yes"){ finalSalary[i]=wages[i]+bonuses[i]; }else{ finalSalary[i]=wages[i]; } } for(var i=0;i<emp.length;i++){ document.write(emp[i]+"'s final salary is £"+finalSalary[i]+"<br>"); } Parallel Arrays • Bonuses are not guaranteed • Imagine I am writing a program that calculates an employee’s wage based on whether or not they deserve a bonus

  28. Parallel Arrays var emp=new Array("Bob","Kim","Jane","Pete","Joe"); var wages=new Array(10000,20000,21000,9000,16000); var bonuses=new Array(1000,2000,10000,10,1600); var finalSalary=new Array(); for(var i=0;i<emp.length;i++){ var bonus=prompt("Should "+emp[i]+" be paid a bonus?"); if(bonus=="yes" || bonus=="Yes"){ finalSalary[i]=wages[i]+bonuses[i]; }else{ finalSalary[i]=wages[i]; } } for(var i=0;i<emp.length;i++){ document.write(emp[i]+"'s final salary is £"+finalSalary[i]+"<br>"); } • Create a new empty array

  29. Parallel Arrays var emp=new Array("Bob","Kim","Jane","Pete","Joe"); var wages=new Array(10000,20000,21000,9000,16000); var bonuses=new Array(1000,2000,10000,10,1600); var finalSalary=new Array(); for(var i=0;i<emp.length;i++){ var bonus=prompt("Should "+emp[i]+" be paid a bonus?"); if(bonus=="yes" || bonus=="Yes"){ finalSalary[i]=wages[i]+bonuses[i]; }else{ finalSalary[i]=wages[i]; } } for(var i=0;i<emp.length;i++){ document.write(emp[i]+"'s final salary is £"+finalSalary[i]+"<br>"); } • A loop is used to ask the user if each employee deserves their bonus • E.g. when i has a value of 2 the prompt box will ask ‘Should Jane be paid a bonus ‘

  30. Parallel Arrays var emp=new Array("Bob","Kim","Jane","Pete","Joe"); var wages=new Array(10000,20000,21000,9000,16000); var bonuses=new Array(1000,2000,10000,10,1600); var finalSalary=new Array(); for(var i=0;i<emp.length;i++){ var bonus=prompt("Should "+emp[i]+" be paid a bonus?"); if(bonus=="yes" || bonus=="Yes"){ finalSalary[i]=wages[i]+bonuses[i]; }else{ finalSalary[i]=wages[i]; } } for(var i=0;i<emp.length;i++){ document.write(emp[i]+"'s final salary is £"+finalSalary[i]+"<br>"); } • If the user answers ‘yes’ or ‘Yes’ the value of bonuses is added to the value of wages to create a finalSalary value • E.g. when i is 2, if the user says Jane is worth her bonus finalSalary[2] will have a value of 31000 (21000+10000)

  31. Parallel Arrays var emp=new Array("Bob","Kim","Jane","Pete","Joe"); var wages=new Array(10000,20000,21000,9000,16000); var bonuses=new Array(1000,2000,10000,10,1600); var finalSalary=new Array(); for(var i=0;i<emp.length;i++){ var bonus=prompt("Should "+emp[i]+" be paid a bonus?"); if(bonus=="yes" || bonus=="Yes"){ finalSalary[i]=wages[i]+bonuses[i]; }else{ finalSalary[i]=wages[i]; } } for(var i=0;i<emp.length;i++){ document.write(emp[i]+"'s final salary is £"+finalSalary[i]+"<br>"); } • I use another loop to output the complete list of employees and their final salaries

  32. Next week • Practical Session • Arrays • The Assignment

More Related