The Future of JavaScript (SXSW '07)

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    5 Favorites & 4 Groups

    The Future of JavaScript (SXSW '07) - Presentation Transcript

    1. Andrew & Aaron present: The Future of JavaScript
    2. JavaScript 1.6 Based on ECMA-262, edition 3 ● Implemented in Firefox 1.5 ● Added ● ECMAScript for XML (aka E4X; ECMA-357) – Array extras – Array and String generics –
    3. Array extras Location methods: ● indexOf() – lastIndexOf() – Iterative methods: ● every() – filter() – forEach() – map() – some() –
    4. Iteration examples var ids = [ 1, 2, 3 ]; var els = ids.map( function( i ){ return document.getElementById( 'item_' + i ); } ); for( var i = 0; i < els.length; i++ ){ els[i].style.border = '1px solid'; } and var lis = document.getElementsByTagName( 'li' ); var evenLis = Array.filter( lis, function( li, i ){ return i % 2 == 1; } ); for( var i = 0; i < evenLis.length; i++ ){ evenLis[i].style.background = '#ccc'; }
    5. JavaScript 1.7 Based on ECMA-262, edition 3 ● Includes JS1.6 enhancements ● Introduced ● Generators & Iterators – Array comprehensions – Block scope variables – Destructuring assignment –
    6. Using JS 1.7 Implemented in Firefox 2 only ● Enable via MIME type: ● <script type="application/javascript;version=1.7"> // code goes here </script> or <script type="application/javascript;version=1.7" » src="/path/to/my.js"></script>
    7. Traditional iterative generation for( var i = 1; i < 4; i++ ){ var ul = document.createElement( 'ul' ); for( var j = 1; j <= i; j++ ){ var li = document.createElement( 'li' ); li.appendChild( document.createTextNode( j ) ); ul.appendChild( li ); } document.getElementsByTagName( 'body' » )[0].appendChild( ul ); }
    8. Which gives us 1 ● 1 ● 2 ● 1 ● 2 ● 3 ●
    9. Optimized iterative generation var $ul = document.createElement( 'ul' ); var $li = document.createElement( 'li' ); for( var i = 1; i < 4; i++ ){ var ul = $ul.cloneNode( true ); for( var j = 1; j <= i; j++ ){ var li = $li.cloneNode( true ); li.appendChild( document.createTextNode( j ) ); ul.appendChild( li ); } document.getElementsByTagName( 'body' » )[0].appendChild( ul ); }
    10. Generator-Iterators function $el( tag ){ var el = document.createElement( tag ); while( true ){ yield el.cloneNode( true ); } } var $ul = $el( 'ul' ), $li = $el( 'li' ); for( var i = 1; i < 4; i++ ){ var ul = $ul.next(); for( var j = 1; j <= i; j++ ){ var li = $li.next(); li.appendChild( document.createTextNode( j ) ); ul.appendChild( li ); } document.getElementsByTagName( 'body' » )[0].appendChild( ul ); }
    11. Straight Iteration var me = { name: 'Aaron Gustafson', age: 29, 'eye color': 'blue', height: '5ft 11in' }; var it = Iterator( me ); var ul = $ul.next(), li; try{ while( true ){ li = $li.next(); li.appendChild( document.createTextNode( » it.next() ) ); ul.appendChild( li ); } }catch( err if err instanceof StopIteration ){ document.getElementsByTagName( 'body' » )[0].appendChild( ul ); }catch( err ){ alert( 'error: '+err.description ); }
    12. Which gives us name,Aaron Gustafson ● age,29 ● eye color,blue ● height,5ft 11in ●
    13. Alternation var li = document.getElementsByTagName( 'li' ); for( var i = 0; i < li.length; i++ ){ if( i % 2 == 0 ){ li[i].className = 'even'; } }
    14. Generators and array creation function range( start, end ){ for( var i = start; i < end; i++ ){ yield i; } } var li = document.getElementsByTagName( 'li' ); var evens = [i for ( i in range( 0, li.length ) ) » if ( i % 2 ==0 ) ]; for( num in evens ) li[evens[num]].className = 'even';
    15. let is the new black Only way we currently get block scope: ● function foo(){ var x = 5; ( function(){ var x = 10; alert( x ); //-> 10 } )(); alert( x ); //-> 5 }
    16. let blocks function foo(){ var x = 5; let( x = 10 ){ alert( x ); //-> 10 } alert( x ); //-> 5 } or if you wanna get really crazy ● function foo(){ var x = 5; let( x = x + 5 ){ alert( x ); //-> 10 } alert( x ); //-> 5 }
    17. let expressions function foo() { var x = 5; alert( let( x = 10 ) x ); //-> 10 alert( x ); //-> 5 }
    18. let in loops for( let i = 0; i < array.length; i++ ) doSomethingWith( array[i] ); alert( i ); //-> undefined or for( let i = 0, subArray; i<array.length; i++ ){ subArray = array[i]; for( let i = 0; i < subArray.length; i++ ) alert( subArray[i] ); }
    19. Like a key party in your code Destructuring assignment: ● var a = 1; var b = 2; [a, b]= [b, a]; or var [c, d] = [a, b];
    20. Return with greater flexibility We’ve always been able to return arrays ● var result = returnsArray(); var a = result[0]; var b = result[1]; But now ● var [a,b] = returnsArray(); or even var [,b] = returnsArray();
    21. That’s not all, let’s play with JSON var me = { name: 'Aaron Gustafson', age: 29, 'eye color': 'blue', height: '5ft 11in' }; var ul = $ul.next(); for( let [ key, value ] in me ){ let li = $li.next(); li.appendChild( document.createTextNode( 'Key: ' + key + ', Value: ' + value ) ); ul.appendChild( li ); } document.getElementsByTagName( 'body' » )[0].appendChild( ul );
    22. Resulting in Key: name, Value: Aaron Gustafson ● Key: age, Value: 29 ● Key: eye color, Value: blue ● Key: height, Value: 5ft 11in ●
    23. Or iterate safely over an Object Object.prototype.HAHAHA = "I AM THE HASH DESTRUCTOR"; for( let [ key, value ] in me ) alert( key ); /* 'name', 'age', 'eye color', 'height', 'HAHAHA' */ function SafeHashIterator( hash, keysOnly ){ for( let [key, value] in hash ){ if( !hash.hasOwnProperty( key ) ) continue; yield keysOnly ? key : [key, value]; } throw StopIteration; } for( let [key, value] in SafeHashIterator( me ) ) alert( key ); // 'name', 'age', 'eye color', 'height'
    24. So why should I care?

    + Aaron GustafsonAaron Gustafson, 3 years ago

    custom

    3631 views, 5 favs, 0 embeds more stats

    Andrew Dupont and I discuss improvements to JavaScr more

    More info about this document

    CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

    Go to text version

    • Total Views 3631
      • 3631 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 5
    • Downloads 135
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories