Front-end dev presentation,31 march 2012, Iasi, Romania Points: - javaScript; - javaScript patterns; - jsLint; - debugging in Google Chrome

1. Front-end dev
by Paul Comanici (darkyndy)

2. JavaScript is fun
[] + [] = ?

3. JavaScript is fun
[] + [] = ""
{} + {} = ?

4. JavaScript is fun
[] + [] = ""
{} + {} = NaN
1 + "-1" = ?

5. JavaScript is fun
[] + [] = ""
{} + {} = NaN
1 + "-1" = "1-1"
NaN + [] = ?

6. JavaScript is fun
[] + [] = ""
{} + {} = NaN
1 + "-1" = "1-1"
NaN + [] = "NaN"
1 + NaN = ?

7. JavaScript is fun
[] + [] = ""
{} + {} = NaN
1 + "-1" = "1-1"
NaN + [] = "NaN"
1 + NaN = NaN

8. JavaScript patterns
function () {
var x = 0;
if (x === 1) {
var y = 1;
//execute other logic...
} else if (x === 2) {
var z = 2;
//custom logic
}
}

9. JavaScript patterns
function () { Single var pattern
var x = 0; Benefits:
1. Provides a single place to look for all the local
if (x === 1) { variables needed by the function
2. Prevents logical errors when a variable is used
var y = 1; before it's defined
//execute other logic... 3. Helps you remember to declare variables and
therefore minimize globals
4. Is less code (to type and to transfer over the wire)
} else if (x === 2) {
var z = 2;
//custom logic
}
}

10. JavaScript patterns
var Animal = (function () {
"use strict";
var type = "cat",
defaultType = "cat";
return {
getType: function () {
return type;
},
setType: function (customType) {
customType = customType || defaultType;
type = customType;
}
};
}());

11. JavaScript patterns
var Animal = (function () {
"use strict";
var type = "cat",
defaultType = "cat"; Module pattern
return {
getType: function () {
return type;
},
setType: function (customType) {
customType = customType || defaultType;
type = customType;
}
};
}());

12. JavaScript patterns
var Animal = (function () {
"use strict";
var type = "cat",
defaultType = "cat",
getType = null,
setType = null;
getType = function () {
return type;
};
setType = function (customType) {
customType = customType || defaultType;
type = customType;
};
return {
getType: getType,
setType: setType
};
}());

13. JavaScript patterns
var Animal = (function () {
"use strict";
var type = "cat",
defaultType = "cat", Revealing module pattern
getType = null,
setType = null;
getType = function () {
return type;
};
setType = function (customType) {
customType = customType || defaultType;
type = customType;
};
return {
getType: getType,
setType: setType
};
}());

14. JavaScript patterns
JavaScript namespacing and closures combined with module pattern
base.js -> namespace creator
car.js -> module

15. JavaScript patterns (base.js)
(function () { jQuery.each(nsp, function (j, n) {
pp = make(n, pp);
"use strict"; });
/*global window, jQuery, NK */ pp.__name__ = ns;
if (typeof NK !== "undefined") { ret.push(pp);
switch (ret.length) {
return; case 0:
} return null;
window.NK = { case 1:
return ret[0];
namespace : function (ns) {
default:
var ret = [], return ret;
make = function (n, parent) { }
}
parent = parent ||
};
window;
}());
if (!parent.
hasOwnProperty(n)) {
parent[n] = {};
}
return parent[n];
},
nsp = ns.split("."),
pp = null;

16. JavaScript patterns (car.js)
(function () { getPropr: function (p) {
"use strict"; if (p in my) {
return my[p];
/*global jQuery, NK */
}
var my = {
return null;
type: "", },
color: "", setPropr: function (p, v) {
origin: "", if (p in my) {
init: function () { my[p] = v;
my.type = "audi";
}
}
},
},
setColor: function (c) { obj = NK.namespace("NK.Car");
c = c || "black"; jQuery.extend(obj, {
my.color = c; init: my.init,
}, getPropr: my.getPropr,
getColor: function () {
setPropr: my.setPropr,
getColor: my.getColor,
return my.color;
setColor: my.setColor,
}, setFerrari: my.setFerrari
setFerrari: function () { });
my.type = "ferrari"; }());
my.color = "red";
},

17. JSLint
1. function test() {
2. a = new Array();
3. a["d"] = "08";
4. aa = [1,2,3];
5. c = parseInt(a["d"]);
6. if (c == 8) {
7. for (var i=0;i<aa.length; i++){
8. if (aa[i] == 2) console.log("true")
9. console.log("false")
10. }
11. }
12. }

18. Google Developer Tools
- console
- debugger
- JS breakpoints
- DOM breakpoints
- live JS edit
- modify JS in debug
- access to private methods in debug

19. Google Developer Tools
Suggestions for sites to debug?

20. The end
Thanks,
Paul Comanici (darkyndy)