[JavaScript] しらべたこと

Web開発はPHP1本だけだったけど、JavaScriptを併用することでいろいろと便利になる箇所もあるので、
勉強しておる

連想配列を動的に作成

var objArray = new Object();

objArray['Hash1'] = "TEST";

console.log(objArray['Hash1']); //TEST が出力される

PHPでもできる、連想配列の動的な作成
JavaScriptにおいては配列として作るというよりはオブジェクトらしい

連想配列の中身を全て見る

var objArray = new Object();

objArray['Hash1'] = "TEST";
objArray['HashB'] = "テスト";

Object.keys(objArray).map( function(ikey){
    console.log( objArray[ikey] );
});

※コールバック関数については知っている前提で

Object.keys([連想配列]).map を用いることで全てのキーでループする
Lengthなどを用いたforループでは連想配列の全ては取れない

同ディレクトリのファイルを取得する

var objXhr = new XMLHttpRequest();
var vUrl   = location.protocol + "//" + location.hostname + "/test.txt";
objXhr.open("GET", vUrl, false);
objXhr.send();

console.log(objXhr.responseText);  // test.txt の中身が出力される

VBなどのように、同ディレクトリに対して openするといった命令はJavaScriptにはない
したがって、内部的に取りたいデータであっても、URLを開くといった外部的な方法で取得する

文字の置き換え

var vReplace = "ABCchangeABCchangeABC";

vReplace = vReplace.replaceAll("ABC", "DEF");

console.log(vReplace); // DEFchangeDEFchangeDEF

replaceだと1回だけ
全て置き換えたい場合は replaceAll

HTML要素を増やす

// 方法1
var objTable = document.getElementById('idtable');
objTable.innerHTML += "<tr><td>cell1</td><td>cell2</td></tr>";

// 方法2
var objTr = document.createElement("tr");
var objTd1 = document.createElement("td");
var objTd2 = document.createElement("td");

objTd1.innerHTML = "cell1";
objTd2.innerHTML = "cell2";

objTr.appendChild(objTd1);
objTr.appendChild(objTd2);

objTable.appendChild(objTr);

HTMLとして追加する方法と、オブジェクトとして追加する方法

シンプルな内容ならば後者のほうがキレイな仕上がりになると思う

ただ、例えば、HTMLの中に inputやらdivやらめちゃくちゃ入れたい場合、後者だと実装のコードが無駄に長くなり、保守性も下がる
HTMLの中にいろいろ入れたい場合は、予めテンプレートをテキストなどで別に準備し、先の「同ディレクトリのファイルを取得する」で取得し、
方法1で追加することで簡潔に、また1行のHTMLの保守性も向上する

状況で使い分けると良いと思う