JavaScript Misunderstood
Upcoming SlideShare
Loading in...5
×
 

JavaScript Misunderstood

on

  • 3,482 views

Why JavaScript is the most Misunderstood Language and some of its Best practices.

Why JavaScript is the most Misunderstood Language and some of its Best practices.

Statistics

Views

Total Views
3,482
Views on SlideShare
3,443
Embed Views
39

Actions

Likes
2
Downloads
31
Comments
0

10 Embeds 39

http://www.cheng-fu.com 19
http://www.linkedin.com 6
http://ktchae83.blogspot.com 4
http://midgetontoes.com 3
http://www.slideshare.net 2
http://www.midgetontoes.com 1
http://localhost 1
http://d99.puppyred.com 1
http://ktchae.puppyred.com 1
https://www.linkedin.com 1
More...

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 Misunderstood JavaScript Misunderstood Presentation Transcript

  • JavaScript : Misunderstood Bhavya Siddappa www.bhavyavoice.blogspot.com
  • Agenda  Introduction  Best practices  Some cool stuff  Conclusions
  • The world’s most misunderstood language  The name  it is originally called LiveScript  JavaScript is not a subset of Java nor interpreted version of Java  Too many versions  ECMA committee  Bad official specification  Bad reputation – broken language?  Lousy implementation: Browsers do suck Implementations of CSS, events, ... broken Language itself is pretty reliable  Blame IE
  • JavaScript bad parts  Design errors  overloading of +, clobbered global variables, semicolon insertion...  24.88 + 4.35 -> 29.229999999999997  0 0.0 ”0” “0.0” null undefined are all false  0.0 + ”0” -> ”00”  No class public private keywords  No package keyword either  How does this work anyway?
  • JavaScript Good parts  Most used scripting language  Every browser, many OSes(Windows, Dashboard), XUL(Mozilla), Flash(ActionScript), Server-side(Phobos, ASP, Rhino), ...  Great for UI-coding  Flexible and powerful  OO, functional  Closures + Anonymous functions  Everything is an object (including functions)  Prototype-based inheritance  AJAX makes it a must-know JavaScript can be used to do good stuff
  • Agenda  Introduction  Best practices  Some cool stuff  Conclusions
  • Always use 'var'  Keep your scopes straight with var keyword  Global scope  Function scope var i=0; // Global variable function test() { for (i=0; i<10; i++) { alert("Hello World!"); } } test(); alert(i); // i is ???
  • Always use 'var'  Keep your scopes straight with var keyword  Global scope  Function scope function test() { for (var i=0; i<10; i++) { alert("Hello World!"); } } // i is 10
  • Pervasive Scope var x= 9; function foo() { alert(x); var x = 10; alert(x); }; foo();  Result : ???
  • Pervasive Scope var x= 9; function foo() { alert(x); var x = 10; alert(x); }; foo();  Result: undefined; 10;  Expected: 9; 10;
  • Detect Features, Not Browser if (document.getElementById) { var element = document.getElementById ('MyId'); } else { alert(“ Your Browser lacks the capabilities required to run this script !”); }
  • Test For an Element's Existence if ("innerHTML" in document.getElementById("someDiv")) { // code that works with innerHTML }
  • Don't Make Assumptions  NEVER rely on JavaScript  Don't expect JavaScript to be available but make it a nice-to-have rather than a dependency  Expect other scripts to try to interfere with your functionality and keep the scope of your scripts as secure as possible.  Ex. JavaScript is enabled but is blocked by a firewall or security policy
  • Don't use with() with (document.forms["mainForm"].elements) {  Bad input1.value = "junk"; input2.value = "junk"; } var elements = document.forms["mainForm"].elements; elements.input1.value = "junk"; elements.input2.value = "junk";  Good
  • Eval is Evil  Most powerful and possibly most misused method in JavaScript  Like... “swatting a fly with a sledgehammer”  Every time eval() called, compilation occurs  When is it ok? Math expressions, serialization, dynamic loading of code
  • Release Objects When Done  Ex. Initialization Function var foo = function() { // code that makes this function work delete foo; } window.addEventListener('load', foo, false);
  • Square Bracket Notation  Dot notation: MyObject.property  Bracket notation: MyObject[“property”] MyObject[“value”+i] OK! MyObject.value+i Fail!  Forms document.forms["formname"].elements["inputname"] OK! document.formname.inputname Bad!
  • Unobtrusive JavaScript  We separate Presentation (CSS) from Content (XHTML)  We separate Behavior (JS) from Content  Place CSS and JavaScript in separate files  Dynamically add behavior instead of hard- coding
  • Unobtrusive JavaScript  Bad <a href="JavaScript:alert('You clicked!')">Click Me!</a> <a href="#" onclick="alert('You clicked!')">Click Me!</a>  OK <a href="clicked.html" onclick="alert('You clicked!')"> Click Me </a>  Good var div = document.getElementById('clickMe'); div.onclick = new Function("processClick(this)"); <a id=”clickMe” href=”clicked.html”>Click Me!</a>
  • Use Object Oriented JavaScript  Better reusability and organization  Allows for dynamic loading of objects  Write in a style more familiar to Java programmers
  • Object Oriented Example function Cart() { this.items = []; } function Item (id,name,desc,price) { this.id = id; this.name = name; this.desc = desc; this.price = price; } var cart = new Cart(); cart.items.push(new Item("id-1","Paper","something you write on",5)); cart.items.push(new Item("id-2","Pen", "Something you write with",3)); var total = 0; for (var l == 0; l < cart.items.length; l++ ) { total = total + cart.items[l].price; }
  • Use Object Hierarchies  In JavaScript names may collide  In Java we have packages to prevent this  JavaScript does not have packages  You can use JavaScript objects to organize related objects and prevent naming collisions.
  • Object Hierarchies Example // create the base BLUEPRINTS object if it does not exist. if (!BLUEPRINTS) { var BLUEPRINTS = new Object(); } // define Cart under BLUEPRINTS BLUEPRINTS.Cart = function () { this.items = []; this.addItem = function(id, qty) { this.items.push(new Item(id, qty)); } function Item (id, qty) { this.id = id; this.qty = qty; } } // create an instance of the cart and add an item var cart = new BLUEPRINTS.Cart(); cart.addItem("id-1", 5); cart.addItem("id-2", 10);
  • Use the Prototype Property  Use to define shared behavior and to extend objects  The prototype property is a feature of the  JavaScript language  The property is available on all objects
  • Prototype Property Example function Cart() { this.items = [ ]; } function Item (id,name,desc,price)) { this.id = id; this.name = name; this.desc = desc; this.price = price; } //SmartCart extends the Cart object inheriting its properties and adds a total property Function SmartCart() { this.total = 0; } SmartCart.prototype = new Cart();
  • Object Literals  Object literals are objects defined using braces that contain a set of comma separated key/value pairs, similar to a map in Java  Example  {key1: “stringValue”, key2: 2, key3: ['blue', 'yellow']  Object literals can be used as parameters  Don't confuse them with JSON, which has a similar syntax
  • Reduce the Size of JavaScript File  Remove the whitespace and shorten the name of variables and functions in a file  While developing, don't compress so that debugging is easier  When ready to deploy, consider compressing your JavaScript files  Use minimized (compressed) versions of 3rd party libraries when available  Example tool for compression: ShrinkSafe
  • Agenda  Introduction  Best practices  Some cool stuff  Conclusions
  • JSON  Becoming de-facto standard in transferring information for AJAX applications  Allows us to make cross-domain requests if server supports it  Perfect for serializing JavaScript objects
  • Getters and Setters in JavaScript 1.5 Technology  Define functions to be invoked when a property is accessed  Transparent to the client var squareProto = { side: 0, get area() { return this.side * this.side; } }; var mySquare = object(squareProto); mySquare.side = 5; ⊳ mySquare.area - > 25
  • OpenSocial  Common social networking API  Write apps that work with any OpenSocial enable website  Develop OpenSocial apps using only JavaScript, HTML, and CSS
  • Zembly  Build widgets, applications with JavaScript, HTML and CSS  OpenSocial soon!  Now publicly available, go try it out, win a prize!
  • Agenda  Introduction  Best practices  Some cool stuff  Conclusions
  • Conclusions  Take time to learn JavaScript and use best practices  Prototype-based object system with object()  Learn from the masters  Let NetBeans help you!