Download
1 / 41
420 likes | 601 Views
Arrays. CS101 Introduction to Computing. 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. What Is an Array?.
E N D
Arrays CS101 Introduction to Computing
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
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
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
Why Arrays Are Useful? • Student0: Salman • Student1: Kamran • Student2: Afzal • Student3: Nadeem
Problem 1 • Display list of students using variables
<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>
<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>
We can use loop statement to repeat document.write() • Array can store values (student names)
Naming an Array • Use same rules as those for variables, functions and objects
Defining an Array • Create an instance of the Array object var arrayname = new Array(element0, element1);
Defining an Array var students = new Array("element0, element1)
Problem 2 • Create an array with list of students
<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>
Problem 3 • Access the array element in previous example directly
<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>
Other Ways to Define Arrays • Space (elements) now, assign later var students = new Array(4); students[2] = "Afzal ";
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";
Other Ways to Define Arrays • Array name, no parameters var students = new Array(); … …
Length Property • Contains a numeric value equal to the number of elements in an array
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.”);
Sort() Method • Sorts the elements of an array into alphabetical order based on the string values of the elements
var fruits = new Array(“oranges”, “apples”, “pears”, “grapes”); fruits.sort()
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
var fruits = new Array(“oranges”, “apples”, “pears”, “grapes”); fruits.reverse()
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
Creating Array Elements • We can use loops to create array elements
Problem 4 • Create list of students in the form of array elements using loops
<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>
Moving Through Arrays • We can cycle through an array to: • Change it • Gain info from it • List its contents as we like
Problem 5 • Create a list of students in the form an array. Cycle through an array and print output.
<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>
Problem 6 • Create a list of students in the form an array. Cycle through an array and print output in alphabetical order.
<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>
Problem 7 • Create a list of students in the form an array. Cycle through an array and print output in reverse alphabetical order.
<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>
