2. Hi, I’m Troy
• Developing software Since 1979
• Initially Game Software in Assembly (6502
and x86)
• Currently JavaScript, C#, Java, Objective-C
• rockncoder@gmail.com
Wednesday, November 7, 12
4. JavaScript
• Why is JavaScript So Important?
• The Quick History of JavaScript
• Why JavaScript Sucks?
• Why is Good JavaScript So Hard to Do?
• Why is JavaScript Beautiful?
Wednesday, November 7, 12
6. Why is JavaScript So
Important?
• It is the Language of the Internet
• It is Everywhere
• Browser
• Server (Node.js)
• Mobile (PhoneGap, Titanium)
• Desktop (WinJS)
Wednesday, November 7, 12
7. The Quick History of
JavaScript
• First version built in 10 days by Brendan
Eich and named LiveScript
• Influenced greatly by Scheme
• Marketing won over Engineering
• Changed into a curly brace language
• Renamed to JavaScript
Wednesday, November 7, 12
8. Scheme
;The first program
(begin
(display "Hello, World!")
(newline))
Wednesday, November 7, 12
9. Why JavaScript Sucks?
• Its Use of Global Variables
• Strange Scoping
• It Thinks It Is Smarter Than You
Wednesday, November 7, 12
10. Why is Good JavaScript
So Hard To Do?
Wednesday, November 7, 12
12. Why is Good JavaScript
So Hard To Do?
• Most Engineers Don’t Bother to Learn It
• It is Changed not Embraced
• The Page Load Has Protected You
Wednesday, November 7, 12
13. Why is JavaScript
Beautiful?
• It is a Functional Language - Closer to Lisp
and Scheme than Java or C
• First Class Functions
• Dynamic Objects
• Loose Typing
• and more...
Wednesday, November 7, 12
14. Quick Look
• Keywords You Never Knew
• Tricks and Traps
• General Weirdness
Wednesday, November 7, 12
15. Keywords
• JavaScript has Surprisingly Few Keywords
(only 26 to be exact)
• break, case, catch, continue, debugger,
default, delete, do, else, finally, for, function,
if, in, instanceof, new, return, switch, this,
throw, try, typeof, var, void, while, with
Wednesday, November 7, 12
16. Keywords Not Used
class, enum, export, extends, import, super,
implements, interface, let, package, private,
protected, public, static, yield
Wednesday, November 7, 12
17. Keywords Not Used
• Can’t be used as variables or parameters
• But can be used Properties or Keys
• Legal Uses:
a.import
a["import"]
a = { import: "test" }
• Illegal Use: import()
function {}
Wednesday, November 7, 12
18. Tricks and Traps
• parseInt
• typeof
• For-In
• 0.1 + 0.2 !== 0.3
Wednesday, November 7, 12
19. parseInt
• parseInt Has Built-in Support for Octal
• It Can Cause Subtle Bugs
• Always Use the Optional 2nd Parameter,
Base
Wednesday, November 7, 12
20. typeof
• Returns a string that identifies a type
• Unfortunately it is broken in subtle ways
Wednesday, November 7, 12
21. For-In
• Lots of C# and Java Mistake This For-Each
• Doesn’t work the same
• Order isn’t guaranteed
Wednesday, November 7, 12
22. 0.1 + 0.2 !== 0.3
• JavaScript has No Separate Types for
Integer and Floating Point
• Uses IEEE 754
• Not Very Accurate
Wednesday, November 7, 12
23. General Weirdness
• Coercion
• Hoisting
• Semicolon Insertion
Wednesday, November 7, 12
24. General Weirdness
• When the Internet Was Young, Pages were
Badly Coded
• Both DOM and JavaScript Interpreter, Tried
to Correct Bad Code
• The Results Were Less Than Stellar
Wednesday, November 7, 12
25. Coercion
• Attempts to Force Two Variables to Be the
Same Type
• Unfortunately the Results are Illogical
• Always Use === and !==
• Never Use == or !=
Wednesday, November 7, 12
26. Hoisting
• JavaScript is Function Scoped
• Variable have Two Creation Steps,
Declaration & Assignment
• Variables always Declared at the beginning
of a Function
Wednesday, November 7, 12
27. Semicolon Insertion
• Programmers Had a Bad Habit of
Forgetting Semicolons
• So JavaScript Would Put It In Automatically
• How Could That Be Bad?
Wednesday, November 7, 12
28. Function Power!
• Why Functions in JavaScript are so
Powerful
• Anonymous Functions
• Immediate Functions
• Constructor Functions
Wednesday, November 7, 12
29. Why Functions in
JavaScript are so Powerful
• They are First Class Objects
• They Can Be Treated Like Any Other
Object
• They Can Make Your Code Dynamic
Wednesday, November 7, 12
30. Anonymous Functions
• Function Don’t Need To Have A Name
• Can Help Minimize Global Space Pollution
Wednesday, November 7, 12
31. Anonymous Functions
function () {
/* code goes here */
}
Wednesday, November 7, 12
32. Immediate Functions
• Functions Are Normally Only Executed
When Called
• It is Possible To Create A Function Which
Executes Itself
Wednesday, November 7, 12
33. Immediate Functions
function superFunction () {
/* code goes here */
} ();
Wednesday, November 7, 12
34. Anonymous/Immediate Function
• Has No Name
• Immediately Executed
• Used Frequently to Create a Namespace
• Used Frequently in JS Libraries
Wednesday, November 7, 12
35. Anonymous/Immediate Function
function () {
// nothing inside of the function
// can be seen on the outside
}();
Wednesday, November 7, 12
36. Constructor Functions
• Functions Can Be Used to Create Objects
• A Function Used as a Constructor must use
the operator “new”
• Must Not Be Called Directly
Wednesday, November 7, 12
37. Constructor Functions
function Point (x, y) {
this.x = x;
this.y = y;
}
var location = new Point(2, 4);
Wednesday, November 7, 12
38. Objects
• Object Literals
• Arrays vs. Objects
• Function Objects
• Classical Objects to JavaScript Objects
Wednesday, November 7, 12
39. Object Literals
• A pair of curly braces surrounding name/
value pairs
• Can Appear Anywhere an Expression Can
• The Property’s Name Can Be Any String
• Quotes Only Need When The Name Is
Not A Legal Variable Name
Wednesday, November 7, 12
40. Object Literals
var empty = {};
var full = {
“first-name”: “Alan”,
“last-name”: “Turing”
};
Wednesday, November 7, 12
41. Arrays vs. Objects
• Arrays Are Not True Arrays
• Sort of Special Kind of Object Literal
• Both Can Mix Types
• Not The Same Though
• Arrays Inherit From Array.prototype
• Objects Inherit From Object.prototype
Wednesday, November 7, 12
42. Classical Objects to
JavaScript Objects
• JavaScript Objects are Always Dynamic
• New Properties Can Always Be Assigned
• There Is No Class In JavaScript
Wednesday, November 7, 12
45. Closure Defined
In computer science, a closure is a function
or reference to a function together with a
referencing environment—a table storing a
reference to each of the non-local variables
(also called free variables) of that function.[1]
- Wikipedia
Wednesday, November 7, 12
46. Closure Defined
When an inner function has a longer lifetime
than its outer function and retains access to
the context in which it was created
Wednesday, November 7, 12
47. Closure Explained
• Allows for the Creation of Complex
JavaScript Objects
• Can Simulate Many of the Features of
Other Languages
Wednesday, November 7, 12
48. Closure Example
var displayClosure = function() {
var count = 0;
return function () {
return ++count;
};
}
Wednesday, November 7, 12
49. Closure Cautions
• Closures Have Access to the Variable, Not a
Copy
• Closures Can Lead to Memory Leaks
• Beware of Unintended Side Effects
Wednesday, November 7, 12
50. Closure With A
Memory Leak
// Can’t be garbage collected
function foo(element, a, b) {
element.onclick = function() {
/* uses a and b */
};
}
Wednesday, November 7, 12
52. jQuery
Until rather recently, differences in the way
browsers implemented events made it
painful to code these without using a library
like jQuery. Even today, if you have to
support legacy browsers, I recommend that
you use a library too.
Wednesday, November 7, 12
53. Browser Events
• The Kind Most JavaScript Programmers
Think Of
• Usually Occur as a Response to an Action
• load, click, keydown, etc.
Wednesday, November 7, 12
54. Creating Events
• You Can Also Implement Your Own Events
• This Allows Your Code to Be Loosely
Coupled
• Loosely Coupled is Good
Wednesday, November 7, 12
55. Handling Events
• Events are Either Bound to a DOM
Element such as a <button> or <a>
• Or to the Browser Itself via the window
object
Wednesday, November 7, 12