function onClickFunction(e) {
    //クリック時の処理
}
// クリックイベント設定
document.getElementById('hoge').addEventListener('click', onClickFunction, false);

// クリックイベント削除
document.getElementById('hoge').removeEventListener('click', onClickFunction, false);

// イベントオブジェクト作成
// 引数にはイベント種別を渡す。
var evt = document.createEvent('MouseEvents');

// イベントオブジェクト初期化
// 引数の内容はhttps://developer.mozilla.org/ja/docs/Web/API/event.initMouseEventを参照。
// マウス座標とかctrlキーが押されてるかどうかなど色々指定可能。
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

// イベント発火
document.getElementById('hoge').dispatchEvent(evt);

var textElement = document.getElementById('hoge');

// テキスト変換開始時イベント監視
textxElement.addEventListener('compositionstart', function(e) {
    //変換開始時処理
}, false);

// テキスト変換中イベント監視
textxElement.addEventListener('compositionupdate', function(e) {
    //変換中処理
}, false);

// テキスト変換完了時イベント監視
textxElement.addEventListener('compositionend', function(e) {
    //変換完了時処理
}, false);

// エレメントの属性の変更を監視
document.addEventListener('DOMNodeInserted', function(e) {
    // 属性変更時処理
    console.log('追加された！');
});

document.body.appendChild(document.createElement('div'));
// -> 追加された！

document.addEventListener('DOMContentLoaded', function() {
    // DOM読み込み時処理
}, false);

var list = document.querySelectorAll('ul li');

var arr = ['a', 'b', 'c', 'd', 'e'];

arr.forEach(function(value, index) {
    // function内部なので、スコープがループの中で閉じる
    var foo = 'bar';

    console.log(value, index);
    // -> 値とインデックスがコンソールに出力される
});

var arr = [2, 45, 21, 67, 32, 2, 43];

arr.filter(function(value, index) {
    // 偶数のものだけ取り出す。
    return value % 2 === 0;
});

var arr = ['abc', 'def', 'ghi', 'jkl'];

console.log(arr.indexOf('def'));
// -> 1
console.log(arr.indexOf('mno'));
// -> -1

var arr = [2, 45, 21, 67, 32, 2, 43];

// 60以上の値があるかどうか判定
console.log(arr.some(function(value) {
    return 60 < value;
}));
// -> true

// 70以上の値があるかどうか判定
console.log(arr.some(function(value) {
    return 70 < value;
}));
// -> false

var arr = [2, 45, 21, 67, 32, 2, 43];

// 全ての値が1以上かどうか判定
console.log(arr.every(function(value) {
    return 1 < value;
}));
// -> true

// 全ての値が5以上かどうか判定
console.log(arr.every(function(value) {
    return 5 < value;
}));
// -> false

var arr = [2, 45, 21, 67, 32, 2, 43];

// 全ての値が1以上かどうか判定
console.log(arr.map(function(value) {
    return value * 10;
}));
// -> [20, 450, 210, 670, 320, 20, 430]

var arr = [2, 45, 21, 67, 32, 2, 43];

// 全ての値が1以上かどうか判定
console.log(arr.reduce(function(value1, value2) {
    console.log(arguments);
    return value1 + value2;
}));
// -> 212

var MyClass = function() {
    this.members = {};
};

// メンバーを登録するsetMemberメソッドを作成
Object.defineProperty(MyClass.prototype, 'setMember', {
    writable: false,
    enumeable: false,
    configurable: false,
    value: function(id, name) {
        this.members[id] = name;
    }
});

// メンバーを取得するgetMemberメソッドを作成
Object.defineProperty(MyClass.prototype, 'getMember', {
    writable: false,
    enumeable: false,
    configurable: false,
    value: function(id) {
        return this.members[id];
    }
});

// 現在のメンバー数を返却するcountアクセサを追加。値を指定された場合は何もしない。
Object.defineProperty(MyClass.prototype, 'count', {
    get: function() {
        return Object.keys(this.members).length;
    },
    set: function() {}
});

var myClass = new MyClass();

myClass.setMember('foo', 'bar');
myClass.setMember('hoge', 'hogehoge');
console.log(myClass.getMember('foo'));
// -> 'bar'

console.log(myClass.count);
// -> 2

// setメソッドは何もしないので値を登録しても値は変化しない。
myClass.count = 10;
console.log(myClass.count);
// -> 2

// 通常の配列を追加
var arr = ['a', 232, 'b', true, 1111];
// 配列を拡張して、0から数えたlengthプロパティを新たに追加。
var customArr = Object.create(arr, {
    lengthFromZero: {
        get: function() {
            return this.length - 1;
        },
        set: function() {}
    }
});

console.log(customArr.lengthFromZero);

console.log(Object.getOwnPropertyNames(Array.prototype));
// -> ["length", "constructor", "toString", "toLocaleString", "join", "pop", "push", "concat", "reverse", "shift", "unshift", "slice", "splice", "sort", "filter", "forEach", "some", "every", "map", "indexOf", "lastIndexOf", "reduce", "reduceRight"]

var obj = {
    foo: 'bar',
    hoge: 'hogehoge'
};
console.log(Object.keys(obj));
// -> ['foo', 'hoge']

var obj = {
    foo: 'bar',
    hoge: 'hogehoge',
    list: {
        foofoo: 'barbar'
    }
};

// オブジェクトを凍結
Object.freeze(obj);

// obj.list.foofooのみ編集可能。
obj.hoge = 'hogehogehoge';
obj.name = 'taro';
obj.list.foofoo = 'barbarbarbar';
console.log(obj);

function foo() {
    console.log(this);
}

var bar = foo.bind({hoge: 'hogehoge'});

bar();
// -> {hoge: 'hogehoge'}

var foo = '　　　   bar   　　　';

console.log(foo.trim());
// -> bar

console.log(Date.now());

<html>
  <body>
    <script src="https://traceur-compiler.googlecode.com/git/bin/traceur.js"
        type="text/javascript"></script>
    <script src="https://traceur-compiler.googlecode.com/git/src/bootstrap.js"
        type="text/javascript"></script>
    <script type="text/traceur">
      class Greeter {
        constructor(message) {
          this.message = message;
        }

        greet() {
          let element = document.querySelector('#message');
          element.innerHTML = this.message;
        }
      };

      let greeter = new Greeter('Hello, world!');
      greeter.greet();
    </script>
  </body>
</html>

{
  "scripts": {
    "start": "node --harmony ./node_modules/.bin/grunt start"
  }
}