1 / 30

JavaScript Programming 2.0

JavaScript Programming 2.0. 伊藤 直也 naoya@hatena.ne.jp 株式会社はてな http://www.hatena.ne.jp/ 2005.08.26. アジェンダ. なぜいま JavaScript? JavaScript で OO 最近熱い JavaScript な技術. なぜいま JavaScript?. ユーザーインタフェースプログラミング DHTML Ajax Remix user script (Greasemonkey, Turnabout etc) プラットフォーム ( ブラウザ ) の進化

azia
Download Presentation

JavaScript Programming 2.0

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. JavaScript Programming 2.0 伊藤 直也 naoya@hatena.ne.jp 株式会社はてな http://www.hatena.ne.jp/ 2005.08.26

  2. アジェンダ • なぜいま JavaScript? • JavaScript で OO • 最近熱いJavaScriptな技術

  3. なぜいまJavaScript? • ユーザーインタフェースプログラミング • DHTML • Ajax • Remix • user script (Greasemonkey, Turnabout etc) • プラットフォーム(ブラウザ)の進化 • Firefox / Safari / Opera / IE 7 JavaScript Programming 再評価 (= 2.0) な2005年

  4. JavaScript で OO

  5. JavaScript で OO • JavaScript でも OO できるよ • プロトタイプベースなOO言語 • いろいろ奥深い • Javaとかはクラスベース • 関数がオブジェクト • モテも非モテも可 • 手続き型で泥臭く … JavaScript Programming 1.0 • OO でかっこよく? … JavaScript Programming 2.0

  6. 関数がオブジェクト • 関数もオブジェクト。関数がオブジェクトの素 /* コンストラクタ */ function Dog (name) { this.name = name; } var dog = new Dog(‘しなもん’); document.writeln(dog.name);

  7. メソッド追加はプロパティへの代入 • プロパティに関数を代入でメソッド完成 function Dog (name) { this.name = name; this.bark = bark; } function bark () { document.writeln(this.name + ‘: わん’); } var dog = new Dog(‘しなもん’); dog.bark();

  8. メソッド追加はプロパティへの代入なので… • インスタンスに直接メソッドを追加できる var dog = new Dog(‘しなもん’); dog.bark = function() { ... }; dog.bark(); • イベントハンドラへの登録でやってる /* document の onload プロパティに代入 */ document.onload = function () { ... };

  9. prototypeオブジェクト • その関数をインスタンス化した場合のインスタンス参照 (つまりプロトタイプ) • これに色々代入することでオブジェクトを作っていく (プロトタイプベースOO) • ので、インスタンスの振る舞いは後から幾らでも拡張/変更できる function Dog (name) { this.name = name; } Dog.prototype.bark = function() { ... }; Dog.prototype.foo = function() { ... }; Dog.prototype.bar = function () { ... }; var dog = new Dog('しなもん'); dog.bark(); dog.foo(); dog.bar();

  10. Objectオブジェクト • すべてのオブジェクトの祖先 • for/in でプロパティをほげる。 • 連想配列代わりにも使える var object = new Object(); object.jkondo = 'Junya Kondo'; Var hash = new Object(); hash[‘naoya’] = 'Naoya Ito'; hash[‘kawasaki’] = 'Yuichi Kawasaki'; for (var id in hash) { document.write(hash[id]); }

  11. 継承(っぽいの) // スーパークラス function Human(name) { this.name = name; } // サブクラス function Programmer(name) { this.base = Human; this.base(name); } Programmer.prototype.programming = function () { document.writeln(this.name + ' 「コードを書くよ」'); } // さらに継承 function PerlProgrammer(name) { this.base = Programmer; this.base(name); } // オーバーライドっぽいの PerlProgrammer.prototype.programming = function () { Programmer.prototype.programming.apply(this);// super(); document.writeln(this.name + ': 「#!/usr/local/bin/perl」'); }

  12. prototype.js で OO • Ajax とか Class-Style OO とかの JavaScript フレームワーク • http://prototype.conio.net/ • クラスベースの方がコードが分かりやすい(かも)。 • prototype.js の Class と Object.extend() の出番

  13. Class / Object.extend() • prototype.js で JavaScript でクラスライクOO // in html <script type=“text/javascript” src=“/path/to/prototype.js”></script> // in js /* class Animal */ var Animal = Class.create(); Animal.prototype = { initialize : function (name) { this.name = name; }, bark : function () { document.writeln(this.name); } } /* class Dog */ var Dog = Class.create(); Dog.prototype = (new Animal).extend({ bark : function() { Animal.prototype.bark.apply(this); } });

  14. prototype.jsでデザインパターン • やってみてます • http://d.hatena.ne.jp/naoya/20050813 • 結城さん本万歳! / ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ | ほう、Abstract Factoryパターンですか?\    ̄ ̄ ̄|/ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄   ∧_∧       / ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄   ( ・∀・)  ∧ ∧ < な、なんですか?あなた・・・  (  ⊃ )  (゚Д゚;)  \____________  ̄ ̄ ̄ ̄ ̄ (つ_つ____  ̄ ̄ ̄日∇ ̄\|ThinkPad|\         ̄   =========  \

  15. 例: Iteratorパターン var Book = Class.create(); Book.prototype = { initialize : function(name) { this.name = name; }, getName : function() { return this.name; } } var BookShelf = Class.create(); BookShelf.prototype = { initialize : function() { this.last = 0; this.books = new Array(); }, getBookAt : function(index) { return this.books[index]; }, appendBook : function(book) { this.books[this.last] = book; this.last++; }, getLength : function() { return this.last; }, iterator : function() { return new BookShelfIterator(this); } } var BookShelfIterator = Class.create(); BookShelfIterator.prototype = { initialize : function(bookshelf) { this.bookshelf = bookshelf; this.index = 0; }, hasNext : function () return this.index < this.bookshelf.getLength(); }, next : function() { return this.bookshelf.getBookAt(this.index++); } }

  16. 最近熱いJavaScriptな技術

  17. Ajax - Asynchronous JavaScript + XML • もはやおなじみの動的ロードテクニック • XMLHttpRequest で非同期通信

  18. Ajax の構成技術 クライアント側 サーバー側 HTML + CSS ブラウザ描写(DHTML) サーバーサイド アプリケーション DOM JavaScript XMLHttpRequest 非同期通信 XML API

  19. DHTML Ajax • XMLHttpRequest + DHTML + (XML) var request = new XMLHttpRequest(); request.open("GET", "hello.txt", true); request.onreadystatechange = function() { if (request.readyState == 4) { document.getElementById('message').innerHTML = request.responseText; // or responseXML } } request.send(null); この手の処理を イベントハンドラに 登録する

  20. CSI - Client Side Inclusion • 外のサイトにある js をクライアントでロード • くっつき系。 • HTMLにRSS貼ったりとか。 • BlogPet とか。 • 一歩進めて、ライブラリ/実行環境を読み込む手段として • Google AdSense • Google Maps API • JSON feed <script type=“text/javascript” src=http://example.com/js/foo.js></script>

  21. Google Maps API • CSI なライブラリによるAPI • JavaScriptプログラミングでGoogle Maps使えるYO! • GXmlHttp で Ajax りつつサーバーサイドアプリケーションと連携 • Hatena::Map <html> <head> <!-- CSI で API ライブラリ読み込み --> <script src="http://maps.google.com/maps?file=api&v=1&key=..." type="text/javascript"></script> </head> <body> <!-- Google Maps API が DHTML で描写されるエレメント --> <div id="map" style="width: 500px; height: 400px"></div> <!-- Hack! --> <script type="text/javascript"> var map = new GMap(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.centerAndZoom(new GPoint(139.70486, 35.65497), 2); ... </script> </body> </html>

  22. JSON – JavaScript Object Notation • データ交換フォーマット • JavaScriptの記法でオブジェクト、データ構造をシリアライズ • Matz日記曰く「YAMLみたいなもの」 • PerlのData::Dumper みたいな感じ • 変数として受け取るとか eval で受けるとかしてでデシリアライズ starwars.jedi.skywalker[0] = 'anakin'; starwars.jedi.skywalker[1] = 'luke'; var starwars = { jedi : { skywalker : [ 'anakin', 'luke' ] } }

  23. JSON.pm – Perl to JSON • Perlのデータ構造を JSON に変換 • Ajaxで使うとベンリ #!/usr/local/bin/perl use strict; use JSON; my $starwars = { jedi => { skywalker => [ 'anakin', 'jedi' ], }, }; my $js = JSON->new->objToJson($starwars, { pretty => 1, indent => 2, }); print $js; { "jedi" : { "skywalker" : [ "anakin", "jedi" ] } }

  24. XML::Simple + JSON で Ajax • [Perl] XML over HTTP な API を叩く • [Perl] XML::Simple で parse • [Perl] そのまま objToJson で変換 • [JavaScript] XMLHttpRequest で結果取得 • [JavaScript] JSON を eval • [JavaScript] 復元したデータで DHTML DBからデータを読み出してPerlな構造にした後、 JSON に変換して JavaScript に渡すとか色々応用できる。

  25. JSON feed • del.icio.us - フィードをJSONで表現 • JavaScript + Web で直接 Hack できるように • RSS だとサーバーサイドプログラムが必要になりがち • CSI で JSON を Include して Hack • http://del.icio.us/doc/feeds/json/ <script type="text/javascript" src="http://del.icio.us/feeds/json/lukeskywalker?count=20"></script> <script type="text/javascript"> var ul = document.createElement('ul'); for (var i = 0, post; post = Delicious.posts[i]; i++) { ... document.createElement('a'); a.setAttribute('href', post.u); a.appendChild(document.createTextNode(post.d)); ... } document.getElementById('container').appendChild(ul);

  26. JKL.ParseXML • XMLをJSONに展開するクラス • http://www.kawa.net/works/js/jkl/parsexml.html • Ajax でのしんどいXML DOMとおさらば <script type="text/javascript" src="jkl-parsexml.js"></script> <script type="text/javascript"> var parser = new JKL.parseXML('http://example.com/starwarsapi'); var starwars = parser.parse(); document.write(starwars.jedi.skywalker[0]); // anakin </script>

  27. JSAN – JavaScript Archive Network • JavaScript版CPAN • Perl の JSAN.pm (JSAN shell)でインストール • CPANに同じく色々ある • prototype.js から切り出されたもの • Class • Object.extend • Function.bind • Form.Validator • Form.Serializer • Wikiwig • DOM.Triggers • Debug.logger

  28. JavaScript 開発 & デバッグ • http://www.hatena.ne.jp/1123227040 • objectdump.js • Venkhman • ecma-script-mode.el

  29. ブラウザを Hack する • ブラウザを Hack する手段としての JavaScript • Bookmarklet • user script • Greasemonkey, Trixie, Turnabout ...

  30. まとめ • JavaScript を正しく評価しよう • Web 1.0 な JavaScript の先入観は捨てよう • 悪い例による盲目 • JavaScriptでできることを"手段"として身に着けよう • サーバーサイドアプリケーションとの連携 • ブラウザ Hack、ユーザーインタフェースPG

More Related