Better code in JavaScript
-
Upload
nhm-taveer-hossain-khan -
Category
Technology
-
view
853 -
download
0
description
Transcript of Better code in JavaScript
![Page 1: Better code in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/1.jpg)
tekSymmetry
Better code in JavaScript
nhm tanveer hossain khan (hasan)
![Page 2: Better code in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/2.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/3.jpg)
tekSymmetry
What is our understanding?
“God will assign javascript bugs to those who will go to HELL!”
![Page 4: Better code in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/4.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/5.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/6.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/7.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/8.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/9.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/10.jpg)
Live example!
![Page 11: Better code in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/11.jpg)
Live example (2)!
![Page 12: Better code in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/12.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/13.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/14.jpg)
tekSymmetry
Few notes
• Use javascript as separate concerns
• Use javascript framework such as jQuery, Prototype
![Page 15: Better code in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/15.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/16.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/17.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/18.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/19.jpg)
tekSymmetry
jQuery (4) - essentials!
• $(‘#div1’).css(‘display’, ‘none’)
• $(‘#div2’).toggle();
• $(‘#div3’).hide();
• $(‘#div3’).show();
![Page 20: Better code in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/20.jpg)
tekSymmetry
jQuery (5) - custom effect
• $(‘#div1’).animate({ width: “70%”, opacity: 0.4}, 1500)
![Page 21: Better code in JavaScript](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/21.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052823/5555aaeed8b42afe5d8b474b/html5/thumbnails/22.jpg)
tekSymmetry
ThanksjQuery API doc for few examples!