Enterprise javascriptsession1

Enterprise JavaScript
Session 1 - JavaScript

Wednesday, November 7, 12

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


Today’s Agenda
• JavaScript
• Quick Look
• Functions
• Objects
• Closures
• Events

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?


Why is JavaScript So
Important?


Why is JavaScript So
Important?
• It is the Language of the Internet
• It is Everywhere
• Browser
• Server (Node.js)
• Mobile (PhoneGap, Titanium)
• Desktop (WinJS)


The Quick History of
JavaScript
• First version built in 10 days by Brendan
Eich and named LiveScript
• Inﬂuenced greatly by Scheme
• Marketing won over Engineering
• Changed into a curly brace language
• Renamed to JavaScript

Scheme
;The first program
(begin
(display "Hello, World!")
(newline))


Why JavaScript Sucks?
• Its Use of Global Variables
• Strange Scoping
• It Thinks It Is Smarter Than You


Why is Good JavaScript
So Hard To Do?


It’s Your Fault!


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


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...


Quick Look
• Keywords You Never Knew
• Tricks and Traps
• General Weirdness


Keywords
• JavaScript has Surprisingly Few Keywords
(only 26 to be exact)
• break, case, catch, continue, debugger,
default, delete, do, else, ﬁnally, for, function,
if, in, instanceof, new, return, switch, this,
throw, try, typeof, var, void, while, with


Keywords Not Used
class, enum, export, extends, import, super,
implements, interface, let, package, private,
protected, public, static, yield


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 {}


Tricks and Traps
• parseInt
• typeof
• For-In
• 0.1 + 0.2 !== 0.3


parseInt
• parseInt Has Built-in Support for Octal
• It Can Cause Subtle Bugs
• Always Use the Optional 2nd Parameter,
Base


typeof
• Returns a string that identiﬁes a type
• Unfortunately it is broken in subtle ways


For-In
• Lots of C# and Java Mistake This For-Each
• Doesn’t work the same
• Order isn’t guaranteed


0.1 + 0.2 !== 0.3
• JavaScript has No Separate Types for
Integer and Floating Point
• Uses IEEE 754
• Not Very Accurate


General Weirdness
• Coercion
• Hoisting
• Semicolon Insertion


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


Coercion
• Attempts to Force Two Variables to Be the
Same Type
• Unfortunately the Results are Illogical
• Always Use === and !==
• Never Use == or !=


Hoisting
• JavaScript is Function Scoped
• Variable have Two Creation Steps,
Declaration & Assignment
• Variables always Declared at the beginning
of a Function


Semicolon Insertion
• Programmers Had a Bad Habit of
Forgetting Semicolons
• So JavaScript Would Put It In Automatically
• How Could That Be Bad?


Function Power!
• Why Functions in JavaScript are so
Powerful
• Anonymous Functions
• Immediate Functions
• Constructor Functions


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


Anonymous Functions
• Function Don’t Need To Have A Name
• Can Help Minimize Global Space Pollution


Anonymous Functions
function () {
/* code goes here */
}


Immediate Functions
• Functions Are Normally Only Executed
When Called
• It is Possible To Create A Function Which
Executes Itself


Immediate Functions
function superFunction () {
/* code goes here */
} ();


Anonymous/Immediate Function

• Has No Name
• Immediately Executed
• Used Frequently to Create a Namespace
• Used Frequently in JS Libraries


Anonymous/Immediate Function

function () {
// nothing inside of the function
// can be seen on the outside
}();


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


Constructor Functions
function Point (x, y) {
this.x = x;
this.y = y;
}
var location = new Point(2, 4);


Objects
• Object Literals
• Arrays vs. Objects
• Function Objects
• Classical Objects to JavaScript Objects


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


Object Literals
var empty = {};
var full = {
“first-name”: “Alan”,
“last-name”: “Turing”

};


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


Classical Objects to
JavaScript Objects
• JavaScript Objects are Always Dynamic
• New Properties Can Always Be Assigned
• There Is No Class In JavaScript


Function Objects


Closures
• Deﬁned
• Explained
• Cautions
• Examples


Closure Deﬁned
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


Closure Deﬁned
When an inner function has a longer lifetime
than its outer function and retains access to
the context in which it was created


Closure Explained
• Allows for the Creation of Complex
JavaScript Objects
• Can Simulate Many of the Features of
Other Languages


Closure Example
var displayClosure = function() {
var count = 0;
return function () {
return ++count;
};
}


Closure Cautions
• Closures Have Access to the Variable, Not a
Copy
• Closures Can Lead to Memory Leaks
• Beware of Unintended Side Effects


Closure With A
Memory Leak
// Can’t be garbage collected
function foo(element, a, b) {
element.onclick = function() {
/* uses a and b */
};
}


Events
• Browser Events
• Creating Events
• Handling Events


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.


Browser Events
• The Kind Most JavaScript Programmers
Think Of
• Usually Occur as a Response to an Action
• load, click, keydown, etc.


Creating Events
• You Can Also Implement Your Own Events
• This Allows Your Code to Be Loosely
Coupled
• Loosely Coupled is Good


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


Summary
• Functions
• Objects
• Closures
• Events


Enterprise javascriptsession1

Related slideshows

More Related Content

Enterprise javascriptsession1