Better code in JavaScript

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 overridden function 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 • “Undeﬁned” 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: { function debug(pMessage) { debug: function(pMessage) { if (window.console != null) { VS if (window.console != null) { window.console(pMessage); window.console(pMessage); } } } } } } } tekSymmetry

Good or Bad! Teks.FantasyFootball.Util. VS debug(“Hello world”) debug(“Hello world”) Good - Nothing going to be messed up with other libraries - Understandable, which “debug” function - Easy to group similar functionalities Bad - Increased line of codes initially tekSymmetry

Live example!

Live example (2)!

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; var log = new Logger(“Test”); log.debug(‘hello world’); // Member method debug = function(pMessage) { if (this.mType == ‘debug’) { this.log(this.mType, this.mName, pMessage); } } } 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”) • $(quot;#objectIDquot;).load(quot;/test/urlquot;, { 'params []': [quot;value1quot;, quot;value2quot;] } ); • $.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

Thanks jQuery API doc for few examples! tekSymmetry

Better code in JavaScript

by nhm taveer hossain khan

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 4

Statistics