前回は、htmlタグ関係、css関係、javascript関係とキーワードを設定しておいて、必要なキーワードの部分だけを選択して表示できるようにしました。
ページを作るときに、div タグに class="html" などと書くのですが、class="dom" とか、class="canvas" とか新しいキーワードを使ってしまって、ボタンを増やしてイベントハンドラの設定をするのを忘れるかもしれません。第一面倒です。
キーワードの収集とイベントハンドラの設定も javascript にやらせましょう。
ページの内容をdivタグで区切りclass属性として内容により、html, css, javascriptなどとキーワードを記述します。
cssの規定ではclass属性にスペースで区切って複数の値を書くことができることになっています。その項目がcssとjavascriptの両方に関係する時は、class="css javascript"と書くことができます。
<div class="html"> <h2>表の作り方</h2> <p>表を作るときは、まず・・・・・・・</p> <p>そして・・・・・・・</p> </div> <div class="css"> <h2>背景画像の設定のし方</h2> <p>背景画像を使うときには、まず・・・・・・・</p> <p>そして・・・・・・・</p> </div> <div class="css javascript"> <h2>スクリプトでcssを制御する</h2> <p>javascriptを使ってstyle指定をすることで、見栄えを変化させられます・・・・・・・</p> <p>そして・・・・・・・</p> </div> <div class="html"> <h2>floatの使い方</h2> <p>floatとは、レイアウトの仕方を、・・・・・・・</p> <p>そして・・・・・・・</p> </div> ・・・・・・・
「スクリプトでcssを制御する」の部分は、class="css javascript" と2つのキーワードが入っていることに注目してください。ここは、[スタイル] でも [javascript] でも表示されます。
今回はイベントハンドラは javascript が作ります
head部にかかれているjavascriptです。2つの function は前回と同じです。
xdisp(x) はclass属性に指定したキーワードがあるものだけを表示し、他を非表示にするものです。
function xdisp(x) { var divelements = document.getElementsByTagName("div"); for(var i=0; divelements.length>i; i++) { var classval = divelements[i].getAttribute("class") if (classval != null){ if (classval.indexOf(x,0)>=0){ divelements[i].style.display = "block"; }else{ divelements[i].style.display = "none"; } } } }
alldisp() は全部を表示するものです。
function alldisp() { var divelements = document.getElementsByTagName("div"); for(var i=0; divelements.length>i; i++) { divelements[i].style.display = "block"; } }
window.onload = function() { //var omap = {}; //eq = new Object(); var omap = { select:'選択表示にする方法',etc:'その他' }; var divelements = document.getElementsByTagName("div"); for(var i=0; divelements.length>i; i++) { var classval = divelements[i].getAttribute("class"); if (classval != null){ var classvs = classval.split(" "); for(var c=0; classvs.length>c; c++) { if (classvs[c] != null){ if (omap[classvs[c]] == undefined) omap[classvs[c]] = classvs[c]; } } } } var emtp = document.createElement("p"); emtp.setAttribute("class","btn"); for(var key in omap){ var textnd = document.createTextNode(omap[key]); var textndsp = document.createTextNode(" "); var emtspan = document.createElement("span"); emtspan.appendChild(textnd); emtspan.setAttribute("onclick","xdisp('"+key+"')"); emtp.appendChild(emtspan); emtp.appendChild(textndsp); } var textnd = document.createTextNode("全部表示"); var emtspan = document.createElement("span"); emtspan.appendChild(textnd); emtspan.setAttribute("onclick","alldisp()"); emtp.appendChild(emtspan); var emth1s = document.getElementsByTagName("h1"); var nextemt = emth1s[0].nextSibling; emth1s[0].parentNode.insertBefore(emtp,nextemt); }
前のページ「応用 選択表示」で作ったdom5.htmlに、の説明にこのページ「応用 選択表示キーワード自動収集」で説明した内容を書き加えること。
内容は何でも構わないが、テキストのページをそのままコピーしたものは課題をやったことにしない。
index.htmlからは「選択表示」という名前のリンクから行けるようにすること。
説明のためh2を増やしています。内容は関係ありません
表を作るときは、まず・・・・・・・
そして・・・・・・・
背景画像を使うときには、まず・・・・・・・
そして・・・・・・・
javascriptを使ってstyle指定をすることで、見栄えを変化させられます・・・・・・・
そして・・・・・・・
floatとは、レイアウトの仕方を、・・・・・・・
そして・・・・・・・
これなら分かる応用数学教室—最小二乗法からウェーブレットまで
平易ではないが、不思議とわかりやすい。「これなら分かる最適化数学―基礎原理から計算手法まで」も買ってみようかな。「プログラミングのための線形代数(平岡 和幸/堀 玄)」も悪くない
wget -r -l3 -w1 http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/index.html