Download
arrays n.
Skip this Video
Loading SlideShow in 5 Seconds..
Arrays PowerPoint Presentation

Arrays

163 Views Download Presentation
Download Presentation

Arrays

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Arrays CS101 Introduction to Computing

  2. Learning Goals • Learn what arrays are • Find out why arrays are useful • Define and access arrays • Learn the properties and methods of the array object • Discover how to use arrays with loops

  3. What Is an Array? • A way of storing data for similar types for easy access • In JavaScript, array is a user-defined object • In regular array, access to element usually through index number

  4. Why Arrays Are Useful? • Say you want to print list of students in class • Using variables would take a long time • Instead store students’ names in array • We use numbers to get the name of each student

  5. Why Arrays Are Useful? • Student0: Salman • Student1: Kamran • Student2: Afzal • Student3: Nadeem

  6. Problem 1 • Display list of students using variables

  7. <html> <head> <title>Arrays</title> <script language="JavaScript"> <!-- var student0 = "Salman"; var student1 = "Kamran"; var student2 = "Afzal"; var student3 = "Nadeem"; //--> </script> </head> <body> document.write(student0+"<BR>"); document.write(student1+"<BR>"); document.write(student2+"<BR>"); document.write(student3+"<BR>"); </body> </html>

  8. Oops, I made a mistake …

  9. <html> <head> <title>Arrays</title> <script language="JavaScript"> <!-- var student0 = "Salman"; var student1 = "Kamran"; var student2 = "Afzal"; var student3 = "Nadeem"; //--> </script> </head> <body> <script language="JavaScript"> <!-- document.write(student0+"<BR>"); document.write(student1+"<BR>"); document.write(student2+"<BR>"); document.write(student3+"<BR>"); //--> </script> </body> </html>

  10. We can use loop statement to repeat document.write() • Array can store values (student names)

  11. Naming an Array • Use same rules as those for variables, functions and objects

  12. Defining an Array • Create an instance of the Array object var arrayname = new Array(element0, element1);

  13. Defining an Array var students = new Array("element0, element1)

  14. Problem 2 • Create an array with list of students

  15. <html> <head> <title>Arrays 2</title> <script language="JavaScript"> <!-- var students = new Array("Salman","Kamran","Afzal","Nadeem"); var tallest_student = students[0]; //--> </script> </head> <body> <script language="JavaScript"> <!-- document.write("The tallest student in class is " + tall_student); //--> </script> </body> </html>

  16. Problem 3 • Access the array element in previous example directly

  17. <html> <head> <title>Arrays 2</title> <script language="JavaScript"> <!-- var students = new Array("Salman","Kamran","Afzal","Nadeem"); //--> </script> </head> <body> <script language="JavaScript"> <!-- document.write("The tallest student in class is " + students[0]); //--> </script> </body> </html>

  18. Other Ways to Define Arrays • Space (elements) now, assign later var students = new Array(4); students[2] = "Afzal ";

  19. Other Ways to Define Arrays • Space now, assign numerically now var students = new Array(4) students[0] = "Salman"; students[1] = “Kamran"; students[2] = "Afzal"; students[3] = “Nadeem";

  20. Other Ways to Define Arrays • Array name, no parameters var students = new Array(); … …

  21. Properties of Array Object

  22. Length Property • Contains a numeric value equal to the number of elements in an array

  23. var students = new Array(4) var student0 = "Salman"; var student1 = "Kamran"; var student2 = "Afzal"; var student3 = "Nadeem"; window.alert(“The array has “ +students.length+ “elements.”);

  24. Methods of Array Object

  25. Sort() Method • Sorts the elements of an array into alphabetical order based on the string values of the elements

  26. var fruits = new Array(“oranges”, “apples”, “pears”, “grapes”); fruits.sort()

  27. Reverse() Method • Reverses the direction of the elements in an array: the first element is moved to the last slot and the last element is moved to the first slot, and so on

  28. var fruits = new Array(“oranges”, “apples”, “pears”, “grapes”); fruits.reverse()

  29. Arrays and Loops • We can use loop to cycle through each element of an array and cut down on the number of lines we would need for a large array

  30. Creating Array Elements • We can use loops to create array elements

  31. Problem 4 • Create list of students in the form of array elements using loops

  32. <html> <head> <title>Arrays 4</title> </head> <body> <script language="JavaScript"> <!-- var students = new Array(4); for(count = 0; count < 4; count++) { students[count] = window.prompt("Enter a name", ""); } //--> </script> </body> </html>

  33. Moving Through Arrays • We can cycle through an array to: • Change it • Gain info from it • List its contents as we like

  34. Problem 5 • Create a list of students in the form an array. Cycle through an array and print output.

  35. <html> <head> <title>Arrays 5</title> <script language="JavaScript"> <!-- var students = new Array(4) student[0] = "Salman"; student[1] = "Kamran"; student[2] = "Afzal"; student[3] = "Nadeem"; //--> </script> </head> <body> <h2>Student Names</h2> <script language="JavaScript"> <!-- var students = new Array(4); for(count = 0; count < 4; count++) { document.write("students[count]+ "<br>"); } //--> </script> </body> </html>

  36. Problem 6 • Create a list of students in the form an array. Cycle through an array and print output in alphabetical order.

  37. <html> <head> <title>Arrays 5</title> <script language="JavaScript"> <!-- var students = new Array(4) student[0] = "Salman"; student[1] = "Kamran"; student[2] = "Afzal"; student[3] = "Nadeem"; students.sort() //--> </script> </head> <body> <h2>Student Names</h2> <script language="JavaScript"> <!-- var students = new Array(4); for(count = 0; count < 4; count++) { document.write("students[count]+ "<br>"); } //--> </script> </body> </html>

  38. Problem 7 • Create a list of students in the form an array. Cycle through an array and print output in reverse alphabetical order.

  39. <html> <head> <title>Arrays 5</title> <script language="JavaScript"> <!-- var students = new Array(4) student[0] = "Salman"; student[1] = "Kamran"; student[2] = "Afzal"; student[3] = "Nadeem"; students.sort() students.reverse() //--> </script> </head> <body> <h2>Student Names</h2> <script language="JavaScript"> <!-- var students = new Array(4); for(count = 0; count < 4; count++) { document.write("students[count]+ "<br>"); } //--> </script> </body> </html>