8章 クライアントサイドJavaScript
クライアントサイドJavaScriptの重要性
p224 Webアプリケーションの発達
JavaScriptの高速化
- p225 Google ChromeやFirefoxは6週間ごとにバージョンアップする
JavaScriptの役割
- 見た目の分かりやすさや使いやすさの提供
- クライアントサイドとサーバサイドで適切に機能を分けるとよい
HTMLとJavaScript
p226 Webページを表示するときの処理の流れ
JavaScriptの記述方法と実行タイミング
- p227 scriptタグ
- もっとも単純な方法
- タグが解析された直後
- タグ以降のDOM要素を操作できない
- body自体に操作を加えたい時は、onloadやDOMContentLoadedのタイミングで実行する
- この方法はシンプルだが、通常は利用しない
- p228 外部JavaScriptファイルの読み込み
- JavaScriptファイルを外部に保存し、読み込む
- scriptタグが解析されたタイミングで、スクリプトファイルが読み込まれ、読み込みが完了したら実行される
- deferを指定すると、他のscriptタグを処理し終えてから実行を開始するように遅延
- asyncを指定すると、非同期に読み込み、読み込みが完了後に逐次実行
- ファイルを分ける利点
- キャッシュできる
- チーム作業がラクになる
- エディタのシンタックスハイライトをHTML,CSS,JavaScriptを分けることで個別に適用できる
- p229 onload
- ページの読み込み完了後に実行
- ページすべてを読み込んだ後で実行されるので、すべてのDOM要素を操作可能
- bodyタグに記述
- 外部JavaScriptに記述するにはwindow.onloadに代入
- この場合、画像の読み込み完了後の実行になる
- 起動処理はここより前でやった方がよい
- DOMContentLoaded
- HTMLの解析が終わった直後に発生
document.addEventListener('DOMContentLoaded',function() {alert('hello');},false);
-
- IE8以前では動作しない
- p230 IE8以前用のイディオム例
- 動的ロード
- JavaScriptでscript要素を生成することで、動的にJavaScriptファイルをロード可能
- JavaScriptファイルのダウンロードから実行が開始されるまではその他の処理をブロックしない
- HTMLに直接script要素がある場合、読み込みが完了するまで画像ファイルやCSSファイルのダウンロードがブロックされる。それがなくなる
実行タイミングのまとめ
- IE8以前をどうするかを検討した上で、DOMContentLoadedを利用するのが最適
実行環境と開発環境
p231 実行環境
開発環境
デバッグ
alert
p232 console
- もともとはFirebugに実装されていた機能だが、その他のブラウザにも実装された
- p233 console.log(文字列)でconsoleに表示
- console.log / .debug / .error / .warn / .infoがある
- log以外は行数も表示される
- console.dir()…引数にわたされたオブジェクトをダンプ表示
- console.dirxml()…DOM要素をHTMLとして表示
- console.trance()…関数がどこから呼ばれたかがわかる
- p234 console.time()〜.timeEnd()…間の処理時間を計測して表示
- console.count()…その行が何回実行されたか表示
- console.profile()〜profileEnd()…より詳細な計測
- 負荷が高いのでパフォーマンスは落ちるが、相対的に観測して利用する価値は高い
- console.assert()…指定した条件がfalseになるときのみlog表示
onerror
- p235 JavaScriptでエラーが起きるとWindowオブジェクトのonerrorプロパティの関数が呼び出される
- エラーメッセージ、エラーが発生したJavaScriptを含むドキュメントのURL、エラーが発生した行数の３つの引数が渡される
- 戻り値にtrueを返すと、標準のエラー処理をキャンセルする
- 開発中は、このイベントハンドラに、専用のログを出力してサーバに投げるとよい
各種デバッギングツール
- p236 debugerと記載すると、その時点でブラウザのデバッガがきどうする
- JavaScriptプロファイラを使う上で、無名関数だとエラー箇所としてanonymouse functionとのみ表示され、どれかわからない。怪しい関数には関数名をつけておいた方がよい
クラスブラウザ対応
- p238 Webブラウザを構成するエンジン一覧
対応すべきブラウザ
実装方法
- p240 ユーザエージェント一覧
- ユーザエージェントによるクラスブラウザ対策例
- p241 機能の有無で判定例
- 挙動の違いは機能の有無で対応するが、CSSなどの表現の違いなど一部のブラウザの挙動に対応したい場合は、ユーザエージェントによる分岐を利用する
Windowオブジェクト
- p242 windowオブジェクトは、クライアントサイドJavaScriptの最上位のオブジェクト
Navigatorオブジェクト
- ブラウザのバージョンや利用可能なプラグインなど、ブラウザに関する情報が格納
- userAgentプロパティが確認できる
Locationオブジェクト
Historyオブジェクト
- p244 back()、forward()、go(1)、go(-2)などで、進む、戻るボタンを処理
Screenオブジェクト
- 画面の大きさや色数など
- 移動も可能だが、操作性として適切じゃない
Windowオブジェクトへの参照
- windowプロパティ
- グローバルオブジェクト
- p245 framesプロパティ
- 複数のフレームがある場合、それらのフレームへ参照
- フレームがない場合はnull
- フレーム自体もwindowオブジェクト
- selfプロパティ
- 自分自身のWindowオブジェクトを参照する
- windowプロパティと同じオブジェクトを参照
- parentプロパティ
- サブフレームから親フレームへの参照
- 親フレームがないときは、windowオブジェクトへの参照になる
- topプロパティ
- 入れ子フレームの最上位フレームへの参照
- 自分が最上位フレームの場合、windowオブジェクト
- 自分自身が最上位のWindowオブジェクトの時は、window、self、parent、topは全て同じWindowオブジェクトへの参照
