Javascript #3

With variables, you can hold onto one piece of information. If you wanted to keep track of all the items in a shopping cart, you'll have to write code like this:

  var mycart0 = 'tomatoes';
  var mycart1 = 'milk';
  var mycart2 = 'eggs';
  var mycart3 = 'potatoes';
  ...

It could easily get very long (imagine keeping track of 10000 items).
Solution: When dealing with a list of entities, you use an array.

If you have this kind of data structure, you can address them by indexing into the array

  alert(mycart[0]); // 'tomatoes'
  alert(mycart[3]); // 'potatoes'
  

1. Declare the array's name just as you do with variables
2. Supply a list of comma-separated values between open/close brackets.

  var days = ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'];    // an array of strings

  var mixedBag = [1, 'reed.edu', true, -23.3]          // array with different data types

  var playList = [];   // an empty array

  var setting = [
    'hot',
    'cold',
    'mild',  
    'crunchy',         
  ];

  var days = ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'];  
  alert(days[0]);   

  days[0] = 'Lundi'; // change the value of arrays 

  alert(days[0]); 

  alert( days[1] );  // added white space so easier to read
  alert( days[2] );  
  alert( days[3] );  

  alert( days[6] );  // 'Sun'
  alert( days[7] );  // ??

A special property of an array is that it understands some things about itself. For example, the length property tells you the length of the array.

To get the length you add a period followed by length after the array's name like this:

  days.length

This will act like a variable with the length of the array in it and can be used like the following:

  var days = ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'];    // an array of strings

  days[days.length -1];   // this will always index into the end of the array. In this particular case
                          // will evaluate to days[6] 

Example [here].

Adding items to an array

  var myCart = ['tomatoes', 'milk', 'eggs', 'potatoes'];



  // adding items to the end of array
  myCart[4] = 'banana';          



  myCart[myCart.length] = 'bread';  



  // .push() adds one or more items to the end of an array
  myCart.push('cheese');  



  myCart.push('tea', 'pasta', 'ice cream'); 



  //adding item to the beginning of an array
  myCart.unshift('yogurt');    
  

push() and unshift functions return a value. They supply the number of items that are in the array.

  var p = [0,2,5,1];
  var totalItems = p.push(4,5); // totalItems contains 6 numbers 0,2,5,1,4,5

Deleting items from an array: pop() removes the last item from the array. shift() removes the first item from the array

  var pp = [0, 1, 2, 3];
  var poppedItem = pp.pop(); // [0, 1, 2] and poppedItem contains 3
  var pushedItem = pp.shift(); //[1, 2] and pushedItem contains 0

We've actually been using objects.

  document.write('hello');

  var p = [1,2,3,4];
  p.length;

Not using objects:


Using objects:

- Document Object Model

<p id="reed"></p>

<script>
document.getElementById("reed").innerHTML = "Reed College";
document.getElementById("reed").style.color = "blue";
document.getElementById("reed").style.backgroundColor = "Yellow";
</script>



<p class="schools"></p>
<p class="schools"></p>

<script>
  var schoolarray = document.getElementsByClassName("schools");
  schoolarray[0].innerHTML = "School 0";
  schoolarray[1].innerHTML = "School 1";
</script>

  var price = 10; // this is a single line of comment
  
  /*
   This is a multiline comment.
   Author: Jane Smith
   The code makes your website look great.
   You use this by ...
  */

  
  

1. Read ch2 44-60
   
2. Textbook Ch2 Tutorial: Writing to a Web Page Using Arrays (p51)
   
3. Read p28 (Putting Quotes into Strings)
   Look at the example [here].
   
   - It creates an array with a CSS property value used for color ('red', 'green', 'cyan'..etc).
   - Using prompt(), lets the user choose a number which would index into the array thus selecting a CSS property (eg. 'red').
   - Then generates HTML code with an inline CSS style using the selected CSS property value for the color of the text.
   
   
4. Modify this example so that the text displayed is the actual name of the color and not"some color". (If the color is red, the text displayed should be 'red').
   
   
5. Add another array consisting of a CSS property value of your choice. For example,
   - If the CSS property is size, the array could have the CSS property value 1%, 10%, 20%...
   - If the CSS property is font-family, the array could have the CSS property value "Times New Roman", Times, serif....
   
   Let the user choose a number again to select the new CSS property value. Then use that CSS value when displaying the result. (eg. if the user chose 0, which was "Times New Roman", then display the text in "Times New Roman").