外部ライブラリを使わないJavaScriptプログラミング
初めまして、入社2日目のsatoです。
現在、JavaScriptで開発といえばprototype.jsやjQueryといったライブラリを使用することが多いですが、ちょっとした開発では直接書いたほうが早い場合もあります。
普段外部のライブラリを使っていると忘れがちになるので、基本的なものをまとめてみました。
・クラスの作成
function Class() {}
Class.prototype.foo = 1;
Class.prototype.hoge = function() {
this.foo = 2;
}
var c = new Class();
c.hoge();
alert(c.foo); // 2
・XmlHttpRequest
// オブジェクト作成
var xhr = null;
if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xhr = new XMLHttpRequest();
}
// アクセス
xhr.open("GET", "foo.xml", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var xml = xhr.responseXML;
// 読み込み完了時の処理を記述する
}
}
}
xhr.send(null);
・DOM操作
var elem = document.getElementById("foo"); // #fooの要素を取得
var nodes = elem.childNodes;
for(var i=0;i<nodes.length;i++) {
// elemの子要素全てに対して何かする
var node = nodes[i];
// 要素の値を取得する
// bar なら"bar"が返る
alert(node.nodeValue);
}
// 中身を全て取得する場合はinnerHTML
alert(elem.innerHTML);
elem.appendChild(document.createElement("br")); // タグを追加
外部ライブラリを使うか使わないかは、規模と書きやすさで考えればいいと思います。書きやすさだけで考えれば何らかのライブラリを使用したほうがいいのですが、巨大なものが多いので（今時そんなの気にしないかもしれませんが）、こういうのも覚えておくと便利です。
かと言って、全部直接書いていくのも面倒なので、例えばprototype.jsのような
function $(e) { return document.getElementById(e); }
こんな関数を用意しておくと多少は楽になると思います。
ただしそのまま書いていくと、外部ライブラリを使用するのに比べコード量は増えると思いますので、規模が大きくなりそうだと思ったら使い慣れたライブラリに切り替えるのをお勧めします。
