Download to read offline
![JavaScript – What is It? • Dynamic – variables are not bound to types, only values • Object-based (not oriented) – arrays and prototypes – myObj.foo = myObj[“foo”] • Interpreted, not compiled • Functional • Supports anonymous functions • Closures • Global scope • Unfortunately, not consistently implemented consulting training design debugging wintellect.com](https://image.slidesharecdn.com/wintellect-enterprisejavascriptdevelopment1of2-jeremylikness-121015072102-phpapp01/75/Wintellect-Devscovery-Enterprise-JavaScript-Development-1-of-2-6-2048.jpg)
![Values are … What?! (1 of 2) false.toString(); [1,2,3].toString(); "2".toString(); 2.toString(); 02.toString(); 2 .toString(); consulting training design debugging wintellect.com](https://image.slidesharecdn.com/wintellect-enterprisejavascriptdevelopment1of2-jeremylikness-121015072102-phpapp01/75/Wintellect-Devscovery-Enterprise-JavaScript-Development-1-of-2-9-2048.jpg)
![Values are … What?! (2 of 2) var one = 1; var one = [1,2,3]; one; one; typeof one; typeof one; var two = '2', var two = ['1', '2', '3'] two; two; typeof two; typeof two; var three = one + two; one[0] == two[0]; three; one[0] === two[0]; typeof three; var three = one + two; var three = Number(one) + typeof three; Number(two); three; typeof three; three; var three = one.concat(two); typeof three; three; consulting training design debugging wintellect.com](https://image.slidesharecdn.com/wintellect-enterprisejavascriptdevelopment1of2-jeremylikness-121015072102-phpapp01/75/Wintellect-Devscovery-Enterprise-JavaScript-Development-1-of-2-10-2048.jpg)
![Arrays have Split Personalities var list = [1,2,3,4,5,6]; list; list.length; list.length = 2; list; var list = new Array(1,2,3); list; var list = new Array(3); list; consulting training design debugging wintellect.com](https://image.slidesharecdn.com/wintellect-enterprisejavascriptdevelopment1of2-jeremylikness-121015072102-phpapp01/75/Wintellect-Devscovery-Enterprise-JavaScript-Development-1-of-2-17-2048.jpg)
Uploaded byJeremy Likness
Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2
The document discusses the evolution and characteristics of JavaScript, highlighting its issues such as inconsistent browser implementations and differences between null and undefined. It also showcases the advantages brought by various JavaScript libraries and frameworks like jQuery, underscore.js, and Backbone.js. The document concludes with an emphasis on the ongoing improvements and tools available for developers in the JavaScript ecosystem.
Wintellect - Devscovery - Enterprise JavaScript Development 1 of 2
- 1. Enterprise JavaScript Development:Oxymoron? Part 1 of 2 Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.com Copyright © 2012 consulting training design debugging wintellect.com
- 2. what we do consulting training design debugging who we are Founded by top experts on Microsoft – Jeffrey Richter, Jeff Prosise, and John Robbins – we pull out all the stops to help our customers achieve their goals through advanced software-based consulting and training solutions. how we do it Training • On-site instructor-led training Consulting & Debugging • Virtual instructor-led training • Architecture, analysis, and design services • Devscovery conferences • Full lifecycle custom software development • Content creation Design • Project management • User Experience Design • Debugging & performance tuning • Visual & Content Design • Video & Animation Production consulting training design debugging wintellect.com
- 3. Agenda • Introduction • The bad. The ugly. • The good. • Part 2: More of the good. consulting training design debugging wintellect.com
- 4. Introduction – JavaScript consulting training design debugging wintellect.com
- 5. JavaScript – ABrief History • 1995 – Netscape, “make Java more accessible to non-Java programmers” • Goal was to make it easy to tie into page elements without the need for a compiler or knowledge of object-oriented design • Loosely-typed scripting language • Codenamed “Mocha” started out as “LiveScript” then renamed to “JavaScript” (oops, this caused a little bit of confusion, some think this was an intentional marketing move between Netscape and Sun) • Moved from manipulation of Java applets to manipulation of DOM elements • 1996 – Microsoft does this a little differently (surprise!) and releases VBScript and Jscript – IE 3.0 gets stuck behind the mainstream (1998) • 1997 - ECMAScript adopted (ISO in 1998) • 2006 – jQuery (no, it‟s not JavaScript, but it is certainly ubiquitous) consulting training design debugging wintellect.com
- 6. JavaScript – Whatis It? • Dynamic – variables are not bound to types, only values • Object-based (not oriented) – arrays and prototypes – myObj.foo = myObj[“foo”] • Interpreted, not compiled • Functional • Supports anonymous functions • Closures • Global scope • Unfortunately, not consistently implemented consulting training design debugging wintellect.com
- 7. The Bad -Incompatibilities • Blur – when an element loses focus – not consistently implemented • Change – buggy implementation in IE5 – IE8 • Focus – Firefox on Mac, Safari, and Chrome don‟t consistently support this event • Keydown – not properly implemented in Opera • Keypress – not properly implemented in FireFox • Mouseenter/Mouseleave - Firefox, Safari, and Chrome don‟t implement despite being in the spec – used for child elements • Cut/copy/paste/selection – not consistently implemented as well • DOM – the lifecycle is different and events will fire at different times and have a different state of readiness between browsers (this is why jQuery uses document.ready to provide a common ground) consulting training design debugging wintellect.com
- 8. The Ugly • Variables are scoped to values, not types • Case sensitivity makes it really tough to track typos • Null doesn‟t mean Undefined, Undefined does • Setting a property to undefined doesn‟t remove the definition • You can‟t trust your built-in functions • Parameters are just syntactic sugar for an array of objects • Scope is based on functions, not blocks • Arrays are easy to clobber • Semi-colon completion means position (and style) matter • Spaces count – for example, string continuations • Position doesn‟t matter for the increment/decrement operators • Variable and function definitions are hoisted consulting training design debugging wintellect.com
- 9. Values are …What?! (1 of 2) false.toString(); [1,2,3].toString(); "2".toString(); 2.toString(); 02.toString(); 2 .toString(); consulting training design debugging wintellect.com
- 10. Values are …What?! (2 of 2) var one = 1; var one = [1,2,3]; one; one; typeof one; typeof one; var two = '2', var two = ['1', '2', '3'] two; two; typeof two; typeof two; var three = one + two; one[0] == two[0]; three; one[0] === two[0]; typeof three; var three = one + two; var three = Number(one) + typeof three; Number(two); three; typeof three; three; var three = one.concat(two); typeof three; three; consulting training design debugging wintellect.com
- 11. Case Sensitive? Atleast tell me! var myObj = { foo : 1, Bar: 2 }; var result = myObj.foo + myObj.bar; typeof result; result; consulting training design debugging wintellect.com
- 12. I‟m not Null,I‟m just Undefined null; undefined; null == undefined; null === undefined; typeof null; typeof undefined; consulting training design debugging wintellect.com
- 13. I may beUndefined, but I‟m still here var myObj = { foo : 1, bar : 2 }; myObj; myObj.foo = undefined; myObj; delete myObj.foo; consulting training design debugging wintellect.com
- 14. Nothing is Sacred var myObj = { foo : 1 }; myObj.hasOwnProperty("foo"); myObj.hasOwnProperty = function(args) { return false; }; myObj.hasOwnProperty("foo"); Object.prototype.hasOwnProperty.call(myObj, "foo"); consulting training design debugging wintellect.com
- 15. Parameters … morelike “Guidelines” var myFunc = function(something) { console.log(something); return 1; }; myfunc(); myFunc('test'); myFunc(myFunc); myFunc('test', myFunc); var myFunc = function() { console.log(Array.prototype.slice.call(arguments)); }; myFunc(); myFunc('test', 2); consulting training design debugging wintellect.com
- 16. Scope is nota Block Party var foo = 42; function test() { foo = 21; console.log(foo); }; test(); foo; var foo = 42; function test() { var foo = 21; console.log(foo); }; test(); foo; for(var i = 0; i < 10; i++) { setTimeout(function() { console.log(i);}, 1000);}; for (var i = 0; i < 10; i++) { (function(e) { setTimeout(function() { console.log(e); }, 1000); })(i); }; consulting training design debugging wintellect.com
- 17. Arrays have SplitPersonalities var list = [1,2,3,4,5,6]; list; list.length; list.length = 2; list; var list = new Array(1,2,3); list; var list = new Array(3); list; consulting training design debugging wintellect.com
- 18. Return to Sender (function() { return { foo: "bar" } })(); (function() { return { foo: "bar" } })(); consulting training design debugging wintellect.com
- 19. Return to Sender (function() { return { foo: "bar" }; })(); (function() { return; { foo: "bar" }; })(); consulting training design debugging wintellect.com
- 20. Can you Spotthe Error? var myString = "this is a multi-line string if you know what I mean"; var myString = "this is another multi-line string if you know what I mean"; consulting training design debugging wintellect.com
- 21. Who Knows Howto Count? for (var x = 0; x < 5; x++) { console.log(x); } for (var x = 0; x < 5; ++x) { console.log(x); } consulting training design debugging wintellect.com
- 22. Can You Guessthe Result? (function() { logMe(); var logMe = function() { console.log('Welcome to Devscovery.'); }; logMe(); function logMe() { console.log('Devscovery is a great place to be.'); } logMe(); console.log(parseInt('0114602653')); })(); consulting training design debugging wintellect.com
- 23. Can You Guessthe Result? Variable declaration was hoisted (function() { Function declaration was hoisted var logMe; function logMe() { console.log('Devscovery is a great place to be.'); } logMe(); logMe = function() { console.log('Welcome to Devscovery.'); } parseInt assumes Octal logMe(); logMe(); console.log(parseInt('0114602653')); })(); consulting training design debugging wintellect.com
- 24. The Good • JSLint / JSHint – personal style is for fashion, not code • jQuery – one API to bind them all • JSON and Web API – flexible information on demand • Twitter Bootstrap – one layout to rule them all • Underscore.js – the Swiss army knife of JavaScript • Backbone.js – MVC on the client • RequireJS – dependency resolution • MVVM (for example, Kendo UI) – “Gotta keep „em separated” • Amplify.js – publisher/subscriber for the client • … and many more great projects we won‟t have time to discuss today consulting training design debugging wintellect.com
- 25. Questions? Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.com consulting training design debugging wintellect.com
Editor's Notes
- #10 false.toString();[1,2,3].toString();"2".toString();2.toString(); 02.toString();2 .toString();
- #11 var one = 1;one;typeof one;var two = '2',two;typeof two;var three = one + two;three;typeof three; var three = Number(one) + Number(two);typeof three;three;var one = [1,2,3];one;typeof one;var two = ['1', '2', '3']two;typeof two;one[0] == two[0];one[0] === two[0];var three = one + two;typeof three;three;var three = one.concat(two);three;typeof three;
- #12 varmyObj = { foo : 1, Bar: 2 };var result = myObj.foo + myObj.bar;typeof result;result;
- #13 null;undefined;null == undefined;null === undefined;typeof null;typeof undefined;
- #14 varmyObj = { foo : 1, bar : 2 };myObj;myObj.foo = undefined;myObj;delete myObj.foo;
- #15 varmyObj = { foo : 1 };myObj.hasOwnProperty("foo");myObj.hasOwnProperty = function(args) { return false; };myObj.hasOwnProperty("foo");Object.prototype.hasOwnProperty.call(myObj, "foo");
- #16 varmyFunc = function(something) { console.log(something); return 1; };myfunc();myFunc('test');myFunc(myFunc);myFunc('test', myFunc);varmyFunc = function() { console.log(Array.prototype.slice.call(arguments)); };myFunc();myFunc('test', 2);
- #17 var foo = 42;function test() { foo = 21; console.log(foo); };test();foo;(clear the screen) var foo = 42;function test() { var foo = 21; console.log(foo); };test();foo; for(vari = 0; i < 10; i++) { setTimeout(function() { console.log(i);}, 1000);};for (vari = 0; i < 10; i++) { (function(e) { setTimeout(function() { console.log(e); }, 1000); })(i); };
- #18 var list = [1,2,3,4,5,6];list;list.length;list.length = 2;list;var list = new Array(1,2,3);list;var list = new Array(3);list;
- #19 (function() { return { foo: "bar" }})(); (function() { return { foo: "bar" }})();
- #21 varmyString = "this is a multi-line string \\ if you know what I mean"; varmyString = "this is another multi-line string \\ if you know what I mean";
- #22 for (var x = 0; x < 5; x++) { console.log(x); }for (var x = 0; x < 5; ++x) { console.log(x);}
- #23 (function() {logMe();varlogMe = function() { console.log('Welcome to Devscovery.'); };logMe(); function logMe() { console.log('Devscovery is a great place to be.'); }logMe(); console.log(parseInt('0114602653'));})();