The end result is the jogging screen from Mike Tyson’s Punch Out NES game. All HTML, CSS, jQuery & Spritely! I really couldn’t help myself!

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.

Video 3

Video 4

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

• Q: 1. In Javascript, functions are first class objects. What does it mean to be a first class object?
  A: According to the video:
  1. Functions can be passed, returned, and stored just like any other value
  2. Functions inherit from Object and can store name/value pairs
  i.e. they are objects and can be manipulated and passed around like just like any other object. Specifically, they are Function objects(source)
• Q: 2. Functions and variables share the same namespace. What does this mean and what important implication does this have?
  A: This means that variables and functions can have the same name and should not be named the same because it can cause conflict/problems
  function foo(){}
  expands to
  var foo = function foo()();
• 3. Douglas Crockford equates Javascript functions with Lambdas, and also mentions that they are a secure construct. Can you do some research and reflect on what he means by ‘secure construct’?
  A: Lambda comes from the Lambda Calculus and refers to anonymous functions in programming.
  Why is this cool? It allows you to write quick throw away functions without naming them. It also provides a nice way to write closures. With that power you can do things like this.
  Javascript

  adder = function (x) {
      return function (y) {
          x + y
      }
  };
  add5 = adder(5);
  add5(1) == 6
  

  As you can see from the snippet of python and js, the function adder takes in an argument x, and returns an anonymous function, or lambda, that takes another argument y. That anonymous function allows you to create functions from functions. This is a simple example, but it should convey the power lambdas and closures have.(source)

• 4. Can you explain the concept of a closure.
  A: Two one sentence summaries (source):
  - a closure is the local variables for a function – kept alive after the function has returned, or
  - a closure is a stack-frame which is not deallocated when the function returns. (as if a ‘stack-frame’ were malloc’ed instead of being on the stack!
  That same article breaks this out as the definition: “In JavaScript, if you use the function keyword inside another function, you are creating a closure.” So if you use something like alert(); inside your function, you are creating closure because the alert exists after/outside the function…
• 5. What is the difference between a function and a method?
  A: ‘A function in an object is called a method.’ That appears to be the only difference.
• 6. In Javascript there is no implicit type checking of arguments passed to functions. This could lead to bugs if programmers are not careful about what they pass to functions. If you create a function, how would you protect it from well meaning but careless programmers?
  A: ‘We can use “arguments” and check at the very beginning whether the programmers had entered the right number of arguments to the function.’ IE arguments.length. Or we can check for the type we are look for using typeof() = type
• 7. Javascript functions have implicit access to something called this. this points to different things depending on how the function was created. Can you explain why we need this, and what it represents in different type of functions.
  A: ‘this’ is important because it ‘gives methods access to their objects’
  Function form ==> functionObject(arguments) ==> this is set to the global object so we must use var that = this; to have access to the outer this
  Method form ==> thisObject.methodName(arguments) ==> this = thisObject aka the object containing the function
  Constructor form ==> new functionObject(arguments) ==> a new object is created and assigned to this.
  Apply form ==> undefined in the video…
• 8. Why doesn’t Javascript have a cast operator?
  A: “In javascript, we never cast. An object reference is always an object reference.” In english, this basically means that js does type casts automatically. However, types can be converted as desired using the conversion functions: String(), Number(), Boolean(), etc.(source)
• 9. What is reflection and why is it easy in Javascript (you may need to do research to answer this question)?
  A: ‘Sometimes you want to find out what members an object exposes. There’s a pretty simple way to do this. A simple for-in statement.’

  for(var member in obj){
    alert(member);
  };
  

  or something like this:

  for (var member in object) {
  	alert('Name: ' + member);
  	alert('Value: ' + object[member]);
  }
  

Homework:

Exercises 6.1 – 6.5 from the book Eloquent Javascript. Follow good Javascript style.

• Q: 1. Exercises 6.1 – 6.5 from the book Eloquent Javascript. Follow good Javascript style.
  A: coming soon…
• Q: 2. Run all the exercises you did (6.1 – 6.5) through JSLint and change your code to improve it.
  A: coming soon…

Run all the exercises you did (6.1 – 6.5) through JSLint and change your code to improve it.

#p2pu-Jan2011-javascript101

• 
  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

ASSIGNMENT

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

• 1. Why do languages provide the switch statement, when we can achieve the same thing with multiple if… elseif statements? Show one example of how you might use the switch statement.
  A: To be honest, I haven’t found a good explanation for why ‘switch’ was originally implemented (other than it is in C++), but I have found plenty of examples where it is praised as “simple to use, logical in syntax, and most importantly, many programmers swear by it”1 . So there are plenty of examples for why it stuck around.
  Example:

  switch (today){
        case"sunday":
              alert("You watch TV, it's Sunday");
              [break;]
        case"monday":
              alert("Who's got a case of the Mondays?");
              [break;]
        case"tuesday":
              alert("It's only Tuesday, STFU!");
              [break;]
        case"wednesday":
              alert("Humpday");
              [break;]
        case"thursday":
              alert("Tonight is the best night on NBC");
              [break;]
        case"friday":
              alert("Rally and peak at 9pm, bed by 11");
              [break;]
        case"saturday":
              alert("Saturday, it's a Saturday");
              [break;]
        default:
              alert("Your society has no word for today's name!");
              [break;]
  }
  

• 2. What is encapsulation, and what do functions encapsulate?
  A: Encapsulation: “every class inherits the methods of its parent and only needs to define things it wishes to change” or “A Class defines only the characteristics of the Object, a method defines only how the method executes.”2
  Functions encapsulate local variables.
• 3. What is a pure function? Is the function show() provided in Eloquent Javascript a pure function?
  A: Pure functions are function that “have no memory or I/O side effects”3 Side effects mean “in addition to producing a value, it also modifies some state or has an observable interaction with calling functions or the outside world.”4 So basically a pure function is basic mathematics, 2 + 2 = 4, always. And no variables are affected
  I don’t think the show() is a pure function because it does the bidding of the function associated within it, therefore it does change variables and not do a basic math function.
• 4. What do we mean when we say a variable in a function is shadowing a top level variable?
  A: A top level variable is a variable created outside functions that can be accessed by ALL functions. When a function calls a variable, it first looks for it locally (aka inside this function) and if not found it then looks outside the function to the top level variables. I guess it is a shadow because top level variables are out there and obvious, while a variable with the same name is hiding in the shadows of the function waiting to pounce when it is needed.
• 5. A recursive function must have some sort of an end condition. Why would we get a “out of stack space” error message if a recursive function does not have an end condition?
  “To understand recursion you must first understand recursion”5
  A: A recursive function is a function that calls itself inside itself. Without an end statement, it would continue on forever. The “stack” is where the web browser stores the variables as it works thru functions, each browser has a limited amount of space, thus, if a function runs on forever and continues working thru variables, it will run out of space in the stack.
• 6. Reflect about the difference between object inheritance and class inheritance
  A: Object inheritance allows you to basically make a copy of an object that you expand upon. Class inheritance means that you need to define a new class tat extends a previous class and then create objects of that class.6
• 7. What is object augmentation, and how do we do it?
  A: Object Augmentation: Take an existing object and add new stuff to it at anytime. To do it, simply assign it. The general pattern is myObject[name] = value;
  Just do it!
• 8. There is a way to add a method to String, such as any new String we create will have that augmented method (this is a bit different from object augmentation). How would you do this?
  A:

  String.prototype.newMethod = function (foo, bar) {
      //put code for new String function here
  }
  

• 9. What is garbage collection?
  A: According to the video, it’s “mark and sweep so cycles do get reclaimed”, which meant almost nothing to me, but the internets told me it is basically the “collector” flags each block of data or variable that the program can reach, it then deletes any blocks without flags because they are not being used.
• 10. What is the difference between an array and an object?
  A: Array inherits from Object. Arrays have a length, and objects do not. The video recommends that you use objects when the names are arbitrary strings and use arrays when the names are sequential integers.

Exercises 3.1 – 3.2 from chapter 3

• 3.1 – Write a function called absolute, which returns the absolute value of the number it is given as its argument. The absolute value of a negative number is the positive version of that same number, and the absolute value of a positive number (or zero) is that number itself.

  function absolute(arg){
     if (arg < 0 ){
        return -arg
     } else {
        return arg
     }
  }
  

  I then used buttons to open alerts for different numbers
  See an example here.

• 3.2 - Write a function greaterThan, which takes one argument, a number, and returns a function that represents a test. When this returned function is called with a single number as argument, it returns a boolean: true if the given number is greater than the number that was used to create the test function, and false otherwise.

  function greaterThan(x) {
     return function(y) {
        return y > x;
     };
  }
  var greaterThanTen = greaterThan(10);
  alert(greaterThanTen(9));
  

  See it here

#p2pu-Jan2011-javascript101