Your SlideShare is downloading. ×
0
Jslunch6
Jslunch6
Jslunch6
Jslunch6
Jslunch6
Jslunch6
Jslunch6
Jslunch6
Jslunch6
Jslunch6
Jslunch6
Jslunch6
Jslunch6
Jslunch6
Jslunch6
Jslunch6
Jslunch6
Jslunch6
Jslunch6
Jslunch6
Jslunch6
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

Jslunch6

1,246

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,246
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
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

Transcript

  • 1. JavaScript Lunch 6 June 12, 2008 Naofumi HAIDA Cirius Technologies
  • 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. アジェンダ • JavaScript 言語の展望 • Web Application 1.0 Specification.
  • 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. 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. JavaScript 1.6 主要リリース • ECMAScript for XML: E4X – JavaScript 言語中、inline で XML を簡単に記述 するためのプログロミング言語拡張 • http://www.ecma- international.org/publications/standards/Ecma-357.htm • Array 拡張 – 配列に便利な関数を追加
  • 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. 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. 余談。 バージョンを指定した JavaScript コードの書 き方 <script type=quot;text/javascript;version=1.6quot; language=quot;JavaScript1.6quot;> // ここにソースを書く </script>
  • 10. Array 拡張 • indexOf(), lastIndexOf() – String 型オブジェクトが備えるメソッドと同じ • forEach(), some(), many() – ループ処理を完結に記述可能 • filter(), map() – Perl の grep, map 関数と同じ
  • 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. 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. 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. 余談。これらの拡張は実装できます 例) 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. JavaScript 1.7 主要リリース • Array Comprehension – 洗練された Array 記述を可能に • Let Scoping – ブロックレベルでの変数スコープを可能に • Destructing – 複雑なデータ構造を演算子の左側に持てる – http://wiki.ecmascript.org/doku.php?id=disc ussion:destructuring_assignment
  • 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. 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. Destructuring // 値の入れ替え [ b, a ] = [ a, b ]; // 複数値への代入 var [ name, sex ] = [ 'Bob', 'Man' ]; var { name: myName } = { name: 'Bob' }; // myName == 'Bob'
  • 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. 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. Canvas を利用したデモ 1. http://dev2.cirius. co.jp/~haida/jslun ch/canvas.html 2. http://dev2.cirius. co.jp/~haida/jslun ch/canvas2.html

×