HOME  »   チップス  »  Head Rush Ajax 学びながら読むAjax入門 を読む 4.5章
チップス

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


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

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

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

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

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

    5. CDカバーのイメージがクリックされる度に、addToTop5()関数が実効されうようにする。

    • JavaScript を使ったプログラミングによって、すべての<img>エレメントにイベントハンドラを追加する。
  5. イベントハンドラを追加する

    6. サンプル： <div>エレメントcds内にある、すべての<img>エレメントにイベントハンドラを追加する関数を作る。

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

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

    

  6. CDをトップ５リストに追加する addToTop5()
    7. 

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

  7. thisに注目する
    8. 

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

  8. エレメントに子ノードを追加する
    9. 

  9. エレメントは常に1つの親しか持たないのです
    10. 

  10. DOMツリーに順位を追加する
    11. 

    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);
}
    

  11. 最終テスト
    12. 



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 オブジェクトから属性をまとめて取得する
      • 

    • エレメントから属性を取得する
      • 

    • エレメントに属性を追加する
      • 

    • エレメントから属性を除外する
      • 

    












  
チップス