javascript programming 2.0

©2005 株式会社はてな　本資料の一部または全部の無断複製・転載を禁じます

JavaScript Programming 2.0

伊藤直也 [email protected]株式会社はてな http://www.hatena.ne.jp/

2005.08.26


アジェンダ

なぜいま JavaScript?JavaScript で OO最近熱い JavaScript な技術


なぜいま JavaScript?

ユーザーインタフェースプログラミングDHTMLAjax

Remixuser script (Greasemonkey, Turnabout

etc)プラットフォーム ( ブラウザ ) の進化

Firefox / Safari / Opera / IE 7JavaScript Programming 再評価 (= 2.0) な 2005 年


JavaScript で OO


JavaScript で OO

JavaScript でも OO できるよプロトタイプベースな OO 言語

いろいろ奥深い Java とかはクラスベース

関数がオブジェクト

モテも非モテも可手続き型で泥臭く … JavaScript Programming 1.0 OO でかっこよく ? … JavaScript Programming 2.0


関数がオブジェクト

関数もオブジェクト。関数がオブジェクトの素/* コンストラクタ */function Dog (name) { this.name = name;}

var dog = new Dog(‘ しなもん’ );document.writeln(dog.name);


メソッド追加はプロパティへの代入

プロパティに関数を代入でメソッド完成

function Dog (name) { this.name = name; this.bark = bark;}

function bark () { document.writeln(this.name + ‘: わん’ );}

var dog = new Dog(‘ しなもん’ );dog.bark();


メソッド追加はプロパティへの代入なので…

インスタンスに直接メソッドを追加できるvar dog = new Dog(‘ しなもん’ );dog.bark = function() { ... };

dog.bark();

イベントハンドラへの登録でやってる

/* document の onload プロパティに代入 */document.onload = function () { ... };


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();


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]);}


継承 ( っぽいの )

// スーパークラス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 」 ');}


prototype.js で OO

Ajax とか Class-Style OO とかの JavaScript フレームワーク

http://prototype.conio.net/

クラスベースの方がコードが分かりやすい( かも ) 。

prototype.js の Class と Object.extend() の出番


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


prototype.js でデザインパターン

やってみてますhttp://d.hatena.ne.jp/naoya/20050813結城さん本万歳 !

／￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ | 　ほう、 Abstract Factory ﾊﾟﾀｰﾝですか？＼　￣￣￣ | ／￣￣￣￣￣￣￣￣￣￣￣￣　　∧＿∧　　　　　　　／￣￣￣￣￣￣￣￣￣￣￣￣　（　・∀・）　 ∧ ∧ ＜　な、なんですか？あなた・・・　（　　⊃ ）　 ( ﾟ Д ﾟ； ) 　　＼＿＿＿＿＿＿＿＿＿＿＿＿￣￣￣￣￣（つ＿つ＿＿ __ ￣￣￣日∇￣＼ |ThinkPad| ＼　　　　　￣　　　 ========= 　＼


例 : 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++); }}


最近熱い JavaScript な技術


Ajax - Asynchronous JavaScript + XML

もはやおなじみの動的ロードテクニックXMLHttpRequest で非同期通信


Ajax の構成技術

JavaScript

XMLHttpRequestサーバーサイド

アプリケーション

XML API

非同期通信

HTML + CSS

ブラウザ描写(DHTML)

クライアント側サーバー側

DOM


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)

この手の処理をイベントハンド

ラに登録する


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>

Google Maps API

CSI なライブラリによる API JavaScript プログラミングで Google Maps 使える YO! GXmlHttp で Ajax りつつサーバーサイドアプリケーションと

連携 Hatena::Map<html>

　　 <head>　　 　　 <script src="http://maps.google.com/maps?file=api&v=1&key=..."　　　　　　　　　 type="text/javascript"></script> </head> <body>  <div id="map" style="width: 500px; height: 400px"></div>

 <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>


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' ] }}


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"

]

}

}


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 に渡すとか色々応用できる。


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);


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>


JSAN – JavaScript Archive NetworkJavaScript 版 CPANPerl の JSAN.pm (JSAN shell) でインストールCPAN に同じく色々ある

prototype.js から切り出されたものClassObject.extendFunction.bind

Form.Validator Form.Serializer Wikiwig DOM.Triggers Debug.logger


JavaScript 開発 & デバッグ

http://www.hatena.ne.jp/1123227040objectdump.jsVenkhmanecma-script-mode.el


ブラウザを Hack する

ブラウザを Hack する手段としての JavaScript

Bookmarkletuser script

Greasemonkey, Trixie, Turnabout ...


まとめ

JavaScript を正しく評価しようWeb 1.0 な JavaScript の先入観は捨てよう

悪い例による盲目

JavaScript でできることを " 手段 " として身に着けよう

サーバーサイドアプリケーションとの連携ブラウザ Hack 、ユーザーインタフェース PG

javascript programming 2.0

Documents