BIRDEGG’s WEBLOG

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    // within the loop,     // name is the key of current member    // object[name] is the current value    }}

• 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 formfunctionObject(arguments)*Method formthisObject.methodName(arguments)thisObject["methodName"](arguments)*Constructor formnew functionObject(arguments)*Apply formfunctionObject.apply(thisObject, [arguments])

• Douglas Crockford: “The JavaScript Programming Language”/4 of 4

  The language definition is neutral on threads

  ActionScriptEmpty strings are truthykeywords are case insensitiveNo Unicode supportNo RegExpNo tryNo statement labels|| and && return booleansseparate 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)

  node.currentStyle.stylename Only IE
  
  document.defaultView().    getComputedStyle(node, “”).    getPropertyValue(stylename);

  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.