第5回ブラウザプログラミング

第 5 回の目次
前回: javascript の基本
今回:
javascript の続き
クッキー，HTTP (特に XHR)，グラフィクス
JavaScript Library
1/9
本日のソースコード
xhr1.html: data.html を xhr で読む
xhr2.html: progress 表示付きの xhr
jquery.html: 簡単な jQuery の例
jquery2.html: jQuery のアニメーションの例
以下は参考
dojo-xhr.html: dojo を使った xhr の例
dojo-accordion.html: accordion の例
dojo-accordion2.html: accordion の例
dojo-anim.html: animation (ごく簡単な例)
dojo-tooltip.html: tooltip の例
iframe.html: dojo iframe を使った xhr
2/9
JavaScript Library
JavaScript だけでは，いろいろ大変
JavaScript と Web アプリとの間のギャップ
ブラウザ間の互換性 (これが重要!)
たくさんのライブラリがある
http://jster.net
1000 以上のライブラリがある
jQuery
YUI
prototype.js
Backbone.js
Ember.js
...
JavaScript は本質的にオープンソース
3/9
jQuery とは
jQuery は利用数が多い．デファクトスタンダードに近い．
特徴:
jQuery Foundation Inc. が開発, MIT ライセンス
シンプル (オブジェクト指向すらない)
CSS を書く人には馴染みやすい (Web デザイナ)
軽い (1 万行，圧縮版なら 90KB)
プラグインが沢山ある
v2.0 が 2013 年 4 月発表 (v2 は IE9 以降のみ!)
v1 系と互換性があるはずなので，ここでは v1 系
例えば dojo toolkit を見ると jQuery のシンプルさが分かる
http://dojotoolkit.org/reference-guide/1.9/
4/9
jQuery Core API 一覧
JavaScript を使いやすくする
Ajax: Ajax
Callbacks Object: callback を使いやすくする
Deferred Object: 非同期プログラミングを同期風に
Miscellaneous:
Properties:
Utilities:
DOM 関連
Attributes: DOM 属性の取得・設定
Core: いわゆる doll
CSS: CSS スタイルの取得・設定
Data: DOM にデータを紐付ける
Dimensions: DOM の高さや幅などを取得
Effects: アニメーション風の表示効果 → jquery2.html
Events: GUI イベント
Forms: フォーム操作
Manipulation: DOM 操作
Offset: DOM の表示位置などを取得
Selectors: DOM 選択
Traversing: DOM ツリーを行ったり来たりする
5/9
jQuery の基本
jQuery が定義するのは jQuery() と$() という 2 つの関数のみ
使い方:
$(セレクタ). メソッド 1(...). メソッド 2(...);
セレクタには CSS セレクタがほぼそのまま書ける
$(セレクタ) は jQuery オブジェクトを返す
それに対してメソッド 1 を呼ぶ．
多くのメソッドは，this を返す．
それに対してメソッド 2 を呼ぶ．
【→ jquery.html】
6/9
jQuery オブジェクト
DOM ではない
$("#test1")===$("test1")
これは false になる．つまり，毎回生成される．
一つの DOM に対応するものでもない
$("p")
これはすべての<p>...</p>に対応する
$("p").css("background-color", "yellow");
とやると全部が yellow になる．(each を使えばバラバラに)
7/9
jQuery のセッターとゲッター
HTML 属性，CSS 属性，HTML 要素などなどが簡単に取得設定
可能
例:
$("#id1").attr("src") // src 属性の取得
$("#id1").attr("src", "icon.gif") // src 属性の設定
$("#id2").css("color") // CSS の取得
$("#id3").val() // HTML フォームの value 属性の取得
$("#id4").text() // 要素コンテンツをテキストで取得
$("#id5").html() // 要素コンテンツを HTML で取得
$("#id6").offset() // 要素の位置を取得
8/9
jQuery での DOM の生成
var dom1 $("<img src=’http://∼’/>");
var dom2 $("<img>", {src:url, css:∼, click: ∼);
$("#id1").append("<br/>"); // id1 の次に改行を追加
$("h1").prepend("---"); // すべての h1 の頭に"---"を追加
9/9

Download Report