Javascript objects and array of objects

Programming language is actually designed to make life easier for developers... and one way is to group related things into objects. Object-oriented programming (OOP) is a big topic in computer science. Can javascript do OOP? The answer is... yes, but this isn't quite the same as other languages. I suggest learning OOP in C++ or Java.

But the basic idea of an object is simple... you define things within.. known as properties.

Like a TV has its channel buttons and volume controls. Like a car has a make, model and color. Details of how a TV or a car works is staying inside the object.

For example: (the syntax is braces)

var car = {type:"Fiat", model:500, color:"white"};

For details in here: http://www.w3schools.com/js/js_objects.asp.

You access properties with a dot. like alert( car.color ) will give you white.

Push into an array

You can define all the elements in an array with 1 line. (The syntax is square bracket). A blank array is just [].

var prime = [2,3,5,7,11]

You access with an index that starts with 0, like prime[0] gives you 2, prime[2] gives you 5.

Another thing about arrays in Javascript. You can keep adding to it with a "push". In other languages it is not so easy to attach new item to an array. Javascript can do this because of its dynamic nature.

Example: add another prime number onto your list:

prime.push(13);

(You win a prize if you can tell me why there are infinitely many primes)

And you can have an array of objects.

The following works exactly the same as the code in Lesson 7. So instead of 2 arrays, I have object called planet, and I can easily define more things for each planet.

<script>
var planet;

var planets = [];


planet = { name: 'Mercury',
                img: 'http://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Mercury_in_color_-_Prockter07_centered.jpg/270px-Mercury_in_color_-_Prockter07_centered.jpg'}
planets.push(planet);

planet = { name: 'Venus',
           img: 'http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Venus_globe.jpg/250px-Venus_globe.jpg'}

planets.push(planet);

planet = { name: 'Earth',
           img: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/300px-Earth_Eastern_Hemisphere.jpg'}

planets.push(planet);

planet = { name: 'Mars',
           img: 'http://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Water_ice_clouds_hanging_above_Tharsis_PIA02653_black_background.jpg/250px-Water_ice_clouds_hanging_above_Tharsis_PIA02653_black_background.jpg'}

planets.push(planet);

planet = { name: 'Jupiter',
           img: 'http://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Jupiter_by_Cassini-Huygens.jpg/260px-Jupiter_by_Cassini-Huygens.jpg'}

planets.push(planet);

planet = { name: 'Saturn',
           img: 'http://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Saturn_PIA06077.jpg/280px-Saturn_PIA06077.jpg'}

planets.push(planet);

planet = { name: 'Uranus',
           img: 'http://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Uranus2.jpg/240px-Uranus2.jpg'}

planets.push(planet);

planet = { name: 'Neptune',
           img: 'http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Neptune.jpg/240px-Neptune.jpg'}

planets.push(planet);

var i=2; // show we show Earth first, as Earth is planents[2], the third planet from the sun.

function showPlanet(i) {

  document.getElementById("planet").innerHTML="<img src="+planets[i].img+" width=200 height=200><br>"+planets[i].name;
}
function doPrev() {
  if (i==0) {
    i=7;
//   alert("go to last planet")

  }else {
    i--;
  }
  showPlanet(i);
}

function doNext() {
  if (i==7) {
   i= 0;
//   alert("back to beginning")
  }
  else {
   i++;
  }
  showPlanet(i);
}


</script>
<table><tr><td>
<input type="button" value="<" onclick="doPrev()">
</d>
<td>
<div id="planet"></div>
</td>
<td>
<input type="button" value=">" onclick="doNext()">
</td>
</tr></table>
<script>

showPlanet(i); // show Earth first
</script>