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 myCar = new Object();
myCar['maker'] = 'Ferrari';
myCar['model'] = '430';
myCar['color'] = 'red';
myCar['age'] = 2;

配列の場合：

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/'
];

取り出し方

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

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

※ myCar.color と指定しても、'red' が返ってきます。

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

hortcut Notations, Anonymouse Function, Namespaceなどを組み合わせる

ちょっとおさらいから、以下のようなコードの場合、JavaScriptでは別の場所で再定義されたら上書きされてしまいとても危険です。

var maker = "unknown";
var model = "unknown";
var color = "unknown";
function createInfo(mk, md, co){
    ...
}
function getInfo(){
    ...
}

そこで、情報隠蔽やネームスペース構築のため以下の様に myCar 内で変数やメソッドを定義します。しかし、これでは myCar内でメソッドは利用できますが（プライベートなメソッド）、外部からメソッドを利用することが出来ません。

var myCar = function(){
    var maker = "unknown";
    var model = "unknown";
    var color = "unknown";
    function createInfo(mk, md, co){
        ...
    }
    function getInfo(){
        ...
    }
};

myCar.getInfo(); // ERROR

そこで、外部にメソッドを公開する形として return{} を利用します。

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の基礎でした。。。。