Enterprise javascriptsession1

  • 290 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
290
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
16
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Enterprise JavaScript Session 1 - JavaScriptWednesday, November 7, 12
  • 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. Today’s Agenda • JavaScript • Quick Look • Functions • Objects • Closures • EventsWednesday, 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
  • 5. Why is JavaScript So Important?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 JavaScriptWednesday, 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 YouWednesday, November 7, 12
  • 10. Why is Good JavaScript So Hard To Do?Wednesday, November 7, 12
  • 11. It’s Your Fault!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 YouWednesday, 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 WeirdnessWednesday, 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, withWednesday, November 7, 12
  • 16. Keywords Not Used class, enum, export, extends, import, super, implements, interface, let, package, private, protected, public, static, yieldWednesday, 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.3Wednesday, November 7, 12
  • 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. typeof • Returns a string that identifies a type • Unfortunately it is broken in subtle waysWednesday, November 7, 12
  • 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. 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. General Weirdness • Coercion • Hoisting • Semicolon InsertionWednesday, 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 StellarWednesday, 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 FunctionWednesday, 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 FunctionsWednesday, 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 DynamicWednesday, November 7, 12
  • 30. Anonymous Functions • Function Don’t Need To Have A Name • Can Help Minimize Global Space PollutionWednesday, 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 ItselfWednesday, 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 LibrariesWednesday, 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 DirectlyWednesday, 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 ObjectsWednesday, 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 NameWednesday, 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.prototypeWednesday, 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 JavaScriptWednesday, November 7, 12
  • 43. Function ObjectsWednesday, November 7, 12
  • 44. Closures • Defined • Explained • Cautions • ExamplesWednesday, 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] - WikipediaWednesday, 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 createdWednesday, November 7, 12
  • 47. Closure Explained • Allows for the Creation of Complex JavaScript Objects • Can Simulate Many of the Features of Other LanguagesWednesday, 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 EffectsWednesday, 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
  • 51. Events • Browser Events • Creating Events • Handling EventsWednesday, 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 GoodWednesday, 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 objectWednesday, November 7, 12
  • 56. Summary • Functions • Objects • Closures • EventsWednesday, November 7, 12