O'Reilly Forums: Page 69, "sharpen Your Pencil" Exercise Help? - O'Reilly Forums

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Page 69, "sharpen Your Pencil" Exercise Help? line by line help needed

#1 User is offline   OzcarAlpha 

  • New Member
  • Pip
  • Group: Members
  • Posts: 1
  • Joined: 16-February 12

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 User is offline   Beth Robson 

  • Veteran Member
  • PipPipPipPipPipPipPipPipPip
  • Group: O'Reilly Employee
  • Posts: 376
  • Joined: 17-September 08
  • 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
Co-founder, WickedlySmart.com
Author: Head First JavaScript Programming, Head First HTML5 Programming, Head First HTML and CSS, Head First Design Patterns

Share this topic:

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users