応用 選択表示キーワード自動収集

前回は、htmlタグ関係、css関係、javascript関係とキーワードを設定しておいて、必要なキーワードの部分だけを選択して表示できるようにしました。

ページを作るときに、div タグに class="html" などと書くのですが、class="dom" とか、class="canvas" とか新しいキーワードを使ってしまって、ボタンを増やしてイベントハンドラの設定をするのを忘れるかもしれません。第一面倒です。

キーワードの収集とイベントハンドラの設定も javascript にやらせましょう。

タグのclass指定でキーワードを埋め込む(ここは前回とまったく同様)

ページの内容を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);
}

選択表示キーワード自動収集プログラム解説

この後はダミー ◆◆

説明のためh2を増やしています。内容は関係ありません

表の作り方

表を作るときは、まず・・・・・・・

そして・・・・・・・

背景画像の設定のし方

背景画像を使うときには、まず・・・・・・・

そして・・・・・・・

スクリプトでcssを制御する

javascriptを使ってstyle指定をすることで、見栄えを変化させられます・・・・・・・

そして・・・・・・・

floatの使い方

floatとは、レイアウトの仕方を、・・・・・・・

そして・・・・・・・

これなら分かる応用数学教室—最小二乗法からウェーブレットまで

平易ではないが、不思議とわかりやすい。「これなら分かる最適化数学―基礎原理から計算手法まで」も買ってみようかな。「プログラミングのための線形代数(平岡 和幸/堀 玄)」も悪くない

wget -r -l3 -w1 http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/index.html


ウェブページ(Feb.2011)
聖愛中学高等学校
http://www.seiai.ed.jp/