Front-end devby Paul Comanici (darkyndy)
JavaScript is fun[] + [] = ?
JavaScript is fun[] + [] = ""{} + {} = ?
JavaScript is fun[] + [] = ""{} + {} = NaN1 + "-1" = ?
JavaScript is fun[] + [] = ""{} + {} = NaN1 + "-1" = "1-1"NaN + [] = ?
JavaScript is fun[] + [] = ""{} + {} = NaN1 + "-1" = "1-1"NaN + [] = "NaN"1 + NaN = ?
JavaScript is fun[] + [] = ""{} + {} = NaN1 + "-1" = "1-1"NaN + [] = "NaN"1 + NaN = NaN
JavaScript patternsfunction () {   var x = 0;   if (x === 1) {        var y = 1;        //execute other logic...   } else ...
JavaScript patternsfunction () {                    Single var pattern   var x = 0;                    Benefits:          ...
JavaScript patternsvar Animal = (function () {      "use strict";      var type = "cat",           defaultType = "cat";   ...
JavaScript patternsvar Animal = (function () {      "use strict";      var type = "cat",           defaultType = "cat";   ...
JavaScript patternsvar Animal = (function () {        "use strict";        var type = "cat",               defaultType = "...
JavaScript patternsvar Animal = (function () {        "use strict";        var type = "cat",               defaultType = "...
JavaScript patternsJavaScript namespacing and closures combined with module patternbase.js -> namespace creatorcar.js -> m...
JavaScript patterns (base.js)(function () {                                                                        jQuery....
JavaScript patterns (car.js)(function () {                                                                     getPropr: f...
JSLint 1. function test() { 2.      a = new Array(); 3.      a["d"] = "08"; 4.      aa = [1,2,3]; 5.      c = parseInt(a["...
Google Developer Tools- console- debugger- JS breakpoints- DOM breakpoints- live JS edit- modify JS in debug- access to pr...
Google Developer ToolsSuggestions for sites to debug?
The endThanks,          Paul Comanici (darkyndy)
Upcoming SlideShare
Loading in …5
×

front-end dev

560 views

Published on

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

Published in: Technology, Lifestyle
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
560
On SlideShare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

front-end dev

  1. 1. Front-end devby Paul Comanici (darkyndy)
  2. 2. JavaScript is fun[] + [] = ?
  3. 3. JavaScript is fun[] + [] = ""{} + {} = ?
  4. 4. JavaScript is fun[] + [] = ""{} + {} = NaN1 + "-1" = ?
  5. 5. JavaScript is fun[] + [] = ""{} + {} = NaN1 + "-1" = "1-1"NaN + [] = ?
  6. 6. JavaScript is fun[] + [] = ""{} + {} = NaN1 + "-1" = "1-1"NaN + [] = "NaN"1 + NaN = ?
  7. 7. JavaScript is fun[] + [] = ""{} + {} = NaN1 + "-1" = "1-1"NaN + [] = "NaN"1 + NaN = NaN
  8. 8. JavaScript patternsfunction () { var x = 0; if (x === 1) { var y = 1; //execute other logic... } else if (x === 2) { var z = 2; //custom logic }}
  9. 9. JavaScript patternsfunction () { 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 its 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. 10. JavaScript patternsvar Animal = (function () { "use strict"; var type = "cat", defaultType = "cat"; return { getType: function () { return type; }, setType: function (customType) { customType = customType || defaultType; type = customType; } };}());
  11. 11. JavaScript patternsvar 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. 12. JavaScript patternsvar 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. 13. JavaScript patternsvar 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. 14. JavaScript patternsJavaScript namespacing and closures combined with module patternbase.js -> namespace creatorcar.js -> module
  15. 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. 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. 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. 18. Google Developer Tools- console- debugger- JS breakpoints- DOM breakpoints- live JS edit- modify JS in debug- access to private methods in debug
  19. 19. Google Developer ToolsSuggestions for sites to debug?
  20. 20. The endThanks, Paul Comanici (darkyndy)

×