JavaScript の基礎

Shortcut Notations

JavaScriptでは、オブジェクトや配列を生成するのに Shortcut Notations と呼ばれる表記方法が行えます。

オブジェクトの場合：

var myCar = new Object();
myCar.maker = 'Ferrari';
myCar.model = '430';
myCar.color = 'red';
myCar.age = 2;

以下の様に記述できます

var myCar = {
    maker:'Ferrari',
    model:'430',
    color:'red',
    age:2
}

最後の age の後にカンマ(,)を入れると IE ではエラーになるので注意してね。

配列の場合：

var links = new Array();
links[0] = 'http://www.google.com/';
links[1] = 'http://www.yahoo.co.jp/';
links[2] = 'http://www.gadgety.net/';
links[3] = 'http://example.com/';

以下の様に記述できます

var links = [
  'http://www.google.com/',
  'http://www.yahoo.co.jp/',
  'http://www.gadgety.net/',
  'http://example.com/'
];

以下のように記述された場合、JavaScriptではオブジェクトとなります。

var myCar = new Array();
myCar['maker'] = 'Ferrari';
myCar['model'] = '430';
myCar['color'] = 'red';
myCar['age'] = 2;

取り出し方

【配列】
for (var i = 0; i < links.length; i ++) {
  alert(links[i]);
}

【オブジェクト】
for (var key in myCar) {
  alert(myCar[key]);
}

Event Delegation

イベントの割当の扱いに注意することで、メモリ消費を抑え、コードを見やすくする。

リンクに対するクリックイベントで検証してみます。

<h3>Web Site List</h3>
<ul id="resources">
  <li><a href="http://www.google.com/">Google</a></li>
  <li><a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a></li>
  <li><a href="http://www.gadgety.net/">Gadgety.Net</a></li>
  <li><a href="http://example.com/">example</a></li>
</ul>

それぞれのリンクに対してイベントをループで割り当てると以下のようなコードになります。

var resources = document.getElementById('resources');
var links = resources.getElementsByTagName('a');
var count = links.length;
for(var i=0; i<count; i++){
    // リンクに対してリスナーを割り当てる
    links[i].addEventListener('click',handler,false);
};
function handler(e){
    var url = e.target; // クリックされたリンクを得る
    alert('Event Loop - ' + url);
    e.preventDefault();
};

しかし、以下のように記述することで、メモリ消費を抑え、コードを簡潔にすることが出来ます。

var resources = document.getElementById('resources');
resources.addEventListener('click',handler,false);
function handler(e){
    var url = e.target; // クリックされたリンクを得る
    if(x.nodeName.toLowerCase() === 'a'){
        alert('Event delegation - ' + url);
        e.preventDefault();
    }
};

イベントモデルに注意が必要、addEventListener()の３番目の引数でイベントモデルを選ぶことが出来ます。trueの場合は Netscapeのcaputuringモデル、falseの場合は IEのbubblingモデルとなります。IEでも利用したい場合、bubblingモデルにするしかないので false を指定します（IE9では caputuringモデルもサポートされるらしい）。それぞれ拾えるイベントが違うが、マウス操作やキーボード関連は拾えるので bubblingモデルでも問題ないと思う。。。

Anonymous Function

他の言語で関数を定義する場合、以下のような記述が一般的です。

function foo(){
    alert("foo");
};
foo();

javaScriptでは、以下のような記述も可能です。

var bar = function(){
    alert("bar");
};
bar();

なぜこんな記述をするのか？例えば、イベントに割り当てる関数は一度しか使われないのにわざわざ関数定義をして別管理にするより以下のように記述することでイベントの処理が何をするか簡単に理解することが出来ます。（複雑な処理の場合、あまり好ましくないけど。。。）

window.addEventListener("click", function(){
    alert("click!");
}, false);

グローバル変数を利用せずに、Javaのようにデータを隠蔽することが出来る。そのときに以下のような記述をすることでオブジェクト指向プログラミングが行えます。

function Car(maker, model, color){
    this.maker = maker;
    this.model = model;
    this.color = color;
    this.info = function() {
        alert(this.maker + " " + this.model + "(" + this.color + ")");
    }
}
var myCar = new Car("Ferrari", "430", "red");
myCar.info();

Namespace

関数を定義において、関数名の衝突を避ける為に以下のように Anonymouse Functionを利用することができます。

var gadgety = {
    action1 : function() {
        alert("Action 1");
    },
    action2 : function() {
        alert("Action 2");
    }
}
gadgety.action1();
gadgety.action2();

組み合わせ

Shortcut Notations, Anonymouse Function, Namespace を利用して Java風のクラスを作ってみると以下のようになります。

var myCar = function(){
    var maker = "unknown";
    var model = "unknown";
    var color = "unknown";
    return{
        create : function(mk, md, co){
            maker = mk;
            model = md;
            color = co;
        },
        info : function(){
            alert(maker + " " + model + "(" + color + ")");
        }
    }
}();

myCar.create("Ferrari", "430", "red");
myCar.info();

return 部分がわかりにくくなるので以下のように記述します。

var myCar = function(){
    var maker = "unknown";
    var model = "unknown";
    var color = "unknown";
    var createInfo = function(mk, md, co){
        maker = mk;
        model = md;
        color = co;
    }
    var getInfo = function(){
        alert(maker + " " + model + "(" + color + ")");
    }
    return{
        create:createInfo,
        info:getInfo
    }
}();
myCar.create("Ferrari", "430", "red");
myCar.info();

ちょっとサンプルがよくないけど、JavaScriptの基礎でした。。。。