parkjinwoo/centering.html

## centering.html
<!DOCTYPE html>
<html>
<head>
<title>Centering</title>
<style type="text/css">
  html, body, #wrapper {
    height:100%;
    margin: 0;
    padding: 0;
    border: none;
    text-align: center;
  }
  #wrapper {
    margin: 0 auto 0 auto;
    text-align: center;
    vertical-align: middle;
    width: 100%;
  }
</style>
</head>
<body>
<table id="wrapper">
  <tr>
    <td>Center</td>
  </tr>
</table>
</body>
</html>

## closure.js
var myObject = function () {
  var value = 0;
  return {
    increment: function (inc) {
      value += typeof inc === 'number' ? inc : 1;
    },
    getValue: function () {
      return value;
    }
  };
}();

// Bad Example
var add_the_handlers = function (nodes) {
  var i;
  for (i = 0; i < nodes.length; i += 1) {
    nodes[i].onclick = function (e) {
      alert(i);
    };
  }
};

// Better Example
var add_the_handlers = function (nodes) {
  var i;
  for (i = 0; i < nodes.length; i += 1) {
    nodes[i].onclick = function (i) {
      return function (e) {
        alert(e);
      }
    }(i);
  }
};

## continuation_passing_style.html
<!DOCTYPE html>
<html>
<head>
<title>Continuation Passing Style</title>
<script type="text/javascript">
  var normal = function(x) {
    return x;
  };
  var cps = function (x, callback) {
    callback(x);
  };
  var callNormal = function() {
    alert(normal('normal'));
  };
  var callCps = function() {
    cps('cps', function(x) {
      alert(x);
    });
  };
</script>
</head>
<body>
  <p>
    <a href="javascript:;" onclick="callNormal();">normal</a><br />
    <a href="javascript:;" onclick="callCps();">cps</a>
  </p>
</body>
</html>

## event_propagation.html
<!DOCTYPE html>
<html>
<head>
<title>Event Propagation</title>
<style type="text/css">
  #sauce { width: 400px; height: 300px; background-color: orange; }
  #omelet { width: 300px; height: 200px; background-color: yellow; }
  #rice { width: 200px; height: 100px; background-color: white; }

  #pepperoni { width: 400px; height: 300px; background-color: red; }
  #cheese { width: 300px; height: 200px; background-color: orange; }
  #dough { width: 200px; height: 100px; background-color: yellow; }
</style>
<script type="text/javascript">
  var stopEvent = function(event) {
    event.stopPropagation();
    event.preventDefault();
  }
  window.onload = function() {
    var sauce = document.getElementById("sauce");
    var omelet = document.getElementById("omelet");
    var rice = document.getElementById("rice");

    var pepperoni = document.getElementById("pepperoni");
    var cheese = document.getElementById("cheese");
    var dough = document.getElementById("dough");

    var capturing = false; // false: bubbling(default), true: capturing
    sauce.addEventListener('click', function() {
      alert('Demi-glace Sauce!');
      alert(event.target.id + ' clicked');
    }, capturing);
    omelet.addEventListener('click', function() {
      alert('Omelet!');
      alert(event.target.id + ' clicked');
    }, capturing);
    rice.addEventListener('click',  function() {
      alert('Rice!');
      alert(event.target.id + ' clicked');
    }, capturing);

    pepperoni.onclick = function(event) {
      alert('Pepperoni!');
      stopEvent(event);
    };
    cheese.onclick = function(event) {
      alert('Cheese!');
      stopEvent(event);
    };
    dough.onclick = function(event) {
      alert('Pizza Dough!');
      stopEvent(event);
    };
  }
</script>
</head>
<body>
  <div id="sauce">Demi-glace Sauce!
    <div id="omelet">Omelet!
      <div id="rice">Rice!</div>
    </div>
  </div>
  <hr />
  <div id="pepperoni">Pepperoni!
    <div id="cheese">Cheese!
      <div id="dough">Pizza Dough!</div>
    </div>
  </div>
</body>
</html>

## javascript_onclick_event.html
<!DOCTYPE html>
<html>
<head>
<title>javascript onclick event</title>
<script type="text/javascript">
  var test = function(event) {
    alert(this.event);
  };
</script>
</head>
<body>
  <p>
    <a href="javascript:test();">case 1</a><br />
    <a href="javascript:;" onclick="test();">case 2</a><br />
    <a href="#" onclick="test(); return false;">case 3</a>
  </p>
</body>
</html>

## prototype.js
var Member = function (name, year) {
  this.name = name;
  this.year = year;
};

Member.prototype.repr = function () {
  var fullYear = new Date().getFullYear();
  console.log('name: ' + this.name + ', age: ' + (fullYear - this.year));
};

var foo = new Member('Foo', 1983);
var bar = new Member('Bar', 1987);

foo.repr();
bar.repr();

## unobtrusive_javascript.html
<!DOCTYPE html>
<html>
<head>
<title>Unobtrusive Javascript</title>
<script type="text/javascript">
  var NameSpace = {
    bar: function (x, callback) {
      callback(x);
    },
    foo: function () {
      NameSpace.bar('test1', function(x) {
        alert(x);
      });
    }
  };
  window.onload = function() {
    document.getElementById('test1').onclick = NameSpace.foo;
    document.getElementById('test2').onclick = function () {
      NameSpace.bar('test2', function(x) {
        alert(x);
      });
    };
    document.getElementById('test3').onclick = function() {
      alert('test3', function (x, callback) {
        callback(x);
      });
    };
  };
</script>
</head>
<body>
  <p>
    <a href="javascript:;" id="test1">test1</a><br />
    <a href="javascript:;" id="test2">test2</a><br />
    <a href="javascript:;" id="test3">test3</a>
  </p>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Centering</title>
	<style type="text/css">
	html, body, #wrapper {
	height:100%;
	margin: 0;
	padding: 0;
	border: none;
	text-align: center;
	}
	#wrapper {
	margin: 0 auto 0 auto;
	text-align: center;
	vertical-align: middle;
	width: 100%;
	}
	</style>
	</head>
	<body>
	<table id="wrapper">
	<tr>
	<td>Center</td>
	</tr>
	</table>
	</body>
	</html>
	var myObject = function () {
	var value = 0;
	return {
	increment: function (inc) {
	value += typeof inc === 'number' ? inc : 1;
	},
	getValue: function () {
	return value;
	}
	};
	}();

	// Bad Example
	var add_the_handlers = function (nodes) {
	var i;
	for (i = 0; i < nodes.length; i += 1) {
	nodes[i].onclick = function (e) {
	alert(i);
	};
	}
	};

	// Better Example
	var add_the_handlers = function (nodes) {
	var i;
	for (i = 0; i < nodes.length; i += 1) {
	nodes[i].onclick = function (i) {
	return function (e) {
	alert(e);
	}
	}(i);
	}
	};
	var Member = function (name, year) {
	this.name = name;
	this.year = year;
	};

	Member.prototype.repr = function () {
	var fullYear = new Date().getFullYear();
	console.log('name: ' + this.name + ', age: ' + (fullYear - this.year));
	};

	var foo = new Member('Foo', 1983);
	var bar = new Member('Bar', 1987);

	foo.repr();
	bar.repr();