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

前へ | 次へ

11章　実践クライアントサイドJavaScript

• p281 DOM操作とイベントの扱いがクライアントサイドJavaScriptの基本

スタイル

スタイル変更方法

• classNameプロパティでclass名を変更する
  • スタイル操作でもっとも簡単な方法
  • p282 指定した要素が隣接要素や子要素を持つ場合、大量の変更が発生してパフォーマンスが落ちる
  • 個別にクラス名を設定しておくなど
• classListプロパティでclass名を変更する
  • p283 HTML5で追加されたclassListプロパティを使うとより簡単にクラスの変更が可能
  • p284 this.classList.変更コマンド(クラス名)
  • contains(クラス名)…指定のオブジェクトのクラスに指定のクラスが含まれているか
  • add(クラス名)…クラス名を追加する
  • remove(クラス名)…クラス名を削除
  • toggle(クラス名)…クラス名を追加したり、削除
• styleプロパティを変更する
  • DOMのstyleプロパティを直接操作
  • CSSで!importantが付与されているものを除いて、styleに設定した方が優先される
  • プロパティ名は、ハイフンを削除して、接続文字を大文字にする
  • floatはcssFloatプロパティで指定
  • p285 機能とデザインの分離ができないので、あまり推奨しない
• スタイルシートそのものを変更する
  • p286 CSS読み込みのタグにidを設定して起き、該当するidの要素のdisabledプロパティを設定して、CSSを丸ごと有効、無効にする
  • ページ全体のスタイルを丸ごと切り替えるような場合に利用

位置の指定

• p287 position属性
  • staticは、デフォルト値。自動的にレイアウトが決まる
  • fixedは、ブラウザウィンドウを基準とした相対位置で配置できる。スクロールの影響は受けない。IE6未対応
  • absoluteは、その要素を含む要素からの相対位置で配置できる
  • p288 relativeは、タグに従って配置された後、その位置を基準とした相対位置で配置。absoluteの基準となる要素にrelativeを指定するような使い方をする。absoluteは、static属性の要素は基準にならないので、relativeを利用する

位置

• MouseEventが発火した際のEventオブジェクトにマウスの座標が入っている
• スクリーン座標は、screenX,screenYで取得できる。ディスプレイの左上を基準とした座標系
• ウィンドウ座標は、clientX,clientYで取得できる。ブラウザの表示領域の左上を基準とした座標系。文章・要素のスクロール量の影響は受けない
• ドキュメント座標は、pageX,pageYで取得できる。ドキュメントの左上を基準とした座標系。スクロールの影響を受ける。これは独自実装で、IE8以前では使えない
• p289 layerX,layerYあるいはoffsetX,offsetYは、発火した要素内での相対座標を取得できる。Webブラウザの独自実装
• Element.getBoundingClientRect()で、ウィンドウ座標系での要素の領域情報を取得できる

アニメーション

• p290 setInterval()で定期的な呼び出しを行い、座標や透過度などの変化をさせる
• CSS3でも可能。実装次第だが、通常はCSS3によるアニメの方がパフォーマンスがよい

AJAX

• 2005年にJesse James Garrett氏により命名
• p291 技術自体はGoogleのGmailがすでに利用
• AJAXによりJavaScriptが再評価された

(補足：ajaxはjQueryを利用すると楽)

非同期処理の利点

XMLHttpRequest

• JavaScriptからサーバに対して動的にリクエストを送るにはXMLHttpRequestオブジェクトを利用する
• 標準化されていないが、IE7以降を含むモダンブラウザには実装されている
• IE6での実装例

基本的な処理の流れ

• p292 XMLHttpRequstオブジェクトの生成
• 容量的にやり取りはJSON推奨
• p293 openで、非同期、同期の指定が可能。第3要素と第4要素にはユーザIDとパスワード
• Cookieは自動的に解決

同期通信

• send()で送信したあと、通信が返るまで待つので、そのあとで戻り値を処理すればよい
• 分かり易いが操作性として難があるので動作確認程度

タイムアウト

• 同期通信でレスポンスが返らなかった時にリクエストをキャンセルするための方法
• 非同期ではずっと待つこともできるが、適切なタイムアウトを設定しておいた方がよい
• 定期的に通信する場合、通信が終わっていない場合は前の処理をタイムアウトさせて、新しく送ると通信量が減らせる
• abort()でリクエストのキャンセル
• setTimeout()にabort()を設定して発動しておき、レスポンスが返ってきたらclearTimeout()でタイムアウトをキャンセル

レスポンス

• p295 responseTextに汎用的なレスポンスが返る。text/plain以外もこのプロパティにデータが返る
• XMLのレスポンスはresponseXMLプロパティで参照すると、解析結果にアクセスできる
• p296 JSONを受け取る時は、responseTextをJSON.parse()で変換。IE7以前用にはjson2.jsなどを利用

クロスオリジン制限

• オリジンとは、プロトコル(http:,https:)、ホスト名、ポート番号で構成される要素
• 通常、オリジンが同一の場合のみ通信を許可する
• サーバ側でリクエストを転送して結果を返させれば越えられる

クロスオリジン通信

• p297 異なるオリジンに対してリクエストを発行することをクロスオリジン通信という

JSONP

• XMLHttpRequestはクロスオリジン通信できないが、scriptタグはscrプロパティに別ドメインのJavaScriptを指定して読み込める
• JavaScriptで動的にscriptタグを生成すれば、別ドメインのデータが読めるが、データを取り出すだけでは利用ができないので、JSONPが考案
• JSON with Paddingの略で、PaddingとはJSONデータに関数名を付加する意味
• p298 サーバはJSONに関数名を付加したデータを返す。クライアントは受け取ったデータに付加されている関数名があればその関数を実行するという仕組み
• JSONPは、scriptタグのデータを処理しているだけなので、POSTでの通信ができない

iframeハック

• 親ページと孫iframeを同じドメインで、子iframeが違うドメイン
• 親ページから、子ページのドメインのhtmlを指定してiframeを作成。この時、URLにハッシュフラグメントを含める。ハッシュフラグメントにAPI呼び出しに利用したいデータを指定
• 子ドメイン内に、親孫ドメインのページを指定したiframeを作成。これが孫iframe
• 孫iframeのURLにもハッシュフラグメントを指定
• 孫iframeのonloadで、親ページの関数を呼び出し、location.hashの値を引数に渡す
• p301 IEでも動作し、JSONPよりも安全。JSONPはサーバに悪意があれば対処できないが、iframeだと自ドメインにある孫iframeを経由しないと親ページを操作できないので、安全性が上がる

window.postMessage

• HTML5で定義されたwindow.postMessageを使うとクロスオリジン通信が可能

XMLHttpRequest Level2

• p303 Level2には、機能が追加されている
• サーバ側の許可をした上で、Access-Control-Allow-OriginというHTTPヘッダをレスポンスに含めることで、アクセス可能なドメインを指定できる
• "*"を値で設定すると、すべてのドメインからのアクセスを許可(限定すべき)
• この方法で通信する場合、標準ではCookieは送信されない。Cookieを使うには、withCredentialsプロパティにtrueを入れる

クロスオリジン通信のセキュリティ問題

• 異なるドメインとの通信は基本的にリスクがある
• 信頼できたサイトが乗っ取られてリスクになることもある

フォーム

• フォームでは、submitするとページ遷移が発生してしまう。ページの遷移はAJAXには不要
• submitを使わなくても、XMLHttpRequestで通信すればよい
• フォームを使った方がよい方法を紹介

フォーム要素

• p304 HTMLFormElementというHTMLElementを継承したインターフェースを持つ
• elementsは、フォーム内のコントロール要素
• フォーム要素自体は、document.formsで参照できる
• p305 いずれも、HTMLで記載されている順に列挙されるが、順番よりname属性を使うべき
• submit()メソッドで、submitボタンを押した時の処理を実行できる。submitイベントは発火しない。resetも同様
• onsubmit()イベントハンドらがfalseを返すとフォームのデータはサーバに送信されない。resetも同様

フォームコントロール要素

• フォームで入力を受け付ける要素のこと
• input,select,button,textareaなど
• p306 disabledプロパティをtrueにすると、入力ができなくなる
• focus()メソッドで特定のフォームを選択し、blur()でフォーカスを外す。これらはon～が発火する

内容の検証

• p307 内容の研修のタイミング
• submitボタンが押されたとき
• データが入力された直後

検証に利用できるイベント

• submit…submit()メソッドでは発火しないので、その時は自前で検証を呼ぶ
• focus,blur…ユーザの入力対象を明示したり、フォーカスが外れた時に検証したり
• change…input要素の値が変更されたタイミング。テキストでは使いづらいので、チェックボックスなどに利用
• p308 keydown,keyup,keypress…扱いづらい
• input…テキストボックスで1文字入力されるごとに発火。キー操作ではなく、文字の変更があった時に発火。HTML5の仕様なので、IE8以下は未対応

フォームを使ってページ遷移を発生させない方法

• targetプロパティで指定されたフレームやウィンドウに、submitの結果を送る
• 省略された場合は自分自身が属するフレームおよびウィンドウ
• p309 ページ遷移を抑制するには、targetに現在のウィンドウや空白ではなく、幅と高さ0のiframeを作成して、それを指定する
• これで遷移はしない(補足：単純にデフォルトの挙動をキャンセルした方がよさそう)

前へ | 次へ