Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Master in javascript



deeply understand javascript.

deeply understand javascript.



Total Views
Views on SlideShare
Embed Views



3 Embeds 6

http://www.slideshare.net 3
http://twitter.com 2
https://twitter.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • Master in Javascript - http://neticy.com
  • Master in Javascript - http://neticy.com
  • inheritance_apply_call_prototype.html Master in Javascript - http://neticy.com
  • Master in Javascript - http://neticy.com
  • Master in Javascript - http://neticy.com
  • Master in Javascript - http://neticy.com

Master in javascript Master in javascript Presentation Transcript

  • JavaScript The World's Most Misunderstood Programming Language http://www.neticy.com http://www.joke4me.com [email_address]
    • 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
  • The NodeType and NodeType Value e.g. alert(document.nodeType);  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
  • 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
  • attributes childNodes firstChild lastChild nextSibling nodeName nodeType parentNode previousSibling 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.com http://www.joke4me.com [email_address] Happy Tiger Year!