Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
What is our
        understanding?
“God will assign javascript bugs to those who will go to
                        HELL!”...
Then what’s more?
• Browser compatibility sux!
• Stupid scripting language
• Hard to manage!
• Verbose
• No Object Oriente...
Browser compatibility?
• IE6 ? Organized, Better, Understandable and
  Humanized code doesn’t hurt at all!
• “Operation ca...
Stupid scripting
         language?
• Not easy to debug!
• No smart IDE
• Not standard, easy to write spaghetti code
• Bet...
Hard to manage!

• Do you really think that?
• How hard?
• How strong intention you have?
• How about this... (next slide)...
Example - 1
•   var Teks = {
      FantasyFootball: {
                                             •
        Util: {      ...
Good or Bad!
  Teks.FantasyFootball.Util.
                               VS     debug(“Hello world”)
    debug(“Hello worl...
Live example!
Live example (2)!
Object Oriented
     Programming (!)
• Javascript is Object oriented programming
  platform (Real object)
• Everything is ...
Object Oriented?
•   // Constructor method
    function Logger(pName) {
      this.mType = /* other logic */;
      this.m...
Few notes


• Use javascript as separate concerns
• Use javascript framework such as jQuery,
  Prototype



              ...
Separate concerns!

• Don’t embed javascript on HTML
• Keep javascript code on “application.js” (for
  rails dev)
• Apply ...
jQuery!
• document.getElementById(‘div_id’) VS $
  (‘#div_id’)
• ulElement.parent.getElementsByTagName
  (“li”) VS $ulElem...
jQuery (2)!
• document.getElementById(‘form1’).submit()
  VS $(‘#form1’).trigger(‘submit’)
• new XMLHttpRequest(...) VS $....
jQuery (3) - fun!
• $(“#link1”).load(“http://abc.com/url”)
• $(quot;#objectIDquot;).load(quot;/test/urlquot;, { 'params
  ...
jQuery (4) - essentials!

• $(‘#div1’).css(‘display’, ‘none’)
• $(‘#div2’).toggle();
• $(‘#div3’).hide();
• $(‘#div3’).sho...
jQuery (5) - custom
        effect

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



              ...
Must Have on your
         PC!!
• jQuery API doc application
 • http://api.jquery.com/
• Read at least -
 • http://www.sit...
Thanks
jQuery API doc for few examples!




                           tekSymmetry
Upcoming SlideShare
Loading in …5
×

Better code in JavaScript

1,251 views

Published on

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

Published in: Technology
  • Be the first to comment

Better code in JavaScript

  1. 1. Better code in JavaScript nhm tanveer hossain khan (hasan) tekSymmetry
  2. 2. 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
  3. 3. What is our understanding? “God will assign javascript bugs to those who will go to HELL!” tekSymmetry
  4. 4. Then what’s more? • Browser compatibility sux! • Stupid scripting language • Hard to manage! • Verbose • No Object Oriented Programming! • so anything more....? tekSymmetry
  5. 5. 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
  6. 6. Stupid scripting language? • Not easy to debug! • No smart IDE • Not standard, easy to write spaghetti code • Better! write less javascript • Performance sux! tekSymmetry
  7. 7. Hard to manage! • Do you really think that? • How hard? • How strong intention you have? • How about this... (next slide) tekSymmetry
  8. 8. 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
  9. 9. 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
  10. 10. Live example!
  11. 11. Live example (2)!
  12. 12. 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
  13. 13. 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
  14. 14. Few notes • Use javascript as separate concerns • Use javascript framework such as jQuery, Prototype tekSymmetry
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. jQuery (4) - essentials! • $(‘#div1’).css(‘display’, ‘none’) • $(‘#div2’).toggle(); • $(‘#div3’).hide(); • $(‘#div3’).show(); tekSymmetry
  20. 20. jQuery (5) - custom effect • $(‘#div1’).animate({ width: “70%”, opacity: 0.4 }, 1500) tekSymmetry
  21. 21. 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
  22. 22. Thanks jQuery API doc for few examples! tekSymmetry

×