[I already know that most 'professionals' poop all over DW, but it is the program I learned to code in and mocking me will not get me to change my mind]

This led me to learn how actually customize the default files for DW and eventually I created a nice little stripped down DW Boilerplate for myself. I didn’t find any good documentation, so I figured I use the moment of inspiration to write a post.

Setup the default html file

• Summary: HTML5 Template with generic links to styles, scripts, etc
• 1. Set DW to open your html files with the HTML5 doctype.
  – Dreamweaver -> Preferences -> New Document -> Default Document Type (DDT):
  – change the setting to HTML5
  This will give you a nice little naked HTML5 file, but we can make it better.
• 2. Build you preferred HTML template that will open each time you open a new html document.
  – In your computer, find: Dreamweaver 5.5 -> Configuration -> DocumentTypes -> NewDocuments -> Default.html
  Open the file in DW, then just type or copy/paste in your new html template. Save, then open a new html file, and you should see exactly what you just added!

Setup the default javascript file

• Summary: basic js file with jQuery doc.ready and window.load ready to rock
• 1. Build you preferred javascript template that will open each time you open a new javascript document. Really, the html file is the hardest to to, because it is two steps.
  – In your computer, find: Dreamweaver 5.5 -> Configuration -> DocumentTypes -> NewDocuments -> Default.js
  Open the file in DW, then just type or copy/paste in your new javascript template. Follow the same process for testing.

Setup the default css file

• Summary: default css file with reset, author comments, indexing and device widths
• 1. HTML5 is sweet, JS is ok, but the CSS is where I really pat myself on the back.
  – In your computer, find: Dreamweaver 5.5 -> Configuration -> DocumentTypes -> NewDocuments -> Default.css
  Thats it, you are good to go.

So now knowing these principles, you know where every default file template is in DW and you can customize all the templates you use.

As for more details about my boilerplate. I found other boilerplates to be informative, but bloated. I was always removing things or noticing things I forgot to remove. I wanted to come from the other direction. Just the proper basics that will provide the things I need and save me time. This is my first draft of these files, but this shit is organic and will evolve, so feel free to take mine and use them as your starting point.

• HTML: HTML5 document with title tag, favicon link, screen/mobile/print css linked, html5 shiv, some base html tags (header/content/footer), js file linked.
• js: I always find myself using jQuery, so the file has the standard doc.ready and window.load functions
• css: This is the file that I really appreciate. It starts with project details, including the math my heights & widths are based on (used for my mobile specific css). It is followed by a basic index, I do this because css files always become a mess if you don’t stay on top of them. Then we roll into Eric Meyer’s reset css with html5 selectors included (I remove the body {line-height} css because it causes me more problems that it solves). It then has the comments that match the index setup. Finishing with some CSS Media Queries for device width. This has it’s own index for all my testing devices and then the corresponding widths breaking down the devices again. Like I said above, I’m pretty proud of this file, makes my life easier.

Download the files(html, css, js)[8kb]

I would love to hear how other folks start there projects off. Their default files.

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