Enterprise JavaScript                             Session 1 - JavaScriptWednesday, November 7, 12
Hi, I’m Troy                   • Developing software Since 1979                   • Initially Game Software in Assembly (6...
Today’s Agenda                   • JavaScript                   • Quick Look                   • Functions                ...
JavaScript                   • Why is JavaScript So Important?                   • The Quick History of JavaScript        ...
Why is JavaScript So                               Important?Wednesday, November 7, 12
Why is JavaScript So                               Important?                   • It is the Language of the Internet      ...
The Quick History of                             JavaScript                   • First version built in 10 days by Brendan ...
Scheme                      ;The first program                      (begin                            (display "Hello, Wor...
Why JavaScript Sucks?                   • Its Use of Global Variables                   • Strange Scoping                 ...
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        ...
Why is JavaScript                                Beautiful?                   • It is a Functional Language - Closer to Li...
Quick Look                   • Keywords You Never Knew                   • Tricks and Traps                   • General We...
Keywords                   • JavaScript has Surprisingly Few Keywords                            (only 26 to be exact)    ...
Keywords Not Used                      class, enum, export, extends, import, super,                      implements, inter...
Keywords Not Used                   • Can’t be used as variables or parameters                   • But can be used Propert...
Tricks and Traps                   • parseInt                   • typeof                   • For-In                   • 0....
parseInt                   • parseInt Has Built-in Support for Octal                   • It Can Cause Subtle Bugs         ...
typeof                   • Returns a string that identifies a type                   • Unfortunately it is broken in subtle...
For-In                   • Lots of C# and Java Mistake This For-Each                   • Doesn’t work the same            ...
0.1 + 0.2 !== 0.3                   • JavaScript has No Separate Types for                            Integer and Floating...
General Weirdness                   • Coercion                   • Hoisting                   • Semicolon InsertionWednesd...
General Weirdness                   • When the Internet Was Young, Pages were                            Badly Coded      ...
Coercion                   • Attempts to Force Two Variables to Be the                            Same Type               ...
Hoisting                   • JavaScript is Function Scoped                   • Variable have Two Creation Steps,          ...
Semicolon Insertion                   • Programmers Had a Bad Habit of                            Forgetting Semicolons   ...
Function Power!                   • Why Functions in JavaScript are so                            Powerful                ...
Why Functions in               JavaScript are so Powerful                   • They are First Class Objects                ...
Anonymous Functions                   • Function Don’t Need To Have A Name                   • Can Help Minimize Global Sp...
Anonymous Functions                      function () {                            /* code goes here */                    ...
Immediate Functions                   • Functions Are Normally Only Executed                            When Called       ...
Immediate Functions                      function superFunction () {                            /* code goes here */      ...
Anonymous/Immediate Function                   • Has No Name                   • Immediately Executed                   • ...
Anonymous/Immediate Function                      function () {                            // nothing inside of the functi...
Constructor Functions               • Functions Can Be Used to Create Objects               • A Function Used as a Constru...
Constructor Functions                      function Point (x, y) {                            this.x = x;                 ...
Objects                   • Object Literals                   • Arrays vs. Objects                   • Function Objects   ...
Object Literals                   • A pair of curly braces surrounding name/                            value pairs       ...
Object Literals                      var empty = {};                      var full = {                            “first-n...
Arrays vs. Objects                   • Arrays Are Not True Arrays                   • Sort of Special Kind of Object Liter...
Classical Objects to                             JavaScript Objects                   • JavaScript Objects are Always Dyna...
Function ObjectsWednesday, November 7, 12
Closures                   • Defined                   • Explained                   • Cautions                   • Example...
Closure Defined                      In computer science, a closure is a function                      or reference to a fu...
Closure Defined                      When an inner function has a longer lifetime                      than its outer funct...
Closure Explained                   • Allows for the Creation of Complex                            JavaScript Objects    ...
Closure Example                      var displayClosure = function() {                        var count = 0;              ...
Closure Cautions                   • Closures Have Access to the Variable, Not a                            Copy          ...
Closure With A                             Memory Leak                      // Can’t be garbage collected                 ...
Events                   • Browser Events                   • Creating Events                   • Handling EventsWednesday...
jQuery                      Until rather recently, differences in the way                      browsers implemented events...
Browser Events                   • The Kind Most JavaScript Programmers                            Think Of               ...
Creating Events                   • You Can Also Implement Your Own Events                   • This Allows Your Code to Be...
Handling Events                   • Events are Either Bound to a DOM                            Element such as a <button>...
Summary                   • Functions                   • Objects                   • Closures                   • EventsW...
Upcoming SlideShare
Loading in...5
×

Enterprise javascriptsession1

365

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
365
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Enterprise javascriptsession1

  1. 1. Enterprise JavaScript Session 1 - JavaScriptWednesday, November 7, 12
  2. 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.comWednesday, November 7, 12
  3. 3. Today’s Agenda • JavaScript • Quick Look • Functions • Objects • Closures • EventsWednesday, November 7, 12
  4. 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
  5. 5. Why is JavaScript So Important?Wednesday, November 7, 12
  6. 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. 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 JavaScriptWednesday, November 7, 12
  8. 8. Scheme ;The first program (begin (display "Hello, World!") (newline))Wednesday, November 7, 12
  9. 9. Why JavaScript Sucks? • Its Use of Global Variables • Strange Scoping • It Thinks It Is Smarter Than YouWednesday, November 7, 12
  10. 10. Why is Good JavaScript So Hard To Do?Wednesday, November 7, 12
  11. 11. It’s Your Fault!Wednesday, November 7, 12
  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 YouWednesday, November 7, 12
  13. 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. 14. Quick Look • Keywords You Never Knew • Tricks and Traps • General WeirdnessWednesday, November 7, 12
  15. 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, withWednesday, November 7, 12
  16. 16. Keywords Not Used class, enum, export, extends, import, super, implements, interface, let, package, private, protected, public, static, yieldWednesday, November 7, 12
  17. 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. 18. Tricks and Traps • parseInt • typeof • For-In • 0.1 + 0.2 !== 0.3Wednesday, November 7, 12
  19. 19. parseInt • parseInt Has Built-in Support for Octal • It Can Cause Subtle Bugs • Always Use the Optional 2nd Parameter, BaseWednesday, November 7, 12
  20. 20. typeof • Returns a string that identifies a type • Unfortunately it is broken in subtle waysWednesday, November 7, 12
  21. 21. For-In • Lots of C# and Java Mistake This For-Each • Doesn’t work the same • Order isn’t guaranteedWednesday, November 7, 12
  22. 22. 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
  23. 23. General Weirdness • Coercion • Hoisting • Semicolon InsertionWednesday, November 7, 12
  24. 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 StellarWednesday, November 7, 12
  25. 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. 26. Hoisting • JavaScript is Function Scoped • Variable have Two Creation Steps, Declaration & Assignment • Variables always Declared at the beginning of a FunctionWednesday, November 7, 12
  27. 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. 28. Function Power! • Why Functions in JavaScript are so Powerful • Anonymous Functions • Immediate Functions • Constructor FunctionsWednesday, November 7, 12
  29. 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 DynamicWednesday, November 7, 12
  30. 30. Anonymous Functions • Function Don’t Need To Have A Name • Can Help Minimize Global Space PollutionWednesday, November 7, 12
  31. 31. Anonymous Functions function () { /* code goes here */ }Wednesday, November 7, 12
  32. 32. Immediate Functions • Functions Are Normally Only Executed When Called • It is Possible To Create A Function Which Executes ItselfWednesday, November 7, 12
  33. 33. Immediate Functions function superFunction () { /* code goes here */ } ();Wednesday, November 7, 12
  34. 34. Anonymous/Immediate Function • Has No Name • Immediately Executed • Used Frequently to Create a Namespace • Used Frequently in JS LibrariesWednesday, November 7, 12
  35. 35. Anonymous/Immediate Function function () { // nothing inside of the function // can be seen on the outside }();Wednesday, November 7, 12
  36. 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 DirectlyWednesday, November 7, 12
  37. 37. Constructor Functions function Point (x, y) { this.x = x; this.y = y; } var location = new Point(2, 4);Wednesday, November 7, 12
  38. 38. Objects • Object Literals • Arrays vs. Objects • Function Objects • Classical Objects to JavaScript ObjectsWednesday, November 7, 12
  39. 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 NameWednesday, November 7, 12
  40. 40. Object Literals var empty = {}; var full = { “first-name”: “Alan”, “last-name”: “Turing” };Wednesday, November 7, 12
  41. 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.prototypeWednesday, November 7, 12
  42. 42. 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
  43. 43. Function ObjectsWednesday, November 7, 12
  44. 44. Closures • Defined • Explained • Cautions • ExamplesWednesday, November 7, 12
  45. 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] - WikipediaWednesday, November 7, 12
  46. 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 createdWednesday, November 7, 12
  47. 47. Closure Explained • Allows for the Creation of Complex JavaScript Objects • Can Simulate Many of the Features of Other LanguagesWednesday, November 7, 12
  48. 48. Closure Example var displayClosure = function() { var count = 0; return function () { return ++count; }; }Wednesday, November 7, 12
  49. 49. 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
  50. 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
  51. 51. Events • Browser Events • Creating Events • Handling EventsWednesday, November 7, 12
  52. 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. 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. 54. Creating Events • You Can Also Implement Your Own Events • This Allows Your Code to Be Loosely Coupled • Loosely Coupled is GoodWednesday, November 7, 12
  55. 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 objectWednesday, November 7, 12
  56. 56. Summary • Functions • Objects • Closures • EventsWednesday, November 7, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×