master in javascript

JavaScript The World's Most Misunderstood Programming Language

http://www.neticy.comhttp://www.joke4me.comrobbin@gmail.com

Basic knowledge

Dynamic language and functional language

JavaScript frameworks and applications

Debug and experiences of development

Basic Knowledge

Literal notation

Keywords

Functions

OOP

DOM/HTML

Literal notation in languages

A literal value is any part of a statement or expression that is to be used exactly as it is, rather than as a variable or a script element.

You use literals to represent values in JavaScript. These are fixed values, not variables, that you literally provide in your script. This section describes the following types of literals:

① Array Literals② Boolean Literals③ Floating-Point Literals④ Integers⑤ Object Literals (JSON)⑥ String Literals⑦ Regex Literals

e.g. PHP/Java/C#: String, Integer, Boolean. Python: String, Dictionary , List, Tuple

typeof

instanceof

this

in

undefined /null

delete

try/catch/finally/throw

|| &&

Keywords

typeof " number" 、 "string" 、 "boolean" 、 "object" 、 "function" 、 "undefined “.

If you just declare a variable, the default value of the variable is ‘undefined’.Always wrong if you are using an undefined variable.

e.g. var s = s || {};

|| Return the “true-like” variable, if both of them are true, return the first. ( Equal ? : )

&& Return the “false-like” variable, if both of them are true, return the second.

instanceof Check if the instance is initialized from that function/class.Check if the prototype of some class/function is in the chain of some object.

e.g. obj instanceof ClassA

Since every object has a prototype chain, the operation of “instanceof” is to check if the ClassA’s prototype is in the chain of obj.

So it could be “true” for many Class to one object.

Code snippet

Every object has a constructor property.Every function/class has a prototype property which is an object,that is to say, it is an instance of function(class).

Discussion: how to check if a variable is array?

in

Return a boolean value which specifies if the first variable is a property/element of the second variable.

console.log(‘2’ in [1,2,3]); console.log(‘join’ in [1,2,3]);console.log(‘top’ in window);

undefined/null

If you just declare a variable, there the value of the variable is ‘undefined’.Null is defined, the value of null is null.

var d; if(d == undefined) console.log('fff');

delete

Make a variable undefined.Delete a property of an object.

var a = ‘tt’; delete a;

try/catch/finally/throw

try { aaa ;} catch(e) { console.log(e); }finally { console.log('ff');}

It is not a good idea to hide an error only if you know what you are doing.

throw Raise an exception.

this

Dynamic language / Lazy evaluation

“this” means what this is.

Compare the differences of “this” in JavaScript/PHP/C#

Change ‘this’ via “apply” and “call” functions.

More detail will be the code analysis.

Trivial Code Snippet

Functions

Execute function

setTimeout/setInterval

eval

call/apply

Execute function

call/apply

setTimeout/setInterval

Mutil threads simulation in JavaScript.

Animate effect in JavaScript.

eval

apply/call

Specify a new current instance as the ‘this’ object.

The difference of them is the arguments.

{prototype library source code}

bind: function() {

if (arguments.length < 2 && Object.isUndefined(arguments[0])) return this;

var __method = this, args = $A(arguments), object = args.shift();

return function() {

return __method.apply(object, args.concat($A(arguments)));

}

}

a.bind(b, …);

Source Code Analysis

Inheritance and creating class in Prototype Library.

OOP/Inheritance

There are 3 ways to implement inheritance.

①prototype chain

②Properties copy

③Using apply/call functions

Source Code Analysis

Inheritance in YUI and Mootools

JScript (IE)SpiderMonkey(FF)JavaScriptCore(Safari)linear_b(Opera)

DOM/HTML

JavaScript Engine

While JavaScript is the programming language which will allow you to

operate on the DOM objects and to manipulate them programmatically, the

DOM will provide you with methods and properties to retrieve, modify,

update, and delete parts of the document you are working on.

If a web page were a piece of imported Swedish furniture, the DOM would

be the illustrations of the parts - the shelves, bolts, Allen wrenches and

screwdrivers.

The Document Object Model, a language-neutral set of interfaces

Keywords: W3C DOM Level1 and DOM Level2, XML, SAX

HTML DOM STRUCTURE

Html type nodeType name nodeType value

Element Node.ELEMENT_NODE 1 Element Node

Text Node.TEXT_NODE 3 Text Node

Document Node.DOCUMENT_NODE 9 document

Comment Node.COMMENT_NODE 8 Comment

DocumentFragment Node.DOCUMENT_FRAGMENT_NODE 11 Fragment

Attr Node.ATTRIBUTE_NODE 2 Attribute

The NodeType and NodeType Value

e.g. alert(document.nodeType); 

ELEMENT_NODE                                 1

ATTRIBUTE_NODE                             2

TEXT_NODE                                         3

CDATA_SECTION_NODE                 4

ENTITY_REFERENCE_NODE             5

ENTITY_NODE                                     6

PROCESSING_INSTRCTION_NODE        7

COMMENT_NODE                              8

DOCUMENT_NODE                            9

DOCUMENT_TYPE_NODE                10

DOCUMENT_FRAGMENT_NODE    11

NOTATION_NODE                              12

All The NodeType and NodeType Value

createAttribute()createComment()createElement()createTextNode()getElementById()getElementsByTagName()

Document Methods

getAttribute()getAttributeNode()getElementsByTabName()hasAttribute()removeAttribute()removeAttributeNode()setAttribute()setAttributeNode()

Element Methods

attributeschildNodesfirstChildlastChildnextSiblingnodeNamenodeTypeparentNodepreviousSibling

appendChild()cloneNode()hasChildNodes()insertBefore()removeChild()replaceChild()

Node Properties & Methods

What’s the differences between Node and Element ?

The theory of DOM can be applied to other every dom manipulation, and other languages.

e.g. XML, XHTML, WML…e.g. PHP, Java, C#...

Ref erence: http://www.w3schools.com

Thank you!

http://neticy.comhttp://www.joke4me.comRobbin.joe@gmail.com

Happy Tiger Year!