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

ここでつくるもの

前回は、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);
}

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