チップス

Head Rush Ajax 学びながら読むAjax入門 を読む 4.5章


4.5章 DOMアプリケーションを作る

ajaxbooks 新しいイベントハンドラの使い方や

ノードのスタイルを変更する方法を覚えながら、ユーザーフレンドリーでダイナミックなアプリケーションを開発する。

この章で、DOM技術をさらに高いレベルで使うことが出きるようにする。

  1. 誰もが批評家
  2. ゲームプランを練る
    1. JavaScriptコードを格納するためのファイルを作成: top5.js
    2. CDカバーがクリックされたとき、そのCDをトップ5リストに追加するための関数を作成: onClick()イベントハンドラ、addToTop5()
    3. 順位を表示するため、トップ5リストの書くCDに1から5までの番号を追加: addtoTop5()内に記述する
    4. やり直しのボタンがクリックされたとき、それまでの選択をすべてクリアする関数を作成: startOver()関数とする
  3. 全体図を描く
    • top5.js
    • top5.css
    • top5.html
  4. CDカバーを設定する
  5. CDカバーのイメージがクリックされる度に、addToTop5()関数が実効されうようにする。

    • JavaScript を使ったプログラミングによって、すべての<img>エレメントにイベントハンドラを追加する。
  6. イベントハンドラを追加する
  7. サンプル: <div>エレメントcds内にある、すべての<img>エレメントにイベントハンドラを追加する関数を作る。

    function addOnClickHandlers() {
      var cdsDiv = document.getElementById("cds");
      var cdImages = cdsDiv.getElementsByTagName("img");
      for (var i=0; i
    

    ページがロードされると同時にaddOnClickHandlers()が設定されるようにするため<body>エレメントでonLoad()を使う。

    
    
  8. CDをトップ5リストに追加する addToTop5()
  9. CDがクリックされたら、そのCDを画面の上部分にある<div>エレメントcdsから、下部分にあるトップ5リストに移動させる。

  10. thisに注目する
  11. JavaScriptでは、関数を呼び出したDOMツリーの部分を特定するために「this」というキーワードを使う。
    サンプルでは<img>エレメントはキーワードthisによってポイントされている。

  12. エレメントに子ノードを追加する
  13. エレメントは常に1つの親しか持たないのです
  14. DOMツリーに順位を追加する
  15. function addToTop5() {
      var imgElement = this;
      var top5Element = document.getElementById("top5");
      var numCDs = 0;
    
      for (var i=0; i= 5) {
        alert("You already have 5 CDs. Click \"Start Over\" to try again.");
        return;
      }
    
      top5Element.appendChild(imgElement);
      imgElement.onclick = null;
    
      var newSpanElement = document.createElement("span");
      newSpanElement.className = "rank";
      var newTextElement = document.createTextNode(numCDs + 1);
      newSpanElement.appendChild(newTextElement);
      top5Element.insertBefore(newSpanElement, imgElement);
    }
  16. 最終テスト

top5.js で定義された関数

addOnClickHandlers()
addToTop5() : CDをトップ5リストに追加
startOver() :トップ5にあるCDをすべてクリアし、初めからやり直す。

サンプル CSS

body {
  font-family:   "Comic Sans MS", Verdana, sans-serif;
  text-align:    center;
}

#instructions {
  margin:        20px 200px;
}

#cds {
  width:         400px;
  margin:        20px auto 20px auto;
}

form {
  position:      relative;
  margin:        50px auto auto auto;
}

img.cover {
  height:        70px;
  padding:       10px;
}

#top5-listings {
  margin:        50px auto;
}

#top5 {
  position:      relative;
  border-top:    thin solid black;
  margin:        50px auto 10px auto;
  width:         650px;
  padding:       10px;
  text-align:    left;
}

#top5 img {
  position:   relative;
  height:        100px;
  padding:         0px;
  margin:         10px;
  top:            10px;
  left:            5px;
  z-index:           1;
}

.rank {
  position:         absolute;
  text-align:       center;
  top:              5px;
  font-size:        small;
  background-color: black;
  color:            white;
  border:           thin solid white;
  width:            50px;
  z-index:            99;
}

サンプル htmlファイル


 
  Top 5 CD Recommendations
  
  
  

 
  
Click on a CD cover to add it to the Top 5 list. If you want to start over, click the "Start Over" button to clear the Top 5 list.
Texas Flood, by Stevie Ray Vaughan The Cream of Clapton, by Eric Clapton // img ファイル ...... Lie to Me, by Jonny Lang

My Top 5 CDs

参考URL

ドキュメントオブジェクトモデル(DOM)について
 「Head Rush Ajax 学びながら読むAjax入門」を読んだ後にこのページを見て、DOMについての理解が整理されました。

DOM オブジェクトの操作

  • 任意のエレメントを取得する
    • 名前属性からエレメントを取得する
    • ID 属性からエレメントを取得する
    • クラス名属性からエレメントを取得する
    • タグ名からエレメントを取得する
    • セレクタにマッチするエレメントを取得する
    • <HTML> タグに相当するエレメントを取得する
    • <BODY> タグに相当するエレメントを取得する
  • DOM オブジェクトから親や子を取得する
    • 親 DOM オブジェクトを取得する
    • 直前(隣)の DOM オブジェクトを取得する
    • 直後(隣)の DOM オブジェクトを取得する
    • 最先頭の 子 DOM オブジェクトを取得する
    • 最後尾の 子 DOM オブジェクトを取得する
    • すべての 子 DOM オブジェクトを取得する
  • DOM オブジェクトを動的に作成する
    • エレメントを動的に作成する
    • テキストを動的に作成する
    • エレメントに「HTML 文字列」をセットして、DOM オブジェクトをまとめて構築する
    • エレメントに「文字列」をセットして、テキストを構築する
  • DOM オブジェクトをノードに登録する
    • DOM オブジェクトの直前(隣)に登録する
    • DOM オブジェクトの直後(隣)に登録する
    • DOM オブジェクトの最先頭の子に登録する
    • DOM オブジェクトの最後尾の子に登録する
    • 登録済みの DOM オブジェクトと交換する
  • DOM オブジェクトをノードから外す
    • removeChild()
  • DOM オブジェクトの値にアクセスする
    • エレメントの値を「HTML 文字列」として取得する
    • エレメントの値をテキストとして取得する
    • テキストの値にアクセスする
  • DOM オブジェクトの属性にアクセスする
    • Attr オブジェクトを作成する
    • DOM オブジェクトから属性をまとめて取得する
    • エレメントから属性を取得する
    • エレメントに属性を追加する
    • エレメントから属性を除外する

   チップス