Advanced Javascript

Coding Horror: JavaScript: The Lingua Franca of the Web

• Douglas * Crockford: "The JavaScript Programming Language"/1 of 4
  

  null: isn't anything.
  undefined: (1)the default value for variables and parameters. 
  (2)the value of missing number in object.
  &&: guard operator.ll: default operator.
  在JavaScript中,用bitwise operator會慢,原因是JavaScript的number都是64 bit浮點數,沒有整
  數,所以在做bitwise operator,會先把浮點數convert成32bit整數,作bitwise,結果再convert回
  浮點數.

  
  
• Douglas Crockford: "The JavaScript Programming Language"/2 of 4
  

  
  for (var name in object) {
      if (object.hasOwnProperty(name)) { //以免show出太多繼承來的property
          alert(name + ':' + object[name]);
      }
  }

  
  
• Douglas Crockford: "The JavaScript Programming Language"/3 of 4
  The scope that an inner function enjoys continues even after the parent functions have returned. This is called closure.
  

  
  function fade(id) {
      var dom = document.getElementById(id);
          level = 1;
      function step () {
          var h = level.toString(16);
          dom.style.backgroundColor = '#FFFF' + h + h;
          if (level < 15) {
              level += 1;
              setTimeout(step, 100);
          }
      }
      setTimeout(step, 100);
  }

  
  

  
  String.prototype.trim = function () {
      return this.replace(
          /^\s*(\S*(\s+\S+)*)\s*$/, "$1"); 
  }; 
  

  
  

  
  There are four ways to call a function:
  *Function form
  functionObject(arguments)
  *Method form
  thisObject.methodName(arguments)
  thisObject["methodName"](arguments)
  *Constructor form
  new functionObject(arguments)
  *Apply form
  functionObject.apply(thisObject, [arguments])

  
  
• Douglas Crockford: "The JavaScript Programming Language"/4 of 4
  ActionScript
  

  
  Empty strings are truthy
  keywords are case insensitive
  No Unicode support
  No RegExp
  No try
  No statement labels
  || and && return booleans
  separate operators for strings and numbers
  

  
  
• Douglas Crockford: "JavaScript - The Good Stuff"
  
• Douglas Crockford: "Theory of the DOM " (1 of 3)
  

  
  function walkTheDOM(node, func) {
      func(node); 
      node = node.firstChild; 
      while (node) { 
          walkTheDOM(node, func); 
          node = node.nextSibling; 
      } 
  } 
  function getElementsByClassName(className) { 
      var results = []; 
      walkTheDOM(document.body, function (node) { 
          var a, c = node.className, i; 
          if (c) { 
              a = c.split(' '); 
              for (i = 0; i < a.length; i += 1) { 
                  if (a[i] === className) { 
                      results.push(node); 
                      break; 
                  } 
              } 
          } 
      }); 
      return results; 
  }

  
  
• Douglas Crockford: "Theory of the DOM " (2 of 3)
  The handler takes an optional event parameter.
  Microsoft does not send an event parameter, use the global event object instead.
  

  
  function (e) {
      e = e || event; 
      var target = 
          e.target || e.srcElement; 
      ...
  }

  
  

  Cancel Bubbling
  * e.cancelBubble = true;
  * if (e.stopPropagation) {
          e.stopPropagation();
      }

  
  

  Prevent Default Action
  * e.returnValue = false;
  * if (e.preventDefault) {
        e.preventDefault();
    }
  * return false;

  
  
• Douglas Crockford: "Theory of the DOM " (3 of 3)
  

  Prevent Memory Leaks on IE 6
  * Remove all event handlers from deleted DOM nodes.
  * It must be done on nodes before  removeChild or replaceChild.
  * It must be done on nodes before they are replaced by changing innerHTML.

  
  

  
  function purgeEventHandlers(node) {
      walkTheDOM(node, function (e) {
          for (var n in e) {            
              if (typeof e[n] === 
                      'function') {
                  e[n] = null;
              }
          }
      });
  }
  Or you can use YUI's purgeElement method.
  

  
  

  function addEventHandler(node, type, f) {
      if (node.addEventListener) {
          node.addEventListener(type, f, false); 
      } else if (node.attachEvent) {       
          node.attachEvent("on" + type, f); 
      } else {
          node["on" + type] = f;
      } 
  }
  

  
  
• Douglas Crockford: "Advanced JavaScript" (1 of 3)
  
• Douglas Crockford: "Advanced JavaScript" (2 of 3)
  
• Douglas Crockford: "Advanced JavaScript" (3 of 3)

You can download the companion slides for these presentations from the excellent Yahoo User Interface Blog.

tag: walk the dom , traverse, traversal, recursive