Upload
avital
View
52
Download
0
Embed Size (px)
DESCRIPTION
JavaScript Programming 2.0. 伊藤 直也 [email protected] 株式会社はてな http://www.hatena.ne.jp/ 2005.08.26. アジェンダ. なぜいま JavaScript? JavaScript で OO 最近熱い JavaScript な技術. なぜいま JavaScript?. ユーザーインタフェースプログラミング DHTML Ajax Remix user script (Greasemonkey, Turnabout etc) プラットフォーム ( ブラウザ ) の進化 - PowerPoint PPT Presentation
Citation preview
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
JavaScript Programming 2.0
伊藤 直也 [email protected]株式会社はてな http://www.hatena.ne.jp/
2005.08.26
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
アジェンダ
なぜいま JavaScript?JavaScript で OO最近熱い JavaScript な技術
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
なぜいま JavaScript?
ユーザーインタフェースプログラミングDHTMLAjax
Remixuser script (Greasemonkey, Turnabout
etc)プラットフォーム ( ブラウザ ) の進化
Firefox / Safari / Opera / IE 7JavaScript Programming 再評価 (= 2.0) な 2005 年
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
JavaScript で OO
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
JavaScript で OO
JavaScript でも OO できるよ プロトタイプベースな OO 言語
いろいろ奥深い Java とかはクラスベース
関数がオブジェクト
モテも非モテも可 手続き型で泥臭く … JavaScript Programming 1.0 OO でかっこよく ? … JavaScript Programming 2.0
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
関数がオブジェクト
関数もオブジェクト。関数がオブジェクトの素/* コンストラクタ */function Dog (name) { this.name = name;}
var dog = new Dog(‘ しなもん’ );document.writeln(dog.name);
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
メソッド追加はプロパティへの代入
プロパティに関数を代入でメソッド完成
function Dog (name) { this.name = name; this.bark = bark;}
function bark () { document.writeln(this.name + ‘: わん’ );}
var dog = new Dog(‘ しなもん’ );dog.bark();
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
メソッド追加はプロパティへの代入なので…
インスタンスに直接メソッドを追加できるvar dog = new Dog(‘ しなもん’ );dog.bark = function() { ... };
dog.bark();
イベントハンドラへの登録でやってる
/* document の onload プロパティに代入 */document.onload = function () { ... };
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
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();
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
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]);}
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
継承 ( っぽいの )
// スーパークラス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 」 ');}
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
prototype.js で OO
Ajax とか Class-Style OO とかの JavaScript フレームワーク
http://prototype.conio.net/
クラスベースの方がコードが分かりやすい( かも ) 。
prototype.js の Class と Object.extend() の出番
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
Class / Object.extend()
// 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); }});
prototype.js で JavaScript でクラスライク OO
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
prototype.js でデザインパターン
やってみてますhttp://d.hatena.ne.jp/naoya/20050813結城さん本万歳 !
/ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ | ほう、 Abstract Factory パターンですか?\  ̄ ̄ ̄ | / ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ∧_∧ / ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ( ・∀・) ∧ ∧ < な、なんですか?あなた・・・ ( ⊃ ) ( ゚ Д ゚; ) \____________  ̄ ̄ ̄ ̄ ̄ (つ_つ__ __  ̄ ̄ ̄日∇ ̄\ |ThinkPad| \  ̄ ========= \
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
例 : 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++); }}
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
最近熱い JavaScript な技術
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
Ajax - Asynchronous JavaScript + XML
もはやおなじみの動的ロードテクニックXMLHttpRequest で非同期通信
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
Ajax の構成技術
JavaScript
XMLHttpRequestサーバーサイド
アプリケーション
XML API
非同期通信
HTML + CSS
ブラウザ描写(DHTML)
クライアント側 サーバー側
DOM
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
Ajax
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);
DHTML
XMLHttpRequest + DHTML + (XML)
この手の処理をイベントハンド
ラに登録する
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
CSI - Client Side Inclusion
外のサイトにある js をクライアントでロード
くっつき系。HTML に RSS 貼ったりとか。BlogPet とか。
一歩進めて、ライブラリ / 実行環境を読み込む手段としてGoogle AdSenseGoogle Maps APIJSON feed<script type=“text/javascript” src=http://example.com/js/foo.js></script>
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
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>
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
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' ] }}
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
JSON.pm – Perl to JSON
Perl のデータ構造を JSON に変換Ajax で使うとベンリ
#!/usr/local/bin/perluse 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"
]
}
}
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
XML::Simple + JSON で Ajax
1. [Perl] XML over HTTP な API を叩く2. [Perl] XML::Simple で parse3. [Perl] そのまま objToJson で変換4. [JavaScript] XMLHttpRequest で結果取得5. [JavaScript] JSON を eval6. [JavaScript] 復元したデータで DHTML
DB からデータを読み出して Perl な構造にした後、 JSON に変換して JavaScript に渡すとか色々応用できる。
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
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);
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
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>
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
JSAN – JavaScript Archive NetworkJavaScript 版 CPANPerl の JSAN.pm (JSAN shell) でインストールCPAN に同じく色々ある
prototype.js から切り出されたものClassObject.extendFunction.bind
Form.Validator Form.Serializer Wikiwig DOM.Triggers Debug.logger
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
JavaScript 開発 & デバッグ
http://www.hatena.ne.jp/1123227040objectdump.jsVenkhmanecma-script-mode.el
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
ブラウザを Hack する
ブラウザを Hack する手段としての JavaScript
Bookmarkletuser script
Greasemonkey, Trixie, Turnabout ...
©2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます
まとめ
JavaScript を正しく評価しようWeb 1.0 な JavaScript の先入観は捨てよう
悪い例による盲目
JavaScript でできることを " 手段 " として身に着けよう
サーバーサイドアプリケーションとの連携ブラウザ Hack 、ユーザーインタフェース PG