lecture 3 term 2 23/1/12. arrays you can create an array with the array() constructor and the new...

16
Lecture 3 Term 2 23/1/12

Upload: samuel-daniels

Post on 16-Dec-2015

222 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Lecture 3 Term 2 23/1/12. Arrays You can create an array with the Array() constructor and the new operator. There are three ways to invoke the Array()

Lecture 3 Term 223/1/12

Page 2: Lecture 3 Term 2 23/1/12. Arrays You can create an array with the Array() constructor and the new operator. There are three ways to invoke the Array()

Arrays• You can create an array with the Array() constructor and the

new operator.• There are three ways to invoke the Array() constructor…

1. Call it with no arguments:

var a = new Array();

2

Page 3: Lecture 3 Term 2 23/1/12. Arrays You can create an array with the Array() constructor and the new operator. There are three ways to invoke the Array()

Arrays2. Call it and explicitly specifying values for the first n elements of the

array:var a = new Array(5, 6, 7, “a string”);

• Note: elements are assigned to the array starting with the element 0.

3. Specify a single numeric argument which specifies the length of the array

var a = new Array(10);• Note: this way overrides the second syntax.

3

Page 4: Lecture 3 Term 2 23/1/12. Arrays You can create an array with the Array() constructor and the new operator. There are three ways to invoke the Array()

Arrays

• You can access elements of an array using the [ ] operator.

• A reference to the array should appear to the left of the brackets• An expression which is a non-negative integer should be

inside the brackets.• This syntax can be used to both read and write the value of

an element of an array, for example…a[1] = 3.14;a[i] = 3;a[i + 1] = “hello”; 4

Page 5: Lecture 3 Term 2 23/1/12. Arrays You can create an array with the Array() constructor and the new operator. There are three ways to invoke the Array()

<html><head><title> Array1 </title>

<script language="javascript">var book = new Array(4);

book[0] = "Harry Potter";book[1] = "Da Vinci Code";book[2] = "The Kite Runner";book[3] = "The Client";

for (i=0; i<4; i++){

document.write(book[i] + "<br>");}

</script></head><body></body></html> 5

Page 6: Lecture 3 Term 2 23/1/12. Arrays You can create an array with the Array() constructor and the new operator. There are three ways to invoke the Array()

<html><head><title> Array2 </title><script language="javascript">

var book = new Array("Harry Potter","Da Vinci Code","The Kite Runner","The Client");

for (i=0; i<4; i++){

document.write(book[i] + "<br>");}

</script></head><body></body></html> 6

Page 7: Lecture 3 Term 2 23/1/12. Arrays You can create an array with the Array() constructor and the new operator. There are three ways to invoke the Array()

Arrays Continued…• In JavaScipt, as in Java, C, and C++ the first element of an array is at

index 0.

• In JavaScript, unlike Java and C, an array can have any number of elements and the number of elements can be changed at any time.

• To add a new value to an array, simply assign a value to ita[10] =10;

7

Page 8: Lecture 3 Term 2 23/1/12. Arrays You can create an array with the Array() constructor and the new operator. There are three ways to invoke the Array()

Arrays have several methods associated with them:

• Array.length • You can use the array.length property to return the number of elements in

the array• Array.join()

• Converts all the elements of an array to a string and concatenates them.• Array.reverse()

• Reverses the order of the elements of an array.

8

Page 9: Lecture 3 Term 2 23/1/12. Arrays You can create an array with the Array() constructor and the new operator. There are three ways to invoke the Array()

<script language="javascript">

var fruit = new Array("Apple","Orange","Pear","Strawberry");

for (i=0; i<fruit.length; i++){

document.write(fruit[i] + "<br>");}

</script>

9

Array.Length

Page 10: Lecture 3 Term 2 23/1/12. Arrays You can create an array with the Array() constructor and the new operator. There are three ways to invoke the Array()

Array.Reverse()<html><head><title> Array1 </title>

<script language="javascript">var book = new Array(4);

book[0] = "Harry Potter";book[1] = "Da Vinci Code";book[2] = "The Kite Runner";book[3] = "The Client";

document.write(book.reverse());

</script></head><body></body></html>

10

Page 11: Lecture 3 Term 2 23/1/12. Arrays You can create an array with the Array() constructor and the new operator. There are three ways to invoke the Array()

Arrays• Array.slice()

• Returns a slice (or subarray) of the specified array.• Its two arguments specify the start and end of the slice to be returned.• Note the returned slice doesn’t include the element

specified by the second argument.

• Array.toString()• Outputs a comma delimited string of its elements

11

Page 12: Lecture 3 Term 2 23/1/12. Arrays You can create an array with the Array() constructor and the new operator. There are three ways to invoke the Array()

Array.Slice()<html><head><title> Array1 </title>

<script language="javascript">var book = new Array(4);

book[0] = "Harry Potter";book[1] = "Da Vinci Code";book[2] = "The Kite Runner";book[3] = "The Client";

document.write(book.slice(0,2));

</script></head><body></body></html>

Output - ? 12

Page 13: Lecture 3 Term 2 23/1/12. Arrays You can create an array with the Array() constructor and the new operator. There are three ways to invoke the Array()

• Array.sort()• Sorts the elements of an array. This is done in place (i.e. without creating a

new array).

• Array.concat()• Creates and returns an array that contains the elements of the original

array that concat() was invoked on, followed by each of the arguments to concat()

13

More Methods

Page 14: Lecture 3 Term 2 23/1/12. Arrays You can create an array with the Array() constructor and the new operator. There are three ways to invoke the Array()

Array.sort()<html><head><title> Array1 </title>

<script language="javascript">var book = new Array(4);

book[0] = "Harry Potter";book[1] = "Da Vinci Code";book[2] = "The Kite Runner";book[3] = "The Client";

document.write(book.sort());

</script></head><body></body></html>

14

Page 15: Lecture 3 Term 2 23/1/12. Arrays You can create an array with the Array() constructor and the new operator. There are three ways to invoke the Array()

Array.Concat()<html><head><title> Array1 </title><script language="javascript">

var book = new Array(4);book[0] = "Harry Potter";book[1] = "Da Vinci Code";book[2] = "The Kite Runner";book[3] = "The Client";

var dvd = new Array(3);

dvd[0] = "Mamma Mia";dvd[1] = "The Usual Suspects";dvd[2] = "The Grinch";

document.write(book.concat(dvd));

</script></head><body></body></html>

15

Page 16: Lecture 3 Term 2 23/1/12. Arrays You can create an array with the Array() constructor and the new operator. There are three ways to invoke the Array()

Another Example<html><body><script type="text/javascript">var i;var schedule = new Array();schedule[0] = "IS6116";schedule[1] = "IS6117";schedule[2] = "IS6118";

for (i in schedule){document.write(schedule[i] + "<br />");}</script></body></html>