Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ALL OF JAVASCRIPT
George Mauer
RATE ME ON SPEAKERRATE
http://tinyurl.com/0811-brdnug
 Owner of Humble Pi Consulting
 Current senior developer at Surge
 Former Senior Software
Developer at EPS Software
 M...
12:00 PM CST Thursdays on Livemeeting
www.virtualbrownbag.com
Twitter: @virtualbrownbag
Javascript is….
 Actually called ECMAScript
 Why Javascript?
Most popular language
Lightweight conceptually
It will m...
I want it!
 You got it…in your browser
 Use developer add-ons
 Chrome (Ctrl+Shift+J)
 IE (F12)
 Firefox
 Web Develop...
In the browser Javascript interacts with the
Document Object Model
Browser’s interpretation of HTML
I wanna…use it?
Your script in the page
 <script> tag
 Inline
 Or Link
 Another HTTP request is made and the script file is downloaded...
Syntax – Javascript is NOT Java
 No type declaration
 var someInt = 123
 console.log(someInt)
 Strings use “ or ‘
 Ye...
Control Structures
 Yes, there are
 exceptions and try…catch blocks
 do…while loops
 if and switch statements
 No, we...
Concept #1 – Objects as Hashes
 No such thing as
classes, just objects
 So there’s just
anonymous objects
 Object Liter...
Concept #1 – Objects as Hashes
 Objects ARE Hashes/Dictionaries
myObject.propertyName == myObject[“propertyName”]
 Use c...
Functions
 Use the function
keyword
 No type information
on parameters
 All functions return
something (though it
might...
Concept #2 – First Class Functions
 Functions are objects
 Can be stored in variables
 Or parameters to other functions...
Concept #3 – Loose Typing
 Really there are types
Strings, Integers, floats
But you can write whatever you
want
 JS ha...
Concept #3 – Loose Typing
 Loose means coercions on the spot
 This can get wonky
 1+2+"3" == "33“
 "1"+2+3 == "33“
 2...
Concept #4 – Closures
 Addresses one of the biggest problems –
global scope
 Functions can be nested inside each other
...
Concept #4 – Closures
 Self-executing
functions solve
global scope
issue
var someFunc = function() {
//stuff
}
someFunc()...
Public? Private? Static?
We got you
Concept #4 – Closures
Lots of variations on this module pattern
Concept #5 – Prototypes
 Javascript is object-oriented and has no classes!
 Prototype inheritance
 Simpler – each objec...
Concept #5 – Prototypes: new
 Javascript has a ‘new’ keyword
 Very different from C# new
 You don’t really need to use ...
What is JSON?
 A subset of Javascript for transporting data
 Functionally equivalent to XML
 But way more succinct
 Li...
Cross-Domain Ajax
 I go to amazon.com and log in
 My browser stores information (cookies)
to identify me to Amazon
 I t...
Same Origin Policy
 Browsers limit your ability to request resources across
domains
 In general you can request and use ...
Cross-Domain Solutions
 Display data from other domains in iframes
 Cannot use that data
 Do all queries to other domai...
Odds and Ends – Jasmine
 Testing is even more important in dynamic
languages
 No compiler to catch errors
 Easy to scre...
Odds and Ends – Coffeescript
 Lightweight Javascript compiler that removes
the suck
 Gets rid of the function keyword
 ...
Why Libraries?
 Mismatches in browser implementations
 The standard DOM interface is awful
 Internet Explorer <8 sucks
...
Some Resources
 Douglas Crockford’s JavaScript the Good Parts
 Video
 Mozilla Developer Center – by far the best docume...
That Web 2.0 thing? Yeah, that.
Let’s talk about AJAX
HTTP Model
 Problems
 Refresh is ugly
 Unnecessary bandwith
 The operation is user triggered
 Solution
 Use javascri...
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 t...
More Javascript - Prototypes
 Javascript is object-oriented and has no classes!
 Prototype inheritance
 Simpler – each ...
What’s new?
 Javascript has a ‘new’ keywoad
 But no traditional inheritance
 You don’t really need to use ‘new’ for OO ...
What’s this?
 Javascript has the ‘this’ keyword
 Use it to refer to the current scope / context
 Sort of
 Lots of cave...
Odds and Ends – RegEx
 Traditionally more important in dynamic languages
 Two ways to create
var r1 = /^a+./;
var r2 = n...
Odds and Ends – XSS
 Cross Site Scripting – someone causes their
Javascript to run on your site for other users
 Dangero...
Javascript Weirdness - Hoisting
 Variable declarations are
moved to the top of the scope
 Function declarations are
crea...
Javascript Weirdness
 for..in loops through all keys on hash / properties
on object
 Including those in the prototype ch...
Javascript Weirdness
 String Duality
 Native and object representations of strings
 typeof comparison won’t always work...
All of Javascript
Upcoming SlideShare
Loading in …5
×

All of Javascript

0 views

Published on

Published in: Art & Photos, Technology
  • Be the first to comment

All of Javascript

  1. 1. ALL OF JAVASCRIPT George Mauer RATE ME ON SPEAKERRATE http://tinyurl.com/0811-brdnug
  2. 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 gmauer@gmail.com @togakangaroo http://georgemauer.net/blog About Me
  3. 3. 12:00 PM CST Thursdays on Livemeeting www.virtualbrownbag.com Twitter: @virtualbrownbag
  4. 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. 5. I want it!  You got it…in your browser  Use developer add-ons  Chrome (Ctrl+Shift+J)  IE (F12)  Firefox  Web Development Helper  Enable Console and we’re interactive
  6. 6. In the browser Javascript interacts with the Document Object Model Browser’s interpretation of HTML I wanna…use it?
  7. 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. 8. Syntax – Javascript is NOT Java  No type declaration  var someInt = 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. 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  var someString = “alert(‘javascript!’)”; eval(someString);  (There totally is, but shhh…)  Semi-colons are optional…ish
  10. 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. 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. 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. 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. 14. 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
  15. 15. 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…
  16. 16. Concept #4 – Closures  Addresses one of the biggest problems – global scope  Functions can be nested inside each other  Great for helper functions  Scope works exactly as you instinctively think it would  Most of the time
  17. 17. Concept #4 – Closures  Self-executing functions solve global scope issue var someFunc = function() { //stuff } someFunc(); (function() { //stuff })  Shorten to
  18. 18. Public? Private? Static? We got you Concept #4 – Closures Lots of variations on this module pattern
  19. 19. 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
  20. 20. 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
  21. 21. 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!
  22. 22. Cross-Domain Ajax  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!
  23. 23. 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 Haack on a simple exploit with this
  24. 24. 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! myMethod({name: ‘George’}) Always think twice when sending secure data!
  25. 25. 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
  26. 26. 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)
  27. 27. 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
  28. 28. Some Resources  Douglas Crockford’s JavaScript 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
  29. 29. That Web 2.0 thing? Yeah, that. Let’s talk about AJAX
  30. 30. 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
  31. 31. 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() { var firstName = 'Fred'; function changeName() { firstName = 'Jim'; lastName = 'Halpern'; } changeName(); } doStuff(); firstName; // undefined lastName; // Halpern – huh? window.lastName; // Halpern – uh oh! (function() { …doWhatever… })();
  32. 32. 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!
  33. 33. 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); var sal = 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");
  34. 34. 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
  35. 35. 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
  36. 36. 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!
  37. 37. 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); }
  38. 38. 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(var i=0; i<arr.length; ++i) { }  Bad!  for(var i=0, len=arr.length; i<len; ++i) { }  OK
  39. 39. 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)

×