Page 69, "sharpen Your Pencil" Exercise Help?

  • Please log in to reply
1 reply to this topic

#1 OzcarAlpha


    New Member

  • Members
  • Pip
  • 1 posts

Posted 16 February 2012 - 02:28 PM

Hi All,

Having managed to muddle along and keep a tentative handle on the logic to each of the topics and examples thus far. I've found page 69's exercise too challenging (even with the answer and short annotation on page 83).
Is anyone willing to provide a line by line break down of the reasoning/logic behind each part of the code for this exercise?
Yours gratefully,

#2 Beth Robson

Beth Robson

    Veteran Member

  • O'Reilly Employee
  • PipPipPipPipPipPipPipPipPip
  • 377 posts
  • Gender:Female
  • Location:Seattle, WA
  • Interests:I am interested in computer science, the Web, social media and the internet, Mac development, and adult learning.

Posted 16 February 2012 - 09:22 PM

Hey Ozcar,
Sure thing!

var tempByHour = new Array();

In function showTemps(), the first thing we need to do is create an array to store all the temperatures in. So this creates an empty array.

tempByHour[0] = 59.2

The next few lines all add values to the array. Remember, each item in the array gets its own index in the array. We're adding 5 items to the array, starting at index 0.

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

This line creates a for loop. We want to loop through all the values in the array. There are 5 values, so the length of the array is 5, but remember we index those values with 0-4. So, first time through the loop i = 0. Next time i = 1. And so on. When i = 5, i is no longer less than the length of the array so the loop stops.

theTemp = tempByHour[i];

Inside the loop, we get the temp of the item in the array (that is, if i = 2 in the loop, then theTemp is tempByHour[2], or the third item in the array).

var id = "temp" + i;

We need to get the <li> element in the page that corresponds to the i'th element in the array. If i = 2, then we'll get the <li> element with the id, "temp2". So we construct that id by concatenating the string "temp" with the value of i, 2, to make "temp2".

var li = document.getElementById(id);

Now, we get that <li> element using its id. So if id is "temp2" then we're getting the third <li> in the list.

if (i == 0) { li.innerHTML = "...." + theTemp }

If it's the first element in the list, that is, if i = 0, then the time is noon, and so we set the innerHTML of element to the string concatenated with the value of the first item in the array, which, remember, we saved in the variable theTemp up in the first statement in the loop.

else { li.innerHTML = "..." + i + "..." + theTemp; }

If i is not 0, that is, i is 1, 2, 3, or 4, then we set the contents of the <li> element to the string "The temperature at " + i + " was " + theTemp. If i = 2, then that string is "The temperature at 2 was 63".

window.onload = showTemps;

The function showTemps is run when the page has completed loading. You'll learn more about onload handlers and events in chapter 3!!

Hope this helps...

Elisabeth Robson
Author: Head First JavaScript Programming, Head First HTML5 Programming, Head First HTML and CSS, Head First Design Patterns

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users