master in javascript
DESCRIPTION
deeply understand javascript. http://neticy.com http://www.joke4me.comTRANSCRIPT
![Page 1: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/1.jpg)
JavaScript The World's Most Misunderstood Programming Language
http://www.neticy.comhttp://[email protected]
![Page 2: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/2.jpg)
Basic knowledge
Dynamic language and functional language
JavaScript frameworks and applications
Debug and experiences of development
![Page 3: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/3.jpg)
Basic Knowledge
Literal notation
Keywords
Functions
OOP
DOM/HTML
![Page 4: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/4.jpg)
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
![Page 5: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/5.jpg)
typeof
instanceof
this
in
undefined /null
delete
try/catch/finally/throw
|| &&
Keywords
![Page 6: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/6.jpg)
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.
![Page 7: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/7.jpg)
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.
![Page 8: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/8.jpg)
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?
![Page 9: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/9.jpg)
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');
![Page 10: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/10.jpg)
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.
![Page 11: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/11.jpg)
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.
![Page 12: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/12.jpg)
Trivial Code Snippet
![Page 13: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/13.jpg)
Functions
Execute function
setTimeout/setInterval
eval
call/apply
![Page 14: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/14.jpg)
Execute function
call/apply
![Page 15: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/15.jpg)
setTimeout/setInterval
Mutil threads simulation in JavaScript.
Animate effect in JavaScript.
![Page 16: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/16.jpg)
eval
![Page 17: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/17.jpg)
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, …);
![Page 18: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/18.jpg)
Source Code Analysis
Inheritance and creating class in Prototype Library.
![Page 19: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/19.jpg)
OOP/Inheritance
There are 3 ways to implement inheritance.
①prototype chain
②Properties copy
③Using apply/call functions
![Page 20: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/20.jpg)
Source Code Analysis
Inheritance in YUI and Mootools
![Page 21: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/21.jpg)
JScript (IE)SpiderMonkey(FF)JavaScriptCore(Safari)linear_b(Opera)
DOM/HTML
JavaScript Engine
![Page 22: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/22.jpg)
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
![Page 23: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/23.jpg)
HTML DOM STRUCTURE
![Page 24: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/24.jpg)
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);
![Page 25: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/25.jpg)
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
![Page 26: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/26.jpg)
createAttribute()createComment()createElement()createTextNode()getElementById()getElementsByTagName()
Document Methods
getAttribute()getAttributeNode()getElementsByTabName()hasAttribute()removeAttribute()removeAttributeNode()setAttribute()setAttributeNode()
Element Methods
![Page 27: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/27.jpg)
attributeschildNodesfirstChildlastChildnextSiblingnodeNamenodeTypeparentNodepreviousSibling
appendChild()cloneNode()hasChildNodes()insertBefore()removeChild()replaceChild()
Node Properties & Methods
What’s the differences between Node and Element ?
![Page 28: Master in javascript](https://reader036.vdocument.in/reader036/viewer/2022062513/5560b430d8b42afe3b8b486c/html5/thumbnails/28.jpg)
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