読者です 読者をやめる 読者になる 読者になる

tanaka's Programming Memo

プログラミングについてのメモ。

パーフェクトJavaScript勉強メモ(8)

前へ | 次へ

8章 クライアントサイドJavaScript

クライアントサイドJavaScriptの重要性

p224 Webアプリケーションの発達
JavaScriptの高速化
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、エラーが発生した行数の3つの引数が渡される
  • 戻り値にtrueを返すと、標準のエラー処理をキャンセルする
  • 開発中は、このイベントハンドラに、専用のログを出力してサーバに投げるとよい
各種デバッギングツール
  • p236 debugerと記載すると、その時点でブラウザのデバッガがきどうする
  • JavaScriptプロファイラを使う上で、無名関数だとエラー箇所としてanonymouse functionとのみ表示され、どれかわからない。怪しい関数には関数名をつけておいた方がよい

クラスブラウザ対応

  • p238 Webブラウザを構成するエンジン一覧
対応すべきブラウザ
実装方法
  • p240 ユーザエージェント一覧
  • ユーザエージェントによるクラスブラウザ対策例
  • p241 機能の有無で判定例
  • 挙動の違いは機能の有無で対応するが、CSSなどの表現の違いなど一部のブラウザの挙動に対応したい場合は、ユーザエージェントによる分岐を利用する

Windowオブジェクト

  • p242 windowオブジェクトは、クライアントサイドJavaScriptの最上位のオブジェクト
Navigatorオブジェクト
  • ブラウザのバージョンや利用可能なプラグインなど、ブラウザに関する情報が格納
  • userAgentプロパティが確認できる
Locationオブジェクト
  • 現在表示しているURLに関する情報を持つ
  • p243 hrefプロパティ
    • 表示ページの完全なURL
    • 新しい値を代入すると、そのURLに遷移する
    • protocol、host、hostname、port、pathname、search、hashを持つ
  • assign()メソッド
    • ページ遷移。hrefにURLを代入するのと同じ
  • replace()メソド
    • ページ遷移。href書き換えが履歴に残るのに対して、replace()は残らない
  • reload()メソッド
    • 再読み込み
    • 引数をtrueにするとキャッシュを無視して強制読み込み
    • falseを渡すか省略するとキャッシュ利用
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オブジェクトへの参照
Documentオブジェクト
  • DOMのオブジェクト
  • document.cookieプロパティでCookieの操作ができる


前へ | 次へ