コンピュータを便利に使う tips などをメモ
新しいイベントハンドラの使い方や
ノードのスタイルを変更する方法を覚えながら、ユーザーフレンドリーでダイナミックなアプリケーションを開発する。
この章で、DOM技術をさらに高いレベルで使うことが出きるようにする。
CDカバーのイメージがクリックされる度に、addToTop5()関数が実効されうようにする。
サンプル： <div>エレメントcds内にある、すべての<img>エレメントにイベントハンドラを追加する関数を作る。
function addOnClickHandlers() {
var cdsDiv = document.getElementById("cds");
var cdImages = cdsDiv.getElementsByTagName("img");
for (var i=0; i
ページがロードされると同時にaddOnClickHandlers()が設定されるようにするため<body>エレメントでonLoad()を使う。
- CDをトップ５リストに追加する addToTop5()
CDがクリックされたら、そのCDを画面の上部分にある<div>エレメントcdsから、下部分にあるトップ5リストに移動させる。
- thisに注目する
JavaScriptでは、関数を呼び出したDOMツリーの部分を特定するために「this」というキーワードを使う。
サンプルでは<img>エレメントはキーワードthisによってポイントされている。
- エレメントに子ノードを追加する
- エレメントは常に1つの親しか持たないのです
- DOMツリーに順位を追加する
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);
}
- 最終テスト
addOnClickHandlers()
addToTop5() : CDをトップ5リストに追加
startOver() ：トップ5にあるCDをすべてクリアし、初めからやり直す。
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;
}
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.
// img ファイル ......
My Top 5 CDs
ドキュメントオブジェクトモデル(DOM)について
「Head Rush Ajax 学びながら読むAjax入門」を読んだ後にこのページを見て、DOMについての理解が整理されました。
