advanced javascript techniques
TRANSCRIPT
AdvancedJavaScriptTechniques
Ajax
Ajax
Loose Typing
Loose Typing
var a = 5 + 4 + "px";var b = "$" + 5 + 4;var c = [1, 2, 3] + " and counting...";
Loose Typing
var a = 5 + 4 + "px";var b = "$" + 5 + 4;var c = [1, 2, 3] + " and counting...";
alert(a);alert(b);alert(c);
Loose Typing
var a = 5 + 4 + "px";var b = "$" + 5 + 4;var c = [1, 2, 3] + " and counting...";
alert(a);alert(b);alert(c);
9px
Loose Typing
var a = 5 + 4 + "px";var b = "$" + 5 + 4;var c = [1, 2, 3] + " and counting...";
alert(a);alert(b);alert(c);
9px$54
Loose Typing
var a = 5 + 4 + "px";var b = "$" + 5 + 4;var c = [1, 2, 3] + " and counting...";
alert(a);alert(b);alert(c);
9px$541,2,3 and counting...
Loose Typing
var a = 5 + 4 + "px";var b = "$" + 5 + 4;var c = [1, 2, 3] + " and counting...";
alert(a);alert(b);alert(c);
9px$541,2,3 and counting...
if (5) {...}
Loose Typing
"5" == 5 6 / "2" "4" - "2" 12 / 0 12 + "px" 12 - "px"
Loose Typing
"5" == 5 6 / "2" "4" - "2" 12 / 0 12 + "px" 12 - "px"
// true
Loose Typing
"5" == 5 6 / "2" "4" - "2" 12 / 0 12 + "px" 12 - "px"
// 3// true
Loose Typing
"5" == 5 6 / "2" "4" - "2" 12 / 0 12 + "px" 12 - "px"
// 3// true
// 2
Loose Typing
"5" == 5 6 / "2" "4" - "2" 12 / 0 12 + "px" 12 - "px"
// 3// true
// Infinity// 2
Loose Typing
"5" == 5 6 / "2" "4" - "2" 12 / 0 12 + "px" 12 - "px"
// 3// true
// "12px"// Infinity// 2
Loose Typing
"5" == 5 6 / "2" "4" - "2" 12 / 0 12 + "px" 12 - "px" // NaN
// 3// true
// "12px"// Infinity// 2
Good, Bad & Ugly
null, NaN & undefined
null, NaN & undefined
var a = null;var b = 5 - "$";
null, NaN & undefined
var a = null;var b = 5 - "$";
alert(a); // nullalert(b); // NaNalert(c); // undefined
null, NaN & undefined
var a = null;var b = 5 - "$";
alert(a); // nullalert(b); // NaNalert(c); // undefined
null == undefined // truenull === undefined // false
“Falsish” values:• zero (0)• empty string (“”)• null• NaN• undefined
null, NaN & undefined
&& and ||
&& and ||
var a;if (b) { a = b;} else { a = 0; // default}
&& and ||
var a;if (b) { a = b;} else { a = 0; // default}
var a = b || 0;
&& and ||
var a;if (b) { a = c;} else { a = b;}
&& and ||
var a;if (b) { a = c;} else { a = b;}
var a = b && c;
Anonymous Functions
Anonymous Functions
function plus(a, b) { return a + b;}var minus = function (a, b) { return a - b;}function operation(a, b, sign) { return sign(a, b);}var i = operation(3, 4, plus);var j = operation(12, 4.5, function (a, b) { return a * b;});
Anonymous Functions
function plus(a, b) { return a + b;}var minus = function (a, b) { return a - b;}function operation(a, b, sign) { return sign(a, b);}var i = operation(3, 4, plus);var j = operation(12, 4.5, function (a, b) { return a * b;});
Object
Object
var Orc = { name: "Zurk", level: 80, damage: 300, "go-to": function () {…}, die: function () {…}}Orc.level++;Orc.damage += 3;Orc["go-to"](x, y);Orc.die();Orc.avatar = "http://orcs.org/zurk/pic.jpg";
Object
alert("Object"); alert.level = 5; alert.level += 3; alert(alert.level); // 8
Object
function Human(name) { this.name = name; this.getName = function () {return this.name;
}; } function Orc(name) { this.name = name; } Orc.prototype.getName = function () { return this.name;
}; john = new Human("John"); zorg = new Orc("Zorg");
Prototype
Prototype
var Elf = function () {}; Elf.prototype = { weapon: "bow", attack: function () {...}, damage: 21
}; var Troll = function () {}; Troll.prototype = Elf.prototype; Troll.prototype.weapon = "axe"; var Zahar = new Troll(), Zhabah = new Troll(), Feanor = new Elf();
Type of…
var int = 5, fl = 5.5, s = "C", o = {name: "Name"}, f = function (){}, a = [1, 2, 3];
typeof int; // "number"typeof fl; // "number"typeof s; // "string"typeof o; // "object"typeof f; // "function"
Type of…
var int = 5, fl = 5.5, s = "C", o = {name: "Name"}, f = function (){}, a = [1, 2, 3];
typeof int; // "number"typeof fl; // "number"typeof s; // "string"typeof o; // "object"typeof f; // "function"
typeof a; // "object"
Type of…
var int = 5, fl = 5.5, s = "C", o = {name: "Name"}, f = function (){}, a = [1, 2, 3];
typeof int; // "number"typeof fl; // "number"typeof s; // "string"typeof o; // "object"typeof f; // "function"
What the?…typeof a; // "object"
Type of…
var int = 5, fl = 5.5, s = "C", o = {name: "Name"}, f = function (){}, a = [1, 2, 3];
typeof int; // "number"typeof fl; // "number"typeof s; // "string"typeof o; // "object"typeof f; // "function"
What the?…typeof a; // "object"
Type of…
typeof z; // "undefined"typeof null; // "object"typeof NaN; // "number"
Who is There?
Who is There?
for (var i in zorg) { alert("zorg." + i + " = " + zorg[i];
} if ("wings" in unit) {alert("the unit can fly!");
}
Delete
Delete
var obj = {a: 1, b: 2, c: 3};
obj.b = undefined;alert(obj.b); // undefinedalert("b" in obj); // true
delete obj.b;alert(obj.b); // undefinedalert("b" in obj); // false
‘this’ is Fun
‘this’ is Fun
var Elf = function () {}; Elf.prototype = { weapon: "bow", attacks: function (target) { target.health -= this.damage;
}, damage: 21
}; var Troll = {}; Troll.weapon = "axe"; Troll.damage = 20; Troll.attacks = Elf.prototype.attacks;
‘this’ is Fun
var Elf = function () {}; Elf.prototype = { weapon: "bow", attacks: function (target) { target.health -= this.damage;
}, damage: 21
}; var Troll = {}; Troll.weapon = "axe"; Troll.damage = 20; Troll.attacks = Elf.prototype.attacks;
Scope & Context
Scope & Context
function die(cry, volume) { this.hitpoints = 0; this.damage = 0; this.style = "dead-body";this.play(cry, volume);
} var Zhuk = new Orc();Zhuk.die = die;Zhuk.die();
die.call(Zhuk, cry, volume); die.apply(Zhuk, [cry, volume]);
Constructor
Constructor
var zorg = new Orc("Zorg"); if (zorg.constructor == Orc) { alert("Run! Orcs in town!");
}
var borg = new function("Börg") {...};var zima = new borg.constructor("Zima");
typeof ([1, 2, 3]) == "object"; ([1, 2, 3]).constructor == Array;
Instance of…
Instance of...
([1, 2, 3]).constructor == Array; // true([1, 2, 3]).constructor == Object; // false
([1, 2, 3]) instanceof Array; // true([1, 2, 3]) instanceof Object; // true
Closures
Closures
var x = add(4)(5);
Closures
var x = add(4)(5);
var x = (add(4))(5);var z = add(4);var x = z(5); // 9
Closures
var x = add(4)(5);
function add(a) { return function(b) { return a + b; }}
var x = (add(4))(5);var z = add(4);var x = z(5); // 9
Closures
var x = add(4)(5);
function add(a) { return function(b) { return a + b; }}
var x = (add(4))(5);var z = add(4);var x = z(5); // 9
Arguments
Arguments
function add(a, b) { return a + b; }
function add(a, b, c) { return a + b + c; }
function add() { var res = 0; for (var i = 0; i < arguments.length; i++) { res += arguments[i]; } return res; }
Morphing Functions
Morphing Functions
function getButtonImage() { var res = ""; if (browser.isIE) { res = "/i/button.gif"; } else { res = "/i/button.png"; } getButtonImage = function () { return res; } return res; }
Callee
Callee
setTimeout( function () { if (box.opacity < 100) { box.opacity++; setTimeout(/* this function */, 100); } }, 100);
Callee
var f = function () { if (box.opacity < 100) { box.opacity++; setTimeout(f, 100); } };setTimeout(f, 100);
Callee
setTimeout( function () { if (box.opacity < 100) { box.opacity++; setTimeout(/* this function */, 100); } }, 100);
Callee
setTimeout( function () { if (box.opacity < 100) { box.opacity++; setTimeout(arguments.callee, 100); } }, 100);
toString
toString
var feanor = new Elf(); alert(feanor); // [object] feanor.toString = function () { return ":)"; } alert(feanor); // :)
Aliasing
Aliasing
var a = GLOBAL.long.path_to[your](object);
a.name = "new name"; a(something.else); a.size = (a.w + a.x) * (a.h + a.y);
Aliasing
var a = GLOBAL.long.path_to[your](object);
a.name = "new name"; a(something.else); a.size = (a.w + a.x) * (a.h + a.y);
var b = function (a) {
}b(GLOBAL.long.path_to[your](object));
Aliasing
var a = [4, 2, 6, 1, 8, 0];
for (var i = 0, ii = a.length; i < ii; i++) { a[i] = function () { return i; };}alert(a[0]());alert(a[3]());
Aliasing
var a = [4, 2, 6, 1, 8, 0];
for (var i = 0, ii = a.length; i < ii; i++) { a[i] = function () { return i; };}alert(a[0]());alert(a[3]());
for (var i = 0, ii = a.length; i < ii; i++) { a[i] = (function (num) { return function() { return num; }; })(i);}
Try to Catch
Try to Catch
function log(message) { try { console.log(message); } catch(e) { if (!log.messages) { log.messages = [message]; } else { log.messages.push(message); } }}
Thank You
