Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript LevelUp
Ласкаво просимо
Who is THIS freakin’ guy?
Lee Brandt
Director R&D @PaigeLabs
Programmer
Teacher
Star of Finding Bigfoot
JavaScript, All day, every day
Keeper of Key...
IDoSomethingAwesomeJS
Our Agenda
Scope and Closure
Prototypal Inheritance
Modularity
JavaScript Quirks
Tips & Tricks
Asynchronicity
Lexical Scope
function outerFunction() {
var foo = 5;
function innerFunction(){
foo++;
var bar = 5;
}
console.log(bar);
}
Closure
var add = (function(){
var counter = 0;
return function(number){
console.log(counter += number);
};
})();
for (var...
Prototypal Delegation
Object.prototype
.toString()
.valueOf()
.hasOwnProperty()
Prototypal Delegation
var Foo = function(){
// magic
};
var a = new Foo();
var a = Object.create(Foo);
Modularity (AMD)
define(function(){
return function CallMe(){
console.log('Inside module one.');
};
});
define(['FirstModu...
Modularity (CommonJS)
module.exports = function callMe(){
console.log(‘called’);
};
var thingie = require(‘./FirstModule')...
Why So Asynchronous?
Asynchronicity Callbacks
function callbackFunction(){
// stuff and such
}
function asynchronousThing(cb){
// asynchronous ...
Asynchronicity Promises
function asynchronousThing(){
var promise = $q.defer();
if(successful){
promise.resolve(results);
...
Asynchronicity Promises
asynchronousThing()
.progress(function(status){})
.then(function(result){})
.success(function(resu...
Quirks JavaScript
this != this
unless you bind(), call(), or apply()
function clickHandler(e){
console.log(this === e.curr...
Hoisting
console.log(foo); // undefined
console.log(bar); // undefined
var foo = ‘baz';
var bar = 'bam';
console.log(foo);...
Hoisting
foo(); // I am in foo
bar(); // undefined
// function declaration
function foo(){
console.log('I am in foo');
}
/...
Tips & Tricks
Use ‘use strict’
use === instead of ==
use a module pattern
truthy and falsy
Bookmark MDN
Namespacing
Revealing Module
function myModule(){
var myPrivateThing = function(){
// does something
};
return {
MyPublicThing: myPriv...
Useful Links
Mozilla Developer Network
- https://developer.mozilla.org
ECMA Website
- http://www.ecma-international.org/ec...
Дякую!
Upcoming SlideShare
Loading in …5
×

JavaScript LevelUp by Lee Brandt

769 views

Published on

If you’ve been developing for the web any length of time, you’ve probably written some JavaScript. You know the basics of the language and you can get things done, and applications shipped. But as the proliferation of JavaScript continues into frameworks like UnderscoreJS, KnockoutJS, AngularJS, Any-Other-Thing-You-Can-Think-Of-JS, and even to the server (with Node.js) you may find yourself struggling to understand how to write professional, full-fledged applications using JavaScript. In this session you will LevelUp your JavaScript skills by learning about closures and how they help to modularize your javascript. Prototypal inheritance and how you can extend JavaScript. You will also learn about JavaScript design patterns and how they can take your JavaScript skills to the next level!

Published in: Technology
  • Be the first to comment

JavaScript LevelUp by Lee Brandt

  1. 1. JavaScript LevelUp
  2. 2. Ласкаво просимо
  3. 3. Who is THIS freakin’ guy?
  4. 4. Lee Brandt Director R&D @PaigeLabs Programmer Teacher Star of Finding Bigfoot JavaScript, All day, every day Keeper of Keys and Grounds @Hogwarts
  5. 5. IDoSomethingAwesomeJS
  6. 6. Our Agenda Scope and Closure Prototypal Inheritance Modularity JavaScript Quirks Tips & Tricks Asynchronicity
  7. 7. Lexical Scope function outerFunction() { var foo = 5; function innerFunction(){ foo++; var bar = 5; } console.log(bar); }
  8. 8. Closure var add = (function(){ var counter = 0; return function(number){ console.log(counter += number); }; })(); for (var i = 0; i < 10; i++) { add(1); }
  9. 9. Prototypal Delegation Object.prototype .toString() .valueOf() .hasOwnProperty()
  10. 10. Prototypal Delegation var Foo = function(){ // magic }; var a = new Foo(); var a = Object.create(Foo);
  11. 11. Modularity (AMD) define(function(){ return function CallMe(){ console.log('Inside module one.'); }; }); define(['FirstModule'], function(mod1){ mod1(); }); FirstModule.js Main.js
  12. 12. Modularity (CommonJS) module.exports = function callMe(){ console.log(‘called’); }; var thingie = require(‘./FirstModule'); thingie(); FirstModule.js Main.js
  13. 13. Why So Asynchronous?
  14. 14. Asynchronicity Callbacks function callbackFunction(){ // stuff and such } function asynchronousThing(cb){ // asynchronous stuff cb(); } asynchronousThing(callbackFunction);
  15. 15. Asynchronicity Promises function asynchronousThing(){ var promise = $q.defer(); if(successful){ promise.resolve(results); }else{ promise.reject(); } return promise; }
  16. 16. Asynchronicity Promises asynchronousThing() .progress(function(status){}) .then(function(result){}) .success(function(result){}) .error(function(err){}) .catch(function(err){}) .finally(function(){});
  17. 17. Quirks JavaScript this != this unless you bind(), call(), or apply() function clickHandler(e){ console.log(this === e.currentTarget); } (function clickHandler(e){ console.log(this === myThisContext); }).bind(myThisContext);
  18. 18. Hoisting console.log(foo); // undefined console.log(bar); // undefined var foo = ‘baz'; var bar = 'bam'; console.log(foo); // baz console.log(bar); // bam
  19. 19. Hoisting foo(); // I am in foo bar(); // undefined // function declaration function foo(){ console.log('I am in foo'); } // function expression var bar = function bar(){ console.log('I am in bar'); }
  20. 20. Tips & Tricks Use ‘use strict’ use === instead of == use a module pattern truthy and falsy Bookmark MDN Namespacing
  21. 21. Revealing Module function myModule(){ var myPrivateThing = function(){ // does something }; return { MyPublicThing: myPrivateThing }; }
  22. 22. Useful Links Mozilla Developer Network - https://developer.mozilla.org ECMA Website - http://www.ecma-international.org/ecma-262/5.1/ jsbin.com jsfiddle.com plnkr.co codepen.io
  23. 23. Дякую!

×