Successfully reported this slideshow.
Your SlideShare is downloading. ×

JavaScript LevelUp by Lee Brandt

Ad

JavaScript LevelUp

Ad

Ласкаво просимо

Ad

Who is THIS freakin’ guy?

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Upcoming SlideShare
Invoke Dynamic
Invoke Dynamic
Loading in …3
×

Check these out next

1 of 23 Ad
1 of 23 Ad

JavaScript LevelUp by Lee Brandt

Download to read offline

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!

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!

Advertisement
Advertisement

More Related Content

Advertisement

More from Sigma Software (20)

Advertisement

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. Дякую!

×