Upload
togakangaroo
View
1.811
Download
0
Embed Size (px)
DESCRIPTION
Citation preview
ALL OF JAVASCRIPT
George Mauer
RATE ME ON SPEAKERRATEhttp://tinyurl.com/0811-brdnug
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
[email protected] @togakangaroo
http://georgemauer.net/blog
About Me
Join Us For the Virtual Brown Bag
12:00 PM CST Thursdays on Livemeeting
www.virtualbrownbag.comTwitter: @virtualbrownbag
Javascript is….
Actually called ECMAScriptWhy Javascript?
Most popular language Lightweight conceptually It will make your C# a lot better
All the cool kids are doing it
I want it!
You got it…in your browser Use developer add-ons
Chrome (Ctrl+Shift+J) IE (F12) Firefox
Web Development HelperFirebug
Enable Console and we’re interactive
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 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(…)
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
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
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?");
}
Concept #1 – Objects as Hashes
Objects ARE Hashes/DictionariesmyObject.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
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
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)
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
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…
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
Concept #4 – Closures
Self-executing functions solve global scope issue
var someFunc = function() {
//stuff
}
someFunc();
(function() {
//stuff
})
Shorten to
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 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
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
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!
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!
THE PROBLEM
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
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!
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
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)
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
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-brdnugwww.virtualbrownbag.com
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 javascript to fetch data and update the page when it is returned jQuery has some great helpers for this. Example
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…
})();
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!
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");
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
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 matchesr1.test(str); // Returns true if there is a matchstr.match(r1); //Returns an array of Matchesstr.search(r1); //Returns idx if there is a match or -1str.replace(r1); //Returns string with regex replacedstr.split(r1); //Returns an array of substrings
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!
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);}
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
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)