Javascript Ks
Upcoming SlideShare
Loading in...5
×
 

Javascript Ks

on

  • 1,048 views

 

Statistics

Views

Total Views
1,048
Views on SlideShare
1,045
Embed Views
3

Actions

Likes
0
Downloads
2
Comments
0

1 Embed 3

http://www.vyre.com 3

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Javascript Ks Javascript Ks Presentation Transcript

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