johnhunter/modules.html

## modules.html
<!DOCTYPE html>
<html><head>
	<meta charset="utf-8">
	<title>Modules</title>
</head><body><script>


(function (global) {
	/*
		This block executes within a private scope.
	*/

	var secret = {};

	global.outThere = {};

}(window));


/*
	The module pattern:
	- private members are locally scoped vars / functions
	- public members are exported in the return object
*/
var module = (function () {
	var name = "foo";

	function getName () { return name; }


	return {
		getName: getName
	};
}());


/*
	Namespaced module pattern:
	private members are locally scoped vars / functions
	public members are be properties of 'my' (e.g. my.foo)
	global is a ref to the global context (typically window)
*/
(function (global) {

	var our, // ref to namespace 'vehicle'
	    my;  // ref to submodule 'steering'


	// create namespace if it doesn't exist
	our = global.vehicle = global.vehicle || {};

	our.steering = my = {};

	// stuff here...


}(window));


</script></body></html>

## scope.html
<!DOCTYPE html>
<html><head>
	<meta charset='utf-8'>
	<title>scope</title>
</head><body><script>


/*
	JavaScript has 2 scope types:
	- global scope
	- function scope
*/


var global;

function fn () {
	var local;
}


/*
	Global scope:
	any variable declared outside a function.

	* no blocks
	* <script> tags are global
	* external scripts are global

*/
var globalIsGlobal = 'Hello';

</script>
<script>

	globalIsGlobal += " to the";

</script>
<script>

globalIsGlobal += ' World';
//console.log('globalIsGlobal = ', globalIsGlobal);


/*
	Function scope:
	local variables & argument params are scoped to the function.

	* outer scope is visible inside a function
	* functions can be nested
	* scoping is lexical - defined by code structure
	= a static scope chain
*/

var message = 'Hello';
//console.log('message is: ', message);
scopeTest();

function scopeTest () {
	var message = 'Goodbye';
	//console.log('message now is: ', message);

	innerTest('Hello again');

	function innerTest (message2) {
		//console.log('message2 is: ', message);
	}
}


/*
	! an undeclared variable leaks into the global scope
	Always declare with `var`
*/

varTest();
// console.log('implicitGlobal is a %s!', implicitGlobal);
function varTest () {
	implicitGlobal = 'bad idea';
}


</script></body></html>
	<!DOCTYPE html>
	<html><head>
	<meta charset="utf-8">
	<title>Modules</title>
	</head><body><script>





















	(function (global) {
	/*
	This block executes within a private scope.
	*/

	var secret = {};

	global.outThere = {};

	}(window));
























	/*
	The module pattern:
	- private members are locally scoped vars / functions
	- public members are exported in the return object
	*/
	var module = (function () {
	var name = "foo";

	function getName () { return name; }


	return {
	getName: getName
	};
	}());























	/*
	Namespaced module pattern:
	private members are locally scoped vars / functions
	public members are be properties of 'my' (e.g. my.foo)
	global is a ref to the global context (typically window)
	*/
	(function (global) {

	var our, // ref to namespace 'vehicle'
	my; // ref to submodule 'steering'


	// create namespace if it doesn't exist
	our = global.vehicle = global.vehicle \|\| {};

	our.steering = my = {};

	// stuff here...


	}(window));



	</script></body></html>
	<!DOCTYPE html>
	<html><head>
	<meta charset='utf-8'>
	<title>scope</title>
	</head><body><script>



	/*
	JavaScript has 2 scope types:
	- global scope
	- function scope
	*/


	var global;

	function fn () {
	var local;
	}





















	/*
	Global scope:
	any variable declared outside a function.

	* no blocks
	* <script> tags are global
	* external scripts are global

	*/
	var globalIsGlobal = 'Hello';

	</script>
	<script>

	globalIsGlobal += " to the";

	</script>
	<script>

	globalIsGlobal += ' World';
	//console.log('globalIsGlobal = ', globalIsGlobal);





















	/*
	Function scope:
	local variables & argument params are scoped to the function.

	* outer scope is visible inside a function
	* functions can be nested
	* scoping is lexical - defined by code structure
	= a static scope chain
	*/

	var message = 'Hello';
	//console.log('message is: ', message);
	scopeTest();

	function scopeTest () {
	var message = 'Goodbye';
	//console.log('message now is: ', message);

	innerTest('Hello again');

	function innerTest (message2) {
	//console.log('message2 is: ', message);
	}
	}





















	/*
	! an undeclared variable leaks into the global scope
	Always declare with `var`
	*/

	varTest();
	// console.log('implicitGlobal is a %s!', implicitGlobal);
	function varTest () {
	implicitGlobal = 'bad idea';
	}




	</script></body></html>