better code in javascript
DESCRIPTION
This presentation was prepared for tekSymmetry development team to train the basic javascript and better coding practice.TRANSCRIPT
tekSymmetry
Better code in JavaScript
nhm tanveer hossain khan (hasan)
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}
tekSymmetry
What is our understanding?
“God will assign javascript bugs to those who will go to HELL!”
tekSymmetry
Then what’s more?
• Browser compatibility sux!
• Stupid scripting language
• Hard to manage!
• Verbose
• No Object Oriented Programming!
• so anything more....?
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
tekSymmetry
Stupid scripting language?
• Not easy to debug!
• No smart IDE
• Not standard, easy to write spaghetti code
• Better! write less javascript
• Performance sux!
tekSymmetry
Hard to manage!
• Do you really think that?
• How hard?
• How strong intention you have?
• How about this... (next slide)
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
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
Live example!
Live example (2)!
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...)
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’);
tekSymmetry
Few notes
• Use javascript as separate concerns
• Use javascript framework such as jQuery, Prototype
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.
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() {...}
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) { }})
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) {...})
tekSymmetry
jQuery (4) - essentials!
• $(‘#div1’).css(‘display’, ‘none’)
• $(‘#div2’).toggle();
• $(‘#div3’).hide();
• $(‘#div3’).show();
tekSymmetry
jQuery (5) - custom effect
• $(‘#div1’).animate({ width: “70%”, opacity: 0.4}, 1500)
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/
tekSymmetry
ThanksjQuery API doc for few examples!