Intro to jQuery
Web Development 101
Lesson 03.01
jQuery is great
Advanced Javascript.
Web Development 101
Lesson 03.01
OR
What 80% of Javascript programmers don’t know
about their own language.
// The .bind method from Prototype.js	
Function.prototype.bind = function() {	
var fn = this,
args = Array.prototype.slice...
What ways can we define functions?
function funcA(){ return true; }	
var funcB = function(){ return true; };	
window.funcC = function(){ return true; };
!

a...
var funcB = function(){ return true; };	
window.funcC = function(){ return true; };
!

assert( funcA() && funcB() && funcC...
function stealthCheck(){	
assert( stealth() );	
!

return stealth();	
!

function stealth(){ return true; }	
}	
!

stealth...
function factorial(n) {	
return n * (n > 1 ? factorial(n - 1) : 1);	
}	
!

factorial(10);
var factorial = function f(n) {	
return n * (n > 1 ? f(n - 1) : 1);	
}	
!

factorial(10); // Works
f(10);
// Undefined fun...
Is a function an object?
var obj = {};	
var fn = function(){};
!

obj.prop = "some value";	
fn.prop = "some value";
var factorial = function f(n) {	
f.cache = f.cache || {};	
if (!f.cache[n]) {	
f.cache[n] = n * (n > 1 ? f(n - 1) : 1);	
}...
How does `this` work?
var katana = {	
isSharp: true,	
use: function(){	
this.isSharp = false;	
}	
};	
!

katana.use();	
katana.isSharp === false...
function katana(){	
this.isSharp = true;	
}	
katana();	
isSharp === true;	
!
!

var shuriken = {	
toss: function(){	
this....
How do I change `this`?
var object = {};	
function fn(){	
return this;	
}
!

fn() === this === window;
!

fn.call(object) === object;
var object = {a: ‘Jeremiah’, b: ‘Baruch’};
!

function getAttr(a){	
return this[a];	
}
!

getAttr.call(object, ‘a’) === ‘J...
Can I instantiate a function?
function Pioneer(){	
this.name = "Pioneer";	
}	
!

joe = Pioneer();	
joe === undefined;
!

joe = new Pioneer();
joe.name =...
function Pioneer(){	
this.hasBibleStudy = false;
!
this.preach = function() {
this.hasBibleStudy = true;	
};	
}	
!
jack = ...
function Pioneer(){	
this.hasBibleStudy = false;
!
this.preach = function() {
this.hasBibleStudy = true;	
};	
}	
!
jack = ...
Can I build a function with variable
number of arguments?
var object = {a: ‘Jeremiah’, b: ‘Baruch’};
!

function getAttr(a){	
return this[a];	
}
!

getAttr.apply(object, [‘b’]) ===...
var object = {a: ‘Jeremiah’, b: ‘Baruch’};
!

function getAttr() {
var out = [], i;
for (i = 0; i < arguments.length; i++)...
function smallest(array){	
return Math.min.apply( Math, array );	
}
!

function largest(array){	
return Math.max.apply( Ma...
function smallest() {	
return Math.min.apply( Math, arguments );	
}
!

function largest() {	
return Math.max.apply( Math, ...
function highest(){	
return arguments.sort(function(a, b) {	
return b - a;	
});	
}
!

highest(1, 1, 2, 3)[0] === 3;
function highest(){	
return arguments.sort(function(a, b) {	
return b - a;	
});	
}
!

highest(1, 1, 2, 3)[0] === 3; // Fat...
`arguments` isn’t actually an array
function highest() {
var argArray = Array().slice.call(arguments);	
return argArray.sort(function(a, b) {	
return b - a;	
...
How do Closures work?
var a = 5;

!
function runMe(a) {	
assert( a == ___, "Check the value of a." );	

!
function innerRun(){	
assert( b == ___...
var a = 5;

!
function runMe(a) {	
assert( a == 6, "Check the value of a." );	

!
function innerRun(){	
assert( b == 7, "C...
!

for ( var d = 0; d < 3; d++ ) {	
setTimeout(function(){	
assert( d == 3, "Check the value of d." );	
}, 100);	
}
for (var d = 0; d < 3; d++) {	
(function (d) {	
setTimeout(function () {	
console.log(d);	
}, 100);	
}(d));	
}
Code smell: Don’t make closures
inside a loop. Normally.
How do I make a class?
#!/usr/bin/env python
!

class Pioneer(object):
def __init__(self, name):
self.name = name
self.bibleStudies = 0
!

def pr...
#!/usr/bin/env php
!
class Pioneer {
private name;
private bibleStudies;
!
public function __construct(name) {
this.name =...
Write `Pioneer` in JS.
var Pioneer = function(name) {
this.name = name;
this.bibleStudies = 0;
!

this.preach = function() {
this.bibleStudies++;...
var Pioneer = function(name) {
this.name = name;
this.bibleStudies = 0;
};
!

Pioneer.prototype = {};
Pioneer.prototype.pr...
Inheritance. Prototypal Inheritance.
var Pioneer = function (name) {	
this.name = name;	
this.bibleStudies = 0;	
};	

!

Pioneer.prototype = {};	
Pioneer.proto...
Enforcing Function Context
var Button = {	
click: function(){	
this.clicked = true;	
}	
};	
!

var elem = document.createElement("li");	
elem.innerHT...
function bind(context, name){	
return function() {	
return context[name].apply(context, arguments);	
};	
}	

!
var Button ...
Function.prototype.bind = function(object) {	
var fn = this;	
return function(){	
return fn.apply(object, arguments);	
};	...
Back to our original goal
// The .bind method from Prototype.js	
Function.prototype.bind = function() {	
var fn = this,
args = Array.prototype.slice...
Function.prototype.bind = function(){	
var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift();...
Functions can be defined 3
ways


Closures can be used to cache
values for later, including
execution scope.


Functions ar...
Moral of the story
Javascript is a great, although quirky, language.

Prototypal inheritance works similarly, but not exactly like class
inhe...
:rewind
var Pioneer = function (name) {	
this.name = name;	
this.bibleStudies = 0;	
};	

!

Pioneer.prototype = {};	
Pioneer.proto...
Let’s make inheritance better.
var Person = Class.extend({	
init: function (isDancing) {	
this.dancing = isDancing;	
},	
dance: function () {	
return thi...
04 Advanced Javascript
04 Advanced Javascript
Upcoming SlideShare
Loading in …5
×

04 Advanced Javascript

369 views

Published on

Examples and concept from John Resig's tutorial here: http://ejohn.org/apps/learn/.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
369
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

04 Advanced Javascript

  1. 1. Intro to jQuery Web Development 101 Lesson 03.01
  2. 2. jQuery is great
  3. 3. Advanced Javascript. Web Development 101 Lesson 03.01
  4. 4. OR What 80% of Javascript programmers don’t know about their own language.
  5. 5. // The .bind method from Prototype.js Function.prototype.bind = function() { var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift(); return function() { return fn.apply( object, args.concat( Array.prototype.slice.call(arguments) ) ); }; };
  6. 6. What ways can we define functions?
  7. 7. function funcA(){ return true; } var funcB = function(){ return true; }; window.funcC = function(){ return true; }; ! assert( funcA() && funcB() && funcC() );
  8. 8. var funcB = function(){ return true; }; window.funcC = function(){ return true; }; ! assert( funcA() && funcB() && funcC() ); ! function funcA(){ return true; }
  9. 9. function stealthCheck(){ assert( stealth() ); ! return stealth(); ! function stealth(){ return true; } } ! stealthCheck();
  10. 10. function factorial(n) { return n * (n > 1 ? factorial(n - 1) : 1); } ! factorial(10);
  11. 11. var factorial = function f(n) { return n * (n > 1 ? f(n - 1) : 1); } ! factorial(10); // Works f(10); // Undefined function
  12. 12. Is a function an object?
  13. 13. var obj = {}; var fn = function(){}; ! obj.prop = "some value"; fn.prop = "some value";
  14. 14. var factorial = function f(n) { f.cache = f.cache || {}; if (!f.cache[n]) { f.cache[n] = n * (n > 1 ? f(n - 1) : 1); } return f.cache[n]; } ! factorial(10); factorial(9); factorial(20);
  15. 15. How does `this` work?
  16. 16. var katana = { isSharp: true, use: function(){ this.isSharp = false; } }; ! katana.use(); katana.isSharp === false;
  17. 17. function katana(){ this.isSharp = true; } katana(); isSharp === true; ! ! var shuriken = { toss: function(){ this.isSharp = true; } }; shuriken.toss(); shuriken.isSharp === true;
  18. 18. How do I change `this`?
  19. 19. var object = {}; function fn(){ return this; } ! fn() === this === window; ! fn.call(object) === object;
  20. 20. var object = {a: ‘Jeremiah’, b: ‘Baruch’}; ! function getAttr(a){ return this[a]; } ! getAttr.call(object, ‘a’) === ‘Jeremiah’; ! getAttr.apply(object, [‘b’]) === ‘Baruch’;
  21. 21. Can I instantiate a function?
  22. 22. function Pioneer(){ this.name = "Pioneer"; } ! joe = Pioneer(); joe === undefined; ! joe = new Pioneer(); joe.name == "Pioneer";
  23. 23. function Pioneer(){ this.hasBibleStudy = false; ! this.preach = function() { this.hasBibleStudy = true; }; } ! jack = new Pioneer(); jill = new Pioneer(); ! jack.hasBibleStudy === false; jill.hasBibleStudy === false; ! jack.preach(); ! jack.hasBibleStudy === true; jill.hasBibleStudy === false;
  24. 24. function Pioneer(){ this.hasBibleStudy = false; ! this.preach = function() { this.hasBibleStudy = true; }; } ! jack = Pioneer(); jill = Pioneer(); ! jack.hasBibleStudy === false; // Fatal Type Error jill.hasBibleStudy === false; ! jack.preach(); ! jack.hasBibleStudy === true; jill.hasBibleStudy === false;
  25. 25. Can I build a function with variable number of arguments?
  26. 26. var object = {a: ‘Jeremiah’, b: ‘Baruch’}; ! function getAttr(a){ return this[a]; } ! getAttr.apply(object, [‘b’]) === ‘Baruch’;
  27. 27. var object = {a: ‘Jeremiah’, b: ‘Baruch’}; ! function getAttr() { var out = [], i; for (i = 0; i < arguments.length; i++) { out.push( this[ arguments[i] ] ); } return out; } ! getAttr.apply(object, [‘a’, ‘b’]) === [‘Jeremiah’, ‘Baruch’];
  28. 28. function smallest(array){ return Math.min.apply( Math, array ); } ! function largest(array){ return Math.max.apply( Math, array ); } ! assert(smallest([0, 1, 2, 3]) == 0); assert(largest([0, 1, 2, 3]) == 3);
  29. 29. function smallest() { return Math.min.apply( Math, arguments ); } ! function largest() { return Math.max.apply( Math, arguments ); } ! assert(smallest(0, 1, 2, 3) == 0); assert(largest(0, 1, 2, 3) == 3);
  30. 30. function highest(){ return arguments.sort(function(a, b) { return b - a; }); } ! highest(1, 1, 2, 3)[0] === 3;
  31. 31. function highest(){ return arguments.sort(function(a, b) { return b - a; }); } ! highest(1, 1, 2, 3)[0] === 3; // Fatal Error.
  32. 32. `arguments` isn’t actually an array
  33. 33. function highest() { var argArray = Array().slice.call(arguments); return argArray.sort(function(a, b) { return b - a; }); } ! highest(1, 1, 2, 3)[0] === 3;
  34. 34. How do Closures work?
  35. 35. var a = 5; ! function runMe(a) { assert( a == ___, "Check the value of a." ); ! function innerRun(){ assert( b == ___, "Check the value of b." ); assert( c == ___, "Check the value of c." ); } ! var b = 7; innerRun(); var c = 8; } ! runMe(6); ! for ( var d = 0; d < 3; d++ ) { setTimeout(function(){ assert( d == ___, "Check the value of d." ); }, 100); }
  36. 36. var a = 5; ! function runMe(a) { assert( a == 6, "Check the value of a." ); ! function innerRun(){ assert( b == 7, "Check the value of b." ); assert( c == undefined, "Check the value of c." ); } ! var b = 7; innerRun(); var c = 8; } ! runMe(6); ! for ( var d = 0; d < 3; d++ ) { setTimeout(function(){ assert( d == 3, "Check the value of d." ); }, 100); }
  37. 37. ! for ( var d = 0; d < 3; d++ ) { setTimeout(function(){ assert( d == 3, "Check the value of d." ); }, 100); }
  38. 38. for (var d = 0; d < 3; d++) { (function (d) { setTimeout(function () { console.log(d); }, 100); }(d)); }
  39. 39. Code smell: Don’t make closures inside a loop. Normally.
  40. 40. How do I make a class?
  41. 41. #!/usr/bin/env python ! class Pioneer(object): def __init__(self, name): self.name = name self.bibleStudies = 0 ! def preach(self): self.bibleStudies += 1 ! joe = Pioneer(“Joe”) joe.preach();
  42. 42. #!/usr/bin/env php ! class Pioneer { private name; private bibleStudies; ! public function __construct(name) { this.name = name; this.bibleStudies = 0; } ! public function preach() { this.bibleStudies++; } } ! joe = new Pioneer(“Joe”); joe->preach();
  43. 43. Write `Pioneer` in JS.
  44. 44. var Pioneer = function(name) { this.name = name; this.bibleStudies = 0; ! this.preach = function() { this.bibleStudies++; }; }; ! joe = new Pioneer(“Joe”); joe.preach();
  45. 45. var Pioneer = function(name) { this.name = name; this.bibleStudies = 0; }; ! Pioneer.prototype = {}; Pioneer.prototype.preach = function() { this.bibleStudies++; }; ! joe = new Pioneer(“Joe”); joe.preach();
  46. 46. Inheritance. Prototypal Inheritance.
  47. 47. var Pioneer = function (name) { this.name = name; this.bibleStudies = 0; }; ! Pioneer.prototype = {}; Pioneer.prototype.preach = function () { this.bibleStudies++; }; ! var SpecialPioneer = function(name) { this.name = name; this.bibleStudies = 0; }; ! SpecialPioneer.prototype = new Pioneer(); SpecialPioneer.prototype.preach = function () { this.bibleStudies += 5; }; ! var joe = new Pioneer("Joe"), jeremy = new SpecialPioneer('Jeremy'); ! joe.preach(); jeremy.preach();
  48. 48. Enforcing Function Context
  49. 49. var Button = { click: function(){ this.clicked = true; } }; ! var elem = document.createElement("li"); elem.innerHTML = "Click me!"; elem.onclick = Button.click; document.getElementById("results").appendChild(elem); ! elem.onclick(); ! Button.clicked === undefined; elem.clicked === true;
  50. 50. function bind(context, name){ return function() { return context[name].apply(context, arguments); }; } ! var Button = { click: function(){ this.clicked = true; } }; ! var elem = document.createElement("li"); elem.innerHTML = "Click me!"; elem.onclick = bind(Button, "click"); document.getElementById("results").appendChild(elem); ! elem.onclick(); ! Button.clicked === true; elem.clicked === undefined;
  51. 51. Function.prototype.bind = function(object) { var fn = this; return function(){ return fn.apply(object, arguments); }; }; ! var Button = { click: function(){ this.clicked = true; } }; ! var elem = document.createElement("li"); elem.innerHTML = "Click me!"; elem.onclick = Button.click.bind(Button); document.getElementById("results").appendChild(elem); ! elem.onclick(); ! Button.clicked === true;
  52. 52. Back to our original goal
  53. 53. // The .bind method from Prototype.js Function.prototype.bind = function() { var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift(); return function() { return fn.apply( object, args.concat( Array.prototype.slice.call(arguments) ) ); }; };
  54. 54. Function.prototype.bind = function(){ var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift(); return function(){ return fn.apply(object, args.concat(Array.prototype.slice.call(arguments))); }; }; ! var Button = { click: function(value) { this.clicked = value; } }; ! var elem = document.createElement("li"); elem.innerHTML = "Click me!"; elem.onclick = Button.click.bind(Button, “I was clicked!”); document.getElementById("results").appendChild(elem); ! elem.onclick(); ! Button.clicked === “I was clicked!”
  55. 55. Functions can be defined 3 ways Closures can be used to cache values for later, including execution scope. Functions are just objects that you can execute. Objects inherit from each other using prototypes. The `this` keyword is bound to function context Build in object prototypes can be extended. No classes, just objects. All of that works without including jQuery at all.
  56. 56. Moral of the story
  57. 57. Javascript is a great, although quirky, language. Prototypal inheritance works similarly, but not exactly like class inheritance. jQuery is a great library. You should use it for DOM and AJAX code. Reading API documentation will teach you jQuery. A good understanding of Javascript is harder to come by.
  58. 58. :rewind
  59. 59. var Pioneer = function (name) { this.name = name; this.bibleStudies = 0; }; ! Pioneer.prototype = {}; Pioneer.prototype.preach = function () { this.bibleStudies++; }; ! var SpecialPioneer = function(name) { this.name = name; this.bibleStudies = 0; }; ! SpecialPioneer.prototype = new Pioneer(); SpecialPioneer.prototype.preach = function () { this.bibleStudies += 5; }; ! var joe = new Pioneer("Joe"), jeremy = new SpecialPioneer('Jeremy'); ! joe.preach(); jeremy.preach();
  60. 60. Let’s make inheritance better.
  61. 61. var Person = Class.extend({ init: function (isDancing) { this.dancing = isDancing; }, dance: function () { return this.dancing; } }); ! var Ninja = Person.extend({ init: function () { this._super(false); }, dance: function () { // Call the inherited version of dance() return this._super(); }, swingSword: function () { return true; } }); ! var p = new Person(true); p.dance(); // => true ! var n = new Ninja(); n.dance(); // => false n.swingSword(); // => true ! // Should all be true p instanceof Person && p instanceof Class && n instanceof Ninja && n instanceof Person && n instanceof Class

×