madzak/closure_and_scoping.js

## closure_and_scoping.js
/* Closures and Scoping */

!function(window) {
  var body = window.getElementsByTagName('body')[0];

  console.log(body);
}(document);

/*
Q: What would you expect the value of body to be?

A: Body will be the actual body. Although getElementsByTagName is not a valid window
   document, we have changed the value of window to be document based on the closure.
*/

## events.html
<!-- Eventing -->

<html>
  <head>
    <title>Eventing with Javascript</title>
  </head>
  <body>
    <div id="one">
      <div id="two">
        <a href="#" id="link">Click me</a>
      </div>
    </div>
    <script>
      var body = document.getElementsByTagName('body')[0],
          one = document.getElementById('one'),
          two = document.getElementById('two'),
          link = document.getElementById('link');

      link.addEventListener('click', function(evt) {
        console.log('Link clicked');
      },false);

      two.addEventListener('click', function(evt) {
        evt.stopPropagation();
        console.log('My "link" was clicked');
      }, false);

      one.addEventListener('click', function(evt) {
        console.log('My "two"s "link" was clicked');
      }, true)

      body.addEventListener('click', function(evt) {
        console.log('Something was clicked');
      }, false);
    </script>
  </body>
</html>

<!--
Output:
  My "two"s "link" was clicked
  Link clicked
  My "link" was clicked

A: Well eventing has 2 phases, capture and bubble. Once the link is clicked, the dom is traversed from the element up
   for an event that's registered in the capture phase (has true as the 3rd parameter). In this case, div "one" would fire
   it's log message. Since there are no other capture events the event would move to bubbling from the source elemnt "link".
   The log message would fire for the "link" element, the "two" event would log it's message. the "one" event isn't in the bubble
   phase and because the "one" event stopped propagation the "body" event would not fire.
-->

## functional.js
/* Functional pattern understanding */

var a = (function(x, y) {
  return function(z) {
    return x + y - z;
  }
})(5, 10);

/*
Q: What's the value of a if we call it with a(2)?

A: 13 is the answer. X and Y have been scoped down to 5 (x) and 10 (y) while the response of the
   immediately executing function has returned a new function which is where 2 is passed into (z).
   At this point just simple math occurs
*/

## hoisting.js
/* Hoisting */

var name = "zak";

if(true) {
  var name = "ben";
}

console.log(name);

/*
Q: What's the output in the log message?

A: The answer is "ben" because variables are hoisted to the nearest function level scoping. Most folks would say it's zak because of brackets around the if condition, but if's are not functions.
*/

## whiteboard.js
/* Whiteboard example -- 2 part, if they can't come up with a pubsub move on

Q: What is the importantance of modularized system development in the web world?

A: With javascript becoming a base language for web development, the ability to write
   complicated code becomes much easier. Seperation of concerns and responsibilities are
   crucial to developing maintainable systems. Seperating these things into modules allow
   developers to make smart choices of around reuse and efficent loading.

Q: Cool so assuming we've decided that a publish/subscribe system would be best to support
   this communication, how would you go about writing one.

A: What you should expect is at least 3 methods, publish/subscribe/unsubscribe which are fronts for managing a key'd object with
   array'd values of the listeners so when a publish occurs, all subscribers get the same event. Extra credit for throwing setTimeouts
   for async processing and using call/apply to pass in arguments to subscribers.
*/
	/* Closures and Scoping */

	!function(window) {
	var body = window.getElementsByTagName('body')[0];

	console.log(body);
	}(document);

	/*
	Q: What would you expect the value of body to be?

	A: Body will be the actual body. Although getElementsByTagName is not a valid window
	document, we have changed the value of window to be document based on the closure.
	*/
	<!-- Eventing -->

	<html>
	<head>
	<title>Eventing with Javascript</title>
	</head>
	<body>
	<div id="one">
	<div id="two">
	<a href="#" id="link">Click me</a>
	</div>
	</div>
	<script>
	var body = document.getElementsByTagName('body')[0],
	one = document.getElementById('one'),
	two = document.getElementById('two'),
	link = document.getElementById('link');

	link.addEventListener('click', function(evt) {
	console.log('Link clicked');
	},false);

	two.addEventListener('click', function(evt) {
	evt.stopPropagation();
	console.log('My "link" was clicked');
	}, false);

	one.addEventListener('click', function(evt) {
	console.log('My "two"s "link" was clicked');
	}, true)

	body.addEventListener('click', function(evt) {
	console.log('Something was clicked');
	}, false);
	</script>
	</body>
	</html>

	<!--
	Output:
	My "two"s "link" was clicked
	Link clicked
	My "link" was clicked

	A: Well eventing has 2 phases, capture and bubble. Once the link is clicked, the dom is traversed from the element up
	for an event that's registered in the capture phase (has true as the 3rd parameter). In this case, div "one" would fire
	it's log message. Since there are no other capture events the event would move to bubbling from the source elemnt "link".
	The log message would fire for the "link" element, the "two" event would log it's message. the "one" event isn't in the bubble
	phase and because the "one" event stopped propagation the "body" event would not fire.
	-->
	/* Functional pattern understanding */

	var a = (function(x, y) {
	return function(z) {
	return x + y - z;
	}
	})(5, 10);

	/*
	Q: What's the value of a if we call it with a(2)?

	A: 13 is the answer. X and Y have been scoped down to 5 (x) and 10 (y) while the response of the
	immediately executing function has returned a new function which is where 2 is passed into (z).
	At this point just simple math occurs
	*/
	/* Hoisting */

	var name = "zak";

	if(true) {
	var name = "ben";
	}

	console.log(name);

	/*
	Q: What's the output in the log message?

	A: The answer is "ben" because variables are hoisted to the nearest function level scoping. Most folks would say it's zak because of brackets around the if condition, but if's are not functions.
	*/
	/* Whiteboard example -- 2 part, if they can't come up with a pubsub move on

	Q: What is the importantance of modularized system development in the web world?

	A: With javascript becoming a base language for web development, the ability to write
	complicated code becomes much easier. Seperation of concerns and responsibilities are
	crucial to developing maintainable systems. Seperating these things into modules allow
	developers to make smart choices of around reuse and efficent loading.

	Q: Cool so assuming we've decided that a publish/subscribe system would be best to support
	this communication, how would you go about writing one.

	A: What you should expect is at least 3 methods, publish/subscribe/unsubscribe which are fronts for managing a key'd object with
	array'd values of the listeners so when a publish occurs, all subscribers get the same event. Extra credit for throwing setTimeouts
	for async processing and using call/apply to pass in arguments to subscribers.
	*/