Javascript Ks

759 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
759
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Javascript Ks

    1. 1. Javascript Top level introduction
    2. 2. Agenda <ul><li>What is JavaScript? </li></ul><ul><li>Types </li></ul><ul><li>Class like structures </li></ul><ul><li>Namespacing /global objects </li></ul><ul><li>Designing widgets </li></ul><ul><li>JSON </li></ul><ul><li>Event handling </li></ul><ul><li>Libraries </li></ul>
    3. 3. What is javascript? <ul><li>Dynamic loosely typed scripting language </li></ul><ul><li>C/Java like syntax </li></ul><ul><li>Class free, prototypical (copies of other objects) </li></ul><ul><li>The language is good </li></ul><ul><li>Browser implementations not so good. </li></ul><ul><li>Good for reflective/ Introspective techniques </li></ul>
    4. 4. Types <ul><li>Object </li></ul><ul><ul><li>Array </li></ul></ul><ul><ul><li>function (first-class, only construct with scope) </li></ul></ul><ul><li>Number </li></ul><ul><li>String </li></ul><ul><ul><li>Immutable (like java) </li></ul></ul><ul><ul><li>Missing methods (i.e. trim()) </li></ul></ul><ul><li>boolean </li></ul><ul><li>null </li></ul><ul><li>undefined ( nullpointer) </li></ul><ul><li>Detect types using typeof </li></ul>
    5. 5. Class like structures <ul><li>Person = function (name,age) { // constructor </li></ul><ul><li>this.name = name; //class variables </li></ul><ul><li>this.age = age; </li></ul><ul><li>}; </li></ul><ul><li>Person.MALE = “male”; //static variables </li></ul><ul><li>Person.FEMALE=“female”; </li></ul><ul><li>Person.prototype = { </li></ul><ul><li>//methods </li></ul><ul><li>toString : function (){ </li></ul><ul><li>return this.name + &quot; &quot; + this.age; </li></ul><ul><li>} </li></ul><ul><li>}; </li></ul><ul><li>var ash = new Person(&quot;Ash&quot;,23); //instantiations </li></ul>
    6. 6. Global object <ul><li>alert(“hi”) </li></ul><ul><ul><li>window.alert(“hi”) </li></ul></ul><ul><ul><li>window[“alert”](“hi”); </li></ul></ul><ul><li>window[“addSelectItemLink”+portletId](linkId,itemId); </li></ul>
    7. 7. Do’s and don’ts of Constructors <ul><li>[BAD] </li></ul><ul><ul><li>var cuboid = new Cuboid(11,22,11,45,11); </li></ul></ul><ul><li>[GOOD] </li></ul><ul><ul><li>var cuboid = new Cuboid({ </li></ul></ul><ul><ul><li>width:11, height:22, depth:11, weight:45 </li></ul></ul><ul><ul><li>}); </li></ul></ul>
    8. 8. Namespacing <ul><li>Don’t clutter the global object (window) </li></ul><ul><li>Namespace !! </li></ul><ul><ul><li>VYRE = {}; </li></ul></ul><ul><ul><li>VYRE.Search = {}; </li></ul></ul><ul><ul><li>VYRE.Basket = {}; </li></ul></ul><ul><ul><li>VYRE.Linker = function (){ }; </li></ul></ul>
    9. 9. Bad practices <ul><li>var ob = { </li></ul><ul><li> prop1:”hi”, </li></ul><ul><li>prop2:”hi again ” , }; </li></ul><ul><li>for ( i = 0; i< collection.length; i++); </li></ul><ul><ul><li>for ( var i = 0; i< collection.length; i++); </li></ul></ul><ul><li>setTimeout(“performFunction()”,500); </li></ul><ul><ul><li>setTimeout(performFunction,500); </li></ul></ul><ul><li>document.write </li></ul><ul><li>eval </li></ul>
    10. 10. Widgets/Complex UI Design <ul><li>Good UI relies on a good domain model </li></ul><ul><li>Don’t jump straight into visuals </li></ul><ul><li>Think carefully about event handling </li></ul><ul><li>Seperate concerns by creating small stateful objects </li></ul><ul><li>Maximise collection usage </li></ul><ul><ul><li>Arrays if index and looping is needed </li></ul></ul><ul><ul><li>Maps (Associative Arrays) for lookups </li></ul></ul>
    11. 11. JSON (Javascript notation) <ul><li>In xml </li></ul><ul><li><person> </li></ul><ul><li><firstName>Subbu</firstName> </li></ul><ul><li><lastName>Allamaraju</lastName> </li></ul><ul><li></person> </li></ul><ul><li>JSON </li></ul><ul><li>({ </li></ul><ul><li>&quot;firstName&quot; : &quot;Subbu&quot;, </li></ul><ul><li>&quot;lastName&quot; : &quot;Allamaraju&quot; </li></ul><ul><li>}); </li></ul>
    12. 12. JSON cont.. <ul><li>Is native javascript </li></ul><ul><li>Is defacto standard for data interchange </li></ul><ul><li>Is faster and less verbose than xml </li></ul><ul><li>But more descriptive. </li></ul><ul><li>JSONstring is a utility for marshalling/unmarshalling </li></ul><ul><li>Used in ajax framework for cookie management. </li></ul>
    13. 13. 3 rd Party Libraries <ul><li>Component based </li></ul><ul><ul><li>YUI </li></ul></ul><ul><ul><li>ExtJs </li></ul></ul><ul><li>Page enhancement </li></ul><ul><ul><li>JQuery </li></ul></ul><ul><li>OOP / with visuals </li></ul><ul><ul><li>Prototype & scripacolous </li></ul></ul><ul><ul><li>mootools </li></ul></ul>
    14. 14. Debugging <ul><li>Firebug(firefox) </li></ul><ul><ul><li>console.log() </li></ul></ul><ul><ul><li>profile </li></ul></ul><ul><ul><li>Breakpoints </li></ul></ul><ul><li>Visual studio ( ie6/7/8) </li></ul>

    ×