JAVASCRIPT 101 - P2PU
Week 4
TRACK 1 - Javascript Videos
Please watch the videos in the links listed below. Some links may contain further notes and links to resources covered in the videos. After watching the videos, reflect on the questions, discuss them on the forums, post your reflections on your blogs. The assignments are for practicing the concepts learned. You can discuss them on the forums, and upload them on your blog or any open source repository where your course peers and facilitators can review and comment on them.
Questions for reflection (please reflect on your blog and discuss in comments below):
  1. There were two key innovations to the original (fetch-parse-flow-paint) linear workflow that the Mosaic browser used to render web pages. One allowed for a perception of faster rendering, and the other allowed for us to use AJAX. Explain both?
  2. What are the roles of 'name' and 'id' attributes in HTML tags? What is an appropriate use of both?
  3. Which pointers does each node in the DOM tree typically have?
  4. Given a node object from a DOM tree, how do we determine if it is a text node or a regular node?
Homework:
  1. Download the source for the web page 'http://www.useit.com/about/nographics.html'. In the source page itself, write a Javascript function which counts the number of text nodes in the document and shows the count in an alert dialogue. You can choose how you want to trigger the function (through a button click, link click, or any other event).
  2. Change the example above so that instead of displaying the count in an alert dialogue, it is displayed in a span tag in the HTML page itself.
  3. Add a link besides the button, such that when the link is click, it changes the style on the span tag to make it's contents bold.
TRACK 2 - Eloquent Javascript. The material in Eloquent Javascript for DOM is a bit confusing due to the involvement of the book's console. Because of that I have selected some other material for this topic.
Please read the material from the links listed below. After reading, reflect on the questions, discuss them on the forums, post your reflections on your blogs. The assignments are for practicing the concepts learned. You can discuss them on the forums, and upload them on your blog or any open source repository where your course peers and facilitators can review and comment on them.
Questions for reflection (please reflect on your blog and discuss in comments below):. Answering these questions will need some research beyond the reading material.
  1. What are the roles of 'name' and 'id' attributes in HTML tags? What is an appropriate use of both?
  2. Which pointers does each node in the DOM tree typically have?
  3. Given a node object from a DOM tree, how do we determine if it is a text node or a regular node?
Homework:
  1. Download the source for the web page 'http://www.useit.com/about/nographics.html'. In the source page itself, write a Javascript function which counts the number of text nodes in the document and shows the count in an alert dialogue. You can choose how you want to trigger the function (through a button click, link click, or any other event).
  2. Change the example above, so that instead of displaying the count in an alert dialogue, it is displayed in a span tag in the HTML page itself.
  3. Add a link besides the button, such that when the link is click, it changes the style on the span tag to make it's contents bold.
Return to course home page
Please use the commenting system below for technical or other questions related to this week of the course.