JavaScript Advanced Skill

Embed Size (px)

Citation preview

JavaScript by David

JavaScript
Advanced Skill

by David Hung
2010-11-22

JavaScript

JavaScript:ECMAScript

DOM (Document Object Model)(element)HTML

BOM (Browser Object Model)Browser

JavaScriptECMAScriptBOMDOM

JavaScriptmulti-thread?! JavaScriptsingle threadJavaScript Librarymulti-threadsetTimeout functionmulti-threadsingle threadBrowserQueuesetTimeoutBrowser

JavaScriptpass by valuepass by reference?pass by valuepassreference type(i.e. object, array...etc.)

DOM Event Flow

JavaScriptEvent:Capture phase target.addEventListener(type, listener, true);

Bubbling phasetarget.addEventListener(type, listener, false);

JavaScript(Good Practice)

functionreturn(condition)return

function getShortBrowserName(obj) {if( obj.title == 'Firefox' ) {return 'FF';} else if ( obj.title == 'Internet Explorer' ) {return 'IE';}}

codeobjecttitleFirefoxInternet ExplorerreturnCallmethodundefined

JavaScript(Good Practice)

with statementdebug

function updateBody() {with(document.body) {alert(tagName);innerHTML = 'Hello World';}}

with statementcodestatementaceessobjectwith statementcodescopelocal varibableobject:

function updateBody() {var body = document.bodyalert(body.tagName);body.innerHTML = 'Hello World';}

JavaScript(Good Practice)

if elsestatement

statement(;)JavaScriptcode()

(floating number)compareJavaScript

(string)(number)parseIntparseFloat(data type)Number() casting function

JavaScript(Good Practice)

functionarguments(: Java)(Polymorphism)function

// function sum() {var total = 0;for( var i=0; i 0 ) { // storage is a arrayvar obj = storage.shift();// your handle code herevar method = arguments.callee;window.setTimeout(function() {method(); // execute grabData method actually}, 300);}}

JavaScript(Good Practice)

Closure (a anonymous function inside another function)functionscope

setIntervalcodesetTimeout(recursive)setIntervalcode

JavaScriptCapability

JavaScript(Good Practice)

elementinnerTextinnerHTMLelementpropertiesHTMLstring buffer

// 100DOM Elementvar panel = document.getElementById('my_panel');for( var i=0; i