Better code in JavaScript

22
tekSymmetry Better code in JavaScript nhm tanveer hossain khan (hasan)

description

This presentation was prepared for tekSymmetry development team to train the basic javascript and better coding practice.

Transcript of Better code in JavaScript

Page 1: Better code in JavaScript

tekSymmetry

Better code in JavaScript

nhm tanveer hossain khan (hasan)

Page 2: Better code in JavaScript

tekSymmetry

How many of us write code in javascript?

• // global scoped function// no other script can’t use the // same name it’d be overriddenfunction doSomething(p1, p2) { // big chunk of document.getElementById // messed up innerHTML = “<b>foo.. // dirty duplicate code}

Page 3: Better code in JavaScript

tekSymmetry

What is our understanding?

“God will assign javascript bugs to those who will go to HELL!”

Page 4: Better code in JavaScript

tekSymmetry

Then what’s more?

• Browser compatibility sux!

• Stupid scripting language

• Hard to manage!

• Verbose

• No Object Oriented Programming!

• so anything more....?

Page 5: Better code in JavaScript

tekSymmetry

Browser compatibility?

• IE6 ? Organized, Better, Understandable and Humanized code doesn’t hurt at all!

• “Operation canceled” (IE6)

• Check out DOM related script

• “Undefined” use “var” while declaring variable

• Check null wherever possible

Page 6: Better code in JavaScript

tekSymmetry

Stupid scripting language?

• Not easy to debug!

• No smart IDE

• Not standard, easy to write spaghetti code

• Better! write less javascript

• Performance sux!

Page 7: Better code in JavaScript

tekSymmetry

Hard to manage!

• Do you really think that?

• How hard?

• How strong intention you have?

• How about this... (next slide)

Page 8: Better code in JavaScript

tekSymmetry

Example - 1

• var Teks = { FantasyFootball: { Util: { debug: function(pMessage) { if (window.console != null) { window.console(pMessage); } } } }}

• function debug(pMessage) { if (window.console != null) { window.console(pMessage); }}

VS

Page 9: Better code in JavaScript

tekSymmetry

Good or Bad!Teks.FantasyFootball.Util.

debug(“Hello world”)debug(“Hello world”)VS

- Nothing going to be messed up with other libraries - Understandable, which “debug” function- Easy to group similar functionalities

- Increased line of codes initially

Good

Bad

Page 10: Better code in JavaScript

Live example!

Page 11: Better code in JavaScript

Live example (2)!

Page 12: Better code in JavaScript

tekSymmetry

Object Oriented Programming (!)

• Javascript is Object oriented programming platform (Real object)

• Everything is prototyping

• No class, everything is object

• Every function is prototype able

• example goes (on next slide...)

Page 13: Better code in JavaScript

tekSymmetry

Object Oriented?• // Constructor method

function Logger(pName) { this.mType = /* other logic */; this.mName = pName; // Member method debug = function(pMessage) { if (this.mType == ‘debug’) { this.log(this.mType, this.mName, pMessage); } }}

var log = new Logger(“Test”);log.debug(‘hello world’);

Page 14: Better code in JavaScript

tekSymmetry

Few notes

• Use javascript as separate concerns

• Use javascript framework such as jQuery, Prototype

Page 15: Better code in JavaScript

tekSymmetry

Separate concerns!

• Don’t embed javascript on HTML

• Keep javascript code on “application.js” (for rails dev)

• Apply events based on content and context.

Page 16: Better code in JavaScript

tekSymmetry

jQuery!

• document.getElementById(‘div_id’) VS $(‘#div_id’)

• ulElement.parent.getElementsByTagName(“li”) VS $ulElement.parent().children(“li”)

• <body onload=...> VS $(document).ready(function() {})

• <a click=”...”> VS $(‘#a_link’).bind(‘click’, function() {...}

Page 17: Better code in JavaScript

tekSymmetry

jQuery (2)!

• document.getElementById(‘form1’).submit() VS $(‘#form1’).trigger(‘submit’)

• new XMLHttpRequest(...) VS $.ajax({ type: “POST”, url: “/url/here”, data: “p1=v1&p2=v2”, success: function(pMsg) { }})

Page 18: Better code in JavaScript

tekSymmetry

jQuery (3) - fun!

• $(“#link1”).load(“http://abc.com/url”)

• $("#objectID").load("/test/url", { 'params[]': ["value1", "value2"] } );

• $.getScript(‘http://abc.com/url’, function(pData, pStatus) {...})

• $.getJSON(‘/test/url’, function(pData, pStatus) {...})

Page 19: Better code in JavaScript

tekSymmetry

jQuery (4) - essentials!

• $(‘#div1’).css(‘display’, ‘none’)

• $(‘#div2’).toggle();

• $(‘#div3’).hide();

• $(‘#div3’).show();

Page 20: Better code in JavaScript

tekSymmetry

jQuery (5) - custom effect

• $(‘#div1’).animate({ width: “70%”, opacity: 0.4}, 1500)

Page 21: Better code in JavaScript

tekSymmetry

Must Have on your PC!!

• jQuery API doc application

• http://api.jquery.com/

• Read at least -

• http://www.sitepoint.com/article/oriented-programming-1/

Page 22: Better code in JavaScript

tekSymmetry

ThanksjQuery API doc for few examples!