2008年3月31日(月曜日)

外部ライブラリを使わないJavaScriptプログラミング

カテゴリー: - sato @ 18時38分02秒

初めまして、入社2日目のsatoです。

現在、JavaScriptで開発といえばprototype.jsjQueryといったライブラリを使用することが多いですが、ちょっとした開発では直接書いたほうが早い場合もあります。
普段外部のライブラリを使っていると忘れがちになるので、基本的なものをまとめてみました。

・クラスの作成

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); }

こんな関数を用意しておくと多少は楽になると思います。

ただしそのまま書いていくと、外部ライブラリを使用するのに比べコード量は増えると思いますので、規模が大きくなりそうだと思ったら使い慣れたライブラリに切り替えるのをお勧めします。


RSS feed for comments on this post.

ƤˤϡޤȤդƤޤ

Ȥ

ʤߥȤդ뤳ȤϽޤ

10 queries. 0.008 sec.
Powered by WordPress Module based on WordPress ME & WordPress

〒104-0061 東京都中央区銀座1丁目3番3号 G1ビル7階
お問い合わせ TEL 03-3524-8860

Copyright(c) 2012 RYUS.All Rights Reserved.