温故知新 linux実践講座

温故知新 linux実践講座

温故知新。linuxを使いこなしてみよう。

ホーム » スクリプト入門 » Head Rush Ajax 学びながら読むAjax入門 を読む 4.5章

— 広告 —


— 広告 —

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

所要時間 約 2分

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<cdImages.length; i++) {
        cdImages[i].onclick = addToTop5; //このイベント発生時にaddToTop5()が実効される
      }
    }

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

    <body onLoad="addOnClickHandlers();">
  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<top5Element.childNodes.length; i++) {
        if (top5Element.childNodes[i].nodeName.toLowerCase() == "img") {
          numCDs = numCDs + 1;
        }
      }
      if (numCDs >= 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ファイル

<html>
 <head>
  <title>Top 5 CD Recommendations</title>
  <link rel="stylesheet" type="text/css" href="top5.css" />
  <script type="text/javascript" src="top5.js"> </script>
 </head> 
 
 <body onLoad="addOnClickHandlers();">
  <div id="instructions">
   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. 
  </div>  
 
  <div id="cds">
   <img class="cover" src="images/vaughan_flood.jpg" 
                      alt="Texas Flood, by Stevie Ray Vaughan" />
   <img class="cover" src="images/clapton_cream.jpg" 
                      alt="The Cream of Clapton, by Eric Clapton" />
 
   // img ファイル ......  
 
   <img class="cover" src="images/lang_lie.jpg"  
                      alt="Lie to Me, by Jonny Lang" />
  </div>  
 
  <div id="top5-listings">
   <h2>My Top 5 CDs</h2>
   <div id="top5"></div>
  </div>  
 
  <form>  
   <input type="button" value="Start Over" onClick="startOver();" />
  </form> 
 </body> 
</html>

参考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 オブジェクトから属性をまとめて取得する
    • エレメントから属性を取得する
    • エレメントに属性を追加する
    • エレメントから属性を除外する
-- 広告 -- -- 広告 --

 

この記事に関連する記事一覧

アフィリエイトで稼ぐ
プロフィール

ぴよふぁくとりぃです。

職業は自宅でサーバ管理、資格は薬剤師です。
趣味も職業もパソコンラブです。
よろしくね。
連絡先: admin@arakanoj.com
URL: http://piyofactory.com

検索
人気ページ
東京電力予想最大電力(万kW)
twitter
使い方を知れば知るほど楽しく使える Linux。
Linux の基本を覚えてもっともっと楽しいコンピュータの使い方を身につけましょう。