bpostlethwaite/closure.js

## closure.js
/*
 * To start I would make sure the JQuery func print outs the height
 */

 var result = document.getElementById('result');

$("#a").click(function () {
    var msg =  $(this).height()
    result.appendChild( document.createTextNode(msg) )
})

// and make sure it prints the height to the browser,
// change the height and do it again and make sure it makes sense.

// Then reset the height of the div?

$("#b").click(function () {
  var h = $(this).height()
  result.appendChild( document.createTextNode(h) )
  $(this).height( h / 2 )
})

// notice that this will keep reducing the div height by two...
// say we want a switch so it flicks back to full height than back again.
// Notice that the JQuery click function takes a callback as its only
// parameter. This function gets called everytime it gets a click event.

// $("div").click( callback )

// It would be nice if there was some shared state between invocations
// of the callback function, so it would know its last state, and could
// increase in size or decrease accordingly.
// One way is to set a global variable, and just flick it from inside
// the callback. This is not good. There is a better and more resuable
// way to do this using closures.
// Lets build a function which outputs the callback function but first
// creates some outer context space for a variable to be held, even
// when the callback function returns.

// Example:

function buildCallback () {
  var tog = true // This variable can be seen by
  // functions inside closing scope. And because
  // we return the function, the context of the
  // outer function WILL NOT BE GARBAGE COLLECTED
  // and the returned inner function can always access
  // any variables (or other functions) you delcare
  // within here
  return function () {
  tog = !tog // tog is not tog. Flick from true to false
  result.appendChild( document.createTextNode(tog) )
  }
}

$("#c").click( buildCallback() )

// Great it works!

// So now we just need an if statement inside the callback to take
// appropriate action depending on the toggle state.
// By combining earlier logic in "b" with this closure pattern in "c"
// we can do exactly what we want.

## index.html
<!DOCTYPE html>

<!--
    This is an HTML page that contains a CSS and a Javascript file.

    Run this sample by clicking the 'Preview' button on top;
    a new tab will open with the current page open.
-->
<html lang="en">
 <head>
  <meta charset="utf-8" />
  <title>Hello world from Cloud9!</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 </head>

 <body>

  <button type="button" style="height: 120px;" id="a">a</button>
  <button type="button" style="height: 120px;" id="b">b</button>
  <button type="button" style="height: 120px;" id="c">c</button>
  <div id="result"></div>

  <script src="/closure.js"></script>

 </body>
</html>
	/*
	* To start I would make sure the JQuery func print outs the height
	*/

	var result = document.getElementById('result');

	$("#a").click(function () {
	var msg = $(this).height()
	result.appendChild( document.createTextNode(msg) )
	})

	// and make sure it prints the height to the browser,
	// change the height and do it again and make sure it makes sense.

	// Then reset the height of the div?

	$("#b").click(function () {
	var h = $(this).height()
	result.appendChild( document.createTextNode(h) )
	$(this).height( h / 2 )
	})

	// notice that this will keep reducing the div height by two...
	// say we want a switch so it flicks back to full height than back again.
	// Notice that the JQuery click function takes a callback as its only
	// parameter. This function gets called everytime it gets a click event.

	// $("div").click( callback )

	// It would be nice if there was some shared state between invocations
	// of the callback function, so it would know its last state, and could
	// increase in size or decrease accordingly.
	// One way is to set a global variable, and just flick it from inside
	// the callback. This is not good. There is a better and more resuable
	// way to do this using closures.
	// Lets build a function which outputs the callback function but first
	// creates some outer context space for a variable to be held, even
	// when the callback function returns.

	// Example:

	function buildCallback () {
	var tog = true // This variable can be seen by
	// functions inside closing scope. And because
	// we return the function, the context of the
	// outer function WILL NOT BE GARBAGE COLLECTED
	// and the returned inner function can always access
	// any variables (or other functions) you delcare
	// within here
	return function () {
	tog = !tog // tog is not tog. Flick from true to false
	result.appendChild( document.createTextNode(tog) )
	}
	}

	$("#c").click( buildCallback() )

	// Great it works!

	// So now we just need an if statement inside the callback to take
	// appropriate action depending on the toggle state.
	// By combining earlier logic in "b" with this closure pattern in "c"
	// we can do exactly what we want.
	<!DOCTYPE html>

	<!--
	This is an HTML page that contains a CSS and a Javascript file.

	Run this sample by clicking the 'Preview' button on top;
	a new tab will open with the current page open.
	-->
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Hello world from Cloud9!</title>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	</head>

	<body>

	<button type="button" style="height: 120px;" id="a">a</button>
	<button type="button" style="height: 120px;" id="b">b</button>
	<button type="button" style="height: 120px;" id="c">c</button>
	<div id="result"></div>

	<script src="/closure.js"></script>

	</body>
	</html>