Your SlideShare is downloading. ×
0
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
JavaScript, Beyond the Curly Braces
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript, Beyond the Curly Braces

3,857

Published on

Presentation done for the WI.NET Users Group in Milwaukee, WI. July 14th 2009

Presentation done for the WI.NET Users Group in Milwaukee, WI. July 14th 2009

Published in: Technology, Business
1 Comment
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,857
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
1
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • In trivia we will give an abridged version of JS history and where it stands todayDrive by shooting: just to make sure we mention the basic data types we deal with all the time. The one item that can be surprisingly different and longer than you might expect are the functions. We will spend a little bit of time talking about them.As the title of the presentation suggests, it can be easy to look at JS syntax and its name and try to map everything else to C#, Java, C, etc. We will see that this is a big mistake and we will point out very important differences.In idiomatic JS we will see what proficient JS looks likeWe will take some time to explain how object creation and inheritance works in JS. If you haven’t read about it before it might just be completely different from anything you saw.JS lives in a very hostile environment. In coding conventions and pitfalls we will learn tidbits of advice that can spare you from a lot of grief.Finally, all the above has just been preparation to really get to the more practical goal. Understanding jQuery and using it to write less and better JS code. We will see that jQuery has good documentation but it can be hard to read if you’re not up to speed with some of the previous topics. Event the jQuery source code is very readable once you get comfortable with idiomatic JS.
  • In trivia we will give an abridged version of JS history and where it stands todayDrive by shooting: just to make sure we mention the basic data types we deal with all the time. The one item that can be surprisingly different and longer than you might expect are the functions. We will spend a little bit of time talking about them.As the title of the presentation suggests, it can be easy to look at JS syntax and its name and try to map everything else to C#, Java, C, etc. We will see that this is a big mistake and we will point out very important differences.In idiomatic JS we will see what proficient JS looks likeWe will take some time to explain how object creation and inheritance works in JS. If you haven’t read about it before it might just be completely different from anything you saw.JS lives in a very hostile environment. In coding conventions and pitfalls we will learn tidbits of advice that can spare you from a lot of grief.Finally, all the above has just been preparation to really get to the more practical goal. Understanding jQuery and using it to write less and better JS code. We will see that jQuery has good documentation but it can be hard to read if you’re not up to speed with some of the previous topics. Event the jQuery source code is very readable once you get comfortable with idiomatic JS.
  • Transcript

    • 1. Beyond the Curly Braces<br />Advanced JavaScript<br />Sergio Pereira<br />WI.NET Users Group – July 14th2009<br />
    • 2. WHOIS<br />About Sergio<br />sergio@sergiopereira.com<br />http://sergiopereira.com/blog<br />@sergiopereira<br />http://chicagoalt.net<br />
    • 3. agenda<br />
    • 4. Advanced javascript<br />
    • 5. Advanced javascript<br />BUT FIRST THE BASICS<br />
    • 6. Advanced javascript<br />Once upon a time…<br /><ul><li>1995: Mocha, LiveScript, JavaScript (Netscape)
    • 7. 1995: NS Navigator 2.0 (Java + JavaScript)
    • 8. 1995: Confusion started
    • 9. 1996: MS IE 3.0 calls it JScript (not quite the same)
    • 10. 1997: ECMA-262, ECMAScript</li></li></ul><li>Advanced javascript<br />World&apos;s Most Misunderstood Language<br /><ul><li>The Name
    • 11. Mispositioning
    • 12. Design Errors
    • 13. Bad Implementations
    • 14. The Browser
    • 15. Bad Books
    • 16. Substandard Standard
    • 17. JavaScript is a Functional Language</li></li></ul><li>Advanced javascript<br />But The Truth Is<br /><ul><li>JavaScript is not a toy
    • 18. Solves real problems as a real language
    • 19. Quite fancy sometimes
    • 20. Not freaking Java (or C#), OK?</li></li></ul><li>Advanced javascript<br />JavaScript in a Snapshot<br /><ul><li>Dynamic
    • 21. Objects: glorified containers
    • 22. Prototypal inheritance
    • 23. Textual delivery
    • 24. Lambdas
    • 25. Global variables tie it all</li></li></ul><li>Advanced Javascript<br />Data Types<br />Primitive Types (value types)<br />String<br />Number<br />Boolean<br />(true, false)<br />Undefined<br />(undefined)<br />Null<br />(null)<br />Objects (reference types)<br />Object<br />Array<br />Date<br />Boolean<br />Errors…<br />Math<br />Reg. Expression<br />(RegExp)<br />Function<br />Number<br />String<br />Global<br />
    • 26. Advanced Javascript<br />Undefined<br />(undefined)<br />Null<br />(null)<br />Default value for variables, parameters,<br /> and missing object properties<br />var name = &quot;Homer&quot;;<br />varhairColor = null;<br />var city = &quot;Springfield&quot;;<br />var state;<br />
    • 27. Advanced Javascript<br />Number<br />(IEEE-754, 64-bit, Double)<br />Boolean<br />(true, false)<br />//integer literals<br />varage = 26;<br />vartemperature = -8;<br />varpermission = 0775; //=509<br />varflags = 0x1c; //=28<br />//Double prec. literals<br />varheight = 6.15;<br />varfactor = 5.73e-1; //=.573<br />//NaN<br />varwhat = &quot;x&quot;/3; //= NaN<br />varfirstTime = true;<br />varfound = false;<br />String<br />varfirstName = &quot;Selma&quot;;<br />varlastName = &apos;Bouvier&apos;;<br />
    • 28. Advanced Javascript<br />Array<br />varnames = new Array();<br />names[0] = &apos;Steve&apos;;<br />names[1] = &apos;Chuck&apos;;<br />names[names.length] = &apos;Jeff&apos;;<br />names.push(&apos;Jason&apos;);<br />varnames = [ ];<br />//repeat as above…<br />//or, preferred<br />varnames = [&apos;Steve&apos;, &apos;Chuck&apos;,<br /> &apos;Jeff&apos;, &apos;Jason&apos;];<br />
    • 29. Advanced Javascript<br />Date<br />vartoday = new Date();<br />//milliseconds since 1/1/1970<br />vard = new Date(1234);<br />//explicit<br />var xmas = new Date(2008, 11, 25);<br />//parsing, locale-dependent, avoid<br />var xmas = new Date(Date.parse(&apos;12/25/2008&apos;));<br />
    • 30. Advanced Javascript<br />RegExp<br />varpatt1 = new RegExp(&apos;{2}$&apos;);<br />varpatt2 = /d{2}$/;<br />varpatt3 = new RegExp(&apos;{2}$&apos;, &apos;gi&apos;);<br />varpatt4 = /d{2}$/gi;<br />alert(patt1.test(&apos;abc78&apos;)); //  true<br />&apos;12a78&apos;.replace(/d{2}$/, &apos;XYZ&apos;); // &apos;12aXYZ&apos;<br />&apos;a1b2c7d8e&apos;.split(/d/); // [&apos;a&apos;,&apos;b&apos;,&apos;c&apos;,&apos;d&apos;,&apos;e&apos;]<br />
    • 31. Advanced Javascript<br />Function<br />//normal declaration<br />function play(chord) {<br /> alert(&apos;playing &apos; + chord);<br />} <br />//normal invocation<br />play(&apos;Cm&apos;); //  &apos;playing Cm&apos;<br />
    • 32. Advanced Javascript<br />Function<br />//functions are data as well<br />function f1() {<br /> alert(&apos;inside f1&apos;);<br />}<br />var f2 = f1;<br />function run( someFunc ){<br /> someFunc();<br />}<br />run( f2 ); //  &apos;inside f1&apos;<br />
    • 33. Advanced Javascript<br />Function<br />//functions are data as well<br />function f1() {<br /> alert(&apos;inside f1&apos;);<br />}<br />var f2 = f1;<br />function run( someFunc ){<br /> someFunc();<br />}<br />run( f2 ); //  &apos;inside f1&apos;<br />
    • 34. Advanced Javascript<br />Function<br />//functions don&apos;t need a name<br />function run( someFunc ){<br /> someFunc();<br />}<br />run(function () {<br /> alert(&apos;inside function&apos;);<br />}); //  &apos;inside function&apos;<br />
    • 35. Advanced Javascript<br />Function<br />//functions don&apos;t need a name<br />function run( someFunc ){<br /> someFunc();<br />}<br />run( function () {<br /> alert(&apos;inside function&apos;);<br /> }<br />); //  &apos;inside function&apos;<br />
    • 36. Advanced Javascript<br />Function<br />//parameter lists are optional<br />function concat(){<br />var res = &apos;&apos;;<br />for (var i=0; i&lt;arguments.length; i++) {<br /> res += arguments[i];<br /> }<br />return res;<br />}<br />alert( concat(123, &apos;abc&apos;, [7, 8, 9]) );<br />//  &apos;123abc7,8,9&apos;<br />
    • 37. Advanced Javascript<br />Function<br />//can be nested<br />function prettyPrint(value, currency, rate){<br />function formatCurr(num) {<br />returnnum + &apos; &apos; + currency;<br /> } <br />function convert() {<br />return rate * value;<br /> }<br />var converted = convert(value);<br />var text = formatCurr(converted);<br /> alert(text);<br />}<br />prettyPrint(10.5, &apos;EUR&apos;, 0.797); //  8.3685 EUR<br />
    • 38. Advanced Javascript<br />Function<br />//single-use, pinned functions<br />(function (someParameter){<br />//do something<br /> // …<br />})(someArgument);<br />Invocation!<br />
    • 39. Advanced Javascript<br />Invocation and the problem with this<br />function func(arg1, arg2){<br />return [this, arg1, arg2];<br />}<br />func(123, 456); //  [window, 123, 456]<br />var car = new Object();<br />car.start = func;<br />car.start(&apos;now&apos;, 9); //  [car, &apos;now&apos;, 9]<br />func.apply(car, [&apos;p1&apos;, &apos;p2&apos;]);//  [car, &apos;p1&apos;, &apos;p2&apos;]<br />func.call(car, &apos;p1&apos;, &apos;p2&apos;); //  [car, &apos;p1&apos;, &apos;p2&apos;]<br />
    • 40. Advanced Javascript<br />Inner functions and this<br />function calculateTotal(){<br />function getTax(){<br />return this.price * this.tax;<br /> }<br />returnthis.price + getTax() +<br />this.shippingCost;<br />}<br />var order = new Object();<br />order.price = 10.25; <br />order.tax = 0.07;<br />order.shippingCost = 5;<br />order.getTotal = calculateTotal;<br />order.getTotal();<br />
    • 41. Advanced Javascript<br />Inner functions and this (the fix)<br />function calculateTotal(){<br />var that = this; //  very common<br />function getTax(){<br />return that.price * that.tax;<br /> }<br />returnthis.price + getTax() +<br />this.shippingCost;<br />}<br />var order = new Object();<br />order.price = 10.25; <br />order.tax = 0.07;<br />order.shippingCost = 5;<br />order.getTotal = calculateTotal;<br />order.getTotal();<br />
    • 42. Advanced Javascript<br />Closures<br />function createFuncArray() {<br /> var funcs = [ ];<br /> for (var n=0; n&lt;10; n++) {<br /> funcs[n] = function () { <br /> alert(&apos;The number is &apos; + n); <br /> };<br /> }<br />return funcs;<br />}<br />var allFunctions = createFuncArray();<br />var show = allFunctions[6];<br />show();//  Can you guess?<br />
    • 43. Advanced javascript<br />Other Function-related gotchas<br /><ul><li>Variables are scoped by function, not block.
    • 44. No overloading, last one wins. Use default values.
    • 45. arguments and this not passed to inner functions.</li></li></ul><li>Advanced Javascript<br />Object<br />//Explicit assembly<br />varguitar = new Object();<br />guitar.stringCount = 6;<br />guitar.make = &apos;Gibson&apos;;<br />guitar.model = &apos;Les Paul&apos;; <br />alert(guitar.make); //  &apos;Gibson&apos;<br />
    • 46. Advanced Javascript<br />Object<br />//factory function<br />functioncreateGuitar(strings, make, model){<br />var guitar = new Object();<br /> guitar.stringCount = strings;<br /> guitar.make = make;<br /> guitar.model = model; <br />return guitar;<br />}<br />var g = createGuitar(6, &apos;Gibson&apos;, &apos;Les Paul&apos;);<br />alert(g.make); //  &apos;Gibson&apos;<br />
    • 47. Advanced Javascript<br />Object<br />//Object literal notation<br />var emptyObject = {};<br />var guitar = {<br /> stringCount: 6,<br /> make: &apos;Gibson&apos;,<br /> model: &apos;Les Paul&apos;<br />}; //  don&apos;t forget the &apos;;&apos;<br />//or<br />var guitar = {<br />&apos;stringCount&apos;: 6,<br />&apos;make&apos;: &apos;Gibson&apos;,<br />&apos;model&apos;: &apos;Les Paul&apos;<br />}; <br />
    • 48. Advanced Javascript<br />Object<br />//notation for methods<br />var guitar = {<br /> stringCount: 6,<br /> make: &apos;Gibson&apos;,<br /> model: &apos;Les Paul&apos;,<br />play: function (chord) {<br /> alert(chord + &apos; from a &apos; + this.model);<br /> }<br />}; <br />guitar.play(&apos;C#&apos;); //  &apos;C# from a Les Paul&apos;<br />
    • 49. Advanced Javascript<br />Object<br />Wait, was that JSON? Not exactly.<br />//JSON (see http://www.json.org/ )<br />var guitarJson = &quot;{ &quot; +<br />&quot; &apos;stringCount&apos;: 6, &quot; +<br />&quot; &apos;make&apos;: &apos;Gibson&apos;,&quot; + <br />&quot; &apos;colors&apos;: [ &apos;black&apos;, &apos;white&apos;, &apos;red&apos;],&quot; +<br />&quot; &apos;model&apos;: &apos;Les Paul&apos;&quot; +<br /> &quot;} &quot;; <br />JSON is basically a collection of name:value pairs.<br />- name is a string literal<br />- value can be: a string, a number, null, true, false, <br />an array, or another JSON object literal.<br />
    • 50. Advanced Javascript<br />Object<br />//constructor function<br />functionGuitar(strings, make, model){<br />this.stringCount = strings;<br />this.make = make;<br />this.model = model;<br />this.play = function (chord) {<br /> alert(chord + &apos; from a &apos; + this.model);<br /> };<br />}<br />var g = new Guitar(6, &apos;Gibson&apos;, &apos;Les Paul&apos;);<br />g.play(&apos;C#&apos;); //  &apos;C# from a Les Paul&apos;<br />
    • 51. Advanced Javascript<br />Member access notations<br />//good &apos;ole dot notation<br />guitar.model = &apos;Gibson&apos;;<br />var p = guitar.price;<br />//indexer notation<br />guitar[&apos;model&apos;] = &apos;Gibson&apos;;<br />guitar[&apos;play&apos;](&apos;C#&apos;);<br />
    • 52. Advanced javascript<br />What about document, window, etc?<br /><ul><li>Not JavaScript.
    • 53. Part of the DOM.
    • 54. Provided by the hosting environment.
    • 55. Like the DTE in VS macros and other objects in Office automation.</li></li></ul><li>Advanced javascript<br />What about XMLHttpRequest (xhr) ?<br /><ul><li>Not JavaScript.
    • 56. Not even part of the DOM.
    • 57. Provided by the hosting environment.</li></li></ul><li>Advanced javascript<br />Identifiers<br /><ul><li>Start with a letter, _ or $ followed by more of these and numbers.
    • 58. Convention: start variables and functions with lower case.
    • 59. Convention: start constructors with upper case.
    • 60. Avoid starting with _ or $</li></li></ul><li>Advanced javascript<br />Reserved Words<br />abstract boolean break byte case catch char class <br />const continue debugger default delete do double <br />else enum export extends false final finally float <br />for function goto if implements import in <br />instanceof int interface long native new null <br />package private protected public return short <br />static super switch synchronized this throw throws <br />transient true try typeof var volatile void <br />while with<br />// Bug in the language<br />driversLicense.class = &apos;B&apos;; //  invalid!<br />driversLicense[&apos;class&apos;] = &apos;B&apos;; //  huzzah!<br />
    • 61. Advanced Javascript<br />Inheritance in JavaScript<br /><ul><li>No classes.
    • 62. Prototypal inheritance.
    • 63. Inheritance through linkage.
    • 64. Objects inherit directly from other objects.</li></li></ul><li>Advanced Javascript<br />Inheritance in JavaScript<br />generic<br />var generic = <br /> { make: &apos;none&apos;, price :0 };<br />var guitar = object( generic );<br />guitar.model = &apos;Les Paul&apos;;<br />guitar.price = 1200;<br />guitar<br />alert(guitar.model);<br />//  Les Paul<br />alert(guitar.price);<br />//  1200<br />alert(guitar.make);<br />//  none<br />
    • 65. Advanced Javascript<br />Inheritance in JavaScript<br />generic<br />var generic = <br /> { make: &apos;none&apos;, price :0 };<br />var guitar = object( generic );<br />guitar.model = &apos;Les Paul&apos;;<br />guitar.price = 1200;<br />guitar<br />generic.year = 2001;<br />generic.model = &apos;n/a&apos;;<br />alert(guitar.model);<br />//  Les Paul<br />alert(guitar.year);<br />//  2001<br />
    • 66. Advanced Javascript<br />Inheritance in JavaScript<br />Every object inherits from Object.prototype<br />var obj = new Object();<br />//same as<br />var obj = object( Object.prototype );<br />var d = new Date(1000);<br />//behind the scenes:<br />var newObj = object( Date.prototype );<br />d = Date.apply( newObj, [1000] );<br />if (d == null ) d = newObj;<br />
    • 67. Advanced Javascript<br />Inheritance in JavaScript<br />Our constructors also have a prototype<br />functionGuitar(strings, make, model){<br />this.stringCount = strings;<br />this.make = make;<br />this.model = model;<br />}<br />Guitar.prototype.play = function (chord) {<br /> alert(chord + &apos; from a &apos; + this.model);<br />};<br />
    • 68. Advanced Javascript<br />Inheritance in JavaScript<br />Object.prototype<br />Guitar.prototype<br />myGuitarInstance<br />
    • 69. Advanced Javascript<br />Inheritance in JavaScript<br />Oldest trick in JavaScript inheritance<br />String.prototype.trim = function () {<br />return this.replace(<br />/^s*(S*(s+S+)*)s*$/, <br /> &quot;$1&quot;); <br />}; <br />var text = &apos; some user-entered value &apos;;<br />alert(text); //  &apos;some user-entered value&apos;<br />
    • 70. Advanced Javascript<br />I lied<br />There&apos;s no object() function in Javascript.<br />But let me give you one.<br />function object(o) {<br />function F() {}<br /> F.prototype = o;<br />returnnew F();<br />}<br />
    • 71. Advanced Javascript<br />JavaScript Idioms: Truthy & Falsy<br />//Falsy values<br />var f[1]= false;// D&apos;oh!<br />var f[2] = null;<br />var f[3] = undefined;<br />var f[4] = 0;<br />var f[5] = &quot;&quot;;<br />var f[6] = NaN;<br />if( f[X] ){<br />// never gets here<br />}<br />//Truthy values<br />var t[1] = true;<br />var t[2] = new Object();<br />var t[3] = &quot;1&quot;;<br />var t[4] = &quot;0&quot;; //  !!<br />var t[5] = &quot;false&quot;;//  !!<br />if( t[X] ){<br />// gets here always<br />}<br />
    • 72. Advanced Javascript<br />JavaScript Idioms: || Default operator<br />//returns the first Truthy or last operand.<br />//e.g.: overriding missing arguments<br />var sortOrder; <br />if (arg) {<br /> sortOrder = arg; <br />} else {<br /> sortOrder = &apos;Name ASC&apos;;<br />}<br />//same as<br />var sortOrder = arg || &apos;Name ASC&apos;; <br />
    • 73. Advanced Javascript<br />JavaScript Idioms: && Guard operator<br />//returns the first Falsy or last operand.<br />// e.g.: avoiding null reference errors<br />var obj2; <br />if (obj1) {<br /> obj2 = obj1.prop; <br />} else {<br /> obj2 = obj1;<br />}<br />//same as<br />var obj2 = obj1 && obj1.prop; <br />
    • 74. Advanced Javascript<br />JavaScript Idioms: === and !==<br />if (0 == &quot;&quot;) {<br />alert(&apos;Hey, I did not expect to see this.&apos;);//displayed<br />}<br />if (0 === &quot;&quot;) {<br />alert(&apos;This will not be displayed.&apos;);//not displayed<br />}<br />if (1 != true) {<br />alert(&apos;Hey, I expected to see this.&apos;); //not displayed<br />}<br />if (1 !== true) {<br />alert(&apos;This will be displayed.&apos;);//displayed<br />}<br />
    • 75. Advanced Javascript<br />JavaScript Idioms: Namespaces<br />var ACME = {<br /> version: &apos;7.1&apos;,<br /> formatCurrency: function(num){ /* … */ },<br /> //…<br />};<br />ACME.Ajax = {<br /> ajaxifyForm: function(formId){ /* … */ },<br /> showError: function(){ /* … */ },<br />//…<br />};<br />ACME.Ajax.ajaxifyForm(&apos;myForm&apos;);<br />
    • 76. Advanced javascript<br />Coding convention:<br />Always use curly braces<br />if (something)<br /> doSomething();<br /> doSomethingElse();<br />if (something){<br /> doSomething();<br />}<br /> doSomethingElse();<br />
    • 77. Advanced javascript<br />Coding convention:<br />Always end lines with punctuation<br />return <br />tax + shipping + price;<br />var amount = tax<br /> + shipping<br /> + price;<br />var amount = tax +<br /> shipping +<br /> price;<br />Parsed as<br />return;<br />tax + shipping + price;<br />return tax + <br /> shipping + price;<br />
    • 78. Advanced javascript<br />Coding convention:<br />Globals<br /><ul><li>Avoid them.
    • 79. Tend to clobber each other.
    • 80. Namespaces are OK.
    • 81. Name them with ALL_CAPS</li></li></ul><li>Advanced javascript<br />Coding convention:<br />eval()is evil<br />var p = eval(&apos;obj.&apos; + propertyName);<br />var p = obj[ propertyName];<br />//hidden evals<br />setTimeout(&quot;alert(&apos;Time is up!&apos;);&quot;, 9000);<br />setTimeout( function () {alert(&apos;Time is up&apos;);}, 9000);<br />var func = new Function(&apos;p1&apos;, &apos;p2&apos;, &apos;return p1+p2;&apos;);<br />
    • 82. Advanced javascript<br />Coding convention:<br />Declare variables at the top of function<br />function f1(){<br />var a, b, c;<br /> a = getA();<br />if (a) {<br /> b = calcB(a);<br /> } else {<br /> c = getC();<br /> b = calcB(c);<br /> }<br />}<br />
    • 83. Advanced javascript<br />Coding convention:<br />Do not use assignments as expressions <br />if ( flag = getFlag() ) {<br /> alert(flag); <br />}<br />//prefer:<br />var flag = getFlag();<br />if (flag) {<br /> alert(flag); <br />}<br />
    • 84. Questions ?<br />
    • 85. Reference<br /><ul><li>JavaScript: The Good Parts by Douglas Crockford.
    • 86. JavaScript: The Definitive Guide by David Flanagan.
    • 87. Videos: Search for Douglas Crockford.
    • 88. Shameless plug: my blog, JavaScript category.</li></ul>sergio@sergiopereira.com<br />http://sergiopereira.com/blog<br />@sergiopereira<br />http://chicagoalt.net<br />

    ×