Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Moar Javascript

Slide 3

Slide 3 text

Object Oriented ProgramMing

Slide 4

Slide 4 text

var person = { firstName: "Jason", lastName: "Perry", age: 34, likes: ["Pandas", "LEGO", "code"] };

Slide 5

Slide 5 text

var person = { firstName: "Jason", lastName: "Perry", age: 34, likes: ["Pandas", "LEGO", "code"], fullName: function() { return this.firstName + ' ' + this.lastName; } };

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

HTMLDivElement.prototype | |.__proto__ | HTMLElement.prototype | |.__proto__ | Element.prototype | |.__proto__ | Node.prototype | |.__proto__ | Object.prototype | |.__proto__ | null

Slide 8

Slide 8 text

function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } Person.prototype.fullName = function() { return this.firstName + ' ' + this.lastName; } var me = new Person("Jason", "Perry"); me.fullName(); // --> "Jason Perry"

Slide 9

Slide 9 text

function Mammal(dob) { this.dob = dob; } Mammal.prototype.age = function() { let today = new Date(); return today.getFullYear() - this.dob.getFullYear(); } function Person(firstName, lastName, age) { Mammal.call(this, age); this.firstName = firstName; this.lastName = lastName; } Person.prototype.constructor = Mammal; Person.prototype.fullName = function() { return this.firstName + ' ' + this.lastName; }

Slide 10

Slide 10 text

class Mammal { constructor(dob) { this.dob = dob; } get age() { let today = new Date(); return today.getFullYear() - dob.getFullYear(); } } class Person extends Mammal { constructor(firstName, lastName, dob) { super(dob); this.firstName = firstName; this.lastName = lastName; } get fullName() { return this.firstName + ' ' + this.lastName; } greet() { console.log("Hello, my names is " + this.fullName + ", I am " + this.age + " years old"). } } var me = new Person("Jason", "Perry", new Date(1980, 11, 12)); me.greet(); // --> "Hello, my name is Jason Perry, and I am 34 years old"

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Closures & Scope

Slide 13

Slide 13 text

“…an inner function always has access to the vars and parameters of its outer function, even after the outer function has returned.” - Douglas Crockford

Slide 14

Slide 14 text

function box() { var key = "setec astronomy"; return { read: function() { return this.decrypt(key); }, decrypt: function(message) { // ... } } } var secret = box(); secret.read() // --> "too many secrets"

Slide 15

Slide 15 text

(function() { // ... })();

Slide 16

Slide 16 text

Higher-order functions

Slide 17

Slide 17 text

var square = function (n) { return n * n; } var print = function (m) { console.log(m); } [1, 2, 3, 4, 5].map(square); // --> [2, 4, 9, 16, 25] [1, 2, 3, 4, 5].map(square).forEach(print); // logs 2, 4, 9, 16, 25

Slide 18

Slide 18 text

[1, 2, 3, 4, 5].map(function (n) { return n * n; }).forEach(function (m) { console.log(m); });

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Asynchronous PatTerns

Slide 21

Slide 21 text

$.ajax({ url: "data.json", success: function (data, status, xhr) { data.forEach(doSomething); }, error: function(xhr, status, error) { console.log("Oops", error); } });

Slide 22

Slide 22 text

var handleData = function() { ... }; var handleError = function() { ... }; $.ajax({ url: "data.json", success: handleData, error: handleError });

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Promises

Slide 25

Slide 25 text

(function() { var promise = new Promise(function () { longRunningTask(); resolve(); }); promise.then(function () { console.log("Processing complete!"); }); }());

Slide 26

Slide 26 text

var x = new Promise(function (resolve, reject) { if (Math.random() > 0.5) { resolve(42); } else { reject(9001); } }); x.then(function (value) { console.log('resolved value:', value); }).catch(function (value) { console.log('rejected value:', value); });

Slide 27

Slide 27 text

ASYNC / AWAIT

Slide 28

Slide 28 text

(async function() { await longRunningTask(); console.log("Processing complete!"); }());

Slide 29

Slide 29 text

https://babeljs.io

Slide 30

Slide 30 text

Let’s Code! http://codepen.io/ambethia/pen/KdmGJg

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

@ambethia