Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Jslunch6

1,419 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Jslunch6

  1. 1. JavaScript Lunch 6 June 12, 2008 Naofumi HAIDA Cirius Technologies
  2. 2. JavaScript Lunch 目次 ライブラリ Object 指向的 JavaScript (第1回) • • • jQuery • 継承 • Introduction ($ 関数) (第2 • クロージャ 回) Reusable Codes • • jQuery UI • Packaging • prototype.js デバッグ、テストツール • • Yahoo! UI • Firebug • Mochi Kit DOM • Effect • • Basics of DOM (第5回) • JavaScript & CSS (第4回) Today’s • Improving Forms • DOM要素の挿入 Topic! その他 • XPath • • JavaScript 言語の展望 Events • • Processing JS Ajax • • 仕組み (第3回) • デザインパターン
  3. 3. アジェンダ • JavaScript 言語の展望 • Web Application 1.0 Specification.
  4. 4. 各ブラウザの JavaScript サポート Firefox Safari Opera Internet Explorer Version 3.0 2.0 3.0 9.50 9.24 8.0 7.0 6.0 2.0 Yes Yes 1.9 1.8 Yes 1.7 Yes Yes Yes 1.6 Yes Yes Yes Yes Yes Yes 1.5 Yes Yes Yes Yes Yes (JScript (JScript (JScript 6.0) 5.7) 5.6) 1.4 Yes Yes Yes Yes Yes Yes Yes Yes 1.3 Yes Yes Yes Yes Yes Yes Yes Yes 1.2 Yes Yes Yes Yes Yes Yes Yes Yes 1.1 Yes Yes Yes Yes Yes Yes Yes Yes http://diaspar.jp/node/56 及び http://en.wikipedia.org/wiki/JavaScript より一部抜粋
  5. 5. JavaScript 2.0 へ ※ ECMAScript: 互換性の低いJavaScriptと JScriptを標準化すべく、両方の言語に共通 する部分を取り入れて作られた言語仕様。 現在の最新バージョンは3 (3rd edition) JavaScript 2.0 - ECMAScript 4 JavaScript 1.7 準拠 - Array - Classes Comprehension - Packages JavaScript 1.6 - Let Scoping - object - ECMAScript for - Destructruing protection XML (E4X) - dynamic - Array Extras JavaScript 1.5 types 今ここ。 - scoping
  6. 6. JavaScript 1.6 主要リリース • ECMAScript for XML: E4X – JavaScript 言語中、inline で XML を簡単に記述 するためのプログロミング言語拡張 • http://www.ecma- international.org/publications/standards/Ecma-357.htm • Array 拡張 – 配列に便利な関数を追加
  7. 7. ECMA Script for XML (例) <script type=”text/javascript;e4x=1”> var html = <html/>; html.head.title = 'My page title'; html.body.@bgcolor = '#e4e4e4'; このJavaScript html.body.form.@action = 'someurl.cgi'; コードは次ページ html.body.form.@name = 'myform'; のような html を html.body.form.@method = 'post'; 生成したのと同じ html.body.form.@onclick = 'return somejs()'; html.body.form.input[0] = ''; html.body.form.input[0].@name = 'test'; </script>
  8. 8. ECMA Script for XML (例) (cont.) <html> <head> <title>My page title</title> </head> <body bgcolor=quot;#e4e4e4quot;> <form method=quot;postquot; name=quot;myformquot; action=quot;someurl.cgiquot; onclick=quot;return somejs();quot;> <input value=quot;quot; name=quot;testquot; /> </form> </body> </html>
  9. 9. 余談。 バージョンを指定した JavaScript コードの書 き方 <script type=quot;text/javascript;version=1.6quot; language=quot;JavaScript1.6quot;> // ここにソースを書く </script>
  10. 10. Array 拡張 • indexOf(), lastIndexOf() – String 型オブジェクトが備えるメソッドと同じ • forEach(), some(), many() – ループ処理を完結に記述可能 • filter(), map() – Perl の grep, map 関数と同じ
  11. 11. Array 拡張(例) var tmp = [1, 2, 3, 4, 5, 3]; // indexOf( Object ) tmp.indexOf( 3 ) == 2; tmp.indexOf( 8 ) == -1; // lastIndexOf( Object ) tmp.lastIndexOf( 3 ) == 5; // forEach( Function ) tmp.forEach( alert );
  12. 12. Array 拡張(例)(cont.) var tmp = [1, 2, 3, 4, 5, 3]; // every( Function ) tmp.every( function( num ) { return num < 6; }); // true // some( Function ) tmp.some( function( num ) { return num > 6; }); // false
  13. 13. Array 拡張(例)(cont.) var tmp = [1, 2, 3, 4, 5, 3]; // filter( Function ) tmp.filter( function( num ) { return num > 3; }); // [4, 5]; // map( Function ) tmp.map( function( num ) { return num + 2; });// [3, 4, 5, 6, 7, 5];
  14. 14. 余談。これらの拡張は実装できます 例) Array.prototype.forEach = function(block) { for (var i = 0, l = this.length; i < l; ++i) { var item = this[i]; block(item, i) } return(this) };
  15. 15. JavaScript 1.7 主要リリース • Array Comprehension – 洗練された Array 記述を可能に • Let Scoping – ブロックレベルでの変数スコープを可能に • Destructing – 複雑なデータ構造を演算子の左側に持てる – http://wiki.ecmascript.org/doku.php?id=disc ussion:destructuring_assignment
  16. 16. Array comprehension // [1,2,3,4,5,6,7,8,9,10] // [1,2,3,4,5,6,7,8,9,10] var array = []; var array = for(var i=0; i<10; i++){ [i for (i=0; i<10; i++)]; array.push( i ); } var array = []; var array = for ( var key in obj ) { [ key for ( key in obj ) ]; array.push( key ); }
  17. 17. Let Scoping var test = 10; var test = 10; if ( test == 10 ) { let( test = 20 ) { let newTest = 20; alert( test ); // 20 test += newTest; } } alert( test ); // 30 alert( test ); // 10 alert( newTest ); // undefined for( let i=0; i<10; i++) var test = 10; { alert( let( test = 20 ) alert( i ); test ); // 20 } alert( test ); // 10 alert( i ); // undefined
  18. 18. Destructuring // 値の入れ替え [ b, a ] = [ a, b ]; // 複数値への代入 var [ name, sex ] = [ 'Bob', 'Man' ]; var { name: myName } = { name: 'Bob' }; // myName == 'Bob'
  19. 19. Destructuring (cont.) var users = [ { name: 'John', sex: 'Man'}, { name: 'Bob', sex: 'Man'}, { name: 'Jane', sex: 'Female'} ]; for( let { name: name, sex: sex } in users ) { alert( name + ' is a ' + sex.toDowncase() ); }
  20. 20. Web Applications 1.0 • Web Hypertext Application Technology Working Group: WHAT-WG – ウェブアプリケーション 1.0 の仕様の整理をする団体 – DOM, HTML5, JavaScript… • The entire Web Applications 1.0 specification: http://whatwg.org/specs/web-apps/current-work/ • Canvas – WHAT-WG で注目の仕様 – 画像の回転、線や図形を描くなどが可能に。 • The subsection of the specification dealing specifically with the new <canvas> element: http://whatwg.org/specs/web- apps/current-work/#the-2d
  21. 21. Canvas を利用したデモ 1. http://dev2.cirius. co.jp/~haida/jslun ch/canvas.html 2. http://dev2.cirius. co.jp/~haida/jslun ch/canvas2.html

×