Advanced JS Crash Course

Workshop Code: http://codepen.io/ambethia/pen/KdmGJg

Transcript

2. Moar Javascript
3. Object Oriented ProgramMing
4. var person = { firstName: "Jason", lastName: "Perry", age: 34, likes: ["Pandas", "LEGO", "code"] };
5. var person = { firstName: "Jason", lastName: "Perry", age: 34, likes: ["Pandas", "LEGO", "code"], fullName: function() { return this.firstName + ' ' + this.lastName; } };
7. HTMLDivElement.prototype | |.__proto__ | HTMLElement.prototype | |.__proto__ | Element.prototype | |.__proto__ | Node.prototype | |.__proto__ | Object.prototype | |.__proto__ | null
8. 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"
9. 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; }
10. 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"
12. Closures & Scope
13. “…an inner function always has access to the vars and parameters of its outer function, even after the outer function has returned.” - Douglas Crockford
14. function box() { var key = "setec astronomy"; return { read: function() { return this.decrypt(key); }, decrypt: function(message) { // ... } } } var secret = box(); secret.read() // --> "too many secrets"
15. (function() { // ... })();
16. Higher-order functions
17. 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
18. [1, 2, 3, 4, 5].map(function (n) { return n * n; }).forEach(function (m) { console.log(m); });
20. Asynchronous PatTerns
21. $.ajax({ url: "data.json", success: function (data, status, xhr) { data.forEach(doSomething); }, error: function(xhr, status, error) { console.log("Oops", error); } });
22. var handleData = function() { ... }; var handleError = function() { ... }; $.ajax({ url: "data.json", success: handleData, error: handleError });
24. Promises
25. (function() { var promise = new Promise(function () { longRunningTask(); resolve(); }); promise.then(function () { console.log("Processing complete!"); }); }());
26. 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); });
27. ASYNC / AWAIT
28. (async function() { await longRunningTask(); console.log("Processing complete!"); }());
29. https://babeljs.io
30. Let’s Code! http://codepen.io/ambethia/pen/KdmGJg
32. @ambethia