java script4
TRANSCRIPT
JavaScript 最終回
～興味を持って頂いた方の為に～
本間 皇成
本日の予定
• ブラウザで JavaScript
• Web 2.0 と Ajax
• ライブラリを用いる
• ガジェット開発
• HTML5
ブラウザで JavaScript
JS だから当たり前のことですが。。
必要な環境の整備• FireFox• Firebug
• jsdo.it– OpenID で楽々サインイン！
Firebug
• 便利なデバッグツール
– コンソールを有効にして更新ボタンを押す
– コードの中に console.log で確認の出力
– その他 CSS 、 DOM の確認等
まとめてみましたhttp://bit.ly/9o4Cze
HTML5 の外枠<!doctype html><html> <head> <meta http-equiv="Content-Language" content="ja"> <script type="text/javascript" src="lesson1.js"></script> <title>Sample Web Site</title> </head> <body>
</body></html>
イベントドリブンモデル
ページ内で発生した出来事 （イベント）に
応じて対応する処理 （イベントハンドラ関数） を呼び出し、実行する
今までの 1 行ずつ実行していた形式とは違う！
イベントドリブンモデルWeb ページ
ボタンがクリックされた！
onclick
ページが読み込まれた！
onload
キーが押された！onkeydown
→ その時どうする？（イベントハンドラ）
イベントドリブンモデル
ぼたん
< input type=“button” value=“ ぼたん” onclick=“btn_click()” />
・ HTML （表示側）
・ JavaScript （処理側）
function btn_click(){ alert(‘ クリックされたよ！’ );}
http://jsdo.it/cev/38pS
DOM (Document Object Model)
JS で HTML をいじることが可能
要素の追加、削除、変更 → 動くウェブサイトが作れる！
DOM (Document Object Model)
– 要素を作る、属性を設定する• var tag = document.createElement( タグ名 );• tag.id = , tag.href =
– 現在存在する HTML の要素を得る• document.getElementById( 要素名 );
– 作成した要素を指定した要素の末尾に追加• 追加される要素 .appendChild( 追加する要素 );
例）http://www.sw.it.aoyama.ac.jp/2009/Mashup/homma/js_study/asobi/asobi.html
Ajax
• ブラウザからリクエストを送ってレスポンスを待つという方法でしか通信できなかった
• JavaScript で HTTP 通信を可能にする– XMLHttpRequest オブジェクト– 非同期通信 +DOM でローカルのアプリケー
ションと変わらぬ感覚でウェブを利用できるhttp://sw.it.aoyama.ac.jp/2009/Mashup/homma/ajax/ajax.html
ライブラリ
getElementById とか書くのメンドクサイ・・ クロスブラウザ問題。 こらっ IE !!
→ ライブラリがあります！
2 大ライブラリ• Prototype.js – 速度が要求される演算– 複雑なアルゴリズムを使用した計算– 他のクラスを拡張した処理（ google maps とか）– Ruby っぽく書ける ( みんな大好き each も存在 )
• jQuery – 簡単な DOM 操作– イベント処理– ブログパーツ
http://jsdo.it/cev/8x96
ガジェット開発 iGoogle ,Yahoo! gadget, Windows gadget 、 Mixi アプリ 、 ブラウザ拡張
– JS ＋＠ で作ることが可能！
– 共通ではないので、各規約を読みながらの開発となる
HTML 5
新しい HTML 規格
注目すべきは canvas , video 要素→ JS でいじれる！
canvas testhttp://jsdo.it/cev/rKdL
興味深い新技術 O3Dhttp://jsdo.it/cev/21yg
参考文献
• JavaScript マスターブック 山田祥寛 ( 著 )
• Prototyper に贈る jQueryst からの手紙
http://tech.kayac.com/data/jquery-to-prototype/index.html
• とほほの JavaScript リファレンス http://www.tohoho-web.com/js/index.htm
まとめ
プログラミングの上達の秘訣は
自分で考えたものを楽しんで作ることだって偉い人が言ってた。
JavaScript でそれができるかも！
ありがとうございました！