index.html

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

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

		<title>JavaScript Boot Camp</title>

		<meta name="description" content="Javascript boot camp">
		<meta name="author" content="Peter Hellstrand">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/simple.css" id="theme">

		<!-- Code syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

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


				<section>
					<h1>JavaScript</h1>
				</section>

				<section>
					<h1>Background</h1>
					<ul class="center">
						<li class="fragment">Part of Netscape(Mocha/LiveScript)</li>
						<li class="fragment">ECMAScript</li>
						<li class="fragment">"Interpreted" language</li>
						<li class="fragment">The language of the web</li>
					</ul>
				</section>

				<section>
					<img src="images/js-sword.png" alt="Sword"/>
					<small>"JavaScript is a sword without a hilt."</small>
				</section>

				<section>
					<h1>Agenda</h1>
					<ul>
						<li class="fragment">Types and grammar</li>
						<li class="fragment">this, objects and prototype</li>
						<li class="fragment">Functions, scope and closure</li>
					</ul>
				</section>

				<!-- Types and grammar-->
				<section>
					<section>
						<h1>Types and grammar</h1>
					</section>

					<section>
						<h1>Objects</h1>
						<p class="center">In javascript everything is treated as objects except:</p>
						<ul class="center">
							<li class="fragment">undefined</li>
							<li class="fragment">null</li>
							<li class="fragment">boolean</li>
							<li class="fragment">string</li>
							<li class="fragment">number</li>
							<li class="fragment">symbol(ES2015)</li>
						</ul>

					</section>

					<section>
<pre><code>
	console.log(typeof true);//boolean
	console.log(typeof 1);//number
	console.log(typeof undefined);//undefined
	console.log(typeof "Capra"); //string
	console.log(typeof null)//object???

</code></pre>
						<small class="fragment ">
							null is technically a primitive. You can't add properties to it. What you see above is actually a bug. May be fixed in ECMAScript 6.
						</small>
					</section>

					<section>
						<h1>String is a primitive?</h1>
						<p class="center">If string is a primitive. How can we do this?</p>
<pre><code>
	var name = "capra";
	console.log(name.length);//5

</code></pre>
						<p class="fragment center">
							For a fraction of a section the primitive is coerced to an object.
						</p>

					</section>

					<section>
						<h1>Object wrappers</h1>
						<p>don't use wrapper objects for primitive types</p>

<pre><code>
var foo = new String('Hello world'); // Written by Java developer :)
console.log(typeof foo); // object
</code></pre>

<pre class="fragment"><code>
var myValue = new Boolean(false);
if(!myValue) {
   // the intention
} else {
   console.log('Ooooops');
}
</code></pre>
					</section>

					<section>
						<h1>Equality</h1>
						<ul>
							<li class="fragment">
								Equality(==) allows coercion, identity(===) does not.
							</li >
							<li class="fragment">The Identity operator can never be slower.</li>
						</ul>
						<div class="fragment">

<pre><code>
	// Equality operator might surprise you
	'' == '0'           // false
	0 == ''             // true
	0 == '0'            // true

	false == 'false'    // false
	false == '0'        // true

</code></pre>
						</div>


						<p class="fragment center important">
							These rules are not well understood by all developers so always use the Identity operator when possible.
						</p>

					</section>

					<section>
						<h1>Conditionals</h1>
						<p>Conditionals checks for thruty or falsy values.</p>
<pre><code>
if({}) {
   console.log('objects are truthy')
}
</code></pre>
						<div class="fragment">
							<p>|| and && return values</p>
<pre><code>
var foo = null || 'someString'; // foo === 'someString'
var bar = true && 'someString'; // bar === 'someString'
</code></pre>

						</div>
					</section>

				</section>

				<!-- this, objects and prototype-->
				<section>
					<section>
						<h1>this, objects and prototype</h1>
					</section>


					<section>
						<h1>Creating objects</h1>
						<ul class="center">
							<li class="fragment">Object Literal</li>
							<li class="fragment">Object constructor</li>
							<li class="fragment">Object.create</li>
						</ul>

					</section>


					<section>
<pre><code>
	//Object Literal
	var peter = {
	   name: "Peter",
	   shoeSize: 43
	}

	//Object constructor
	var morten = new Object();
	morten.name = "Morten";
	morten.shoeSize = null;

	//Object.create
	var gustav = Object.create(Object.prototype);
	gustav.name = "Gustav";
	gustav.shoeSize = 45;

</code></pre>
					</section>

					<section>
						<h1>Which one to use?</h1>
						<p class="fragment center">Use the Object literal or Object.create.</p>
						<ul class="fragment center">
							<li>Less text (we save bandwidth)</li>
							<li>Faster</li>
							<li>Safer</li>
						</ul>
					</section>

					<section>
						<h1>Constructor functions</h1>
<pre><code>
	function Person(firstname, lastname){
	   this.firstname = firstname;
	   this.lastname = lastname;
	}

	var peter = new Person("Peter", "Hellstrand");
	console.log(typeof Person);//function
	console.log(typeof peter);//object

</code></pre>
					</section>

					<section>
						<h1>Properties</h1>
						<p>Can be primitives or objects and accessed with dot or square bracket notation.</p>
<pre class="fragment"><code>
var goat =  {
   name: "Capra",
   makeSound : function(){
      return "Baaahhh";
   }
};
goat.numberOfLegs = 4;
goat["eat"] = function() {
   return "nam nam";
}

console.log(goat.name);//Capra
console.log(goat["name"]);//Capra
console.log(goat.makeSound());//Baaahhh
console.log(goat["makeSound"]());//Baaahhh
console.log(goat["numberOfLegs"]);//4
console.log(goat.eat());//nam nam

</code></pre>

					</section>


					<section>
						<h1>The Global Object</h1>
						<ul class="center">
							<li class="fragment">Properties like undefined, Infinity, and NaN</li>
							<li class="fragment">Functions like isNan(), parseInt() and eval()</li>
							<li class="fragment">Constructor functions like Date(), String and Object</li>
							<li class="fragment">Object like Math and JSON</li>
						</ul>
					</section>


					<section>
						<h1>The Window object</h1>
						<p>In a browser environment the "window" is exactly the same thing as the global object.</p>
<pre class="fragment" ><code >
var theGlobal = this;
console.log(theGlobal === window);//true
</code></pre>
					</section>

					<section>
						<h1>Why is this bad?</h1>
<pre><code >
function someName() {
   var b = 3;
   a = 2;
   return a + b;
}
</code></pre>
						<p class="fragment">The variable declared without "var" will become a property of the global object.</p>
					</section>

					<section>
						<h1>What is the <i>"this"</i> keyword?</h1>
						<p class="fragment"><i>"this"</i> is not a reference to function itself or to the lexical scope.</p>
					</section>

					<section>
						<h1>What is printed?</h1>

<pre><code >
var myObj = {
   value: 1,
   thisTest: function() {
      console.log(this.value); // ?
   }
};
</code></pre>

<pre class="fragment"><code >
var myOtherObj = {
   value: 2,
   thisTest: myObj.thisTest
};

console.log(myOtherObj.thisTest());//2
</code></pre>
					</section>

					<section>
						<h1>Determining <i>this</i></h1>
					</section>

					<section>
						<h1><i>new</i> binding</h1>
						<p>If the function is called with the <i>new</i> keyword, then <i>this</i> is the newly created object.</p>
<pre ><code >
function Bar() {
   this.value = 1;
}

var foo = new Bar();
console.log(foo.value);// 1
</code></pre>
					</section>

					<section>
						<h1>Explicit binding</h1>
						<p>If the function is called with call or apply this is the explicitly specified object.</p>

<pre><code >
function bar() {
   console.log(this.value);
}

var foo = {
   value: 9
};

bar.call(foo); //9
</code></pre>

					</section>

					<section>
						<h1>Implicit binding</h1>
						<p>If the function is called from within a context <i>this</i> is the context object.</p>
<pre><code >
function bar() {
   return this.value;
}

var foo = {
  value: 9,
  bar: bar
};

foo.bar();
</code></pre>
					</section>

					<section>
						<h1>Default binding</h1>
						<p><i>this</i> will be the global object if not in strict mode</p>
<pre><code >
value = 2;
function foo() {
   console.log(this.value); // 2 (would be undefined in sctrict mode)
}
</code></pre>
					</section>


					<section>
						<h1>Prototype</h1>
						<ul>
							<li>All functions has a prototype</li>
							<li>Shared between all instances created with the "new" keyword</li>
							<li>Used to share variables and functions</li>
						</ul>

<pre class="fragment"><code>
function Goat(name, number) {
  this.name = name;
  this.number = number;
}

Goat.prototype.numberOfLegs = 4;
Goat.prototype.makeSound = function () {
   console.log("Bahh");
}

var goat1 = new Goat("Goat1", 1);
var goat2 = new Goat("Goat2", 2);

goat1.makeSound();//Bahh
goat2.makeSound();//Bahh

console.log(goat1.numberOfLegs);//4
console.log(goat2.numberOfLegs);//4
</code></pre>
					</section>

					<section>
						<h1>Why Prototype?</h1>
						<ul class="center">
							<li class="fragment">Faster object creation</li>
							<li class="fragment">Less memory</li>
						</ul>
					</section>

					<section>
						<img src="images/prototype-goats-example.png" alt="Prototype goats"/>
					</section>

					<section>
						<img src="images/prototype.png" alt="Prototype"/>
					</section>

				</section>

				<!-- Functions, scope and closure-->
				<section>
					<section>
						<h1>Functions, scope and closure</h1>
					</section>

					<section>
						<h1 >Functions</h1>
<pre ><code >
	/*Function decleration*/
	function A(){};

	/*Function expression*/
	var B = function(){}

	/*Namned function expression*/
	var C = function foo(){}

	/*Function constructor, as bad as eval()*/
	var D = new Function("....");

	/*Self invoking function expression*/
	(function(){})();

</code></pre>
					</section>

					<section>
						<h1>Functions are first class objects</h1>
						<ul>
							<li>Store them in variables</li>
							<li>Pass them as arguments to other functions</li>
							<li>Create new functions during the execution of a program</li>
							<li>Inherits from Object</li>
							<li>Constructors when invoked with new keyword</li>
						</ul>
					</section>

					<section>
						<h1>Function scope</h1>
						<div class="fragment">
							<small>Java (block scope)</small>
<pre ><code>
public void foo() {
   if(true) {
      int a = 10;
   }
   System.out.println(a);//Error
}
</code></pre>
						</div>

						<div class="fragment">
							<small>JavaScript (function scope)</small>
<pre ><code>
function foo() {
   if(true) {
      var a = 10;
   }
   console.log(a);//10
}
</code></pre>
						</div>
					</section>

					<section>
						<h1>Function arguments</h1>
						<p>The arguments object is a local variable available within all functions.</p>
<pre class="fragment"><code >
function foo(a, b) {
   console.log(a); // Hello
   console.log(b); // undefined
}
test("Hello");
</code></pre>

<pre class="fragment"><code>
function bar() {
   for(var i = 0; i < arguments.length; i++) {
      console.log(arguments[i]); // 1,2,3 and 4
   }
}
</code></pre>
					</section>

					<section>
						<h1>Hoisting</h1>
						<small class="center">Because variable declarations are processed before any code is executed, declaring a variable anywhere in the code is equivalent to declaring it at the top.</small>
					</section>

					<section>
						<p>Original code:</p>
<pre><code>
function hoist() {
   var a = 2;
   for(var i = 0; i < 10; i++ ){}
   var b = 3;
}
</code></pre>
					</section>

					<section>
						<p>Interpreted as:</p>
<pre ><code>
function hoist() {
   var a, i, b;
   a = 2;
   for(i = 0; i < 10; i++ ){}
   b = 3;
}
</code></pre>
					</section>

					<section>
						<h1>Function Hoisting</h1>
						<small>Function declarations are hoisted.</small>
						<div class="fragment">
							<small>Original code:</small>
<pre><code>
sayHello();//Hi!

function sayHello() {
   console.log("Hi!");
}
</code></pre>
						</div>
						<div class="fragment">
							<small>Interpreted as:</small>
<pre><code>
function sayHello() {
   console.log("Hi!");
}
sayHello();//Hi!
</code></pre>
						</div>
					</section>

					<section>
						<h1>Function Hoisting</h1>
						<small>Function expression are not hoisted.</small>
						<div class="fragment">
							<small>Original code:</small>
<pre><code>
sayHello();//Error

var sayHell = function() {
   console.log("Hi!");
}
</code></pre>
						</div>
						<div class="fragment">
							<small>Interpreted as:</small>

<pre class="fragment"><code>
var sayHello;
sayHello();//Error

sayHell = function() {
   console.log("Hi!");
}
</code></pre>
						</div>
					</section>

					<section>
						<h1>Closure</h1>
						<p>"A closure is an expression (typically a function) that can have free variables together with an environment that binds those variables."</p>
						<ul>
							<li class="fragment">A closure is a function defined within another scope that has access to all the variables within the outer scope</li>
							<li class="fragment">It keeps state</li>
							<li class="fragment">Accessing variables outside of your immediate scope creates a closure</li>
						</ul>
					</section>

					<section>
<pre><code>
function getInnerFunction() {
   var counter = 0;
   return function() {
      return counter++;
   }
}

var theInnerFunction = getInnerFunction();
console.log(theInnerFunction());//0
console.log(theInnerFunction());//1
</code></pre>
					</section>

				</section>

			</div>

		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.js"></script>

		<script>

			// Full list of configuration options available at:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				center: true,

				transition: 'slide', // none/fade/slide/convex/concave/zoom

				// Optional reveal.js plugins
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'plugin/zoom-js/zoom.js', async: true },
					{ src: 'plugin/notes/notes.js', async: true }
				]
			});

		</script>

	</body>
</html>