キーワード自動収集 プログラム解説

プログラム(追加部分)

  1: window.onload = function() {
  2:   var omap = {}; //eq = new Object();
  3:   //var omap = { select:'選択表示にする方法',etc:'その他' };
  4:   var divelements = document.getElementsByTagName("div");
  5:   for(var i=0; divelements.length>i; i++) {
  6:      var classval = divelements[i].getAttribute("class");
  7:      if (classval != null){
  8:          var classvs = classval.split(" ");
  9:          for(var c=0; classvs.length>c; c++) {
 10:             if (classvs[c] != null){
 11:                if (omap[classvs[c]] == undefined) omap[classvs[c]] = classvs[c];
 12:             }
 13:          }
 14:      }
 15:   }
 16:
 17:   var emtp = document.createElement("p");
 18:   emtp.setAttribute("class","btn"); 
 19:   for(var key in omap){
 20:       var textnd = document.createTextNode(omap[key]);
 21:       var textndsp = document.createTextNode(" ");
 22:       var emtspan = document.createElement("span");
 23:       emtspan.appendChild(textnd);
 24:       emtspan.setAttribute("onclick","xdisp('"+key+"')");
 25:       emtp.appendChild(emtspan);
 26:       emtp.appendChild(textndsp);
 27:    }
 28:    var textnd = document.createTextNode("全部表示");
 29:    var emtspan = document.createElement("span");
 30:    emtspan.appendChild(textnd);
 31:    emtspan.setAttribute("onclick","alldisp()");
 32:    emtp.appendChild(emtspan);
 33: 
 34:    var emth1s = document.getElementsByTagName("h1");
 35:    var nextemt = emth1s[0].nextSibling;
 36:    emth1s[0].parentNode.insertBefore(emtp,nextemt);
 37: }
 

プログラム解説

前半はページ中のdiv要素のclass属性を集めています。

  1: window.onload = function() {
  2:   var omap = {}; //var omap = new Object();
  3:   //var omap = { select:'選択表示にする方法',etc:'その他' };
  4:   var divelements = document.getElementsByTagName("div");
  5:   for(var i=0; divelements.length>i; i++) {
  6:      var classval = divelements[i].getAttribute("class");
  7:      if (classval != null){
  8:          var classvs = classval.split(" ");
  9:          for(var c=0; classvs.length>c; c++) {
 10:             if (classvs[c] != null){
 11:                if (omap[classvs[c]] == undefined) omap[classvs[c]] = classvs[c];
 12:             }
 13:          }
 14:      }
 15:   }

1:

window.onload = function() { … } と書くことで、ページが読み込まれたときに実行されます。

2:

var omap = {} は、var omap = new Object() と書くこともできます。これは配列ではなくオブジェクトとかマップとか連想配列とか呼ばれるものです。

//より後ろはメモです。プログラムとしては無視されます。

3:

機能を拡張する場合は 2:を消して(または前に//を書いて)、3:のvarの前の//を消してこの行を有効にします。

3:では classのうち、selectとetcをあらかじめ登録しています。

この登録で、omap['select']='選択表示にする方法' , omap['etc']='その他' となります。番号の代わりに文字列で登録する配列のように考えると理解しやすいでしょう。'etc' などをキー、'その他' などを値と呼びます。omap['キー']='値' となります。

これにより2つの機能を拡張になっています。

(1)ここに登録したものはこの順で上位にならびます。この他は出現順になります。

(2)ボタンにかかれる文字を指定できます。登録しないものはclassの値をそのまま表示します。ここの例ではselectという値を含む要素は「選択表示にする方法」という名前で、etcという値を含む要素は「その他」という名前で表示されます。

4:

div要素の配列をつくり divelements という名前をつけます。

5:

その配列を使ってすべてのdiv要素について繰り返します。

6:

class属性をgetします。

7:

class属性に値があるときだけ作業します

8:

classの値をスペースで分けて配列に格納します。

9:

その配列になった値についてすべて処理すべて処理します。

10:

これで値がないことはないと思うが、保険をかける。

11:

ここで omapに登録します。classvs[c] にキーとなる値が入っています。事前登録していないキーが付け加わり、omapの要素が増えていきます。キーの値は、3:で事前登録してあるものはそのまま、いないものはキーと同じ文字列を登録します。

後半は要素を作ってボタンにします。

 17:   var emtp = document.createElement("p");
 18:   emtp.setAttribute("class","btn"); 
 19:   for(var key in omap){
 20:       var textnd = document.createTextNode(omap[key]);
 21:       var textndsp = document.createTextNode(" ");
 22:       var emtspan = document.createElement("span");
 23:       emtspan.appendChild(textnd);
 24:       emtspan.setAttribute("onclick","xdisp('"+key+"')");
 25:       emtp.appendChild(emtspan);
 26:       emtp.appendChild(textndsp);
 27:    }
 28:    var textnd = document.createTextNode("全部表示");
 29:    var emtspan = document.createElement("span");
 30:    emtspan.appendChild(textnd);
 31:    emtspan.setAttribute("onclick","alldisp()");
 32:    emtp.appendChild(emtspan);
 33: 
 34:    var emth1s = document.getElementsByTagName("h1");
 35:    var nextemt = emth1s[0].nextSibling;
 36:    emth1s[0].parentNode.insertBefore(emtp,nextemt);
 37: }

17:

p要素をつくり、emtpという名前をつけます。

18:

そのp要素にclass="btn"という属性をつけます。スタイルシートのためです。

19:

omapの全要素にわたり繰り返します。配列と違い番号ではアクセスできませんので、このようにします。omapのキーが一つ一つkeyという変数に入ります。値はomap[key]で取り出します。

20:

omap[key]のテキストを元にテキストノードを作りtextndという名前をつけます

21:

ボタンの間にスペースを入れるためにスペースのテキストノードを作ります。textndspという名前にします。

22:

span要素を作ってemtspanという名前をつけます。

23:

テキストノードtextndをspan要素emtspanに加えます。

24:

span要素に onclick="xdisp('キー')" という属性を加えます。'キー'はkeyつまりomapに格納された「キー:値」のうちのキーの部分が入ります。

25:

span要素をp要素(の最後)に加えます。

26:

さらにp要素にテキストノードになったスペースを加えます。これはspan要素間に隙間を作るためです。

27:

forの繰り返しの終わりです。

28:

全部表示のボタンを作ります。まずテキストノードを作りtextndとします。

29:

span要素を作ってemtspanという名前をつけます。

28:,29:は20:,22:と同じ名前で両方ともvarがついていますので他のプログラム言語を知っている方は不思議に感じられるかもしれません。varはなくても正常に働きますが、グローバル変数になります。変数に同じ名前をつけると、前の要素がその名前で呼べなくなる(参照しなくなる)だけで、新しい要素を指定するのには支障ありません。

ただし、span要素なら前にも作ったからと、createElement("span")を省くと、前に作ったspan要素を使うことになってしまいますからcreateElement()はページに書くspan要素の数だけ実行する必要があります。

30:

テキストノードtextndをspan要素emtspanに加えます。

31:

span要素に onclick="alldisp()" という属性を加えます。

32:

span要素をp要素(の最後)に加えます。

34:

h1要素の配列をつくり emth1s という名前をつけます。最初のh1であるemth1s[0]のみを使う予定です。

35:

最初のh1であるemth1s[0]の次の要素(nextSibling)を探してnextpと名前をつけます。nextSiblingは子ノードではありません。隣の要素です。兄弟にあたります。

36:

emth1s[0]の親要素とnextSiblingを使って、spanの入ったp要素をnextpの前に挿入します。