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

1,660 views
1,542 views

Published on

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

No Downloads
Views
Total views
1,660
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
34
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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)

×