• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Enterprise javascriptsession1
 

Enterprise javascriptsession1

on

  • 406 views

 

Statistics

Views

Total Views
406
Views on SlideShare
406
Embed Views
0

Actions

Likes
0
Downloads
13
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Enterprise javascriptsession1 Enterprise javascriptsession1 Presentation Transcript

    • Enterprise JavaScript Session 1 - JavaScriptWednesday, 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.comWednesday, November 7, 12
    • Today’s Agenda • JavaScript • Quick Look • Functions • Objects • Closures • EventsWednesday, November 7, 12
    • 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
    • Why is JavaScript So Important?Wednesday, November 7, 12
    • 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
    • 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 JavaScriptWednesday, November 7, 12
    • Scheme ;The first program (begin (display "Hello, World!") (newline))Wednesday, November 7, 12
    • Why JavaScript Sucks? • Its Use of Global Variables • Strange Scoping • It Thinks It Is Smarter Than YouWednesday, November 7, 12
    • Why is Good JavaScript So Hard To Do?Wednesday, November 7, 12
    • It’s Your Fault!Wednesday, November 7, 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 YouWednesday, November 7, 12
    • 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
    • Quick Look • Keywords You Never Knew • Tricks and Traps • General WeirdnessWednesday, November 7, 12
    • 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, withWednesday, November 7, 12
    • Keywords Not Used class, enum, export, extends, import, super, implements, interface, let, package, private, protected, public, static, yieldWednesday, November 7, 12
    • 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
    • Tricks and Traps • parseInt • typeof • For-In • 0.1 + 0.2 !== 0.3Wednesday, November 7, 12
    • parseInt • parseInt Has Built-in Support for Octal • It Can Cause Subtle Bugs • Always Use the Optional 2nd Parameter, BaseWednesday, November 7, 12
    • typeof • Returns a string that identifies a type • Unfortunately it is broken in subtle waysWednesday, November 7, 12
    • For-In • Lots of C# and Java Mistake This For-Each • Doesn’t work the same • Order isn’t guaranteedWednesday, November 7, 12
    • 0.1 + 0.2 !== 0.3 • JavaScript has No Separate Types for Integer and Floating Point • Uses IEEE 754 • Not Very AccurateWednesday, November 7, 12
    • General Weirdness • Coercion • Hoisting • Semicolon InsertionWednesday, November 7, 12
    • 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 StellarWednesday, November 7, 12
    • 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
    • Hoisting • JavaScript is Function Scoped • Variable have Two Creation Steps, Declaration & Assignment • Variables always Declared at the beginning of a FunctionWednesday, November 7, 12
    • 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
    • Function Power! • Why Functions in JavaScript are so Powerful • Anonymous Functions • Immediate Functions • Constructor FunctionsWednesday, November 7, 12
    • 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 DynamicWednesday, November 7, 12
    • Anonymous Functions • Function Don’t Need To Have A Name • Can Help Minimize Global Space PollutionWednesday, November 7, 12
    • Anonymous Functions function () { /* code goes here */ }Wednesday, November 7, 12
    • Immediate Functions • Functions Are Normally Only Executed When Called • It is Possible To Create A Function Which Executes ItselfWednesday, November 7, 12
    • Immediate Functions function superFunction () { /* code goes here */ } ();Wednesday, November 7, 12
    • Anonymous/Immediate Function • Has No Name • Immediately Executed • Used Frequently to Create a Namespace • Used Frequently in JS LibrariesWednesday, November 7, 12
    • Anonymous/Immediate Function function () { // nothing inside of the function // can be seen on the outside }();Wednesday, November 7, 12
    • Constructor Functions • Functions Can Be Used to Create Objects • A Function Used as a Constructor must use the operator “new” • Must Not Be Called DirectlyWednesday, November 7, 12
    • Constructor Functions function Point (x, y) { this.x = x; this.y = y; } var location = new Point(2, 4);Wednesday, November 7, 12
    • Objects • Object Literals • Arrays vs. Objects • Function Objects • Classical Objects to JavaScript ObjectsWednesday, November 7, 12
    • 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 NameWednesday, November 7, 12
    • Object Literals var empty = {}; var full = { “first-name”: “Alan”, “last-name”: “Turing” };Wednesday, November 7, 12
    • 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.prototypeWednesday, November 7, 12
    • Classical Objects to JavaScript Objects • JavaScript Objects are Always Dynamic • New Properties Can Always Be Assigned • There Is No Class In JavaScriptWednesday, November 7, 12
    • Function ObjectsWednesday, November 7, 12
    • Closures • Defined • Explained • Cautions • ExamplesWednesday, November 7, 12
    • 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] - WikipediaWednesday, November 7, 12
    • Closure Defined When an inner function has a longer lifetime than its outer function and retains access to the context in which it was createdWednesday, November 7, 12
    • Closure Explained • Allows for the Creation of Complex JavaScript Objects • Can Simulate Many of the Features of Other LanguagesWednesday, November 7, 12
    • Closure Example var displayClosure = function() { var count = 0; return function () { return ++count; }; }Wednesday, November 7, 12
    • Closure Cautions • Closures Have Access to the Variable, Not a Copy • Closures Can Lead to Memory Leaks • Beware of Unintended Side EffectsWednesday, November 7, 12
    • 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
    • Events • Browser Events • Creating Events • Handling EventsWednesday, November 7, 12
    • 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
    • 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
    • Creating Events • You Can Also Implement Your Own Events • This Allows Your Code to Be Loosely Coupled • Loosely Coupled is GoodWednesday, November 7, 12
    • Handling Events • Events are Either Bound to a DOM Element such as a <button> or <a> • Or to the Browser Itself via the window objectWednesday, November 7, 12
    • Summary • Functions • Objects • Closures • EventsWednesday, November 7, 12