おそらくはそれさえも平凡な日々

私はhtmlとJavaScript部分を担当。普段はテーブルで表示して、ボタンを押すと、フォームに切り替わるみたいな機能を作成。4時間でJavaScriptを200行程度しかかけない自分に絶望した。エラー出しまくりだし、まだまだ理解していないことが多いなぁと。

いつもEmEditorでコーディングしているのだが、EmEditor標準の設定だと、DOM関連のメソッド、プロパティを強調表示してくれないので、設定ファイルを作成した。たいしたものではないが、ここに公開するものである。

em_js_dom.csv

使い方：
ツール → 現在の設定のプロパティ → 強調(1) タブ → インポート

として、このファイルを指定すればOK。既存の設定を消すかどうか聞かれるが、標準の設定もこのファイルに含めてあるのでどちらでも構わない。良く書かれることであるが、自己責任でお使いください(使う人がいるならね…)

ちなみに今回のプログラムでは、なんとなく連想配列を上手く使えた感がある。というよりかはJavaScriptでは初めて使った。

htmlのselectタグ内のname属性名とそれに対するoptionのリストを連想配列にしておいて、JavaScriptでselect内部を書き出すというもの。

嬉しかったので、ちんけなコードながらここに貼り付けておくことにする。(勿論、このままのものを仕事で書いたわけではない。)

window.onload = insertOpts;
function insertOpts(){
  var selectLst = {//name属性とoptionリストの連想配列
    weather : ['晴れ','曇り','雨','雪'],
    editor : ['Vim','Emacs','EmEditor','秀丸','TeraPad'],
    browser : ['IE','Opera','Firefox','safari']
  }
  var i; var j;
  var nameAtt;
  var tmpLst;
  var optElm;
  var tmpTxt;
  var selectElms = document.getElementsByTagName("select");
  //各セレクトノードにオプションを追加
  for(i=0;i<selectElms.length;i++){
    nameAtt = selectElms.item(i).getAttribute("name");
    tmpLst = selectLst[nameAtt];
    for(j=0;j<tmpLst.length;j++){
      optElm = document.createElement("option");
      optElm.value = tmpLst[j];
      tmpTxt = document.createTextNode(tmpLst[j]);
      optElm.appendChild(tmpTxt);
      selectElms.item(i).appendChild(optElm);
    }
  }
}