Jason Lydon: Web Designer, Web Developer, Graphic Designer, Video Producer and Digital Maestro

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.

• 
  Douglas Crockford: "Theory of the DOM " (1 of 3) @ Yahoo! Video
• Article: Traversing the DOM
• Introduction to modifying the DOM
• How to access a form element with Javascript

Questions for reflection (please reflect on your blog and discuss in comments below):

• Q: 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?
  A: 1) The Mosaic engine had a problem with images, it didn’t know the size of the image. It would reach the parse stage of the workflow have to return fetch stage of the workflow. To fix this, Netscape followed the same workflow, but put a marker in the fetch stage and kept going, and then later, when it got the image, it would paint it in. Essentially, the load didn’t get hung up on an image, it would build around it. Flow and Paint multiple times.
  2) Netscape 2 built on this by adding events, which cause a script to get executed. Creating a ‘Flow -> Paint -> Event -> Script’ loop. Something all browsers still use today.
• Q: What are the roles of ‘name’ and ‘id’ attributes in HTML tags? What is an appropriate use of both?
  A: ‘name’ = Identifies values in form data, Identifies a window/frame. They are mostly used in forms and such
  ‘id’ = Uniquely identifies an element. This can be used to gain access to an object for use with JS & CSS.
• Q: Which pointers does each node in the DOM tree typically have?
  A: child, sibling, parent.
• Q: Given a node object from a DOM tree, how do we determine if it is a text node or a regular node?
  A: If you get a nodes nodeName, a Text node will return #text, a regular node will return something other that #text.

  Element	The tag name, eg. HTML
  Attr	The attribute name, eg. id
  Text	#text
  CDATASection	#cdata-section
  EntityReference	The name of the entity reference, eg. amp
  Entity	The entity name, eg. &
  ProcessingInstruction	The target of the processing instruction, eg. xml-stylesheet
  Comment	#comment
  Document	#document
  DocumentType	The name of the document type, eg. html
  DocumentFragment	#document-fragment
  Notation	The notation name

  or refer to this check node.nodeType for these:
  Node.ELEMENT_NODE == 1
  Node.ATTRIBUTE_NODE == 2
  Node.TEXT_NODE == 3
  Node.CDATA_SECTION_NODE == 4
  Node.ENTITY_REFERENCE_NODE == 5
  Node.ENTITY_NODE == 6
  Node.PROCESSING_INSTRUCTION_NODE == 7
  Node.COMMENT_NODE == 8
  Node.DOCUMENT_NODE == 9
  Node.DOCUMENT_TYPE_NODE == 10
  Node.DOCUMENT_FRAGMENT_NODE == 11
  Node.NOTATION_NODE == 12

Homework:

• Q: 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).
  A: I had a real hard time putting this one together. I couldn’t think it all the way through the process, I actually poached the code from Melipone Moody. See my version in action here.

  function walkTheDOM(node, func) {
  	func(node);
  	node = node.firstChild;
  	while (node) {
  		walkTheDOM(node, func);
  		node = node.nextSibling;
  	}
  }
  function countTextNodes() {
  	var sum = 0;
  	function count (node) {
  		if (node.nodeType == 3) // TEXT_NODE
  	sum++;
  	}
  	var root = document.documentElement;
  	walkTheDOM(root, count);
  	alert (sum + " text nodes found");
  }
  countTextNodes()
  

• Q: 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.
  A: Simply just built of the previous example and used innerHTML. See it in action here.

  function walkTheDOM(node, func) {
  	func(node);
  	node = node.firstChild;
  	while (node) {
  		walkTheDOM(node, func);
  		node = node.nextSibling;
  	}
  }
  function countTextNodes() {
  	var sum = 0;
  	function count (node) {
  		if (node.nodeType == 3) // TEXT_NODE
  	sum++;
  	}
  	var root = document.documentElement;
  	walkTheDOM(root, count);
  	var add_this_copy = (sum + " text nodes found");
  	// alert(add_this_copy);
  	document.getElementById('place_content_here').innerHTML = add_this_copy;
  
  }
  countTextNodes()
  

• Q: 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.
  A: Again, building off the previous example… See it here.

  window.onload=function(){
  	countTextNodes();
  }
  function walkTheDOM(node, func) {
  	func(node);
  	node = node.firstChild;
  	while (node) {
  		walkTheDOM(node, func);
  		node = node.nextSibling;
  	}
  }
  function countTextNodes() {
  	var sum = 0;
  	function count (node) {
  		if (node.nodeType == 3) // TEXT_NODE
  	sum++;
  	}
  	var root = document.documentElement;
  	walkTheDOM(root, count);
  	var add_this_copy = (sum + " text nodes found");
  	// alert(add_this_copy);
  	document.getElementById('place_content_here').innerHTML = add_this_copy;
  	return add_this_copy;
  }
  function change_to_bold(){
  	var current_text = document.getElementById('place_content_here').innerHTML;
  	var current_text = ''+current_text+'';
  	document.getElementById('place_content_here').innerHTML = current_text;
  }
  function change_to_normal(){
  	var current_text = document.getElementById('place_content_here').lastChild.innerHTML;
  	document.getElementById('place_content_here').innerHTML = current_text;
  }
  

#p2pu-Jan2011-javascript101