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. 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
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
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. 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. 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. 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. 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. 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. Concept #4 – Closures
Self-executing
functions solve
global scope
issue
var someFunc = function() {
//stuff
}
someFunc();
(function() {
//stuff
})
Shorten to
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. 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. 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. 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. 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. 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. 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. 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. 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. 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.
30. That Web 2.0 thing? Yeah, that.
Let’s talk about AJAX
31. 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
32. 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…
})();
33. 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!
34. 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");
35. 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
36. 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
37. 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!
38. 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);
}
39. 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
40. 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)