More Related Content Similar to JavaScript Like It’s 2013 (20) More from OutSystems (20) JavaScript Like It’s 201316. “The nice thing about standards
is that you have so many to
choose from.”
18. 1995: JavaScript (Netscape)
1996: JScript (Microsoft)
1997: ECMA-262 Ed1
1999: ECMA-262 Ed3 (ES3 - Baseline)
2006: Browser compatibility (lack thereof)
2013: Now!
37. False Friends
var d = new Date("2013-05-08")
d.getYear()
d.getMonth()
d.getDay()
// 113
// 4
// 3
1900+Y
[0-11]
day of week
39. False Friends
var d = new Date("2013-05-08")
d.getYear()
d.getMonth()
d.getDay()
// 113
// 4
// 3
40. False Friends
var d = new Date("2013-05-08")
d.getFullYear()
d.getMonth()
d.getDay()
// 2013
// 4
// 3
41. False Friends
var d = new Date("2013-05-08")
d.getFullYear()
d.getMonth()+1
d.getDay()
// 2013
// 5
// 3
42. False Friends
var d = new Date("2013-05-08")
d.getFullYear()
d.getMonth()+1
d.getDate()
// 2013
// 5
// 8
46. False Friends
// the === operator
"a" === "a" // true
false === 0 // false
0 === "" // false
// there’s also the !== operator
47. #1 Know your language
If you lack absolute certainty
READ THE DOCS!
https://developer.mozilla.org/en/docs/JavaScript
50. #2 Know your tools
Image credit: http://www.flickr.com/photos/justinbaeder/5317820857/
52. #2 Know your tools
• Don’t trust errors
• Console-test everything
• Change as you go!
• See documentation for Firebug and DevTools
57. #3 Build for the future
if ( BrowserIsIE() ) {
e.attachEvent( ... );
} else {
e.addEventListener( ... );
}
58. #3 Build for the future
if ( BrowserIsIE() ) {
e.attachEvent( ... );
} else {
e.addEventListener( ... );
}
62. #3 Build for the future
if ( BrowserIsIE() ) {
e.attachEvent( ... );
} else {
e.addEventListener( ... );
}
63. #3 Build for the future
if ( e.addEventListener ) {
e.addEventListener( ... );
} else {
e.attachEvent( ... );
}
65. #3 Build for the future
if ( ? ) {
e.style.boxShadow =
"0 0 4px red";
} else {
e.style.border = "solid 1px red";
}
66. #3 Build for the future
if ( Modernizr.boxshadow ) {
e.style.boxShadow =
"0 0 4px red";
} else {
e.style.border = "solid 1px red";
}
67. #3 Build for the future
Feature Detection instead of
Browser Detection
http://modernizr.com/