better code in javascript

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

Upload: nhm-taveer-hossain-khan

Post on 15-May-2015

832 views

Category:

Technology


0 download

DESCRIPTION

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

TRANSCRIPT

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!