shigeki/observer1.html

## observer1.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Object.observer() demo1</title>
    <style>
      table, td, th {
        border: 2px #000000 solid;
      }
    </style>
    <script src="observer1.js"></script>
  </head>
  <body>
  <div id="event"><div>Event Code</div>
  <pre>
  obj.b = 2; // プロパティ新規作成

  obj.a = 2; // プロパティ更新

  Object.defineProperties(obj, {a: { enumerable: false}});  // プロパティ設定変更

  delete obj.b; // プロパティ削除
  </pre>
  </div>
  <div id="results"></div>
  </body>
</html>

## observer1.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 obj = {a: 1};

  Object.observe(obj, output);

  obj.b = 2; // プロパティ新規作成
  obj.a = 2; // プロパティ更新
  Object.defineProperties(obj, {a: { enumerable: false}}); // プロパティ設定変更
  delete obj.b; // プロパティ削除

  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() demo1</title>
	<style>
	table, td, th {
	border: 2px #000000 solid;
	}
	</style>
	<script src="observer1.js"></script>
	</head>
	<body>
	<div id="event"><div>Event Code</div>
	<pre>
	obj.b = 2; // プロパティ新規作成

	obj.a = 2; // プロパティ更新

	Object.defineProperties(obj, {a: { enumerable: false}}); // プロパティ設定変更

	delete obj.b; // プロパティ削除
	</pre>
	</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 obj = {a: 1};

	Object.observe(obj, output);

	obj.b = 2; // プロパティ新規作成
	obj.a = 2; // プロパティ更新
	Object.defineProperties(obj, {a: { enumerable: false}}); // プロパティ設定変更
	delete obj.b; // プロパティ削除

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