shigeki/observer4.html

## observer4.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Object.observer() demo4</title>
    <style>
      table, td, th {
        border: 2px #000000 solid;
      }
    </style>
    <script src="observer4.js"></script>
  </head>
  <body>
  <div id="event"><div>Event Code</div>
  <pre>
  obj4.seen = new Date(2013, 0, 1, 0, 0, 0); // 時間更新イベント
  Object.deliverChangeRecords(output);       // 次のターン
  obj4.seen = new Date(2013, 0, 2, 0, 0, 0); // 時間更新イベント
  Object.deliverChangeRecords(output);       // 次のターン
  obj4.seen = new Date(2013, 0, 3, 0, 0, 0); // 時間更新イベント
  Object.deliverChangeRecords(output);       // 次のターン
  obj4.seen = new Date(2013, 0, 4, 0, 0, 0); // 時間更新イベント
  Object.deliverChangeRecords(output);       // 次のターン
  obj4.seen = new Date(2013, 0, 5, 0, 0, 0); // 時間更新イベント
  Object.deliverChangeRecords(output);       // 次のターン
  obj4.seen = new Date(2013, 0, 6, 0, 0, 0); // 時間更新イベント
  Object.deliverChangeRecords(output);       // 次のターン
  obj4.seen = new Date(2013, 0, 7, 0, 0, 0); // 時間更新イベント
  </pre>
  <div id="seen"></div>
  <div id="results"></div>
  </body>
</html>

## observer4.js
window.addEventListener('DOMContentLoaded',function() {
  if (!Object.observe) {
    alert('Object.observe not supported in your browser. Please use Chrome Dev Channel and enable Experimental JavaScript');
    return;
  }

  var obj4 = {_time: new Date(0)};
  var notifier = Object.getNotifier(obj4);
  Object.defineProperties(obj4, {
    _time: {
      enumerable: false,
      configrable: false
    },
    seen: {
      set: function(val) {
        var notifier = Object.getNotifier(this);
        notifier.notify({
          type: 'time_updated', // 時間更新イベントの定義
          name: 'seen',
          oldValue: this._time
        });
        this._time = val;
      },
      get: function() {
        return this._time;
      }
    }
  });

  Object.observe(obj4, output);

  obj4.seen = new Date(2013, 0, 1, 0, 0, 0); // 時間更新イベント
  Object.deliverChangeRecords(output);       // 次のターン
  obj4.seen = new Date(2013, 0, 2, 0, 0, 0); // 時間更新イベント
  Object.deliverChangeRecords(output);       // 次のターン
  obj4.seen = new Date(2013, 0, 3, 0, 0, 0); // 時間更新イベント
  Object.deliverChangeRecords(output);       // 次のターン
  obj4.seen = new Date(2013, 0, 4, 0, 0, 0); // 時間更新イベント
  Object.deliverChangeRecords(output);       // 次のターン
  obj4.seen = new Date(2013, 0, 5, 0, 0, 0); // 時間更新イベント
  Object.deliverChangeRecords(output);       // 次のターン
  obj4.seen = new Date(2013, 0, 6, 0, 0, 0); // 時間更新イベント
  Object.deliverChangeRecords(output);       // 次のターン
  obj4.seen = new Date(2013, 0, 7, 0, 0, 0); // 時間更新イベント

  function output (changes) {
    var results = document.getElementById('results');
    var table = document.createElement('table');
    results.appendChild(table);
    var caption = document.createElement('caption');
    caption.innerText = 'Observed Events List';
    table.appendChild(caption);
    var thead = document.createElement('thead');
    thead.innerHTML = '<tr><th>index</th><th>type</th><th>name</th><th>oldValue</th><th>currentValue</th></tr>';
    table.appendChild(thead);

    changes.forEach(function(change, i) {
      var tr = document.createElement('tr');
      tr.innerHTML = '<td>' + i + '</td><td>' + change.type + '</td><td>' + change.name + '</td><td>' + change.oldValue + '</td><td>' + change.object[change.name] + '</td>';
      table.appendChild(tr);
    });
  }
});
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8" />
	<title>Object.observer() demo4</title>
	<style>
	table, td, th {
	border: 2px #000000 solid;
	}
	</style>
	<script src="observer4.js"></script>
	</head>
	<body>
	<div id="event"><div>Event Code</div>
	<pre>
	obj4.seen = new Date(2013, 0, 1, 0, 0, 0); // 時間更新イベント
	Object.deliverChangeRecords(output); // 次のターン
	obj4.seen = new Date(2013, 0, 2, 0, 0, 0); // 時間更新イベント
	Object.deliverChangeRecords(output); // 次のターン
	obj4.seen = new Date(2013, 0, 3, 0, 0, 0); // 時間更新イベント
	Object.deliverChangeRecords(output); // 次のターン
	obj4.seen = new Date(2013, 0, 4, 0, 0, 0); // 時間更新イベント
	Object.deliverChangeRecords(output); // 次のターン
	obj4.seen = new Date(2013, 0, 5, 0, 0, 0); // 時間更新イベント
	Object.deliverChangeRecords(output); // 次のターン
	obj4.seen = new Date(2013, 0, 6, 0, 0, 0); // 時間更新イベント
	Object.deliverChangeRecords(output); // 次のターン
	obj4.seen = new Date(2013, 0, 7, 0, 0, 0); // 時間更新イベント
	</pre>
	<div id="seen"></div>
	<div id="results"></div>
	</body>
	</html>
	window.addEventListener('DOMContentLoaded',function() {
	if (!Object.observe) {
	alert('Object.observe not supported in your browser. Please use Chrome Dev Channel and enable Experimental JavaScript');
	return;
	}

	var obj4 = {_time: new Date(0)};
	var notifier = Object.getNotifier(obj4);
	Object.defineProperties(obj4, {
	_time: {
	enumerable: false,
	configrable: false
	},
	seen: {
	set: function(val) {
	var notifier = Object.getNotifier(this);
	notifier.notify({
	type: 'time_updated', // 時間更新イベントの定義
	name: 'seen',
	oldValue: this._time
	});
	this._time = val;
	},
	get: function() {
	return this._time;
	}
	}
	});

	Object.observe(obj4, output);

	obj4.seen = new Date(2013, 0, 1, 0, 0, 0); // 時間更新イベント
	Object.deliverChangeRecords(output); // 次のターン
	obj4.seen = new Date(2013, 0, 2, 0, 0, 0); // 時間更新イベント
	Object.deliverChangeRecords(output); // 次のターン
	obj4.seen = new Date(2013, 0, 3, 0, 0, 0); // 時間更新イベント
	Object.deliverChangeRecords(output); // 次のターン
	obj4.seen = new Date(2013, 0, 4, 0, 0, 0); // 時間更新イベント
	Object.deliverChangeRecords(output); // 次のターン
	obj4.seen = new Date(2013, 0, 5, 0, 0, 0); // 時間更新イベント
	Object.deliverChangeRecords(output); // 次のターン
	obj4.seen = new Date(2013, 0, 6, 0, 0, 0); // 時間更新イベント
	Object.deliverChangeRecords(output); // 次のターン
	obj4.seen = new Date(2013, 0, 7, 0, 0, 0); // 時間更新イベント

	function output (changes) {
	var results = document.getElementById('results');
	var table = document.createElement('table');
	results.appendChild(table);
	var caption = document.createElement('caption');
	caption.innerText = 'Observed Events List';
	table.appendChild(caption);
	var thead = document.createElement('thead');
	thead.innerHTML = '<tr><th>index</th><th>type</th><th>name</th><th>oldValue</th><th>currentValue</th></tr>';
	table.appendChild(thead);

	changes.forEach(function(change, i) {
	var tr = document.createElement('tr');
	tr.innerHTML = '<td>' + i + '</td><td>' + change.type + '</td><td>' + change.name + '</td><td>' + change.oldValue + '</td><td>' + change.object[change.name] + '</td>';
	table.appendChild(tr);
	});
	}
	});