1. All of Javascript George Mauer Rate Me On SpeakerRate http://tinyurl.com/0811-brdnug

2. Owner of Humble Pi Consulting Current senior developer at Surge Former Senior Software Developer at EPS Software Member - VirtualBrownBag, VirtualAltNet, gnocode, PhpNOLA, RubyBayou Improv and sketch Comedy with www.NolaComedy.com http://georgemauer.net/blog @togakangaroo gmauer@gmail.com About Me

3. Join Us For the Virtual Brown Bag 12:00 PM CST Thursdays on Livemeeting www.virtualbrownbag.com Twitter: @virtualbrownbag

4. Javascript is…. Actually called ECMAScript Why Javascript? Most popular language Lightweight conceptually It will make your C# a lot better All the cool kids are doing it

5. I want it! You got it…in your browser Use developer add-ons Chrome (Ctrl+Shift+J) IE (F12) Firefox Web Development Helper Firebug Enable Console and we’re interactive

6. In the browser Javascript interacts with the Document Object Model Browser’s interpretation of HTML I wanna…use it?

7. Your script in the page <script> tag Inline Or Link Another HTTP request is made and the script file is downloaded Cached Order and download timing matters Words! Minification Bundling CDNs Global scope You have to be careful of the source For now let’s use console.log(…)

8. Syntax – Javascript is NOT Java No type declaration varsomeInt = 123 console.log(someInt) Strings use “ or ‘ Yes, there are exceptions and try…catch blocks do…while loops if and switch statements No, we will not talk about them Except the for loop There is no function to evaluate strings There is nothing to: eval(“alert(‘javascript!’)”); (There totally is, but shhh…) Semi-colons are optional…ish

9. Control Structures Yes, there are exceptions and try…catch blocks do…while loops if and switch statements No, we will not talk about them Except the for loop There is no function to varsomeString = “alert(‘javascript!’)”;eval(someString); (There totally is, but shhh…) Semi-colons are optional…ish

10. Concept #1 – Objects as Hashes No such thing as classes, just objects So there’s just anonymous objects Object Literal: Comma-separated, Colon denoted hash Trailing commas not allowed Nothing is immutable You can add properties Functions too! var person = { name: "Brian May", occupation: "Mucisian", who: function() { console.log(this.name+": I used to be in Queen") } }; person.phD = "Astronomy"; person.playMusic = function() { console.log("Is this the real life?"); }

11. Concept #1 – Objects as Hashes Objects ARE Hashes/Dictionaries myObject.propertyName == myObject[“propertyName”] Use console.dir() to explore objects Arrays Comma separated, Square brackets Elements in array can be of any type Arrays are objects

12. Functions Use the function keyword No type information on parameters All functions return something (though it might be undefined) When invoking parameters are always optional Do you care? function youLike(name) { if(typeof name === 'undefined') { console.error("I don’t know who to like"); return; } return 'I like ' + name; } console.log(youLike('fred')) // I like fred console.log(youLike())// I don’t know who to like // undefined

13. Concept #2 – First Class Functions Functions are objects Can be stored in variables Or parameters to other functions Functions can have properties! They are just objects that can be invoked. So how are they not objects? Functions are invokable That’s it (for now)

14. Function Closures Similar to lambdas in LINQ Great for helper functions It works exactly how you instinctually think it should Nest as many as you want Not visible outside of functions Anonymous functions can be assigned to variables vartellHistory = function () { var who; function warBrokeOut() { console.log('war broke out'); console.log('lots of '+who+' died'); } who = 'Cavemen'; console.log(who+' invented axes'); warBrokeOut(); who = 'Babylonians'; console.log(who+' invented laws'); warBrokeOut(); who = 'Greeks'; console.log( who+' invented democracy'); warBrokeOut(); warBrokeOut(); }

15. Concept #3 – Loose Typing Really there are types Strings, Integers, floats But you can write whatever you want JS has it covered: 99% of the time it just works

16. Concept #3 – Loose Typing Loose means coercions on the spot This can get wonky 1+2+"3" == "33“ "1"+2+3 == "33“ 2==false; === operator will prevent coercion and is recommend It’s weird but if you know what you’re doing…

17. Concept #4 – Closures Addresses one of the biggest problems – global scope Functions can be nested inside each other Scope works exactly as you instinctively think it would

18. Concept #4 – Closures Self-executing functions solve global scope issue varsomeFunc = function() { //stuff } someFunc(); //shorten to (function() { //stuff })

19. Public? Private? Static?We got you Concept #4 – Closures Lots of variations on this module pattern

20. Concept #5 – Prototypes Javascript is object-oriented and has no classes! Prototype inheritance Simpler – each object has a prototype object Flexible – can mimic class inheritance and more Remember: Every object is a hash Plus a [[prototype]] attribute (revealed in some browsers by the __proto__ property) Q: Do you have a cupOfSugar? Yes I do (object has cupOfSugar in the hash) No I don’t but let me ask Peter (object does not but Peter is the [[prototype]]) No I don’t (object does not and [[prototype]] is null) Can be used to emulate Class Inheritance Enables duck-typing, class-wide dynamicism, more! I recommend a style where you do not use this often

21. Concept #5 – Prototypes: new Javascript has a ‘new’ keyword Very different from C# new You don’t really need to use ‘new’ for OO in Javascript What does ‘new do’? All functions have a not null prototype property creates a function with the [[prototype]] set to the constructor function’s prototype property You can enforce ‘new’ Anti-intuitively works on functions but not objects Newer versions of Javascript (> 1.8.5) deprecate ‘new’ for Object.create(withPrototype) Constructor functions denoted via convention. Capitalize constructor functions camelCase non-constructor functions

22. What is JSON? A subset of Javascript for transporting data Functionally equivalent to XML But way more succinct Lingua franca for ajax data-exchange Twitter.com – look at the dev tools network tab JSON is parsed with JSON parser, not eval’ed!

23. Cross-Domain Ajax The probleM I go to amazon.com and log in My browser stores information (cookies) to identify me to Amazon I then go to evilpage.com Uses ajax to contact amazon.com My browser thinking the amazon session is still on sends my Amazon Amazon sends back secret information to evilpage.com!

24. Same Origin Policy Browsers limit your ability to request resources across domains In general you can request and use across domains Display images Run scripts Display iframe You cannot have programmatic access to these resources Analyze images from other domains in JS Get arbitrary scripts as a string Inspect cross-domain iframe’s DOM Resources for understanding: Eric Law on the policy Phil Haackon a simple exploit with this

25. Cross-Domain Solutions Display data from other domains in iframes Cannot use that data Do all queries to other domains server side Can much better control caching Protected better against format changes Takes up your bandwith JSONP Service returns and executes: Cross-domain script execution is ok Assumes you have a global method called myMethod Evaluated, not parsed like JSON Dangerous – if the site is compromised it can inject any script! Always think twice when sending secure data! myMethod({name: ‘George’})

26. Odds and Ends – Jasmine Testing is even more important in dynamic languages No compiler to catch errors Easy to screw up global state Jasmine is a lightweight testing framework Based on ruby’s rspec Really simple and easy to learn Sample specs from gim.ShannonGame

27. Odds and Ends – Coffeescript Lightweight Javascript compiler that removes the suck Gets rid of the function keyword Significant whitespace and no need for parens Postfix conditions (number = 42 if answer== true) Splats and object decomposition Comprehensions Easier inheritance setups Try it out Reverse compiler is a great learning tool Heavily influencing the future of Javascript (Harmony)

28. Why Libraries? Mismatches in browser implementations The standard DOM interface is awful Internet Explorer <8 sucks Unforeseen standards adopted (ie. CSS) Standardize these away jQuery, prototype, mootools, ext-js, yui, others Jsfiddle.net - Try them out

29. Some Resources Douglas Crockford’sJavaScript the Good Parts Video Mozilla Developer Center – by far the best documentation When searching for javascript help, add on “MDC” Introduction to javascript from MDC Javascript OO Javascript Garden Fascinating Elegant Code beginner series Hidden Features of Javascript on StackOverflow jsfiddle.net – In-browser js prototyping sandbox complete with syntax highlighting, formatting, javascript libraries inclusion, and code pasting for sharing Google Closure – how not to write javascript The console object API JSLint – Douglas Crockford’s syntax checker. Best explanation of the new keyword. Paul Irish Learns from jQuery source, and more jQuery API Reference Rate Me on SpeakerRate: http://tinyurl.com/0811-brdnug www.virtualbrownbag.com

31. That Web 2.0 thing? Yeah, that. Let’s talk about AJAX

32. HTTP Model Problems Refresh is ugly Unnecessary bandwith The operation is user triggered Solution Use javascript to fetch data and update the page when it is returned jQuery has some great helpers for this. Example

33. The Global Scope You don’t have to use var If you don’t, assignment bubbles up like you would think All the way to the global window object! So always use var Isolate yourself from global scope with self-executing functions Explanation of variables, properties, scopes function doStuff() { varfirstName = 'Fred'; function changeName() { firstName = 'Jim'; lastName = 'Halpern'; } changeName(); } doStuff(); firstName; // undefined lastName; // Halpern – huh? window.lastName; // Halpern – uh oh! (function() { …doWhatever… })();

34. More Javascript - Prototypes Javascript is object-oriented and has no classes! Prototype inheritance Simpler – each object has a prototype object Flexible – can mimic class inheritance and more Remember: Every object is a hash Plus a [[prototype]] attribute (revealed in some browsers by the __proto__ property) Q: Do you have a cupOfSugar? Yes I do (object has cupOfSugar in the hash) No I don’t but let me ask Peter (object does not but Peter is the [[prototype]]) No I don’t (object does not and [[prototype]] is null) Can be used to emulate Class Inheritance Enables duck-typing, class-wide dynamicism, more!

35. What’s new? Javascript has a ‘new’ keywoad But no traditional inheritance You don’t really need to use ‘new’ for OO in Javascript What does ‘new do’? All functions have a not null prototype property creates a function with the [[prototype]] set to the constructor function’s prototype property You can enforce ‘new’ Anti-intuitively works on functions but not objects Newer versions of Javascript (> 1.8.5) deprecate ‘new’ for Object.create(withPrototype) Constructor functions denoted via convention. Capitalize constructor functions camelCase non-constructor functions function createPerson(name, age) { return { name: name, age: age, toString: function() { return this.name + " is " + this.age + " years old“; } } } var bob= createPerson("bob", 39); varsal = createPerson("sal", 22); ------------------------------------------------------------- var Cat = function(catName) { this.catName = catName; }; Cat.prototype.meow = function() { console.log(this.catName+" says meow"); } var mittens = new Cat("Mittens"); var whiskers = new Cat("Whiskers");

36. What’s this? Javascript has the ‘this’ keyword Use it to refer to the current scope / context Sort of Lots of caveats It usually works how you think but double check Can also be substituted with function’s call() or apply() methods Can be useful for method reuse

37. Odds and Ends – RegEx Traditionally more important in dynamic languages Two ways to create var r1 = /^a+./; var r2 = new RegEx("^a+."); r1.exec(str); // Returns array of matches r1.test(str); // Returns true if there is a match str.match(r1); //Returns an array of Matches str.search(r1); //Returns idx if there is a match or -1 str.replace(r1); //Returns string with regex replaced str.split(r1); //Returns an array of substrings

38. Odds and Ends – XSS Cross Site Scripting – someone causes their Javascript to run on your site for other users Dangerous for: Comments / forums / twitter feeds where you can post things other people can see Search areas or GET urls where long user submissions can be embedded in a link Examples of simple XSS attacks How to prevent it: Ensure all user input reflected back is Html encoded Don’t place anything from GET requests on the page Be aware and think!

39. Javascript Weirdness - Hoisting Variable declarations are moved to the top of the scope Function declarations are created and declared in the same step At the top of the scope Function assignments are similar to variable declarations Consider declaring all variables in scope with one var statement var bob, joe, jill; var num = 56; function calc() { console.log(num); var num = 12; console.log(num); } function calc_isReally() { var num; console.log(num); num = 12; console.log(num); }

40. Javascript Weirdness for..in loops through all keys on hash / properties on object Including those in the prototype chain which isn’t very helpful Use hasOwnProperty() if this is not desired behavior Don’t use this to enumerate Arrays for loop – similar to for loop in c# or c++ Use it to loop through arrays But remember Array.length is a calculated property! for(vari=0; i<arr.length; ++i) { }  Bad! for(vari=0, len=arr.length; i<len; ++i) { }  OK

41. Javascript Weirdness String Duality Native and object representations of strings typeof comparison won’t always work Do you really need to check type? Really? parseInt(), parseFloat() are not so simple What should parseInt("010") return? Read the MDC docs when using built-in functions (there aren’t that many)