01.advanced.js.html

<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>Web &amp; Mobile Development &mdash; 01.Advanced.JS</title>

		<meta name="description" content="Web &amp; Mobile Development &mdash; 01.Advanced.JS">
		<meta name="author" content="Bram(us) Van Damme - ikdoeict.be">

		<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/main.css" media="screen">
		<link rel="stylesheet" href="css/print.css" media="print">
		<link rel="stylesheet" href="assets/01/examples.css">

		<link rel="stylesheet" href="lib/zenburn.css">
	</head>

	<body>

		<div id="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">


				<!-- 0 : Title -->
				<section>
					<section>
						<h3 class="inverted">Web &amp; Mobile Development <small>JLW288</small></h3>
						<h1>01.Advanced.JS</h1>

						<footer>
							<em><a href="http://www.ikdoeict.be/">ikdoeict.be</a> &mdash; <a href="mailto:bramus.vandamme@kahosl.be">bramus.vandamme@kahosl.be</a></em>
						</footer>
						<script>
							// Delicously hacky. Look away.
							if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) )
							document.write( '<p style="color: rgba(0,0,0,0.3); text-shadow: none;">('+'Tap to navigate'+')</p>' );
						</script>
					</section>
				</section>


				<!-- 1 : JavaScript? -->
				<section>

					<section>
						<h2>JavaScript?</h2>
						<p><img src="assets/01/quiz.png" alt="What is the world's most popular language?" title="What is the world's most popular language?" width="429" height="333" /></p>
						<p class="fragment">Yeah, JavaScript!</p>
					</section>

					<section>
						<h2>Java(Script)?</h2>
						<div>
							<figure class="fragment">
								<img src="assets/01/hamster.png" alt="JavaScript is to Java as Ham is to Hamster" title="JavaScript is to Java as Ham is to Hamster" width="500" height="284" style="border-color: #FFF; border-width: 12px;" />
								<figcaption>Dixit <a href="http://adactio.com/">Jeremy Keith</a>, Cartoon by <a href="http://www.flickr.com/photos/manssandstrom/4132454413/in/photostream/">Brad Colbow</a></figcaption>
							</figure>
						</div>
					</section>

					<section>
						<h2>JavaScript: History</h2>
						<ul>
							<li class="fragment">
								Scripting language originally developed for Netscape 2.0
								<ul>
									<li>First known as Mocha or as LiveScript, later on renamed to JavaScript</li>
								</ul>
							</li>
							<li class="fragment">
								Internet Explorer 3 included its own implementation, named JScript
								<ul>
									<li>Implemented due to gaining popularity of JavaScript</li>
									<li>Named differently to avoid trademark issues</li>
								</ul>
							</li>
							<li class="fragment">
								Eventually standardized in the ECMA-266 specificiation, known as ECMAScript
								<ul>
									<li>Several versions do exist</li>
									<li>Current version is <a href="http://es5.github.com/">ECMAScript 5.1</a></li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>ECMAScript Dialects</h2>
						<ul>
							<li class="fragment">
								Several languages/implementations are based on (some version of) ECMAScript
								<ul>
									<li class="fragment">Adobe's ActionScript 3 (Flash, Flex)</li>
									<li class="fragment">JavaScript as we know it today</li>
									<li class="fragment">...</li>
								</ul>
							</li>
							<li class="fragment">
								Officially, JavaScript <a href="https://developer.mozilla.org/en-US/docs/JavaScript">is maintained by Mozilla</a> nowadays.
								<ul>
									<li class="fragment">Current version JavaScript 1.8.5</li>
									<li class="fragment">Non-Mozilla implementations claim &ldquo;JavaScript Compliance&rdquo; but actually target the ECMAScript standard.</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>JavaScript Engines</h2>
						<ul>
							<li class="fragment">
								Browsers have a built-in engine to interpret JavaScript
								<ul>
									<li class="fragment"><a href="https://developer.mozilla.org/en/SpiderMonkey">SpiderMonkey</a> in Firefox</li>
									<li class="fragment"><a href="http://code.google.com/p/v8/">V8</a> in Chrome</li>
									<li class="fragment"><a href="http://www.webkit.org/projects/javascript/index.html">JavaScriptCore</a> (SquirrelFish/Nitro) in Webkit/Safari</li>
									<li class="fragment"><a href="http://my.opera.com/ODIN/blog/carakan-faq">Carakan</a> in Opera</li>
									<li class="fragment"><a href="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29">Chakra</a> in IE</li>
								</ul>
							</li>
							<li class="fragment">
								If you have access to them, these engines can be implemented in other projects
								<uL>
									<li class="fragment"><a href="http://nodejs.org/">Node.js</a> is powered by Google's V8</li>
									<li class="fragment"><a href="https://developer.mozilla.org/en/Rhino">Rhino</a> is an open source JavaScript engine developed by Mozilla and written in Java</li>
									<li class="fragment"><a href="http://www.adobe.com/devnet/photoshop/scripting.html">Photoshop (!) also comes with a JavaScript engine</a></li>
								</ul>
							</li>
						</ul>
					</section>

				</section>


				<!-- 2: JavaScript 101 -->
				<section>

					<section>
						<h2>JavaScript 101 with Forrest Gump</h2>
						<p><img src="assets/01/forrestgump.jpg" alt="Forrest Gump" title="Forrest Gump" width="467" height="350" /></p>
						<p>Because Forrest Gump is one of those movies ...</p>
					</section>

					<section>
						<h2>JavaScript 101</h2>
						<div>
							<figure>
								<img src="assets/01/robertnyman.jpg" alt="Robert Nyman" title="Robert Nyman" width="467" height="350" />
								<figcaption>Photo by <a href="http://www.flickr.com/photos/manssandstrom/4132454413/in/photostream/">Måns Sandström</a></figcaption>
							</figure>
						</div>
						<p style="font-size: 80%">... and because <a href="http://www.robertnyman.com/">Robert Nyman</a> made <a href="http://www.slideshare.net/robnyman/javascript-like-a-box-of-chocolates">an awesome presentation</a> about it, which formed the starting point for these slides.</p>
					</section>

					<section>
						<h2>Whilst I'm at it</h2>
						<div>
							<figure>
								<img src="assets/01/mathias.jpg" alt="Mathias Bynens" title="Mathias Bynens" width="480" height="360" />
								<figcaption>Photo by <a href="http://www.addyosmani.com/">Addy Osmani</a></figcaption>
							</figure>
						</div>
						<p style="font-size: 80%">Another thank you goes out to <a href="http://www.mathiasbynens.be/">Mathias Bynens</a> <em>(2nd one from the left)</em> who gave some handy remarks.</p>
					</section>

				</section>


				<!-- 3: JavaScript Variables -->
				<section>

					<section>
						<h2>JavaScript 101: Variables</h2>
						<p><img src="assets/01/likeaboxofchocolates.jpg" alt="Life is like a box of chocolates" title="Life is like a box of chocolates" width="397" height="264" /></p>
						<q>Life is like a box of chocolates,<br />you never know what you're gonna get</q>
					</section>

					<section>
						<h2>Before we dive in</h2>
						<ul>
							<li class="fragment">
								Variables have a <em>name</em> and a <em>value</em>
							</li>
							<li class="fragment">
								JavaScript is case sensitive
								<ul>
									<li><code>firstName</code> and <code>firstname</code> are not the same!</li>
								</ul>
							</li>
							<li class="fragment">JavaScript is dynamically typed
								<ul>
									<li>When declaring a variable, you cannot specify the type. JavaScript will <em>guess</em> the data type when assigning a value</li>
									<li>viz. a variable given the value <code>3</code> will be a number</li>
								</ul>
							</li>
							<li class="fragment">JavaScript is weakly typed
								<ul>
									<li>JavaScript will adjust the type of a var when a new value is assigned
										<ul>
											<li>This phenomenon is known as <em>implicit type conversion</em> or <em>coercion</em></li>
										</ul>
									</li>
									<li>viz. if that same variable is changed to <code>&quot;Hello&quot;</code> it'll become a string</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Declaring variables (1)</h2>
						<ul>
							<li class="fragment">
								Use the <code>var</code> keyword and assign a <em>value</em> to a <em>name</em>
								<pre class="bigger"><code contenteditable class="language-javascript">var firstName = 'Forrest';
alert(firstName);</code></pre>
							</li>
							<li class="fragment">
								Remember: JavaScript is dynamically typed and weakly typed
								<pre class="bigger"><code contenteditable class="language-javascript">// Dynamic typing
var firstName = 'Forrest';
alert(typeof firstName); // string

// Weak typing
firstName = 3;
alert(typeof firstName); // JavaScript has changed the type to number</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Declaring variables (2)</h2>
						<ul>
							<li class="fragment">
								It's possible to declare multiple vars at once.
							</li>
							<li class="fragment">
								Just separate them by a comma
								<pre class="bigger"><code contenteditable class="language-javascript">var firstName = 'Forrest',
    lastName = 'Gump';

alert(firstName);
alert(lastName);</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>JavaScript Data Types (1)</h2>
						<ul>
							<li class="fragment">JavaScript supports these Primitive Data Types
								<ul>
									<li><code>string</code></li>
									<li><code>number</code>
										<ul>
											<li>No real distinction for float/double/int!</li>
										</ul>
									</li>
									<li><code>boolean</code></li>
									<li><code>null</code>
										<ul>
											<li>empty value</li>
										</ul>
									</li>
									<li><code>undefined</code>
										<ul>
											<li>variable does not exist</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>JavaScript Data Types (2)</h2>
						<ul>
							<li class="fragment">What about <code>Array</code>? And <code>Date</code>? And ...?
								<ul class="fragment"><li>Well, those are <code>Object</code>s really</li></ul>
							</li>
							<li class="fragment">And oh, next to <code>string</code> you also have something like <code>String</code>
								<ul>
									<li class="fragment">The former is the data type</li>
									<li class="fragment">And the latter is ... an <code>Object</code></li>
								</ul>
							</li>
							<li class="fragment">
								And then you have functions
								<ul>
									<li class="fragment">Those are functions</li>
									<li class="fragment">
										... but JavaScript treats them as <em>First Class Objects</em>
									</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Not Sure If ...</h2>
						<p><img src="assets/01/notsureif.png" alt="Not Sure If ..." title="Not Sure If ..." width="480" height="360" /></p>
						<p class="fragment"><em>Let me explain on the next few slides ;)</em></p>
					</section>

					<section>
						<h2>Global Objects and Literals (1)</h2>
						<ul>
							<li class="fragment">
								In JavaScript nearly everything is built upon <code>Object</code>
								<ul>
									<li><code>Object</code> is the core of the language</li>
									<li>With it, you can declare anything you want if you extend upon it.</li>
								</ul>
							</li>
							<li class="fragment">
								JavaScript provides some global objects such as <code>String</code>, <code>Number</code>, <code>Boolean</code>, <code>Array</code>, etc.
								<ul>
									<li class="fragment">Derived from <code>Object</code></li>
									<li class="fragment">Define a structure to store <em>something</em> in</li>
									<li class="fragment">
										Instances have some properties
										<ul>
											<li>eg. <code>myString.length;</code> (Also noted as <code>String#length</code>)</li>
										</ul>
									</li>
									<li class="fragment">
										Instances have some methods (to manipulate/access the stored value)
										<ul>
											<li>eg. <code>myString.toUpperCase();</code> (Also noted as <code>String#toUpperCase</code>)</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Global Objects and Literals (2)</h2>
						<ul>
							<li class="fragment">
								Normally, one would do something like this
								<pre class="bigger"><code contenteditable class="language-javascript">var firstName = new String('Forrest');</code></pre>
								<ul>
									<li class="fragment">What you get back is an instance of <code>String</code></li>
									<li class="fragment">The type of the instance itself is <code>object</code></li>
									<li class="fragment">The type of the value inside that instance is <code>string</code></li>
								</ul>
							</li>
							<li class="fragment">Let's pull out some code to test this
								<pre class="bigger"><code contenteditable class="language-javascript">var firstName = new String('Forrest');
alert(firstName instanceof String); // true
alert(typeof firstName); // object
alert(typeof firstName.toString()); // string</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Global Objects and Literals (3)</h2>
						<ul>
							<li class="fragment">
								But next to that syntax, JavaScript also provides something named the <em>literal notation</em>
							</li>
							<li class="fragment">Literals allow you to immediately assign a value to a variable
								<pre class="bigger"><code contenteditable class="language-javascript">var firstName = 'Forrest';</code></pre>
								<ul>
									<li class="fragment">What you get back is the value</li>
									<li class="fragment">The type of the value is <code>string</code> (dynamic typing in action)</li>
								</ul>
							</li>
							<li class="fragment">
								Again, some code
								<pre class="bigger"><code contenteditable class="language-javascript">var firstName = 'Forrest';
alert(firstName instanceof String); // false
alert(typeof firstName); // string</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Still Not Sure?</h2>
						<p><img src="assets/01/notsureif.png" alt="Not Sure If ..." title="Not Sure If ..." width="480" height="360" /></p>
						<p class="fragment"><em>It's not that hard, really!</em></p>
					</section>

					<section>
						<h2>Global Objects and Literals (4)</h2>
						<ul>
							<li class="fragment">
								You know, this literal thing isn't new, you've been doing it all along; in Java for example:
								<pre class="bigger"><code class="language-java">Integer num = new Integer(3); // Not Literal
Integer num = 3; // Literal</code></pre>
							</li>
							<li class="fragment">JavaScript provides literals for:
								<ul>
									<li><code>String</code></li>
									<li><code>Number</code></li>
									<li><code>Boolean</code></li>
									<li><code>RegExp</code></li>
									<li><code>Function</code> <em>(*)</em></li>
									<li><code>Array</code></li>
									<li><code>Object</code></li>
								</ul>
							</li>
						</ul>
						<footer class="fragment"><em>(*) Function is the odd one here (see further)</em></footer>
					</section>

					<section>
						<h2>Global Objects and Literals (5)</h2>
						<ul>
							<li class="fragment">
								Example (1)
								<pre class="bigger"><code contenteditable class="language-javascript">var firstName = new String('Forrest'); // String Constructor
var firstName = 'Forrest'; // String Literal

var birthYear = new Number('1945'); // Number Constructor
var birthYear = 1945; // Number Literal

var isRunning = new Boolean('false'); // Boolean Constructor
var isRunning = false; // Boolean Literal

var hasR = new RegExp('r', 'i'); // RegExp Constructor
var hasR = /r/i; // RegExp Literal

var says = new Function('sentence', 'alert(sentence)'); // Function Constructor
var says = function(sentence) { alert(sentence); }; // Function Literal
function says(sentence) { alert(sentence); }; // The function statement</code></pre>
							</li>

						</ul>
					</section>

					<section>
						<h2>Global Objects and Literals (6)</h2>
						<ul>
							<li class="fragment">
								Example (2)
								<pre class="bigger"><code contenteditable class="language-javascript">var forrestFriends = new Array('Bubba', 'Lieutenant Dan');
var forrestFriends = ['Bubba', 'Lieutenant Dan']; // Array Literal

var forrest = new Object();
forrest.firstName = 'Forrest';
forrest.lastName = 'Gump';

var forrest = { // Object Literal
	firstName : 'Forrest', // semi-colons to assign
	lastName : 'Gump',
	says : function() { // works with functions too!
		return 'Stupid is as stupid does';
	} // no trailing comma (!)
};</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Global Objects and Literals (7)</h2>
						<ul>
							<li class="fragment">
								<span>Remember that if it exists as a primitive data type (viz. <code>string</code>, <code>number</code>, <code>boolean</code>), you'll get the primitive returned when using the literal notation!</span>
								<pre class="bigger"><code contenteditable class="language-javascript">// String Instance
var lastName = new String('Gump');
alert(typeof lastName); // object
alert(lastName instanceof String); // true

// String Literal
var firstName = 'Forrest';
alert(typeof firstName); // string
alert(firstName instanceof String); // false</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Global Objects and Literals (8)</h2>
						<ul>
							<li class="fragment">
								If no primitive variant exists (<code>Object</code>, <code>Array</code>, <code>RegExp</code>, <code>Function</code>), the literal <em>will</em> return an instance when using the literal notation.
								<pre class="bigger"><code contenteditable class="language-javascript">// Array Instance
var forrestFriends = new Array('Bubba', 'Lieutenant Dan');
alert(typeof forrestFriends); // object
alert(forrestFriends instanceof Array); // true

// Array Literal
var forrestFriends = ['Bubba', 'Lieutenant Dan'];
alert(typeof forrestFriends); // object
alert(forrestFriends instanceof Array); // true</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Oh, I See ...</h2>
						<p><img src="assets/01/ohisee.png" alt="Oh, I see ..." title="Oh, I see ..." width="480" height="360" /></p>
						<p class="fragment"><em>Or at least I hope you do</em></p>
					</section>

					<section>
						<h2>Global Objects and Literals (9)</h2>
						<ul>
							<li class="fragment">
								Remember when I told you all Global Objects (such as <code>String</code>) derive from <code>Object</code>?
							</li>
							<li class="fragment">
								Here's some code proof:
								<pre class="bigger"><code contenteditable class="language-javascript">// Number Instance
var birthYear = new Number('1945');
alert(typeof birthYear);
alert(birthYear instanceof Number);
alert(birthYear instanceof Object);

// Array Instance
var forrestFriends = ['Bubba', 'Lieutenant Dan'];
alert(typeof forrestFriends);
alert(forrestFriends instanceof Array);
alert(forrestFriends instanceof Object);

// Function literal
var says = function() { alert('Stupid is as stupid does'); };
alert(typeof says); // &lt;-- the odd one out
alert(says instanceof Function);
alert(says instanceof Object);</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Global Objects and Literals (10)</h2>
						<ul>
							<li class="fragment">
								What you should remember from all this
								<ul>
									<li>Literal Notations are shorthands</li>
									<li>Literal Notations return a direct value instead of an object if possible</li>
								</ul>
							</li>
							<li class="fragment">
								What you must know about Literals
								<ul>
									<li>Literal Notations are the preferred way to write JavaScript</li>
									<li>Literal Notations are all around, even some of the current techniques (think JSON) are built upon this principle</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Still seeing it?</h2>
						<p><img src="assets/01/stillseeingit.png" alt="Still seeing it?" title="Still seeing it?" width="480" height="360" /></p>
						<p class="fragment"><em>Now, back to variables</em></p>
					</section>

					<section>
						<h2>Accessing Object Properties</h2>
						<ul>
							<li class="fragment">Via square brackets, or via dot notation
								<pre class="bigger"><code contenteditable class="language-javascript">// Object Literal
var forrest = {
	firstName : 'Forrest',
	lastName : 'Gump',
	sentence : 'Stupid is as stupid does',
	says : function() {
		return this.sentence;
	}
};

// test
console.log(forrest);
alert(forrest.firstName);
alert(forrest['firstName']);
alert(forrest.says());</code></pre>
								<ul>
									<li class="fragment">The <em>keys</em> of the Object Literal may be placed between quotes. When using spaces/special chars in the keys <em>(not recommended though)</em>, <a href="http://mathiasbynens.be/notes/javascript-properties">quotes must be used</a></li>
									<li class="fragment">The dot notation to accessing properties is the preferred way. Square brackets mandatory when properties have spaces in their name</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Implicit Type Conversion (1)</h2>
						<ul>
							<li class="fragment">As mentioned: JavaScript will change variable types on the fly <em>(coercion)</em></li>
							<li class="fragment">
								This not only happens when assigning values, but also when using variables
								<pre class="bigger"><code contenteditable class="language-javascript">// Various 'false' values
var nullVal = null;
var undefinedVal = undefined;
var zeroVal = 0;
var falseVal = false;
var emptyString = '';

if (emptyString) {
	alert('truthy');
} else {
	alert('falsy'); // false-ish
}</code></pre>
								<pre class="bigger"><code contenteditable class="language-javascript">console.log('5' + 6 + 7);</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Implicit Type Conversion (2)</h2>
						<ul>
							<li class="fragment">You can prevent coercion by using the <em>identity operator</em>
								<pre class="bigger"><code contenteditable class="language-javascript">// Equality
alert((7 == '7') ? 'equal' : 'not equal');

// Identity
alert((7 === '7') ? 'equal (identity)' : 'not equal (identity)');</code></pre>
							</li>
							<li class="fragment">Or by explicitly casting a variable to being a certain type
								<pre class="bigger"><code contenteditable class="language-javascript">// Type Coercion (default)
alert('5' + 6 + 7);

// Prevent Type Coercion
alert(parseInt('5', 10) + 6 + 7);</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Scope (1)</h2>
						<ul>
							<li class="fragment">Global or Local
								<pre class="bigger"><code contenteditable class="language-javascript">// Global
var quote = 'I had run for 3 years, 2 months, 14 days, and 16 hours.';

var foo = function() {
	var saying = 'My name is Forrest, Forrest Gump'; // Local
	alert(saying);

	alert(quote); // Access to Global

    question = 'Why don\'t you love me, Jenny?'; // Local ?
	alert(question);
};

foo();
alert(quote);
// alert(saying); // disabled, will fail
alert(question); // Nope, Chuck Testa! Erm, I mean global!</code></pre>
								<ul>
									<li class="fragment">
										The scope is also known as the <em>environment</em> in which a variable lives
									</li>
									<li class="fragment">
										Note: In <a href="https://developer.mozilla.org/en/JavaScript/Strict_mode">Strict Mode</a>, the <code>var</code> keyword is mandatory.
									</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Scope (2)</h2>
						<ul>
							<li class="fragment">
								Best practice: <strong>Always</strong> use the <code>var</code> keyword inside functions, loops, etc.
								<ul>
									<li>Prevents pollution of the global scope</li>
									<li>Prevents overwriting (by others)</li>
									<li>Works in Strict Mode</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Variable Properties and Methods (1)</h2>
						<ul>
							<li class="fragment">
								Each instance of a global object provides some properties and/or methods
								<ul>
									<li>eg. <code>String#length</code></li>
									<li>eg. <code>String#toUpperCase</code></li>
								</ul>
							</li>
							<li class="fragment">
								Next to instance methods, they also <em>can</em> provide static methods
								<ul>
									<li>eg. <code>Array#isArray</code></li>
								</ul>
							</li>
							<li class="fragment">
								Full list of properties/methods to be found on <a href="https://developer.mozilla.org/en/JavaScript/Reference#Global_Objects">Mozilla Developer Network</a> or <a href="http://es5.github.com/">the ECMAScript Spec</a>
							</li>
						</ul>

					</section>

					<section>
						<h2>Variable Properties and Methods (2)</h2>
						<ul>
							<li class="fragment">
								Properties and methods are also there if a simple type is returned when using literals.
								<ul>
									<li class="fragment">JavaScript does some magic in the background to make that work</li>
								</ul>
							</li>
							<li class="fragment">
								Example
								<pre class="bigger"><code contenteditable class="language-javascript">// String Instance
var firstName = new String('Forrest'); // an instance of String
alert(firstName.toUpperCase());

// String Literal
var firstName = 'Forrest'; // a variable of the type string
alert(firstName.toUpperCase());

// Look ma, no var
alert('Forrest'.toUpperCase());
alert(['Bubba', 'Lieutenant Dan'].length);</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Variables 101: Summary</h2>
						<ul>
							<li class="fragment">
								JavaScript is weakly and dynamically typed
								<ul>
									<li class="fragment">Coercion!</li>
								</ul>
							</li>
							<li class="fragment">
								In JavaScript, about everything is an <code>Object</code>
								<ul>
									<li class="fragment">JavaScript provides properties and methods which you can access/call</li>
								</ul>
							</li>
							<li class="fragment">
								JavaScript provides a shorthand (<strong>Literal Notation</strong>)
								<ul>
									<li class="fragment">
										Primitive returned when possible (<code>String</code>, <code>Number</code>, <code>Boolean</code>)
									</li>
								</ul>
							<li class="fragment">
								Variables have a scope in which they are accessible.
								<ul>
									<li>It's possible to access variables that live in an outer scope</li>
								</ul>
							</li>
						</ul>
					</section>

				</section>

				<!-- 4: JavaScript Control Structures -->
				<section>

					<section>
						<h2>JavaScript 101: Control Structures</h2>
						<p><img src="assets/01/stoppedrunning.jpg" alt="" title="Feather" width="467" height="298" /></p>
						<q>I had run for 3 years, 2 months, 14 days, and 16 hours.</q>
					</section>

					<section>
						<h2>If-Else &amp; Switch-Case(-Default)</h2>
						<div class="fragment">
							<pre class="bigger"><code contenteditable class="language-javascript">// If statement
var badGrades = true;
if (badGrades) {
	alert('Mom sleeps with teacher');
} else {
	alert('Mom does not sleep with teacher');
}

// Switch statement
var age = 10,
	lifeState;

switch (age) {
	case 10:
		lifeState = 'Young';
	break;
	case 60:
		lifeState = 'Old';
	break;
	default:
		lifeState = 'unknown';
	break;
}

alert(lifeState);</code></pre>
						</div>
					</section>

					<section>
						<h2>For</h2>
						<div class="fragment">
							<pre class="bigger"><code contenteditable class="language-javascript">// Var we'll be using
var forrestFriends = ['Bubba', 'Lieutenant Dan'];

// For
for (var i = 0; i &lt; forrestFriends.length; i++) {
	alert(forrestFriends[i]);
}</code></pre>
						</div>
					</section>

					<section>
						<h2>For (optimized)</h2>
						<p class="fragment">Performance can be improved by caching variables. That way JavaScript doesn't have to look up everything again.</p>
						<div class="fragment">
							<pre class="bigger"><code contenteditable class="language-javascript">// Var we'll be using
var forrestFriends = ['Bubba', 'Lieutenant Dan'];

// For
for (var i = 0, len = forrestFriends.length; i &lt; len; i++) {
	alert(forrestFriends[i]);
}</code></pre>
						</div>
					</section>

					<section>
						<h2>For-In</h2>
						<div class="fragment">
							<pre class="bigger"><code contenteditable class="language-javascript">// Vars we'll be using
var forrest = {
	firstName : 'Forrest',
	lastName : 'Gump' // no trailing comma (!)
};
var forrestFriends = ['Bubba', 'Lieutenant Dan'];

// For - In (Array)
for (var friend in forrestFriends) {
	alert(forrestFriends[friend]);
}

// For - In (Object)
for (var prop in forrest) {
	alert(prop + ' = ' + forrest[prop]);
}</code></pre>
						</div>
						<p class="fragment"><small>Note: When using arrays, the order is not guaranteed! Better to use <code>Array#forEach</code></small></p>
					</section>

					<section>
						<h2>While &amp; Do-While</h2>
						<div class="fragment">
							<pre class="bigger"><code contenteditable class="language-javascript">// While
var count = 5;
while (count > 0) {
	console.log(count);
	count--;
}

// Do - While
var count = 5;
do {
	console.log(count);
	count--;
} while (count > 0);

// Tip: retry this example with count = 0 as starting value
</code></pre>
						</div>
					</section>

					<section>
						<h2>With</h2>
						<div class="fragment">
							<pre class="bigger"><code contenteditable class="language-javascript">// Vars we'll be using
var forrest = {
	firstName : 'Forrest',
	lastName : 'Gump' // no trailing comma (!)
};

// With
with (forrest) {
	alert(firstName);
	alert(lastName);
}
</code></pre>
						</div>
						<p class="fragment"><small>Note: With is <a href="http://www.yuiblog.com/blog/2006/04/11/with-statement-considered-harmful/">considered harmful</a> and performs badly. Not suggested.</small></p>
					</section>

					<section>
						<h2>Try-Catch(-Finally)</h2>
						<div class="fragment">
							<pre class="bigger"><code contenteditable class="language-javascript">// Vars we'll be using
var forrest = {
	firstName : 'Forrest',
	lastName : 'Gump',
	says : function() {
		console.log('Stupid is as stupid does');
	}
};

// Try-Catch
try {
	forrest.functionDoesNotExist();
} catch (error) {
	console.error('ERROR! ' + error.name + ' : ' + error.message);
}

// Try-Catch-Finally
try {
	forrest.functionDoesNotExist();
} catch (error) {
	console.error('ERROR! ' + error.name + ' : ' + error.message);
} finally {
	forrest.says();
}
</code></pre>
						</div>
						<p class="fragment"><small>Not a real control structure, but found it fitting here</small></p>
					</section>

					<section>
						<h2>Break (1)</h2>
						<ul>
							<li class="fragment">Jumps to the end of the statement &amp; aborts current task</li>
							<li class="fragment">
								Valid inside <code>switch</code>, <code>for</code>, <code>for-in</code>, <code>while</code>, and <code>do-while</code>
							</li>
							<li class="fragment">
								Example
								<pre class="bigger"><code contenteditable class="language-javascript">for (var x = 1; x &lt;= 5; x++) {
	var y = 1;
	while (y &lt;= 7) {
		if (y == 5) { break; }
		console.log(x + '-' + y);
		y++;
	}
}</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Break (2)</h2>
						<ul>
							<li class="fragment">
								To break the outer loop, one can make use of a <em>label</em>
								<pre class="bigger"><code contenteditable class="language-javascript">myForLoop:
for (var x = 1; x &lt;= 5; x++) {
	var y = 1;
	while (y &lt;= 7) {
		if (y == 5) { break myForLoop; }
		console.log(x + '-' + y);
		y++;
	}
}</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Continue (1)</h2>
						<ul>
							<li class="fragment">Jumps back to start of statement and continues with next item</li>
							<li class="fragment">Valid inside <code>for</code>, <code>for-in</code>, <code>while</code>, and <code>do-while</code>
							<li class="fragment">
								Example
								<pre class="bigger"><code contenteditable class="language-javascript">for (var x = 1; x &lt;= 5; x++) {
	for (var y = 1; y &lt;= 7; y++) {
		if (y == 5) continue;
		console.log(x + '-' + y);
	}
}</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Continue (2)</h2>
						<ul>
							<li class="fragment">
								Using a <em>label</em> is also possible
								<pre class="bigger"><code contenteditable class="language-javascript">myForLoop:
for (var x = 1; x &lt;= 5; x++) {
	for (var y = 1; y &lt;= 7; y++) {
		if (y == 5) { continue myForLoop; }
		console.log(x + '-' + y);
	}
}</code></pre>
							</li>
						</ul>
						<p class="fragment"><small>In this example you get the same result as the first <code>break</code> example</small></p>
					</section>

				</section>


				<!-- 5: Little Big Details -->
				<section>

					<section>
						<h2>JavaScript 101: Little Big Details</h2>
						<p><img src="assets/01/feather.jpg" alt="Feather" title="Feather" width="467" height="298" /></p>
						<q>My name is Forrest, Forrest Gump.</q>
					</section>

					<section>
						<h2>Ternary Operator</h2>
						<pre class="bigger fragment"><code contenteditable class="language-javascript">// A var we'll need
var looking = true;

// How you'd probably write it at first
var forrestSays;
if (looking) {
	forrestSays = 'I gotta find Bubba!';
} else {
	forrestSays = 'It\'s OK';
}
alert(forrestSays);</code></pre>
						<pre class="bigger fragment"><code contenteditable class="language-javascript">// A var we'll need
var looking = true;

// Better: Ternary operators
var forrestSays = looking ? 'I gotta find Bubba!' : 'It\'s OK';
alert(forrestSays);</code></pre>
					</section>

					<section>
						<h2>Shorthand Assignment</h2>
						<pre class="bigger fragment"><code contenteditable class="language-javascript">// How you'd probably write it at first
var lifeIs = function(boxOfChocolates) {
	var life;

	if (!boxOfChocolates) {
		life = 'a Snickers bar';
	} else {
		life = boxOfChocolates;
	}

	return 'Life is like ' + life;
};
alert(lifeIs('a Box of Chocolates'));</code></pre>
						<pre class="bigger fragment"><code contenteditable class="language-javascript">// Better: Shorthand assignment
var lifeIs = function(boxOfChocolates) {
	return 'Life is like ' + (boxOfChocolates || 'a Snickers bar');
};
alert(lifeIs('a Box of Chocolates'));</code></pre>
					</section>

					<section>
						<h2>Short-Circuit Logic</h2>
						<pre class="bigger fragment"><code contenteditable class="language-javascript">// An Object we'll need
var forrest = {
	firstName : 'Forrest',
	lastName : 'Gump',
	says : function() {
		alert('Stupid is as stupid does');
	}
};

// How you'd probably write it at first
if ((forrest != null) && (forrest.says != null)) {
	forrest.says();
}</code></pre>
						<pre class="bigger fragment"><code contenteditable class="language-javascript">// An Object we'll need
var forrest = {
	firstName : 'Forrest',
	lastName : 'Gump',
	says : function() {
		alert('Stupid is as stupid does');
	}
};

// Short circuit logic
forrest && forrest.says && forrest.says();
</code></pre>
					</section>

					<section>
						<h2>Chaining</h2>
						<ul>
							<li class="fragment">
								It's possible to <em>chain</em> methods, as long as a &mdash; for the next method &mdash; usable value is returned
								<pre class="bigger"><code contenteditable class="language-javascript">var example = 'Forrest'.substr(0,5).split('').join('-').toUpperCase();
alert(example);</code></pre>
							</li>
							<li class="fragment">
								Interpreted from left to right
							</li>
						</ul>
					</section>

				</section>


				<!-- 6 : Advanced JavaScript : Functions-->
				<section>

					<section>
						<h2>Advanced JavaScript: Functions</h2>
						<p><img src="assets/01/runforrestrun.jpg" alt="Run Forrest, Run" title="Run Forrest, Run" width="467" height="350" /></p>
						<q>Run Forrest, <code>Run()</code></q>
					</section>

					<section>
						<h2>Functions Recap</h2>
						<ul>
							<li class="fragment">
								Functions can be defined in three ways
								<pre class="bigger"><code contenteditable class="language-javascript">// Function Constructor
var says = new Function('sentence', 'alert(sentence)');

// function statement or function declaration
function says(sentence) { alert(sentence); };

// function expression or function operator
var says = function(sentence) { alert(sentence); };</code></pre>
							</li>
							<li class="fragment">
								Preferred way is via the function expression
							</li>
						</ul>
					</section>

					<section>
						<h2>Function arguments (1)</h2>
						<ul>
							<li class="fragment">
								Basic usage
								<pre class="bigger"><code contenteditable class="language-javascript">var says = function(sentence) {
	alert(sentence);
};

says('Stupid is as stupid does');</code></pre>
							</li>
							<li class="fragment">
								Arguments can be passed on
								<pre class="bigger"><code contenteditable class="language-javascript">var says = function(sentence) {
	alert(sentence);
};

var forrestSays = function(whatForrestSays) {
	says('Forrest Says "' + whatForrestSays + '"');
};

forrestSays('Stupid is as stupid does');</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Function arguments: Non-Primitives</h2>
						<ul>
							<li class="fragment">
								Non-primitives are passed by Reference
								<pre class="bigger"><code contenteditable class="language-javascript">var change = function(obj) {
	obj.sentence = 'My name is Forrest, Forrest Gump';
};

// Object Literal => Object Returned
var forrest = {
	sentence : 'Stupid is as stupid does'
};

alert(forrest.sentence);
change(forrest);
alert(forrest.sentence);</code></pre>
								<pre class="bigger"><code contenteditable class="language-javascript">var change = function(arr) {
	arr.unshift('Jenny');
};

// Array Literal => Array (essentially Object) Returned
var forrestFriends = ['Bubba', 'Lieutenant Dan'];

alert(forrestFriends.length);
change(forrestFriends);
alert(forrestFriends.length);</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Function arguments: Primitives</h2>
						<ul>
							<li class="fragment">
								Primitives are passed by value
								<pre class="bigger"><code contenteditable class="language-javascript">var change = function(sentence) {
	sentence = 'My name is Forrest, Forrest Gump';
};

var sentence = 'Stupid is as stupid does'; // String literal (string)
alert(sentence);
change(sentence);
alert(sentence);</code></pre>
							</li>
							<li class="fragment">
								Beware: if <em>a primitive variant</em> of the non-primitive argument exists, it's also passed by value!
								<pre class="bigger"><code contenteditable class="language-javascript">var change = function(sentence) {
	sentence = 'My name is Forrest, Forrest Gump';
};

var sentence = new String('Stupid is as stupid does'); // String Instance (Object)
alert(sentence);
change(sentence);
alert(sentence);</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Function arguments: Functions (1)</h2>
						<ul>
							<li class="fragment">
								Function arguments can be anything, even other functions!
								<pre class="bigger"><code contenteditable class="language-javascript">var logs = function(sentence) {
	console.log(sentence);
};

var says = function(sentence) {
	alert(sentence);
};

var forrestDoes = function(fn, sentence) {
	fn(sentence);
};

forrestDoes(says, 'Stupid is as stupid does');
forrestDoes(logs, 'Stupid is as stupid does');</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Function arguments: Functions (2)</h2>
						<ul>
							<li class="fragment">
								Internally, JavaScript will replace <code>fn</code> with the actual passed in function
							</li>
							<li class="fragment">
								Can be checked by calling <code>Function#toString</code>
								<pre class="bigger"><code contenteditable class="language-javascript">var logs = function(sentence) {
	console.log(sentence);
};

var says = function(sentence) {
	alert(sentence);
};

var forrestDoes = function(fn, sentence) {
	alert(fn.toString());
	fn(sentence);
};

forrestDoes(says, 'Stupid is as stupid does');
forrestDoes(logs, 'Stupid is as stupid does');</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Function arguments: Functions (3)</h2>
						<ul>
							<li class="fragment">
								You can even directly pass in a function on the fly, without needing to declare it first
								<pre class="bigger"><code contenteditable class="language-javascript">var forrestDoes = function(fn, sentence) {
	fn(sentence);
};

forrestDoes(function(sentence) { // says from the previous example
	alert(sentence);
}, 'Stupid is as stupid does');

forrestDoes(function(sentence) { // logs from the previous example
	console.log(sentence);
}, 'Stupid is as stupid does');</code></pre>
							</li>
							<li class="fragment">
								The passed in functions we call <strong><em>anonymous functions</em></strong>, as they have no name.
								<ul>
									<li>Also known as <em>Lambda Functions</em></li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Function arguments:<br />Functions Passed by Ref/Val?</h2>
						<ul>
							<li class="fragment">
								An example
								<pre class="bigger"><code contenteditable class="language-javascript">function change(fn) {
	fn = function() {
		alert('changed');
	};
};
var says = function() {
	alert('Stupid is as stupid does');
};

says();
change(says);
says();</code></pre>
							</li>
							<li class="fragment">
								Functions are passed by value!
							</li>
							<li class="fragment">
								Rather logical, if we remember this
								<pre class="bigger"><code contenteditable class="language-javascript">var says = function() { };
alert(typeof says); // Not an object!</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Functions Passed by Value (1)</h2>
						<ul>
							<li class="fragment">
								Functions being passed by value has consequences!
								<pre class="bigger"><code contenteditable class="language-javascript">var forrest = {
	sentence : 'Stupid is as stupid does',
	say : function() {
		return this.sentence;
	}
};

var show = function(fn) {
	alert(fn());
};

show(forrest.say);</code></pre>
								<ul>
									<li class="fragment">Meaning of <code>this</code> has hanged!</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Functions Passed by Value (2)</h2>
						<ul>
							<li class="fragment">
								If you know the function: fixable by passing the object
								<pre class="bigger"><code contenteditable class="language-javascript">var forrest = {
	sentence : 'Stupid is as stupid does',
	say : function() {
		return this.sentence;
	}
};

var show = function(obj) {
	alert(obj.say());
};

show(forrest);</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Functions Passed by Value (3)</h2>
						<ul>
							<li class="fragment">
								If you don't know the function: fixable by passing both the object and the function and then using <code>Function#call</code>
								<pre class="bigger"><code contenteditable class="language-javascript">var forrest = {
	sentence : 'Stupid is as stupid does',
	say : function() {
		return this.sentence;
	}
};

var show = function(obj, fn) {
	alert(fn.call(obj));
};

show(forrest, forrest.say);</code></pre>
								<ul>
									<li class="fragment"><code>Function#call</code> lets you call a function and give a new meaning to <code>this</code> when calling it</li>
									<li class="fragment">More on <code>Function#call</code> <a href="#/6/33">later</a></code>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Self Invoking Functions (1)</h2>
						<ul>
							<li class="fragment">Consider this function
								<pre class="bigger"><code contenteditable class="language-javascript">var run = function() {
	alert('Run Forrest, Run');
};
run();</code></pre>
							</li>
							<li class="fragment">
								No harm in adding some extra brackets
								<pre class="bigger"><code contenteditable class="language-javascript">var run = (function() {
	alert('Run Forrest, Run');
});
run();</code></pre>
							</li>
							<li class="fragment">
								When calling <code>run();</code>, JavaScript will replace the <code>run</code> part of that statement with the actual contents of the variable <code>run</code>
							</li>
						</ul>
					</section>

					<section>
						<h2>Self Invoking Functions (2)</h2>
						<ul>
							<li class="fragment">
								So eventually, you'll end up with this
								<pre class="bigger"><code contenteditable class="language-javascript">(function() {
	alert('Run Forrest, Run');
})();</code></pre>
							</li>
							<li class="fragment">
								As you can see, the function is now
								<ul>
									<li class="fragment">anonymous</li>
									<li class="fragment">invoked immediately</li>
								</ul>
							</li>
							<li class="fragment">
								We call this an <em>Immediately-Invoked Function Expression</em> (IIFE, pronounced <em>iffy</em>)
							</li>
							<li class="fragment">
								This is also possible
								<pre class="bigger"><code contenteditable class="language-javascript">(function() {
	alert('Run Forrest, Run');
}()); // The Crockford Way</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Self Invoking Functions (3)</h2>
						<ul>
							<li class="fragment">
								IIFE's work with function parameters too
								<pre class="bigger"><code contenteditable class="language-javascript">(function(sentence) {
	alert(sentence);
})('Run Forrest, Run');</code></pre>
								<ul>
									<li class="fragment">
										Which is comparable to calling
										<pre class="bigger"><code contenteditable class="language-javascript dontrun">run('Run Forrest, Run');</code></pre>
									</li>
								</ul>
							</li>
							<li class="fragment">
								Alternative example
								<pre class="bigger"><code contenteditable class="language-javascript">var toSay = 'Run Forrest, Run';
(function(sentence) {
	alert(sentence);
})(toSay);</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Nesting Functions (1)</h2>
						<ul>
							<li class="fragment">
								It's possible to nest functions
								<pre class="bigger"><code contenteditable class="language-javascript">var forrestSays = function(whatForrestSays) {
	var says = function(sentence) {
		alert(sentence);
	};

	says(whatForrestSays);
};

forrestSays('Stupid is as stupid does');</code></pre>
							</li>
							<li class="fragment">
								Keep the scope in mind!
								<pre class="bigger"><code contenteditable class="language-javascript">var forrestSays = function(whatForrestSays) {
	var says = function(sentence) {
		alert(sentence);
	};

	says(whatForrestSays);
};

forrestSays('Stupid is as stupid does');
says('Stupid is as stupid does'); // will fail, not in scope!</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Nesting Functions (2)</h2>
						<ul>
							<li class="fragment">
								Scope also allows you to re-use names
								<pre class="bigger"><code contenteditable class="language-javascript">var says = function(sentence) {
	alert('Outer says, says "' + sentence + '"');
};

var forrestSays = function(whatForrestSays) {
	var says = function(sentence) {
		alert('Inner says, says "' + sentence + '"');
	};
	says(whatForrestSays);
};

forrestSays('Stupid is as stupid does');
says('Stupid is as stupid does'); // won't fail</code></pre>
							</li>
							<li class="fragment">
								But that's not a best practice, as things can (and will) get complicated.
								<ul>
									<li class="fragment">Above that, what if you want to run the outer <code>says</code> from within <code>forrestSays</code>?</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Return Values (1)</h2>
						<ul>
							<li class="fragment">Functions can return values if they want</li>
							<li class="fragment">
								Use the <code>return</code> statement
								<pre class="bigger"><code contenteditable class="language-javascript">var says = function(what, verb) {
	return what + ' ' + verb;
};

var shitHappens = says('Shit', 'happens');
alert(shitHappens);</code></pre>
							</li>
							<li class="fragment">
								Return values can be anything, even functions!
								<pre class="bigger"><code contenteditable class="language-javascript">var says = function(what) {
    return function(verb) {
        return what + ' ' + verb;
    };
};
var shit = says('Shit');
alert(shit('happens'));

// also possible
alert(says('Shit')('happens'));</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Wow, what just happened there?</h2>
						<ul>
							<li class="fragment">
								Turns out JavaScript does something magical known as creating <strong><em>closures</em></strong> when you create a function
							</li>
							<li class="fragment">
								A closure a special kind of object that holds two components:
								<ul>
									<li>The created function</li>
									<li>The environment in which it was created (<code>LexicalEnvironment</code>)</li>
								</ul>
							</li>
							<li class="fragment">
								The environment consists of all local variables that were in scope at the time the closure was created.
							</li>
							<li class="fragment">
								The function can access the environment, thus can access the (non-local) variables
							</li>
						</ul>
					</section>

					<section>
						<h2>Not sure if ...</h2>
						<p><img src="assets/01/notsureif.png" alt="Not Sure If ..." title="Not Sure If ..." width="480" height="360" /></p>
						<p><em>Yeah, I understand ... lets just check an example</em></p>
					</section>

					<section>
						<h2>Closures: Example (1)</h2>
						<ul>
							<li class="fragment">
								Example
								<pre class="bigger"><code contenteditable class="language-javascript">var firstName = 'Forrest';

var forrestFriends = function() {
	var friends = ['Bubba', 'Lieutenant Dan'];
	var friendsCount = function() {
		return friends.length;
	};
	var joinFriends = function() {
		return firstName + ' has ' + friendsCount() + ' friends: ' + friends.join(', ');
	};
	return joinFriends();
};

alert(forrestFriends());</code></pre>
								<ul>
									<li class="fragment">
										When <code>joinFriends</code> <em>(or any of the other functions)</em> is created, a <strong><em>closure</em></strong> is created
									</li>
									<li class="fragment">
										The closure holds the function itself and the variables in scope.
									</li>
									<li class="fragment">
										Now, what is the scope when the function is created?
									</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Closures: Example (2)</h2>
						<ul>
							<li>
								Example (continued)
								<pre class="bigger"><code contenteditable class="language-javascript">var firstName = 'Forrest';

var forrestFriends = function() {
	var friends = ['Bubba', 'Lieutenant Dan'];
	var friendsCount = function() {
		return friends.length;
	};
	var joinFriends = function() {
		return firstName + ' has ' + friendsCount() + ' friends: ' + friends.join(', ');
	};
	return joinFriends();
};

alert(forrestFriends());</code></pre>
								<ul>
									<li class="fragment">
										The scope of <code>joinFriends</code> is everything &ldquo;on the same level of it&rdquo;, thus everything inside the curly brackets of <code>forrestFriends</code>
										<ul>
											<li class="fragment">
												So the <code>LexicalEnvironment</code> of the created closure holds the variables<br /> <code>friends</code>, <code>friendsCount</code> and <code>joinFriends</code>
											</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Closures: Example (3)</h2>
						<ul>
							<li>
								Example (continued)
								<pre class="bigger"><code contenteditable class="language-javascript">var firstName = 'Forrest';

var forrestFriends = function() {
	var friends = ['Bubba', 'Lieutenant Dan'];
	var friendsCount = function() {
		return friends.length;
	};
	var joinFriends = function() {
		return firstName + ' has ' + friendsCount() + ' friends: ' + friends.join(', ');
	};
	return joinFriends();
};

alert(forrestFriends());</code></pre>
								<ul>
									<li class="fragment">
										What about <code>firstName</code>? That wasn't part of the current scope?
										<ul>
											<li class="fragment">
												When a function can't find a variable inside the current <code>LexicalEnvironment</code>, it will try the outer <code>LexicalEnvironment</code> (go up one level) to (hope to) find it there
											</li>
											<li class="fragment">
												So it goes up to the <code>LexicalEnvironment</code> of the closure created when <code>forrestFriends</code> was created; which has access to the vars in the global scope
											</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Closures: Summarized</h2>
						<ul>
							<li class="fragment">
								In short, when a function is created, it can access the non-local variables (outer variables) thanks to the <em>closure</em> that was created.
							</li>
							<li class="fragment">
								And it doesn't stop there ...
							</li>
						</ul>
					</section>

					<section>
						<h2>Oh boy ...</h2>
						<p><img src="assets/01/stillseeingit.png" alt="Still seeing it?" title="Still seeing it?" width="480" height="360" /></p>
						<p class="fragment"><em>Please, bear with me, there are some facts you should know</em></p>
					</section>

					<section>
						<h2>Closures: Vars linked by Reference</h2>
						<ul>
							<li class="fragment">
								Fact: The variables are linked by reference to the <code>LexicalEnvironment</code>
								<pre class="bigger"><code contenteditable class="language-javascript">var firstName = 'Forrest';

var forrestFriends = function() {
	var friends = ['Bubba', 'Lieutenant Dan'];
	var friendsCount = function() {
		return friends.length;
	};
	var joinFriends = function() {
		return firstName + ' has ' + friendsCount() + ' friends: ' + friends.join(', ');
	};
	friends.unshift('Jenny'); // Change friends, after the function was created
	return joinFriends();
};

alert(forrestFriends());</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Closures: Returning functions</h2>
						<ul>
							<li class="fragment">
								Fact: With nested functions: when the outer function has finished, the closure still lives on
								<pre class="bigger"><code contenteditable class="language-javascript">var firstName = 'Forrest';

var forrestFriends = function() {
	var friends = ['Bubba', 'Lieutenant Dan'];
	var friendsCount = function() {
		return friends.length;
	};
	var joinFriends = function() {
		return firstName + ' has ' + friendsCount() + ' friends: ' + friends.join(', ');
	};
	return joinFriends;
};

var ff = forrestFriends();
// at this moment, the outer function has ended
// only joinFriends() was returned
// what about friends and friendsCount? Will they still exist?
alert(ff());</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Closures: Topping things off</h2>
						<ul>
							<li class="fragment">
								Final example
								<pre class="bigger"><code contenteditable class="language-javascript">var add = function(x) {
	return function(y) {
		return x + y;
	};
};
var add5 = add(5),
    add6 = add(6);
var eleven = add5(6),
    twelve = add6(6);
alert(eleven);
alert(twelve)
</code></pre>
							</li>
							<li class="fragment">
								Internally <code>add5</code> has become
									<pre class="bigger"><code contenteditable class="language-javascript">function(y) {
	return x + y;
}; // How I know? Try alert(add5.toString()); in the example above ;)</code></pre>
							</li>
							<li class="fragment">
								Now, how come add5 knows the value of <code>x</code>?
								<ul>
									<li>Yes, closures!</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Closures: In Closing</h2>
						<ul>
							<li class="fragment">
								If you want to have a full understanding of closures, feel free to read these links
								<ul>
									<li><a href="https://developer.mozilla.org/en/JavaScript/Guide/Closures">Mozilla Developer Network: Closures</a></li>
									<li><a href="http://javascript.info/tutorial/closures">JavaScript.info: Closures</a> <em>(great info on <code>LexicalEnvironment</code>)</em></li>
									<li><a href="http://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/">Angus Croll: Understanding JavaScript Closures</a></li>
								</ul>
							</li>
							<li class="fragment">
								And if you really can't get enough
								<ul>
									<li class="fragment">Dmitry Soshikov has written <a href="http://dmitrysoshnikov.com/ecmascript/es5-chapter-3-1-lexical-environments-common-theory/">a very techinical paper on just about everything regarding scope and environments</a></li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Function arguments: Again (1)</h2>
						<ul>
							<li class="fragment">
								Say you have a function that should work given any number of parameters
								<pre class="bigger"><code contenteditable class="language-javascript">var sum = function(a, b, c, d, e) {
	return a + b + c + d + e
};
alert(sum(1,2)); // NaN (!)
alert(sum(1,2,3,4,5)); // 15
alert(sum(1,2,3,4,5,6)); // What now?</code></pre>
								<ul>
									<li class="fragment">You can tell by just looking at it: that's bound to fail and is cumbersome to work with</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Function arguments: Again (2)</h2>
						<ul>
							<li class="fragment">
								JavaScript provides an <code>arguments</code> variable inside each function
								<pre class="bigger"><code contenteditable class="language-javascript">var sum = function() {
	alert(typeof arguments);
	alert(arguments instanceof Object);
	alert(arguments instanceof Array);
};
sum(1,2);</code></pre>
								<ul>
									<li class="fragment">But beware, that <code>arguments</code> variable is an <code>Object</code>, and not an <code>Array</code>, as you can see!</li>
									<li class="fragment">Not a real problem, as you can loop over an <code>Object</code> with a <code>for</code> loop just as you'd do with an <code>Array</code>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Function arguments: Again (3)</h2>
						<ul>
							<li class="fragment">
								Working example
								<pre class="bigger"><code contenteditable class="language-javascript">var sum = function() {
	var sum = 0;
	for (var i = 0, len = arguments.length; i &lt; len; i++) {
		sum += parseInt(arguments[i]);
	}
	return sum;
};
alert(sum(1,2));
alert(sum(1,2,3,4,5));
alert(sum(1,2,3,4,5,6));</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Function arguments: Again (4)</h2>
						<ul>
							<li class="fragment">
								What if you'd want to pass the <code>arguments</code> to an other function?
								<pre class="bigger"><code contenteditable class="language-javascript">var otherFunc=function() {
	alert('otherFunc : ' + arguments.length);
};

var myFunc = function() {
	alert('myFunc : ' + arguments.length);
	otherFunc(arguments);
};

myFunc(1,2,3,4,5,6,7,8,9,10);</code></pre>
							</li>
							<li class="fragment">
								JavaScript has an answer to that: <code>Function#apply</code> and <code>Function#call</code>
							</li>
						</ul>
					</section>

					<section>
						<h2>Function#apply</h2>
						<ul>
							<li class="fragment">
								<code>Function#apply</code> allows you to call an other function and give it a new meaning of <code>this</code>. Arguments passed in using an <code>Array</code>-like <code>Object</code>
								<pre class="bigger"><code class="donthighlight">Function#apply(this, Array(arg1[, arg2[, ...[, argN]]]));</code></pre>
							</li>
							<li class="fragment">
								Updated example
								<pre class="bigger"><code contenteditable class="language-javascript">var otherFunc = function() {
	alert('otherFunc : ' + arguments.length);
};

var myFunc = function() {
	alert('myFunc : ' + arguments.length);
	otherFunc.apply(this, arguments);
};

myFunc(1,2,3,4,5,6,7,8,9,10);</code></pre>
								<ul>
									<li class="fragment">More on the meaning of <code>this</code> later</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Function#call</h2>
						<ul>
							<li class="fragment">
								<code>Function#call</code> does the same as	<code>Function#apply</code>, but passed in arguments must be passed in one by one (comma separated)
								<pre class="bigger"><code class="donthighlight">Function#call(this, arg1[, arg2[, ...[, argN]]]);</code></pre>
							</li>
							<li class="fragment">
								We prefer <code>Function#apply</code> in this context though, as we can immediately pass in <code>arguments</code> or any other <code>Array</code> or <code>Object</code>
							</li>
						</ul>
					</section>

					<section>
						<h2>Function#bind</h2>
						<ul>
							<li class="fragment">
								To make things complete, <code>Function#bind</code> also exists, but we'll touch that later
							</li>
						</ul>
					</section>

					<section>
						<h2>Function arguments: DIY (1)</h2>
						<ul>
							<li class="fragment">
								Say we have this
								<pre class="bigger"><code contenteditable class="language-javascript">var says = function() {
	var firstName = arguments[0],
	    sentence = arguments[1];

	return firstName + ' says "' + sentence + '"';
};

alert(says('Forrest', 'Stupid is as stupid does'));</code></pre>
							</li>
							<li class="fragment">
								Not so difficult to remember that index <code>0</code> is <code>who</code> and index <code>1</code> is <code>what</code> in this example
								<ul>
									<li class="fragment">But what if we have a function that can take up to ten arguments?</li>
									<li class="fragment">But what if we have a function that can take up to ten arguments, of which not all are mandatory?</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Function arguments: DIY (2)</h2>
						<ul>
							<li class="fragment">
								Would be neat if we could have named arguments or something like an associative array ...
							</li>
							<li class="fragment">
								... and we can! By using an <code>Object</code>
								<pre class="bigger"><code contenteditable class="language-javascript">var says = function(person) {
	return person.firstName + ' says "' + person.sentence + '"';
};

var forrest = {
	firstName : 'Forrest',
	lastName : 'Gump',
	sentence : 'Stupid is as stupid does',
	birthYear : 1945
};

alert(says(forrest));</code></pre>
							</li>
							<li class="fragment">
								Benefits
								<ul>
									<li>Named variables</li>
									<li>Sequence of parameters not important</li>
									<li>Easy working with optional parameters</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Function arguments: DIY (3)</h2>
						<ul>
							<li class="fragment">
								It's even possible to force having defaults using this
								<pre class="bigger"><code contenteditable class="language-javascript">var extend = function(params, defaults) {
	for (var i in defaults) {
		if (!params[i]) {
			params[i] = defaults[i];
		}
	}
};

var foo = function(params) {
	var defaults  = { position: 'left', start: 0, stop: 10 };
	extend(params, defaults);
	console.log(params);
};

foo({ position: 'left', start: 3 });</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Functions Summary</h2>
						<ul>
							<li class="fragment">In JavaScript, functions are <em>First Class Objects</em>
								<ul>
									<li class="fragment">They can be created on the fly (at run-time)</li>
									<li class="fragment">They can be passed as a parameter</li>
									<li class="fragment">They can be assigned into a variable</li>
									<li class="fragment">They can be returned from an other function</li>
								</ul>
							</li>
							<li class="fragment">
								Functions can be anonymous
							</li>
							<li class="fragment">
								Functions can be self-invoking
							</li>
							<li class="fragment">
								When creating a function, a closure is created.
								<ul>
									<li class="fragment">The function can have access to the non-local variables, which are linked by reference to the <code>LexicalEnvironment</code></li>
								</ul>
							</li>
							<li class="fragment">
								Anything can be a function argument
								<ul>
									<li class="fragment">Also possible to use built-in <code>arguments</code> or pass in your own <code>Object</code>
								</ul>
							</li>
						</ul>
					</section>

				</section>


				<!-- 7 : Advanced JavaScript : Objects, Objects &amp; Objects -->
				<section>

					<section>
						<h2>Advanced JavaScript: Objects</h2>
						<p><img src="assets/01/army.jpg" alt="To do whatever you tell me, drill sergeant!" title="To do whatever you tell me, drill sergeant!" width="467" height="316" /></p>
						<q>Gump! What's your sole purpose in this army?</q><br />
						<q>To do whatever you tell me, drill sergeant!</q>
					</section>

					<section>
						<h2>Objects Recap</h2>
						<ul>
							<li class="fragment">
								Creating an <code>Object</code>
								<pre class="bigger"><code contenteditable class="language-javascript">// Object Constructor
var forrest = new Object();
forrest.firstName = 'Forrest';
forrest.lastName = 'Gump';
forrest.says = function() {
	return 'Stupid is as stupid does';
};

alert(forrest.says());

// Object Literal
var forrest = {
    firstName : 'Forrest',
    lastName : 'Gump',
    says : function() {
        return 'Stupid is as stupid does';
    } // no trailing comma (!)
};

alert(forrest.says());</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Accessing inner properties</h2>
						<ul>
							<li class="fragment">
								Just use the <code>this</code> keyword
								<pre class="bigger"><code contenteditable class="language-javascript">// Object Literal
var forrest = {
    firstName : 'Forrest',
    lastName : 'Gump',
    says : function() {
        return this.firstName + ' says "Stupid is as stupid does"';
    }
};

alert(forrest.says());</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>What is <code>this</code>?</h2>
						<ul>
							<li class="fragment">
								It depends, actually
								<ol>
									<li class="fragment">If the function is invoked using <code>Function#call</code> or <code>Function#apply</code>, this will be set to the first argument passed to <code>call</code>/<code>apply</code>. If the first argument passed to <code>call</code>/<code>apply</code> is <code>null</code> or <code>undefined</code>, this will refer to the global object.</li>
									<li class="fragment">If the function being invoked was created using <code>Function#bind</code>, this will be the first argument that was passed to bind at the time the function was created.</li>
									<li class="fragment">If the function is being invoked as a method of an object, <code>this</code> will refer to that object.</li>
									<li class="fragment">Otherwise, the function is being invoked as a standalone function not attached to any object, and this will refer to the global object.</li>
								</ol>
							</li>
						</ul>
					</section>


					<section>
						<h2>Multiple Objects</h2>
						<ul>
							<li class="fragment">
							Creating multiple <code>Object</code>
							<pre class="bigger"><code contenteditable class="language-javascript">var forrest = { // Forrest
    firstName : 'Forrest',
    lastName : 'Gump',
    says : function() {
        return this.firstName + ' says "Stupid is as stupid does"';
    }
};

var dan = { // Lieutenant Dan
	firstName : 'Dan',
	lastName : 'Taylor',
	says : function() {
		return this.firstName + ' says "I\'m here to try out my sea legs"';
	}
};

// Jenny
// ...
</code></pre>
							<ul>
								<li class="fragment">Yeah, that's not <abbr title="Don't repeat yourself">DRY</abbr></li>
								<li class="fragment">What if we could implement some of the OO stuff we already know?</li>
							</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Object Constructor</h2>
						<ul>
							<li class="fragment">
							In JavaScript, you can create a constructor by using a function
							<pre class="bigger"><code contenteditable class="language-javascript">var Person = function(firstName, lastName, sentence) {
    this.firstName = firstName;
	this.lastName = lastName;
	this.sentence = sentence;

    this.says = function() {
    	return this.firstName + ' says "' + this.sentence + '"';
    };
};

var forrest = new Person('Forrest', 'Gump', 'Stupid is as stupid does');
var dan = new Person('Dan', 'Taylor', 'I\'m here to try out my sea legs');

alert(forrest.says());
alert(dan.says());
</code></pre>
							<ul>
								<li class="fragment">When documenting, we can talk about <code>Person#firstName</code>, <code>Person#lastName</code>, <code>Person#sentence</code> and <code>Person#says</code> as those are properties/methods of <code>Person</code></li>
							</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Object.prototype (1)</h2>
						<ul>
							<li class="fragment">
								Internally, JavaScript stores <code>Person#firstName</code> and the others in the <code>.prototype</code> of <code>Person</code>
								<ul>
									<li class="fragment">
										When we say <code>Person#firstName</code>, we actually say <code>Person.prototype.firstName</code>
									</li>
								</ul>
							</li>
							<li class="fragment">
								If you add a new property/method to <code>.prototype</code>, you're basically changing the class definition
							</li>
							<li class="fragment">
								You can take a look of what is in <code>.prototype</code>
								<pre class="bigger"><code contenteditable class="language-javascript">console.log(String.prototype);</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Object.prototype (2)</h2>
						<ul>
							<li class="fragment">
								If you add a new property/method to <code>.prototype</code>, you're basically changing the class definition
								<pre class="bigger"><code contenteditable class="language-javascript">var Person = function(firstName, lastName) {
    this.firstName = firstName;
	this.lastName = lastName;
};

Person.prototype.isRunning = false;
Person.prototype.run = function() {
	this.isRunning = true;
};

var forrest = new Person('Forrest', 'Gump');
var dan = new Person('Dan', 'Taylor');

alert(forrest.isRunning ? 'Forrest is running' : 'Forrest is not running');
alert(dan.isRunning ? 'Dan is running' : 'Dan is not running');
forrest.run();
alert(forrest.isRunning ? 'Forrest is running' : 'Forrest is not running');
alert(dan.isRunning ? 'Dan is running' : 'Dan is not running');</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Extending Built-In Objects (1)</h2>
						<ul>
							<li class="fragment">
								You can also add new functionality to the global objects by this
								<pre class="bigger"><code contenteditable class="language-javascript">Number.prototype.fahrenheitToCelcius = function() {
	return (parseInt(this, 10) - 32) / 1.8;
};
Number.prototype.celciusToFahrenheit = function() {
	return (parseInt(this, 10) * 1.8) + 32;
};

var c = 40;
var f = 104;

alert(c.celciusToFahrenheit());
alert(f.fahrenheitToCelcius());
</code></pre>
								<ul>
									<li class="fragment">But <a href="http://perfectionkills.com/whats-wrong-with-extending-the-dom/">you shouldn't extend built-in objects</a>, really!</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>What about inheritance? (1)</h2>
						<ul>
							<li class="fragment">
								Inheritance is possible, by doing something oddlooking like so
								<pre class="bigger"><code contenteditable class="language-javascript">var Person = function(firstName, lastName) {
    this.firstName = firstName;
	this.lastName = lastName;
};

Person.prototype.fullName = function() {
	return this.firstName + ' ' + this.lastName;
};

var Actor = function(firstName, lastName) {
	this.firstName = firstName;
	this.lastName = lastName;
};
Actor.prototype = new Person; // Inheritance

var forrest = new Person('Forrest', 'Gump');
var tomhanks = new Actor('Tom', 'Hanks');

alert(forrest.fullName());
alert(tomhanks.fullName());</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>What about inheritance? (2)</h2>
						<ul>
							<li class="fragment">
								We can omit repeating the constructor by making use of <code>Function#call</code>
								<pre class="bigger"><code contenteditable class="language-javascript">var Person = function(firstName, lastName) {
    this.firstName = firstName;
	this.lastName = lastName;
};

Person.prototype.fullName = function() {
	return this.firstName + ' ' + this.lastName;
};

var Actor = function(firstName, lastName) {
	Person.call(this, firstName, lastName);
};
Actor.prototype = new Person;

var forrest = new Person('Forrest', 'Gump');
var tomhanks = new Actor('Tom', 'Hanks');

alert(forrest.fullName());
alert(tomhanks.fullName());</code></pre>
								<ul>
									<li class="fragment">This way of inheriting is known as <em>pseudoclassical inheritance</em></li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>What about inheritance? (3)</h2>
						<ul>
							<li class="fragment">
								Note that when extending the prototype of the parent class, the derived class gets it too!
								<pre class="bigger"><code contenteditable class="language-javascript">var Person = function(firstName, lastName) {
    this.firstName = firstName;
	this.lastName = lastName;
};

var Actor = function(firstName, lastName) {
	Person.call(this, firstName, lastName);
};
Actor.prototype = new Person;

Person.prototype.isHuman = true;

var forrest = new Person('Forrest', 'Gump');
var tomhanks = new Actor('Tom', 'Hanks');

alert(forrest.isHuman ? 'Human' : 'Not Human');
alert(tomhanks.isHuman ? 'Human' : 'Not Human');</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Module Pattern</h2>
						<ul>
							<li class="fragment">
								The <strong><em>module pattern</em></strong>, <a href="http://ejohn.org/blog/simple-javascript-inheritance/">popularized by Douglas Crockford</a>, allows having private datamembers
								<pre class="bigger"><code contenteditable class="language-javascript">var forrest = (function() {

	var firstName = 'Forrest'; // Private var

	var says = function() { // Private function
		return 'Stupid is as stupid does';
	};

	return {
		lastName : 'Gump', // Public var
		getLastName : function() { // Public function
			return this.lastName; // use this when accessing a public var
		},
		getFirstName : function () {
			return firstName; // no this when accessing private vars!
		}
	};

})(); // IIFE

alert(forrest.getFirstName() + ' ' + forrest.getLastName());</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Revealing Module Pattern</h2>
						<ul>
							<li class="fragment">
								Variant of the <strong><em>module pattern</em></strong>: make everything private and provide pointers to them in the public part
								<pre class="bigger"><code contenteditable class="language-javascript">var forrest = (function() {

	var firstName = 'Forrest';
	var lastName = 'Gump';
	var says = function() {
		return 'Stupid is as stupid does';
	};
	var getLastName = function() {
		return lastName;
	};
	var getFirstName = function () {
		return firstName;
	};

	return {
		getFirstName: getFirstName,
		getLastName: getLastName,
		whatDoesHeSay: says
	};

})(); // IIFE

alert(forrest.whatDoesHeSay());</code></pre>
							</li>
						</ul>
					</section>

				</section>


				<!-- 8 : JavaScript in the browser -->
				<section>

					<section>
						<h2>JavaScript in the browser</h2>
						<p><img src="assets/01/browserwars.jpg" alt="Stupid is as stupid does" title="Stupid is as stupid does" width="467" height="350" /></p>
						<q>Stupid is as stupid does</q>
					</section>

					<section>
						<h2>Document Object Model</h2>
						<ul>
							<li class="fragment">
								JavaScript is implemented in the browser
								<ul>
									<li class="fragment">Not all browsers implement the same version of JavaScript (eg. <code>Array#forEach</code> is only available since JavaScript 1.6)</li>
									<li class="fragment">Not all browsers implement it in the same way (different interpreters!), or have their own additions</li>
								</ul>
							</li>
							<li class="fragment">
								The browser also provides an API named the <strong><em>Document Object Model</em></strong> (<strong><em>DOM</em></strong>)
								<ul>
									<li class="fragment">The DOM provides a structural representation of the document, enabling one to modify its content and visual presentation.</li>
									<li class="fragment">The DOM differs between all browsers (and browser versions)</li>
								</ul>
							</li>
							<li class="fragment">
								Via JavaScript you can access the DOM
								<ul>
									<li class="fragment">The code you'll write is written in JavaScript, but it uses the DOM to access the web page and its elements.</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Warning: oldIE</h2>
						<ul>
							<li class="fragment">
								oldIE, or Old Internet Explorer
								<ul>
									<li class="fragment">
										Term to name Internet Explorer 6, 7 &amp; 8 in one gasp
									</li>
								</ul>
							</li>
							<li class="fragment">
								Things mentioned here most likely won't work in oldIE
								<ul>
									<li class="fragment">Because they implement the DOM differently</li>
									<li class="fragment">Because the DOM wasn't formalized back then</li>
									<li class="fragment">Because Microsoft took a loose take on web standards back then</li>
								</ul>
							</li>
							<li class="fragment">
								Thankfully things have gotten better (but not ideal) with IE9, and by the looks of the previews IE10 will be quite standards compliant
							</li>
						</ul>
					</section>

					<section>
						<h2>The DOM (1)</h2>
						<ul>
							<li class="fragment">
								The DOM is one big tree, representing all the nodes of the document.
							</li>
							<li class="fragment">
								Consider this document ...
								<pre class="bigger"><code contenteditable class="language-html">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;title&gt;The document&lt;/title&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;div&gt;Data&lt;/div&gt;
		&lt;ul&gt;
			&lt;li&gt;Warning&lt;/li&gt;
			&lt;li&gt;&lt;/li&gt;
		&lt;/ul&gt;
		&lt;div&gt;Top Secret!&lt;/div&gt;
	&lt;/body&gt;
&lt;/html&gt;</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>The DOM (2)</h2>
						<ul>
							<li class="fragment">
								 ... the DOM tree would look like this
							</li>
						</ul>
						<div style="text-align: center;">
							<figure class="fragment">
								<img src="assets/01/simpledom2.png" alt="" title="" height="335" width="500" />
								<figcaption>Figure by <a href="http://javascript.info/tutorial/dom-nodes">JavaScript.info</a></figcaption>
							</figure>
						</div>
					</section>

					<section>
						<h2>The DOM (3)</h2>
						<ul>
							<li class="fragment">
								 Actually, it would look like this
							</li>
						</ul>
						<div style="text-align: center;">
							<figure class="fragment">
								<img src="assets/01/simpledom2_white.png" alt="" title="" height="335" width="558" />
								<figcaption>Figure by <a href="http://javascript.info/tutorial/dom-nodes">JavaScript.info</a></figcaption>
							</figure>
							<p class="fragment">Yes, whitespace counts as a node too!</p>
						</div>
					</section>

					<section>
						<h2>Selecting Elements</h2>
						<ul>
							<li class="fragment">
								<code>window.document</code> offers quite a few ways of selecting elements from the document
								<pre class="bigger"><code contenteditable class="language-javascript dontrun">// get one element with the given id
var el = document.getElementById('siteWrapper');

// get all links (&lt;a&gt; elements)
var links = document.getElementsByTagName('a');
document.links; // or use the built-in property!

// get all elements with the class foo
var foos = document.getElementsByClassName('foo');

// get elements based on a CSS selector
var els = document.querySelectorAll('code pre');

// get elements based on CSS selector
var el = document.querySelector('code pre'); // only returns the first match</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Manipulating Elements (1)</h2>
						<ul>
							<li class="fragment">
								Once you have selected an element, you can manipulate it
								<pre class="bigger"><code contenteditable class="language-javascript">// change CSS properties
document.getElementById('manipulating-demo').style.border = '1px solid #FFF';
document.getElementById('manipulating-demo').style.padding = '20px';

// change text
document.getElementById('manipulating-demo').innerHTML = 'Code has been run, I am changed';

// set 'test' as classname
document.getElementById('manipulating-demo').className = 'test';

// give notice
alert('The element #' + document.getElementById('manipulating-demo').id + ' was changed');</code></pre>
								<p id="manipulating-demo" style="text-align: center;">Run example above to change me</p>
							</li>
						</ul>
					</section>

					<section>
						<h2>Manipulating Elements (2)</h2>
						<ul>
							<li class="fragment">
								Fragment can heavily be optimized by caching the variable so that the DOM lookup takes place only once
								<pre class="bigger"><code contenteditable class="language-javascript">// cache the variable
var el = document.getElementById('manipulating-demo2');

// change CSS properties
el.style.border = '1px solid #FFF';
el.style.padding = '20px';

// change text
el.innerHTML = 'Code has been run, I am changed';

// set 'test' as classname
el.className = 'test';

// give notice
alert('The element #' + el.id + ' was changed');</code></pre>
								<p id="manipulating-demo2" style="text-align: center;">Run example above to change me</p>
							</li>
						</ul>
					</section>

					<section>
						<h2>Manipulating Elements (3)</h2>
						<ul>
							<li class="fragment">
								Here's another unoptimized example
<pre class="bigger"><code contenteditable class="language-javascript">var allSpans = document.querySelectorAll('#manipulating-unoptimized span');

for (var i = 0; i &lt; allSpans.length; i++) {
	allSpans[i].className = 'test';
	allSpans[i].style.border = '1px solid #FFF';
	allSpans[i].style.padding = '5px';
	allSpans[i].style.margin = '5px';
}</code></pre>
								<p id="manipulating-unoptimized" style="text-align: center;"><span>1</span><span>2</span><span>3</span></p>
							</li>
						</ul>
					</section>

					<section>
						<h2>Manipulating Elements (4)</h2>
						<ul>
							<li class="fragment">
								Optimized version
<pre class="bigger"><code contenteditable class="language-javascript">var allSpans = document.querySelectorAll('#manipulating-optimized span');

for (var i = 0, len = allSpans.length; i &lt; len; i++) {
	var curSpan = allSpans[i];
	curSpan.className = 'test';
	curSpan.style.border = '1px solid #FFF';
	curSpan.style.padding = '5px';
	curSpan.style.margin = '5px';
}</code></pre>
								<p id="manipulating-optimized" style="text-align: center;"><span>4</span><span>5</span><span>6</span></p>
							</li>
						</ul>
					</section>

					<section>
						<h2>Manipulating Elements (5)</h2>
						<ul>
							<li class="fragment">
								Full list of methods and properties which you can use to manipulate elements can be read on the <a href="https://developer.mozilla.org/en/DOM/Element">Mozilla Developer Network <code>Element</code> reference</a>
							</li>
						</ul>
					</section>

					<section>
						<h2>Traversing (1)</h2>
						<ul>
							<li class="fragment">
								Once you have an element selected, you can go up/down the DOM tree in a parent/children/sibilings methodology
							</li>
						</ul>
						<div class="fragment" style="text-align: center;">
							<figure>
								<img src="assets/01/children.png" alt="" title="" height="186" width="429" />
								<figcaption>Figure by <a href="http://javascript.info/tutorial/traversing-dom">JavaScript.info</a></figcaption>
							</figure>
							<figure>
								<img src="assets/01/siblings.png" alt="" title="" height="186" width="426" />
								<figcaption>Figure by <a href="http://javascript.info/tutorial/traversing-dom">JavaScript.info</a></figcaption>
							</figure>
						</div>
					</section>

					<section>
						<h2>Traversing (2)</h2>
						<ul>
							<li class="fragment">
								Beware though: those functions take whitespace into account
								<ul>
									<li>Up the DOM tree: <code>Node#parentNode</code></li>
									<li>Down the DOM tree: <code>Node#childNodes</code>, <code>Node#firstChild</code>, <code>Node#lastChild</code></li>
									<li>Left/Right on the DOM tree: <code>Node#previousSibling</code>, <code>Node#nextSibling</code></li>
								</ul>
							</li>
							<li class="fragment">
								These don't, and work with actual elements
								<ul>
									<li>Up the DOM tree: <code>Node#parentElement</code></li>
									<li>Down the DOM tree: <code>Node#children</code>, <code>Node#firstElementChild</code>, <code>Node#lastElementChild</code>
									<li>Left/Right on the DOM tree: <code>Node#previousElementSibling</code>, <code>Node#nextElementSibling</code></li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Events</h2>
						<ul>
							<li class="fragment">
								It's possible to listen to certain events that occur in the document/on an element
							</li>
							<li class="fragment">
								An event can be seen as an action that takes place
							</li>
							<li class="fragment">
								Events can be things like
								<ul>
									<li class="fragment">a mouse interaction (<code>click</code>, <code>mouseover</code>, <code>mouseout</code>, ..)</li>
									<li class="fragment">a keyboard interaction (<code>keypress</code>, <code>keydown</code>, <code>keyup</code>)</li>
									<li class="fragment">a form action (<code>submit</code>, <code>reset</code>)</li>
									<li class="fragment">a general event such as something finished <code>load</code>ing, a <code>resize</code> of the window, an element gaining <code>focus</code>, etc.</li>
									<li class="fragment"><em>(Handy <a href="http://en.wikipedia.org/wiki/DOM_events">one-page overview on Wikipedia</a>)</em></li>
								</ul>
							</li>
							<li class="fragment">
								Basically they form the core of the scripts we'll be writing
							</li>
						</ul>
					</section>

					<section>
						<h2>Hooking Events (1)</h2>
						<ul>
							<li class="fragment" id="onevent-demo">
								The old way: <code>#on<em>Eventname</em></code>
								<pre class="bigger"><code contenteditable class="language-javascript runonce">var p = document.querySelector('#onevent-demo p');

p.onclick = function() { alert('You clicked me!'); };
p.onmouseover = function() { this.style.backgroundColor = '#333'; };
p.onmouseout = function() { this.style.backgroundColor = ''; };</code></pre>
								<p style="text-align: center; cursor: pointer;">I am the demo</p>
							</li>
							<li class="fragment" id="oneventtwice-demo">
								Note that when you hook an event twice, it will be overwritten
								<pre class="bigger"><code contenteditable class="language-javascript runonce">var p = document.querySelector('#oneventtwice-demo p');

p.onclick = function() { alert('You clicked me (1)!'); };
p.onclick = function() { alert('You clicked me (2)!'); };
p.onmouseover = function() { this.style.backgroundColor = '#333'; };
p.onmouseout = function() { this.style.backgroundColor = ''; };</code></pre>
								<p style="text-align: center; cursor: pointer;">I am the 2nd demo</p>
							</li>
						</ul>
					</section>

					<section>
						<h2>Hooking Events (2)</h2>
						<ul>
							<li class="fragment" id="addeventlistener-demo">
								The new, formalized, way: <code>#addEventListener</code>
								<pre class="bigger"><code contenteditable class="language-javascript runonce">var p = document.querySelector('#addeventlistener-demo p');

p.addEventListener('click', function() {
	alert('You clicked me!');
});
p.addEventListener('mouseover', function() {
	this.style.backgroundColor = '#333';
});
p.addEventListener('mouseout', function() {
	this.style.backgroundColor = '';
});</code></pre>
								<p style="text-align: center; cursor: pointer;">I am the demo</p>
							</li>
						</ul>
					</section>

					<section>
						<h2>Hooking Events (3)</h2>
						<ul>
							<li class="fragment" id="addeventlistenertwice-demo">
								Calling <code>#addEventListener</code> multiple times for the same event
								<pre class="bigger"><code contenteditable class="language-javascript runonce">var p = document.querySelector('#addeventlistenertwice-demo p');

p.addEventListener('click', function() {
	alert('You clicked me (1)!');
});
p.addEventListener('click', function() {
	alert('You clicked me (2)!');
});
p.addEventListener('mouseover', function() {
	this.style.backgroundColor = '#333';
});
p.addEventListener('mouseout', function() {
	this.style.backgroundColor = '';
});</code></pre>
								<p style="text-align: center; cursor: pointer;">I am the demo</p>
							</li>
						</ul>
					</section>

					<section>
						<h2>Removing an Event Listener</h2>
						<ul>
							<li class="fragment" id="removeeventlistener-demo">
								Possible by <code>#removeEventListener</code>, but only if you've attached a named function
								<pre class="bigger"><code contenteditable class="language-javascript runonce">var p = document.querySelector('#removeeventlistener-demo p');

var clickHandler = function() {
	alert('You clicked me!');
};

p.addEventListener('click', clickHandler);
p.removeEventListener('click', clickHandler);

p.addEventListener('mouseover', function() {
	this.style.backgroundColor = '#333';
});
p.addEventListener('mouseout', function() {
	this.style.backgroundColor = '';
});</code></pre>
								<p style="text-align: center; cursor: pointer;">I am the demo</p>
							</li>
						</ul>
					</section>

					<section>
						<h2>Event Handling: Nested Events</h2>
						<ul>
							<li class="fragment">
								If an element and one of its ancestors have an event handler for the same event, what happens?

								<div class="capture-bubble-d1">1  <!-- the topmost -->
								    <div class="capture-bubble-d2">2
								        <div class="capture-bubble-d3">3 <!-- the innermost -->
								        </div>
								    </div>
								</div>
							</li>
							<li class="fragment">
								If I were to click the red box, which click handler will fire (if all 3 have click handlers)?
								<ul>
									<li class="fragment">Will only one handler fire?</li>
									<li class="fragment">Will all handlers fire?</li>
									<li class="fragment">If all are fired, which one will fire first?</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Event Handling: Bubbling (1)</h2>
						<ul>
							<li class="fragment">
								What will happen is that the browser will fire all the events, one after the other
							</li>
							<li class="fragment">
								The order in which they are fired is from the most inner element outwards. We call this <em><strong>bubbling</strong></em>
							</li>
						</ul>
					</section>

					<section>
						<h2>Event Handling: Bubbling (2)</h2>
						<ul>
							<li class="fragment">
								Graphical <em>(example where you'd click a cell of a table)</em>
								<div style="text-align: center; margin-top: 25px">
									<figure>
										<img style="background: #FFF;" src="assets/01/bubbling.png" alt="" title="" height="415" width="385" />
										<figcaption>Adjusted figure, based upon a figure by <a href="http://www.w3.org/TR/DOM-Level-3-Events/">W3C</a></figcaption>
									</figure>
								</div>
							</li>
						</ul>
					</section>

					<section>
						<h2>Event Handling: Bubbling Example</h2>
						<ul>
							<li class="fragment" id="bubbling-demo">
								Run the JS code and then click the center box to see bubbling in action
								<pre class="bigger"><code contenteditable class="language-javascript runonce">var divs = document.querySelectorAll('#bubbling-demo div');

for (var i = 0, len = divs.length; i &lt; len; i++) {
	divs[i].addEventListener('click', function(event) {
		this.style.backgroundColor = 'yellow';
		alert(this.className);
		this.style.backgroundColor = '';
	});
}</code></pre>
								<div class="capture-bubble-d1">1  <!-- the topmost -->
								    <div class="capture-bubble-d2">2
								        <div class="capture-bubble-d3">3 <!-- the innermost -->
								        </div>
								    </div>
								</div>
							</li>
						</ul>
					</section>

					<section>
						<h2>Event Handling: Stop bubbling</h2>
						<ul>
							<li class="fragment" id="stoppropagation-demo">
								Possible with <code>Event#stopPropagation</code>
								<pre class="bigger"><code contenteditable class="language-javascript runonce">var divs = document.querySelectorAll('#stoppropagation-demo div');

for (var i = 0, len = divs.length; i &lt; len; i++) {
	divs[i].addEventListener('click', function(event) {
		this.style.backgroundColor = 'yellow';
		alert(this.className);
		this.style.backgroundColor = '';
		event.stopPropagation(); // stop bubbling!
	});
}</code></pre>
								<div class="capture-bubble-d1">1  <!-- the topmost -->
								    <div class="capture-bubble-d2">2
								        <div class="capture-bubble-d3">3 <!-- the innermost -->
								        </div>
								    </div>
								</div>
							</li>
						</ul>
					</section>

					<section>
						<h2>Event Handling: Stop default action</h2>
						<ul>
							<li class="fragment">
								In case you want to block the following of a link, submitting of a forms, etc.
							</li>
							<li class="fragment" id="stopdefault-demo">
								Possible with <code>Event#preventDefault</code>
								<pre class="bigger"><code contenteditable class="language-javascript runonce">var link = document.querySelector('#stopdefault-demo a');

link.addEventListener('click', function(event) {
	alert('Link is linked to ' + this.href + ' but won\'t be followed');
	event.preventDefault(); // prevent the default action from happening
});</code></pre>
								<p style="text-align: center;"><a href="http://www.ikdoeict.be/">Link to ikdoeict.be</a></p>
							</li>
							<li class="fragment">
								In the past, this was done by <code>return false;</code>
								<ul>
									<li>Don't use this, as it also stops the bubbling</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Event Handling: what was clicked?</h2>
						<ul>
							<li class="fragment" id="bubblingtarget-demo">
								It's possible to know which was the original element that was clicked during the bubbling
								<pre class="bigger"><code contenteditable class="language-javascript runonce">var divs = document.querySelectorAll('#bubblingtarget-demo div');

for (var i = 0, len = divs.length; i &lt; len; i++) {
	divs[i].addEventListener('click', function(event) {
		this.style.backgroundColor = 'yellow';
		alert(this.className + ' (click was on ' + event.target.className + ')');
		this.style.backgroundColor = '';
	});
}</code></pre>
								<div class="capture-bubble-d1">1  <!-- the topmost -->
								    <div class="capture-bubble-d2">2
								        <div class="capture-bubble-d3">3 <!-- the innermost -->
								        </div>
								    </div>
								</div>
							</li>
						</ul>
					</section>

					<section>
						<h2>Bubbling: Practical Use Case</h2>
						<ul>
							<li class="fragment">
								Say you have a table with 1000 cells, and you bind a click event on those cells
								<ul>
									<li class="fragment">Very resourceful, document will have to keep an eye on 1000 els</li>
								</ul>
							</li>
							<li class="fragment" id="bubbling-advantage-demo">
								By taking advantage of bubbling and <code>event.target</code> it's possible to bind the handler on the <code>&lt;table&gt;</code> itself.
								<pre class="bigger"><code contenteditable class="language-javascript runonce">var table = document.querySelector('#bubbling-advantage-demo table');

table.addEventListener('click', function(event) {
	alert('Table click event (click was on ' + event.target.innerHTML + ')');
});</code></pre>
								<table>
									<tr>
										<td>1</td>
										<td>2</td>
										<td>3</td>
									</tr>
									<tr>
										<td>4</td>
										<td>5</td>
										<td>6</td>
									</tr>
								</table>
							</li>
						</ul>
					</section>

					<section>
						<h2>Event Handling: Capturing &amp; Bubbling</h2>
						<ul>
							<li class="fragment">
								So we now know this thing named bubbling which happens when an event is handled: the event bubbles up the DOM tree
							</li>
							<li class="fragment">
								But actually, event handling consists out of three phases:
								<ol>
									<li class="fragment">
										Capturing of the event
										<ul>
											<li class="fragment">Goes from the outer most element inwards <em>(down the DOM tree)</em></li>
											<li class="fragment">By default, no event handlers are invoked</li>
										</ul>
									</li>
									<li class="fragment">
										Defining of the target
										<ul>
											<li class="fragment">viz. What was clicked?</li>
										</ul>
									</li>
									<li class="fragment">
										The bubbling of the event
										<ul>
											<li class="fragment">Goes inside out <em>(up the DOM tree)</em></li>
											<li class="fragment">By default, event handlers will be invoked</li>
										</ul>
									</li>
								</ol>
							</li>
						</ul>
					</section>

					<section>
						<h2>Event Handling: Capturing &amp; Bubbling</h2>
						<ul>
							<li class="fragment">
								Graphical <em>(example where you'd click a cell of a table)</em>
								<div style="text-align: center; margin-top: 25px">
									<figure>
										<img style="background: #FFF;" src="assets/01/eventflow.png" alt="" title="" height="415" width="385" />
										<figcaption>Figure by <a href="http://www.w3.org/TR/DOM-Level-3-Events/">W3C</a></figcaption>
									</figure>
								</div>
							</li>
						</ul>
					</section>

					<section>
						<h2>Event Handling: Capturing</h2>
						<ul>
							<li class="fragment" id="capturing-demo">
								Of course, it's possible to make the event handlers fire during the capturing phase, and not the bubbling phase.
								<pre class="bigger"><code contenteditable class="language-javascript runonce">var divs = document.querySelectorAll('#capturing-demo div');

for (var i = 0, len = divs.length; i &lt; len; i++) {
	divs[i].addEventListener('click', function(event) {
		this.style.backgroundColor = 'cyan';
		alert(this.className);
		this.style.backgroundColor = '';
	}, true); // phase parameter!
}</code></pre>
								<div class="capture-bubble-d1">1  <!-- the topmost -->
								    <div class="capture-bubble-d2">2
								        <div class="capture-bubble-d3">3 <!-- the innermost -->
								        </div>
								    </div>
								</div>
							</li>
						</ul>
					</section>

					<section>
						<h2>Event Handling: Capturing+Bubbling</h2>
						<ul>
							<li class="fragment" id="capturing-and-bubbling-demo">
								FYI: To combine them both, hook two handlers
								<pre class="bigger"><code contenteditable class="language-javascript runonce">var divs = document.querySelectorAll('#capturing-and-bubbling-demo div');

for (var i = 0, len = divs.length; i &lt; len; i++) {
	divs[i].addEventListener('click', function(event) {
		this.style.backgroundColor = 'cyan';
		alert(this.className);
		this.style.backgroundColor = '';
	}, true); // capturing phase
	divs[i].addEventListener('click', function(event) {
		this.style.backgroundColor = 'yellow';
		alert(this.className);
		this.style.backgroundColor = '';
	}, false); // bubbling phase
}</code></pre>
								<div class="capture-bubble-d1">1  <!-- the topmost -->
								    <div class="capture-bubble-d2">2
								        <div class="capture-bubble-d3">3 <!-- the innermost -->
								        </div>
								    </div>
								</div>
							</li>
						</ul>
					</section>

					<section>
						<h2>Events: The Loop Problem (1)</h2>
						<ul>
							<li class="fragment">
								Say that we have this piece of code, what will be the result?
								<pre class="bigger"><code contenteditable class="language-javascript">var link,
    target = Reveal.getCurrentSlide().querySelector('.result');

target.innerHTML = ''; // clear the target

for (var i = 0; i &lt; 3; i++) { // add three links
    link = document.createElement('a');
	link.style.marginRight = '10px';
    link.innerHTML = 'Link ' + i;
    link.onclick = function() {
        alert('I am link ' + i);
    };
	target.appendChild(link);
};</code></pre>
								<div class="result" style="text-align: center;"><em>(Run the code example to see the result appear here)</em></div>
							</li>
							<li class="fragment">
								Hint: where you attach the <code>onclick</code>, a function is created
							</li>
						</ul>
					</section>

					<section>
						<h2>Closures</h2>
						<p><img src="assets/01/notsureif.png" alt="Not Sure If ..." title="Not Sure If ..." width="480" height="360" /></p>
						<p><em>Here we go again!</em></p>
					</section>

					<section>
						<h2>Events: The Loop Problem (2)</h2>
						<ul>
							<li class="fragment">
								Maybe we can fix it with a local variable?
								<pre class="bigger"><code contenteditable class="language-javascript">var link,
    target = Reveal.getCurrentSlide().querySelector('.result');

target.innerHTML = ''; // clear the target

for (var i = 3; i &lt; 6; i++) { // add three links
    link = document.createElement('a');
	link.style.marginRight = '10px';
    link.innerHTML = 'Link ' + i;
    var j = i; // introduction of a local variable
    link.onclick = function() { // function created, ergo closure created!
        alert('I am link ' + j);
    };
	target.appendChild(link);
};</code></pre>
								<div class="result" style="text-align: center;"><em>(Run the code example to see the result appear here)</em></div>
							</li>
							<li class="fragment">
								Alas, when copying variables in JavaScript: by reference
							</li>
						</ul>
					</section>

					<section>
						<h2>Events: The Loop Problem (3)</h2>
						<ul>
							<li class="fragment">
								What now?
							</li>
							<li class="fragment">
								Well ...
								<ul>
									<li class="fragment">
										Remember this?
										<pre class="bigger"><code contenteditable class="language-javascript">var toSay = 'Run Forrest, Run';

(function(sentence) {
	console.log(sentence);
})(toSay);</code></pre>
									</li>
									<li class="fragment">
										And remember that variables are passed by value to functions (if a primitive variant exists)?
									</li>
								</ul>
							</li>
							<li class="fragment">
								That gives us a foot in the door
							</li>
						</ul>
					</section>

					<section>
						<h2>Events: The Loop Problem (4)</h2>
						<ul>
							<li class="fragment">
								IIFE to the resue!
								<pre class="bigger"><code contenteditable class="language-javascript">var link,
    target = Reveal.getCurrentSlide().querySelector('.result');

target.innerHTML = ''; // clear the target

for (var i = 6; i &lt; 9; i++) { // add three links
    link = document.createElement('a');
	link.style.marginRight = '10px';
    link.innerHTML = 'Link ' + i;
    link.onclick = function(j) { // This one just became an IIFE
		return function() { // and returns a function
        	alert('I am link ' + j);
		};
    }(i);
	target.appendChild(link);
}</code></pre>
								<div class="result" style="text-align: center;"><em>(Run the code example to see the result appear here)</em></div>
							</li>
						</ul>
					</section>

					<section>
						<h2>Attaching scripts</h2>
						<ul>
							<li class="fragment">
								There are two main options for attaching a script to a document
								<ol>
									<li class="fragment">Using an embedded script</li>
									<li class="fragment">Using an external script</li>
								</ol>
							</li>
						</ul>
					</section>

					<section>
						<h2>Embedded script</h2>
						<ul>
							<li class="fragment">
								Example:
								<pre class="bigger"><code contenteditable class="language-html">&lt;!doctype html&gt;
&lt;html&gt;
	&lt;head&gt;
		...
		&lt;script&gt;
			alert('hello');
		&lt;/script&gt;
		...
	&lt;/head&gt;
&lt;body&gt;
	...
&lt;/body&gt;
&lt;/html&gt;</code></pre>
							</li>
							<li class="fragment">
								Note that scripts are interpreted immediately!
								<ul>
									<li>In this example you'll see an <code>alert</code> <em>before</em> the page is being rendered!</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>External Script (1)</h2>
						<ul>
							<li class="fragment">
								Example
								<pre class="bigger"><code contenteditable class="language-html">&lt;!doctype html&gt;
&lt;html&gt;
	&lt;head&gt;
		...
		&lt;script src=&quot;path/to/my.js&quot;&gt;&lt;/script&gt;
		...
	&lt;/head&gt;
&lt;body&gt;
	...
&lt;/body&gt;
&lt;/html&gt;</code></pre>
							</li>
							<li class="fragment">
								Best practice: place the scripts at the bottom of the page, just before <code>&lt;/body&gt;</code>, to not block parallel downloads
								<ul>
									<li class="fragment">The <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html#sec8.1.4">HTTP/1.1 specification</a> suggests that browsers download no more than two components <em>(scripts, images, etc)</em> in parallel per hostname</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>External Script (2)</h2>
						<ul>
							<li class="fragment">
								Updated example
								<pre class="bigger"><code contenteditable class="language-html">&lt;!doctype html&gt;
&lt;html&gt;
	&lt;head&gt;
		...
	&lt;/head&gt;
&lt;body&gt;
	...
	&lt;script src=&quot;path/to/my.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Attaching scripts: Extra</h2>
						<ul>
							<li class="fragment">
								Event handlers can be added directly into your HTML
								<pre class="bigger"><code contenteditable class="language-html">&lt;a href=&quot;#&quot; onclick=&quot;alert('clicked'); return false;&quot;&gt;Click me!&lt;/a&gt;</code></pre>
								<p style="text-align: center"><a href="#" onclick="alert('clicked'); return false;">Click me!</a></p>
							</li>
							<li class="fragment">
								Or like this
								<pre class="bigger"><code contenteditable class="language-html">&lt;a href=&quot;javascript:alert('clicked');&quot;&gt;Click me!&lt;/a&gt;</code></pre>
								<p style="text-align: center"><a href="javascript:alert('clicked');">Click me!</a></p>
							</li>
							<li class="fragment">
								Don't do this.
								<ul>
									<li class="fragment">Never.</li>
									<li class="fragment">Ever.</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Script execution (1)</h2>
						<ul>
							<li class="fragment">
								Scripts are executed immediately, even if the document is still loading
							</li>
							<li class="fragment">
								In most cases you'll only want to execute scripts when the document has finished loading. There's an event for that.
								<pre class="bigger"><code class="language-html">&lt;!doctype html&gt;
&lt;html&gt;
	&lt;head&gt;
		...
	&lt;/head&gt;
&lt;body&gt;
	...
	&lt;script src=&quot;path/to/my.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
								<pre class="bigger"><code class="language-javascript dontrun">window.onload = function() {
	// ... your code here
};</code></pre>
								<ul>
									<li class="fragment">Old syntax + Only allows for one function to be executed when the document (including images!) has finished loading</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Script execution (2)</h2>
						<ul>
							<li class="fragment">
								Syntax can be improved, by making use of <code>addEventListener</code>
								<pre class="bigger"><code class="language-javascript dontrun">document.addEventListener('load', function(event) {
	// ... your code here
}, false);</code></pre>
							</li>
							<li class="fragment">
								<code>load</code> is fired when everything (including images) is loaded. Most of the time you'll want to invoke your scripts when the DOM has loaded.
								<pre class="bigger"><code class="language-javascript dontrun">
document.addEventListener('DOMContentLoaded', function(event) {
	// ... your code here
}, false);</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Namespacing</h2>
						<ul>
							<li class="fragment">
								Say I have a function <code>animate</code>, but then include a library that defines the same function with the same name
								<ul>
									<li class="fragment">
										Yes, things will go wrong
									</li>
								</ul>
							</li>
							<li class="fragment">
								A simple fix would be to prefix all my functions with something (like <code>ikdoeict_</code>) but that isn't quite professional
								<ul>
									<li class="fragment">
										Above that all the defined functions/variables would live in the global namespace
									</li>
								</ul>
							</li>
							<li class="fragment">
								A better solution is to make use of <em><strong>namespacing</strong></em>, a technique to avoid collisions with other objects or variables in the global namespace
								<ul>
									<li class="fragment">Several strategies exist, we'll cover 2</li>
								</ul>
							</li>
						</ul>
					</section>

					<section>
						<h2>Namespacing: Object Literal (1)</h2>
						<ul>
							<li class="fragment">
								The simplest way is to make use of the Object Literal. Just think of a name and you're good to go
								<pre class="bigger"><code contenteditable class="language-javascript">var IKDOEICT = {
	foo : {
		bar : function(x) { return x; },
		baz : function(x) { return x; }
	},
	foobar : {
		foo : function(x) { return x; },
		bar : function(x) { return x; },
		baz : function(x) { return x; }
	}
};

alert(IKDOEICT.foobar.foo('test'));</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Namespacing: Object Literal (2)</h2>
						<ul>
							<li class="fragment">
								If your code spans over multiple files, then you still can use this
								<pre class="bigger"><code contenteditable class="language-javascript">// file 1
var IKDOEICT = IKDOEICT || {}; // use existing IKDOEICT, or create a new Object

IKDOEICT.foo = {
	bar : function(x) { return x; },
	baz : function(x) { return x; }
};

// file 2
var IKDOEICT = IKDOEICT || {}; // use existing IKDOEICT, or create a new Object

IKDOEICT.foobar = {
	foo : function(x) { return x; },
	bar : function(x) { return x; },
	baz : function(x) { return x; }
};

// test
alert(IKDOEICT.foo.baz('test'));</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Namespacing: IIFE</h2>
						<ul>
							<li class="fragment">
								Using an IIFE is also possible
								<pre class="bigger"><code contenteditable class="language-javascript">var IKDOEICT = IKDOEICT || {};

(function(o){

	o.foo = {
		bar : function(x) { return x; },
		baz : function(x) { return x; }
	}

	o.foobar = {
		foo : function(x) { return x; },
		bar : function(x) { return x; },
		baz : function(x) { return x; }
	}

})(IKDOEICT);

// test
alert(IKDOEICT.foo.baz('test'));</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Namespacing: Module Pattern</h2>
						<ul>
							<li class="fragment">
								The Module Pattern can also be used. Allows you to have private functions/datamembers.
								<pre class="bigger"><code contenteditable class="language-javascript">var IKDOEICT = (function(){

	var privateFunction = function() { return; }

	return {
		foo : {
			bar : function(x) { return x; },
			baz : function(x) { return x; }
		},
		foobar : {
			foo : function(x) { return x; },
			bar : function(x) { return x; },
			baz : function(x) { return x; }
		}
	};

})();

// test
alert(IKDOEICT.foo.baz('test'));</code></pre>
							</li>
						</ul>
					</section>

					<section>
						<h2>Best Practices</h2>
						<ul>
							<li class="fragment">
								Place JavaScripts at the bottom of the page
								<ul>
									<li>Just before <code>&lt;/body&gt;</code></li>
								</ul>
							</li>
							<li class="fragment">
								Make use of <code>DOMContentLoaded</code>
							</li>
							<li class="fragment">
								Namespace your code
								<ul>
									<li>Does not pollute the global namespace</li>
									<li>Prevents conflicts</li>
								</ul>
							</li>
							<li class="fragment">
								Cache your variables
							</li>
							<li class="fragment">
								<a href="http://perfectionkills.com/whats-wrong-with-extending-the-dom/
	http://bonsaiden.github.com/JavaScript-Garden/">Don't extend built-in Objects</a>
								<ul>
									<li>Because you might implement it differently</li>
									<li>Because you might use a name that later will be used by the browser/JavaScript</li>
									<li>Because when using a <code>for...in</code> these will appear inside your loop
										<ul>
											<li>Can be fixed <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/HasOwnProperty#Example:_Iterating_over_the_properties_of_an_object">by using <code>Object#hasOwnProperty</code> inside your loop</a></li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</section>

				</section>


				<!-- The END -->
				<section>
					<section>
						<h2>Questions?</h2>
						<footer>
							<em><a href="http://www.ikdoeict.be/">ikdoeict.be</a> &mdash; <a href="mailto:bramus.vandamme@kahosl.be">bramus.vandamme@kahosl.be</a></em>
						</footer>
					</section>
				</section>


				<!-- Sources -->
				<section id="sources">
					<section>
						<h2>Sources</h2>
						<ul>
							<li>JavaScript History: <a href="http://en.wikipedia.org/wiki/Javascript">Wikipedia (JavaScript)</a> &amp; <a href="http://en.wikipedia.org/wiki/ECMAScript">Wikipedia (ECMAScript)</a> &amp; <a href="https://developer.mozilla.org/en/JavaScript/About_JavaScript">Mozilla Developer Network</a></li>
							<li>Basic Structure (Javasctript 101) &amp; Little Big Details: <a href="http://www.slideshare.net/robnyman/javascript-like-a-box-of-chocolates">SlideShare (Robert Nyman)</a></li>
							<li>Values, Variables, and Literals: <a href="https://developer.mozilla.org/en/JavaScript/Guide/Values%2C_Variables%2C_and_Literals">Mozilla Developer Network</a></li>
							<li>JavaScript Global Objects: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects">Mozilla Developer Network</a></li>
							<li>Forrest Gump Screengrabs: <a href="http://www.speakinggump.com/">SpeakingGump</a></li>
							<li>Forrest stopped running screengrab: <a href="http://www.flickr.com/photos/ashdmarcin/5186789653/">Flick</a></li>
							<li>Not Sure If: <a href="http://knowyourmeme.com/memes/futurama-fry-not-sure-if-x">Know your meme</a></li>
							<li>Control Structures: <a href="http://www.howtocreate.co.uk/tutorials/javascript/controls">HowToCreate.co.uk</a></li>
							<li>Advanced JS:<a href="https://kkaefer.com/files/2008/10/AdvJS-BarCamp.pdf">KKaefer.com</a></li>
							<li>Functions: <a href="http://www.hunlock.com/blogs/Functional_Javascript">Hunlock.com</a> &amp; <a href="http://snook.ca/archives/javascript/javascript_pass">Snook.ca</a></li>
							<li>Closures: <a href="http://www.javascriptkit.com/javatutors/closures.shtml">JavasScriptKit.com</a> &amp; <a href="http://javascript.info/tutorial/closures">JavaScript.info</a> &amp; <a href="http://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/">JavaScript Weblog</a> &amp; <a href="http://jibbering.com/faq/notes/closures/">Jibbering.com</a> &amp; <a href="https://developer.mozilla.org/en/JavaScript/Guide/Closures">Mozilla Developer Network</a></li>
							<li>First Class Objects: <a href="http://en.wikipedia.org/wiki/First-class_object">Wikipedia</a></li>
							<li>Call and Apply: <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">Mozilla Developer Network</a> &amp; <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">Mozilla Developer Network</a> &amp; <a href="http://javascript.info/tutorial/this#fourth-explicit-this">JavaScript.info</a></li>
							<li>this: <a href="http://stage.learn.jquery.com/javascript-101/this-keyword/">Learn jQuery</a></li>
							<li>Objects &amp; .prototype: <a href="http://stackoverflow.com/questions/892595/javascript-prototypal-inheritance">StackOverflow</a> &amp; <a href="http://bolinfest.com/javascript/inheritance.php">Inheritance Patterns in JavaScript</a></li>
							<li>Module Pattern: <a href="http://www.yuiblog.com/blog/2007/06/12/module-pattern/">YUI Blog</a></li>
							<li>Namespacing: <a href="http://addyosmani.com/blog/essential-js-namespacing/">AddyOsmani.com</a> &amp; <a href="http://javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript/">JavaScript Weblog</a></li>
							<li>DOM: <a href="https://developer.mozilla.org/en/DOM">Mozilla Developer Network</a> &amp; <a href="https://developer.mozilla.org/en/DOM/window">MDN: window</a> &amp; <a href="https://developer.mozilla.org/en/DOM/document">MDN: document</a> &amp; <a href="http://javascript.info/tutorial/dom-nodes">JavaScript.info (DOM Nodes)</a> &amp; <a href="http://javascript.info/tutorial/traversing-dom">JavaScript.info (Traversing)</a></li>
							<li>Events: <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">W3 Spec Level 2 Events</a> &amp; <a href="http://www.w3.org/TR/DOM-Level-3-Events/">W3 Spec Level 3 Events</a></li>
							<li>Bubbling vs. Capturing: <a href="http://www.quirksmode.org/js/events_order.html">QuirksMode.org</a></li>
							<li>Bubbling vs. Capturing (samples): <a href="http://javascript.info/tutorial/bubbling-and-capturing">JavaScript.info</a></li>
							<li>Scripts at the bottom: <a href="http://developer.yahoo.com/performance/rules.html">Yahoo!</a></li>
						</ul>
					</section>
				</section>

			</div>

			<!-- The navigational controls UI -->
			<aside class="controls">
				<a class="left" href="#">&#x25C4;</a>
				<a class="right" href="#">&#x25BA;</a>
				<a class="up" href="#">&#x25B2;</a>
				<a class="down" href="#">&#x25BC;</a>
				<span id="revealIndex">/</span>
			</aside>

			<!-- Index Link -->
			<aside class="back">
				<a href="index.html">&larr; Back to index</a>
			</aside>

			<!-- ikdoeict.be Link -->
			<a href="http://www.ikdoeict.be/" title="ikdoeict.be" id="ikdoeict">ikdoeict.be</a>

			<!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
			<div class="progress"><span></span></div>

		</div>

		<script src="js/reveal.js"></script>
		<script src="lib/highlight.js"></script>
		<script src="lib/prefixfree.js"></script>
		<script src="lib/css-snippets.js"></script>
		<script src="lib/css-edit.js"></script>
		<script src="lib/incrementable.js"></script>
		<script src="js/main.js"></script>

	</body>
</html>