Better code in JavaScript

1,123 views
999 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,123
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
40
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

×