CpSc 217 - Structured and Dynamic Web Programming

The notes found on these pages all reference the textbook given above. Unless otherwise stated, the citation of the information on these web pages is that text.

Creating Arrays

• var empty =[];
• var primes = [2, 3, 5, 7, 11];
• var a = new Array();
• var a = new Array(10); //a.length is 10
• var a = new Array(5, 4, 3, 2, 1, "testing", "testing");

Reading and Writing Array Elements

• value = a[0];
• a[1] = 3.14;
• i = 2;
  a[i] = 3;
  a[i+1]="hello";
  a[a[i]]=a[0];
• Indices
  a["10"] // is the 11th element
  a[1.00] // is same as a[1]
  a[a.length] // is undefined

Adding and deleting array elements

• As above
  a=[] //empty array
  a[0] = "hello" //adds an element
• using push
  a=[] //empty array
  a.push("hello") //adds an element
• using delete to delete item at index number
  a=[1,2,3] //array of 3 elements
  delete a[1]; //deletes element at index 1
  1 in a // returns false. no element defined at index 1
  a.length // still 3. Just undefined element

Iterating Arrays

• for loop used

  a=[1,2,3];
  for (i=0; i < a.length; i++) {
    //loop body
  }
  

• See examples on pages 146 and 147

Array of images

• Arrays use [ ]
• document.images[ ]
• Code used on images.html page
• for (i=0; i<15; i++)
  document.write ("Image " + i + " is " + document.images[i].src + "
  ");
• OR you can set up the array using Javascript
  imgarr=new Array(9);    // array of 9 elements
  imgarr[0]=new Image;   //new image
  imgarr[0].src="picnic02-1.jpg";
• OR use a loop to generate the pictures since they are similarly named
  imgarr=new Array(9);   
  for (i=0;i<8;i++){ imgarr[i]=new Image; imgarr[i].src="picnic02-"+(i+1)+".jpg"; }

Multidimensional Arrays

• Have to create an array of arrays. All dimensions start with 0.

  var table = new Array(10);
  for (var i =0; i < table.length; i++)
    table[i] = new Array(10);
  

• To access, use nested loops

  for (var row =0; row < table.length; row++)
    for (var col = 0; col < table[row].length; col++)
      table[row][col] = row *col;
  

• 10 rows: 0-9; 10 cols: 0-9;
• table[5][7] is 35

Array Methods

• join() - joins elements of an array into a string:

  var a=[1, 2, 3];
  a.join(); // returns "1,2,3"
  

• reverse() - reverses elements within the array

  var a=[1, 2, 3];
  a.reverse(); // array a now contains 3, 2, 1
  

• sort() - sorts elements of the array in place

  var a=[44, 2, 111, 6];
  a.sort(); // array a now contains 2, 6, 44, 111
  

• concat() - returns a new array

  var a=[44, 2, 111, 6];
  a.concat(4, 5) // returns 44, 2, 111,6, 4, 5
  

• slice()- returns a subarray of the specified elements

  var a=[44, 2, 111, 6];
  a.slice(1, 3) // returns 2, 111,6
  

• splice() - inserts or removes elements from an array

  var a=[1,2,3,4,5,6,7,8];
  a.splice(4) // returns [5,6,7,8]; a is [1,2,3,4]
  a.splice(1,2) // returns [1,2]; a is now [3,4]
  

• push(), pop() - adds and removes array elements from end of array
• unshift(), shift() -- adds to beginning of array

  var a=[];
  a.unshift (1); // a consists of [1], returns 1
  a.unshift (8); // a consists of [8, 1], returns 2 - length of array
  a.shift(); //a consists of [1], returns 8
  

• toString - converts array to a string '1,2,3'
• indexOf(), lastIndexOf() - search an array for a specified element

  a=[0,1,2,1,0];
  a.indexOf(1); // returns 1 - the index of the first one in a
  a.lastIndexOf(1); // returns 3 - the index of the last one in a