RJUG: 13-March-2012                                                                                © Copyright 2012, Softw...
RJUG: 13-March-2012                                                                                  © Copyright 2012, Sof...
RJUG: 13-March-2012                                                            © Copyright 2012, Software Alchemy         ...
RJUG: 13-March-2012                             © Copyright 2012, Software Alchemy                                   Examp...
RJUG: 13-March-2012                                           © Copyright 2012, Software Alchemy                          ...
RJUG: 13-March-2012                             © Copyright 2012, Software Alchemy                                   Struc...
RJUG: 13-March-2012                             © Copyright 2012, Software Alchemy                                   Prese...
RJUG: 13-March-2012                                          © Copyright 2012, Software Alchemy                           ...
RJUG: 13-March-2012                                                                              © Copyright 2012, Softwar...
RJUG: 13-March-2012                                                                                      © Copyright 2012,...
RJUG: 13-March-2012                                                  © Copyright 2012, Software Alchemy                   ...
RJUG: 13-March-2012                             © Copyright 2012, Software Alchemy                                   Scope...
RJUG: 13-March-2012                                       © Copyright 2012, Software Alchemy                              ...
RJUG: 13-March-2012                                            © Copyright 2012, Software Alchemy                         ...
RJUG: 13-March-2012                              © Copyright 2012, Software Alchemy                                   Data...
RJUG: 13-March-2012                                             © Copyright 2012, Software Alchemy                        ...
RJUG: 13-March-2012                                     © Copyright 2012, Software Alchemy                                ...
RJUG: 13-March-2012                                          © Copyright 2012, Software Alchemy                           ...
RJUG: 13-March-2012                                               © Copyright 2012, Software Alchemy                      ...
RJUG: 13-March-2012                                        © Copyright 2012, Software Alchemy                             ...
RJUG: 13-March-2012                                             © Copyright 2012, Software Alchemy                        ...
RJUG: 13-March-2012                                             © Copyright 2012, Software Alchemy                        ...
RJUG: 13-March-2012                                            © Copyright 2012, Software Alchemy                         ...
RJUG: 13-March-2012                                              © Copyright 2012, Software Alchemy                       ...
RJUG: 13-March-2012                                            © Copyright 2012, Software Alchemy                         ...
RJUG: 13-March-2012                                                                                          © Copyright 2...
RJUG: 13-March-2012                                     © Copyright 2012, Software Alchemy                                ...
RJUG: 13-March-2012                                       © Copyright 2012, Software Alchemy                              ...
RJUG: 13-March-2012                                        © Copyright 2012, Software Alchemy                             ...
RJUG: 13-March-2012                                             © Copyright 2012, Software Alchemy                        ...
RJUG: 13-March-2012                                                                © Copyright 2012, Software Alchemy     ...
RJUG: 13-March-2012                                                                   © Copyright 2012, Software Alchemy  ...
RJUG: 13-March-2012                                    © Copyright 2012, Software Alchemy                                 ...
RJUG: 13-March-2012                                                             © Copyright 2012, Software Alchemy        ...
RJUG: 13-March-2012                                            © Copyright 2012, Software Alchemy                         ...
RJUG: 13-March-2012                                                          © Copyright 2012, Software Alchemy           ...
RJUG: 13-March-2012                                            © Copyright 2012, Software Alchemy                         ...
RJUG: 13-March-2012                                                                    © Copyright 2012, Software Alchemy ...
RJUG: 13-March-2012                                         © Copyright 2012, Software Alchemy                            ...
RJUG: 13-March-2012                                                   © Copyright 2012, Software Alchemy                  ...
RJUG: 13-March-2012                                                © Copyright 2012, Software Alchemy                     ...
RJUG: 13-March-2012                                                © Copyright 2012, Software Alchemy                     ...
RJUG: 13-March-2012                                                                                           © Copyright ...
RJUG: 13-March-2012                                             © Copyright 2012, Software Alchemy                        ...
RJUG: 13-March-2012                                   © Copyright 2012, Software Alchemy                                  ...
RJUG: 13-March-2012                                        © Copyright 2012, Software Alchemy                             ...
RJUG: 13-March-2012                                            © Copyright 2012, Software Alchemy                         ...
RJUG: 13-March-2012                                 © Copyright 2012, Software Alchemy                                   C...
RJUG: 13-March-2012                                     © Copyright 2012, Software Alchemy                                ...
RJUG: 13-March-2012                                             © Copyright 2012, Software Alchemy                        ...
RJUG: 13-March-2012                                              © Copyright 2012, Software Alchemy                       ...
RJUG: 13-March-2012                                            © Copyright 2012, Software Alchemy                         ...
RJUG: 13-March-2012                                          © Copyright 2012, Software Alchemy                           ...
RJUG: 13-March-2012                                            © Copyright 2012, Software Alchemy                         ...
RJUG: 13-March-2012                                             © Copyright 2012, Software Alchemy                        ...
RJUG: 13-March-2012                              © Copyright 2012, Software Alchemy                                   Ajax...
RJUG: 13-March-2012                                              © Copyright 2012, Software Alchemy                       ...
RJUG: 13-March-2012                                                                                              © Copyrig...
RJUG: 13-March-2012                                            © Copyright 2012, Software Alchemy                         ...
RJUG: 13-March-2012                                              © Copyright 2012, Software Alchemy                       ...
RJUG: 13-March-2012                                          © Copyright 2012, Software Alchemy                           ...
RJUG: 13-March-2012                                                        © Copyright 2012, Software Alchemy             ...
RJUG: 13-March-2012                                                                                                     © ...
RJUG: 13-March-2012                                                                      © Copyright 2012, Software Alchem...
RJUG: 13-March-2012                                                                                        © Copyright 201...
RJUG: 13-March-2012                                                                 © Copyright 2012, Software Alchemy    ...
RJUG: 13-March-2012                                                                          © Copyright 2012, Software Al...
RJUG: 13-March-2012                                            © Copyright 2012, Software Alchemy                         ...
RJUG: 13-March-2012                                                                                   © Copyright 2012, So...
RJUG: 13-March-2012                                            © Copyright 2012, Software Alchemy                         ...
RJUG: 13-March-2012                                                                                              © Copyrig...
RJUG: 13-March-2012                                            © Copyright 2012, Software Alchemy                         ...
RJUG: 13-March-2012                                                  © Copyright 2012, Software Alchemy                   ...
RJUG: 13-March-2012                                           © Copyright 2012, Software Alchemy                          ...
RJUG: 13-March-2012                                            © Copyright 2012, Software Alchemy                         ...
RJUG: 13-March-2012                                                                                          © Copyright 2...
RJUG: 13-March-2012                                                                         © Copyright 2012, Software Alc...
RJUG: 13-March-2012                                         © Copyright 2012, Software Alchemy                            ...
RJUG: 13-March-2012                                                    © Copyright 2012, Software Alchemy                 ...
RJUG: 13-March-2012                                           © Copyright 2012, Software Alchemy                          ...
RJUG: 13-March-2012                               © Copyright 2012, Software Alchemy                                   Eve...
●                                                                button / MouseOver                                       ...
RJUG: 13-March-2012                                                                                                       ...
RJUG: 13-March-2012                                            © Copyright 2012, Software Alchemy                         ...
RJUG: 13-March-2012                                                © Copyright 2012, Software Alchemy                     ...
●                                                                 periodic event                                          ...
RJUG: 13-March-2012                                                                                                       ...
RJUG: 13-March-2012                                            © Copyright 2012, Software Alchemy                         ...
●                                                                 deferred event                                          ...
RJUG: 13-March-2012                                                                                                       ...
Introduction to JavaScript
Introduction to JavaScript
Introduction to JavaScript
Introduction to JavaScript
Introduction to JavaScript
Introduction to JavaScript
Upcoming SlideShare
Loading in...5
×

Introduction to JavaScript

1,656

Published on

JavaScript is lingua franca of the Web. It's pervasive and since 1999 a standard ( ECMAScript 262). Yes, there are other technologies you can use: Flash, Java Applets, Dart, but none of these have the overwhelming support and community that JavaScript does. Over the years it has been maligned as a poorly designed language but I will argue that it has just been misunderstood. This talk will focus on the fundamentals of the language and its integration with the browser, the DOM and server communication via JSON and Ajax.

In the talk Bryan will present:
* Language fundamentals
* Object-Oriented programming
* Functional programming
* DOM APIs
* Event model
* Odds and ends

Published in: Software, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,656
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
109
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduction to JavaScript

  1. 1. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Introduction to JavaScript Intro Odds & Ends Language Introduction to JavaScript Event Functional Model Programming OO DOM APIs Programming Bryan Basham Software Alchemy basham47@gmail.com http://www.linkedin.com/in/SoftwareAlchemistBryan Basham – Introduction to JavaScript Slide 1
  2. 2. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Introduction Web standards Separate of Concerns Intro Odds & Ends Language Introduction to JavaScript Event Functional Model Programming OO DOM APIs ProgrammingBryan Basham – Introduction to JavaScript Slide 2
  3. 3. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Web Standards ● Supported by most browsers and mobile devices ● So what? – Abundant skilled developers ● Who cares? – Better accessibility and usability – Good tools – “Write once, publish everywhere” ● :-) well almost, of course there is always IEBryan Basham – Introduction to JavaScript Slide 3
  4. 4. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Example PageBryan Basham – Introduction to JavaScript Slide 4
  5. 5. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Separation of Concerns ● What to separate? – Structure – Presentation (aka style) – Behavior ● Unobtrusive JavaScript ● So what? – Clarity of code – Easy to modify and replace look and feel (LnF)Bryan Basham – Introduction to JavaScript Slide 5
  6. 6. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Structure ● XHTML (or HTML v5) ● Markup validation ● Semantic (not presentational) structure <body> <div id=header> <h1>MyCorp</h1> <ul id=main_navigation_list> <li><a href=...>Exams</a></li> <li><a href=...>Surveys</a></li> </ul> </div> <div id=content> <p>....</p> </div> ... </body>Bryan Basham – Introduction to JavaScript Slide 6
  7. 7. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Presentation ● Cascading Style Sheets (CSS) ● Powerful layout and styling ul#main_navigation_list { list-style: none; margin: 0 0 0 110px; overflow: hidden; padding: 25px 0 0 0; width: 100%; } ul#main_navigation_list li { float: left; margin: 0; padding: 0 .5em; } ul#main_navigation_list li a { color: #fff; text-decoration: none; }Bryan Basham – Introduction to JavaScript Slide 7
  8. 8. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Behavior ● JavaScript (aka ECMAScript 262) ● Rich object-based and functional language ● Web behavior: – manipulate the page structure (DOM scripting) – handle user-generated events on elements – handle sync & async communication with server ● CONS: – some inconsistencies between browsers ● did I mention IE?Bryan Basham – Introduction to JavaScript Slide 8
  9. 9. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Why is this important? conversion Client Data Data invoke Server Behavior Behavior ......... ......... ......... enhance UI Code Presentation select next view style / layout Structure Structure generateBryan Basham – Introduction to JavaScript Slide 9
  10. 10. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Language Fundamentals Web standards Separate of Concerns Intro symbols data types syntax Odds & Ends Language JSON Introduction to JavaScript Event Functional Model Programming OO DOM APIs ProgrammingBryan Basham – Introduction to JavaScript Slide 10
  11. 11. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Symbols ● Symbols are similar to identifiers in Java ● Symbols can hold: – Data var name = “Bryan”; var age = 47; – Objects var obj = {}; – Functions function add(a, b) { return a + b; } ● Symbols are also used as keys in object hashes: { name: “Bryan”, age: 47 }Bryan Basham – Introduction to JavaScript Slide 11
  12. 12. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Scope Rules ● Global scope <script> var G1 = 42; </script> ● Local scope function f() { var L1 = 47; return L1 + G1; } f() ==> 89 function g() { var L2 = 420; // this has local scope function h() { // local function var L2 = 42; // nested scoping return L2; } return L2 + h(); } g() ==> 462Bryan Basham – Introduction to JavaScript Slide 12
  13. 13. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Namespaces ● Globals (vars and functions) create clutter ● Namespace is a helpful idiom: var MySpace = { G1 : 42, square : function(x) { return x * x; }, configuration : { width : 100, height : 350 }, funct : function(x) { return MySpace.G1 * x; } } MySpace.funct(10) ==> 420Bryan Basham – Introduction to JavaScript Slide 13
  14. 14. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Mimicking Java Packages ● You can nest namespaces to mimic packages: var INow = { utils : {}, domain : {}, screens : {} }; ● Then put functions, classes, etc in packages: INow.utils.map = function(array, funct) { ... }; INow.domain.Person = function() { /* class constructor */ };Bryan Basham – Introduction to JavaScript Slide 14
  15. 15. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Data Types ● Numbers (64-bit floating point) 42 * 10.0 ==> 420 typeof 42 ==> “number” typeof 4.2 ==> “number” 42 / “10” ==> 4.2 ● Strings (Unicode, and “ delimited) “foo” she said “he said” isnt great! typeof “foo” ==> “string” 42 + “10” ==> “4210” ● Booleans (true and false) typeof true ==> “boolean”Bryan Basham – Introduction to JavaScript Slide 15
  16. 16. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy More Data Types ● Dates var now = new Date(); var DoB = new Date(1964, 6, 22); // new Date(YYYY, MM, DD, h, m, s, ms) var ts = Date.parse(timestampString); now.getTime() // milliseconds since epoch // and so on (lots of methods) ● Regular expressions var re = new RegExp(“(d{2})W(d{2})W(d{4})”, “g”); // 07-22-1964 var re = /(d{2})W(d{2})W(d{4})/g; var re = new RegExp(); re.compile(“(d{2})W(d{2})W(d{4})”, “g”); – Modeled after Perl 5 syntax – Supports capture groups – Supports multi-lineBryan Basham – Introduction to JavaScript Slide 16
  17. 17. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Even More Data Types ● Arrays ● Objects ● Functions ● Error (and subclasses) ● Special objects: Math and JSON ● null typeof null ==> “object” ● undefined typeof undefined ==> “undefined”Bryan Basham – Introduction to JavaScript Slide 17
  18. 18. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Arrays ● Syntax var myArray = [13, 42, 47, 420]; ● Access myArray.length ==> 4 myArray[1] ==> 42 myArray[3] ==> 420 myArray[3] = 120; myArray[3] ==> 120 ● Iteration for ( var i=0; i<myArray.length; i++ ) { console.info(“myArray[“ + i + “] is “ + myArray[i]); }Bryan Basham – Introduction to JavaScript Slide 18
  19. 19. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Syntax Overview ● Based upon Java syntax for: – Literals, expressions and operators – Declarations: ● Loosely-typed variables ● Functions – Statements ● But not: – Type structures: classes nor interfaces – Concurrency constructs: JS is single-threadedBryan Basham – Introduction to JavaScript Slide 19
  20. 20. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Special Operators ● Equality operator (==) vs Identify op (===) 42 == new Number(42) ==> true 42 == “42” ==> true 42 === new Number(42) ==> false 42 === “42” ==> false ● The typeof operator returns a type name typeof (42) ==> “number” typeof [42, 47] ==> “object” // WTF? typeof { foo:42 } ==> “object” – Complete list: boolean, number, string, function, undefined, and object ● The void operator always returns undefined void( /* some calculation */ ) ==> undefinedBryan Basham – Introduction to JavaScript Slide 20
  21. 21. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Special Operators ● The delete operator removes an object entry var obj = { foo: 47, bar: 42 }; obj.foo ==> 47 delete obj.foo ==> true obj.foo ==> undefined ● The in operator foo in obj ==> true ● The get and set operators (but... not in IE) var obj = { get foo() { return 47; }, set bar(v) { this._bar = v; }, get bar() { return “Hello ” + this._bar; } }; obj.foo ==> 47 obj.foo = 42; // but no change to obj obj.bar = “Bryan”; obj.bar ==> “Hello Bryan” obj._bar ==> “Bryan”Bryan Basham – Introduction to JavaScript Slide 21
  22. 22. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Special Statements ● The for-in statement for ( var prop in obj ) { console.info(“prop %s is %o”, prop, obj[prop]); } ==> prop foo is 47 prop bar is “Hello Bryan” prop _bar is “Bryan” – Warning: more in an object than meets the eye ● The with statement with (obj) { console.info(“obj.foo is %d”, foo); bar = “Fred”; } obj.bar ==> “Hello Fred” – Warning: this statement is tricky to use properlyBryan Basham – Introduction to JavaScript Slide 22
  23. 23. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Special functions ● The eval function eval(“2 * 3”) ==> 6 – Warning: use with caution ● The call function function addUp() { var sum = 0; for ( var i=0; i < arguments.length; i++ ) sum += arguments[i]; return sum; } addUp.call(null, 1, 2, 3, 4, 5); ==> 15 ● The apply function addUp.apply(null, [1, 2, 3, 4, 5]); ==> 15Bryan Basham – Introduction to JavaScript Slide 23
  24. 24. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy JavaScript Object Notation ● JSON, created by Douglas Crawford, is a string notation for JS objects – Just a subset; doesnt include functions – Native support in ECMAScript v4+ – May require a library, json.js, for old browsers – Dont use built-in eval function ● Used mostly to pass data between browsers and servers ● Put also becoming popular in other contexts, such as NoSQL data storesBryan Basham – Introduction to JavaScript Slide 24
  25. 25. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Native Support ● ECMAScript v4 defines the JSON object ● Generate JSON strings this way: var obj = { name: "Bryan", age: 47 } var str = JSON.stringify(obj) ==> "{"name":"Bryan","age":47}" ● Parse JSON strings this way: var obj2 = JSON.parse(str) obj2.name ==> "Bryan" obj2.age ==> 47 obj == obj2 ==> false ● Works in: IE8+, FF3.1+, Safari 4+, Chrome 3+, and Opera 10.5Bryan Basham – Introduction to JavaScript Slide 25
  26. 26. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Object-Oriented Programming Web standards Separate of Concerns Intro symbols data types syntax Odds & Ends Language JSON syntax core Introduction no-class to JavaScript Event OO Programming encapsulation Model ctor prototype JSON hybrid OO revisited Functional DOM APIs ProgrammingBryan Basham – Introduction to JavaScript Slide 26
  27. 27. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Object Creation ● Creating an object var O1 = new Object(); O1.a = 47; O1.method = function() { console.info(this.a); }; typeof O1 ==> "object" ● OR as a literal var O1 = { A : 47, method : function() { console.info(this.a); } } ● Remember “namespaces”? Just objectsBryan Basham – Introduction to JavaScript Slide 27
  28. 28. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Object Property Access ● Access object attributes O1.a ==> 47 O1.a = 42; O1.method() ==> displays 42 in the console ● Objects can also be treated as associative arrays (aka hash maps) O1["a"] ==> 42 O1["a"] = 420; O1["method"]() ==> displays 420 in the console var prop = “a”; O1[prop] ==> 42Bryan Basham – Introduction to JavaScript Slide 28
  29. 29. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy JavaScript Core Classes ● Built-in – Object – Date – RegExp – Error (and subclasses) ● Wrappers – String, Number and Boolean ● Odd balls – Function and ArrayBryan Basham – Introduction to JavaScript Slide 29
  30. 30. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy But wait... no classes ● You cant create classes in JavaScript class Range { /* code here */ } // NO SUCH SYNTAX ● You can only create object constructors typeof Date ==> "function" var Range = function(start, end) { this.start = start; this.end = end; } r1 #111:Range var r1 = new Range(42, 47); start = 42 r1.start ==> 42 end = 47 r1.end ==> 47 r2 #222:Range var r2 = new Range(13, 420); r2.start ==> 13 start = 1 r2.end ==> 420 end = 10Bryan Basham – Introduction to JavaScript Slide 30
  31. 31. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Encapsulation ● Ugh.. these attributes are public r2.start = 520; r2.start ==> 520 // Semantics broken: the “start” is after the “end” ● Closures allow us to hide private data var Range = function(start, end) { this.getStart = function() { return start; } this.getEnd = function() { return end; } } var r1 = new Range(42, 47); r1.start ==> undefined r1.getStart() ==> 42 r1.getEnd() ==> 47 var r2 = new Range(13, 420); r2.getStart() ==> 13 r2.getEnd() ==> 420Bryan Basham – Introduction to JavaScript Slide 31
  32. 32. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Encapsulation Object Model #987:CallObj start = 42 end = 47 r1 #111:Range getStart function() { return start; } getEnd function() { return end; } r2 #222:Range getStart function() { return start; } getEnd function() { return end; } #876:CallObj start = 13 end = 420Bryan Basham – Introduction to JavaScript Slide 32
  33. 33. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Encapsulation (2) ● Creating setters var Range = function(start, end) { this.getStart = function() { return start; } this.setStart = function(x) { if ( x <= end ) { start = x; } else { throw new Error(“illegal value”); } } this.getEnd = function() { return end; } this.setEnd = function(x) { /* like above */ } } var r = new Range(42, 47); r.getStart() ==> 42 r.setStart(13) r.getStart() ==> 13 r.setStart(50) // throws an Error r.getStart() ==> 13Bryan Basham – Introduction to JavaScript Slide 33
  34. 34. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy But... this too has problems ● This pattern creates lots of object-specific functions #987:CallObj start = 42 end = 47 r1 #111:Range function() {...} getStart function(x) {...} setStart getEnd function() {...} setEnd function(x) {...} r2 #222:Range function() {...} getStart setStart function(x) {...} getEnd function() {...} setEnd function(x) {...} #876:CallObj start = 13 end = 420Bryan Basham – Introduction to JavaScript Slide 34
  35. 35. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Another Class-like Idiom ● Constructors have prototypes var Range = function(st, en) { this.start = st; this.end = en; } // Setup shared Range object methods Range.prototype.getStart = function() { return this.start; } Range.prototype.setStart = function(x) { if ( x <= this.end ) this.start = x; } Range.prototype.getEnd = function() { return this.end; } Range.prototype.setEnd = function(x) { if ( x >= this.start ) this.end = x; } // Create a group of Range objects var r1 = new Range(42, 47); var r2 = new Range(13, 420); var r3 = new Range(1.2, 3.14); var r4 = new Range(1, 10);Bryan Basham – Introduction to JavaScript Slide 35
  36. 36. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Another Class-like Idiom ● Function are reused across all objects r1 #111:Range start = 42 end = 47 r2 #222:Range Range.prototype start = 13 function() {...} end = 420 getStart setStart function(x) {...} r3 #333:Range getEnd function() {...} setEnd start = 1.2 function(x) {...} end = 3.14 r4 #444:Range start = 1 end = 10Bryan Basham – Introduction to JavaScript Slide 36
  37. 37. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Hybrid OO Idiom var Circle = function(radius) { // Create privileged methods this.getRadius = function () { return radius; } } // Create public, but non-privileged methods Circle.prototype.getDiameter = function() { return this.getRadius() * 2; } Circle.prototype.getArea = function() { return Circle.PI * this.getRadius() * this.getRadius(); } // Create class constants Circle.PI = 3.14159; var c1 = new Circle(4.2); c1.getRadius() ==> 4.2 c1.getDiameter() ==> 8.4 c1.getArea() ==> 55.4176476 var c2 = new Circle(10); c1.getRadius() ==> 10 c1.getDiameter() ==> 20 c1.getArea() ==> 314.159Bryan Basham – Introduction to JavaScript Slide 37
  38. 38. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Object model of hybrid OO #987:CallObj radius = 4.2 c1 #111:Circle getRadius function() { return radius; } Circle.prototype getDiameter function() {...} getArea function() {...} c2 #222:Circle getRadius function() { return radius; } #876:CallObj radius = 13Bryan Basham – Introduction to JavaScript Slide 38
  39. 39. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Advanced Class Features ● Admittedly these “class-like” programming idioms are awkward ● Mimicking class inheritance is even more complex ● They have their place (simple domain model) ● There are other, more advanced, inheritance mechanisms – Such as “prototypal inheritance” – See Douglas Crawford on Resource slide at endBryan Basham – Introduction to JavaScript Slide 39
  40. 40. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy JSON Revisited ● JSON is the ability to convert strings to and from JavaScript objects. var obj = { a: 42, b: “foo” }; var objStr = JSON.stringify(obj); // "{"a":42,"b":"foo"}" var o2 = JSON.parse(objStr); ● But what about our objects? var c1 = new Circle(4.2); var c1Str = JSON.stringify(c1); // "{}" WTF?!?! Wheres my object?Bryan Basham – Introduction to JavaScript Slide 40
  41. 41. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Hybrid-Class JSON Methods // Create the Circle class constructor function Circle(radius) { ... }; // JSON related methods Circle.prototype.toJSON = function() { var dataString = this.getRadius().toJSON(); return MyJSON.makeClassWrapper("Circle", dataString); }; // The MyJSON class reviver function uses this static function Circle.parseJSON = function(dataString) { var radius = parseInt(dataString); return new Circle(radius); }; // Run unit tests var c = new Circle(42); c.getArea() ==> 5541.76476 var cStr = JSON.stringify(c); var newC = JSON.parse(cStr, MyJSON.classReviver); newC.getArea() ==> 5541.76476Bryan Basham – Introduction to JavaScript Slide 41
  42. 42. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy JSON for Circle ● The Circle instance method toJSON preforms conversion from object to string. var c1 = new Circle(42); c1.getArea(); // 5541.76476 var c1Str = JSON.stringify(obj); // ""Circle(42)"" ● The JSON.parse method uses my JSON reviver to reconstruct these objects. var newC1 = MyJSON.parse(c1Str); newC1.getArea(); // 5541.76476 ● The Circle static method parseJSON performs conversion from string to object.Bryan Basham – Introduction to JavaScript Slide 42
  43. 43. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Functional Programming Web standards Separate of Concerns Intro symbols data types syntax Odds & Ends Language JSON syntax core Introduction no-class to JavaScript Event OO Programming encapsulation Model ctor prototype JSON hybrid OO revisited DOM APIs Functional 1st class Programming collection functions Ajax closures event handlersBryan Basham – Introduction to JavaScript Slide 43
  44. 44. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Function Creation ● Definition syntax function square(x) { return x * x; } square(12) ==> 144 typeof square ==> “function” ● OR as a variable var square = function(x) { return x * x; }; // lambda function (Lisp) square(12) ==> 144 ● OR as an object var square = new Function(“x”, “return x * x;”); square(12) ==> 144 ● ...these are all the sameBryan Basham – Introduction to JavaScript Slide 44
  45. 45. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Invoking Functions ● Imagine the function: function add(a, b, c, d) { c = (c != undefined) ? c : 0; d = (d != undefined) ? d : 0; return a + b + c + d; } ● Dont have to give all arguments: add(1, 2) ==> 3 add(1, 2, 3) ==> 6 add(1, 2, 3, 4) ==> 10 ● Too many arguments are ignored: add(1, 2, 3, 4, 5, 6, 7) ==> 10Bryan Basham – Introduction to JavaScript Slide 45
  46. 46. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Accessing Function Arguments ● You can create a function that takes any number of arguments: function addAll() { var sum = 0; for ( var idx=0; idx<arguments.length; idx++ ) { sum += arguments[idx]; } return sum; } add(1, 2) ==> 3 add(1, 2, 3) ==> 6 add(1, 2, 3, 4) ==> 10 add(1, 2, 3, 4, 5) ==> 15Bryan Basham – Introduction to JavaScript Slide 46
  47. 47. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy st 1 Class Citizens ● Can store functions in variables ● Can store functions in objects – Like we did with privileged methods in the hybrid class idiom defined in the constructor function ● Can return functions from other functions ● Can pass functions in as arguments function isOdd(n) { return (n % 2) == 1; } function not(predicate) { return function(x) { return ! predicate(x); }; } var isEven = not(isOdd); isEven(2) ==> true isEven(5) ==> falseBryan Basham – Introduction to JavaScript Slide 47
  48. 48. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Collections ● Example 1: function map(array, funct) { var newArray = new Array(); for ( var i=0; i<array.length; i++ ) { newArray[i] = funct(array[i]); } return newArray; } // Run unit tests function square(x) { return x * x; } var myArray = [13, 42, 47]; map( myArray, square ); ==> [169, 1764, 2209]Bryan Basham – Introduction to JavaScript Slide 48
  49. 49. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Collections ● Example 2: function find(array, pred) { for ( var i=0; i<array.length; i++ ) { var value = array[i]; if ( pred(value) ) return value; } } // Run unit tests function isOdd(n) { return (n % 2) == 1; } var myArray = [13, 42, 47]; function isShort(s) { return s.length <= 3; } var myStrings = [“the”, “quick”, “brown”, “fox”]; find( myArray, isOdd ); ==> 13 find( myStrings, not(isShort) ); ==> “quick”Bryan Basham – Introduction to JavaScript Slide 49
  50. 50. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Collections ● Example 3: function gather(array, pred) { var newArray = []; for ( var i=0; i<array.length; i++ ) { var value = array[i]; if ( pred(value) ) newArray.push(value); } return newArray; } // Run unit tests function isOdd(n) { return (n % 2) == 1; } var myArray = [13, 42, 47]; function isShort(s) { return s.length <= 3; } var myStrings = [“the”, “quick”, “brown”, “fox”]; gather( myArray, isOdd ); ==> [13, 47] gather( myStrings, not(isShort) ); ==> [“quick”, “brown”]Bryan Basham – Introduction to JavaScript Slide 50
  51. 51. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Closures ● Closures hold state within a function function makeCutoffFunction(nTimes, funct) { return function(x) { // creating a new function object nTimes--; // access to local state variable if ( nTimes >= 0 ) { return funct(x); // execute the function } }; } var squareOnce = makeCutoffFunction( 1, square ); squareOnce(12) ==> 144 squareOnce(13) ==> void var logThrice = makeCutoffFunction( 3, console.info ); logThrice("first log message"); // log once logThrice("second log message"); // log twice logThrice("third log message"); // log thrice logThrice("fourth log message"); // stops loggingBryan Basham – Introduction to JavaScript Slide 51
  52. 52. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Event Handlers ● Example: <button onclick=”this.className = red”> Click me </button> ● Script is treated as a function: var buttonClickFunction = function() { this.className = red; } ● Applied to the element object when clicked: buttonClickFunction.apply(buttonElement)Bryan Basham – Introduction to JavaScript Slide 52
  53. 53. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Ajax ● Asynchronous JavaScript and XML – Perform HTTP requests without a page refresh – Responses area small chunks of data or content – Use DOM scripting to modify the current page ● User or timed events can trigger JS code to invoke an HTTP request ● The XMLHttpRequest class is becoming a standard – See: http://www.w3.org/TR/XMLHttpRequest/Bryan Basham – Introduction to JavaScript Slide 53
  54. 54. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Creating an Ajax Request var MyAjax = { createRequest : function() { var request; try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { console.error(failed); request = null; } } } return request; } } // END of MyAjax namespace definitionBryan Basham – Introduction to JavaScript Slide 54
  55. 55. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Sending an Ajax Request var MyAjax = { createRequest : function() {}, // from previous slide sendRequest : function(url, requestData, callbackFunction) { var request = MyAjax.createRequest(); request.open("POST", url, true); request.setRequestHeader("Content-Type", "application/json"); request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200) { if (request.responseText) { callbackFunction(request.responseText); } } }; request.send(JSON.stringify(requestData)); } } // END of MyAjax namespace definitionBryan Basham – Introduction to JavaScript Slide 55
  56. 56. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Ajax Example ● Click on the button and JS requests the list of definitions from the server: ● Heres what the HTTP request looks like in Firebug:Bryan Basham – Introduction to JavaScript Slide 56
  57. 57. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Ajax Example ● Populate a definition list when clicking a button <button onclick="Screen.buttonHandler()">Click me</button> <dl id="definitions"></dl> var Screen = { buttonHandler : function() { MyAjax.sendRequest("/TestJS/lesson/ajaxDefinitions", null, Screen.populateDefinitions); }, populateDefinitions : function(responseText) { var definitions = JSON.parse(responseText); var defList = document.getElementById(definitions); each(definitions, function (def) { var dt = document.createElement(dt); dt.innerHTML = def.name; defList.appendChild(dt); var dd = document.createElement(dd); dd.innerHTML = def.definition; defList.appendChild(dd); }); } }Bryan Basham – Introduction to JavaScript Slide 57
  58. 58. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy DOM APIs Web standards Separate of Concerns Intro symbols data types syntax Odds & Ends Language JSON syntax core Introduction no-class to JavaScript Event OO Programming encapsulation Model ctor prototype manipulation JSON hybrid OO revisited traversal window Functional 1st class DOM APIs Programming collection query functions document closures DOM Ajax event handlersBryan Basham – Introduction to JavaScript Slide 58
  59. 59. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Window ● The window object is the “global object” ● Control methods: close, focus, blur, move, open, print and resize navigator frames[] location window history document screenBryan Basham – Introduction to JavaScript Slide 59
  60. 60. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Document ● The document object represents the structure of the current web page ● Provides easy access to critical elements body applets[] forms[] document images[] links[] anchors[]Bryan Basham – Introduction to JavaScript Slide 60
  61. 61. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Document Example<html><head></head><body> <div id="login"> <form action="" id="login_form"> <fieldset> <ol> <li> <label for="login_id"> Login <abbr title="identification">ID</abbr> </label> <input id="login_id" name="username" type="text" /> </li> <li> <label for="password">Password</label> <input id="password" name="userpass" type="password" /> <a href="#">go</a> </li> </ol> </fieldset> </form> </div></body></html>Bryan Basham – Introduction to JavaScript Slide 61
  62. 62. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Document Example Model <HTML> <HEAD> <BODY> <DIV> <FORM> <FIELDSET> <OL> <LI> <LI> <LABEL> <INPUT “username”> <LABEL> <INPUT “userpass”> <A>Bryan Basham – Introduction to JavaScript Slide 62
  63. 63. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy DOM Type Hierarchy (partial) parentNode 1 0..* Node childNodes 1 0..* Document documentElement Element CharacterData {AKA: the root node} The relationship between the Element and the abstract CharacterData type is implied by Text Comment the Nodes ability to contain children of any Node subtype, such as Text or Comment. CDATASectionBryan Basham – Introduction to JavaScript Slide 63
  64. 64. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy DOM Traversal API ● The Node provides the traversal access: 1 parentNode Node parentNode : Node 0..* childNodes : NodeList firstChild : Node childNodes lastChild : Node previousSibling : Node nextSibling : Node hasChildNodes() : booleanBryan Basham – Introduction to JavaScript Slide 64
  65. 65. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Traversal Example <li> <label for="password">Password</label> <input id="password" name="userpass" type="password" /> <a href="#">go</a> </li> Nod e LI:Element pa rent las d hi l t stC Ch ild fir nextSibling LABEL:Element INPUT:Element A:Element previousSibling "password":Text "go":TextBryan Basham – Introduction to JavaScript Slide 65
  66. 66. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Traversal Example (reality check) <li> <label for="password">Password</label> <input id="password" name="userpass" type="password" /> <a href="#">go</a> </li> LI:Element h ild last firstC Chil dws:Text LABEL:Element ws:Text INPUT:Element ws:Text A:Element ws:Text "Password":Text "go":Text Bryan Basham – Introduction to JavaScript Slide 66
  67. 67. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy DOM Query APIs Node 1 Document Element documentElement {AKA: the root node} tagName : DOMStringgetElementsByTagName(tagName) : NodeListgetElementById(elementId) : Element getElementsByTagName(tagName) : NodeList getElementsByClassName(clsName) : NodeList NodeList length : long [idx] : Node item(idx) : NodeBryan Basham – Introduction to JavaScript Slide 67
  68. 68. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Query the DOM ● Find an element by its id // retrieves all form input elements var myForm = document.getElementById(loginForm) ● Find a list of elements by tag type // retrieves all <input> elements in the whole document document.getElementsByTagName(input) // retrieves all <input> elements in the <form id=loginForm>...</form> myForm.getElementsByTagName(input)Bryan Basham – Introduction to JavaScript Slide 68
  69. 69. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy DOM Manipulation Node insertBefore replaceChild removeChild appendChild 1 Document Element documentElement {AKA: the root node} tagName : DOMString createElement(tagName) : Element hasAttribute(attrName) : boolean createTextNode(data) : Text getAttribute(attrName) : DOMString createCDATASection(data) : CDATASection setAttribute(attrName, attrValue) removeAttribute(attrName)Bryan Basham – Introduction to JavaScript Slide 69
  70. 70. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Manipulation Example ● From the Ajax example: start with empty <dl> <dl id="definitions"></dl> ● Ajax callback fills in the list var defList = document.getElementById(definitions); each(definitions, function (def) { var dt = document.createElement(dt); dt.innerHTML = def.name; defList.appendChild(dt); var dd = document.createElement(dd); dd.innerHTML = def.definition; defList.appendChild(dd); }); ● The new DOM content: <dl id="definitions"> <dt>Ajax</dt> <dd>Asynchronous JavaScript and XML</dd> <dt>JavaScript</dt><dd>The standard browser scripting language</dd> <dt>Grails</dt> <dd>The hippest server-side scripting language</dd> </dl>Bryan Basham – Introduction to JavaScript Slide 70
  71. 71. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Event Model Web standards Separate of Concerns Intro symbols data types syntax Odds & Ends Language JSON Deferred operations syntax core Event queue Introduction no-class to JavaScript Event OO Programming encapsulation Model DOM events ctor prototype old models manipulation JSON hybrid OO revisited traversal window Functional 1st class DOM APIs Programming collection query functions document closures DOM Ajax event handlersBryan Basham – Introduction to JavaScript Slide 71
  72. 72. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy The Event Models(s) ● Traditional (AKA Level 0) – Event handlers as tag attributes (eg, onclick) – Event handlers set as Element properties ● Standard event model in DOM Level 2 – Event listeners are registered with the elementBryan Basham – Introduction to JavaScript Slide 72
  73. 73. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Event Types ● Mouse: – click, dblclick, mousedown, mouseup, mouseover, mousemove, mouseout ● Keyboard: – keypress, keydown, keyup ● Window: – load, unload, resize, scroll, abort, error ● Form: – focus, blur, select, change, reset, submitBryan Basham – Introduction to JavaScript Slide 73
  74. 74. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Event Propagation Netscape Model Microsoft Model Element1 Element1 Element2 Element2 Event Capturing Event BubblingBryan Basham – Introduction to JavaScript Slide 74
  75. 75. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Traditional Event Handlers ● Assign handler on tag attribute <a href="#" onclick="return LoginScreen.validateForm();">go</a> ● Assign handler with Element property var goButton = document.getElementById("goButton"); goButton.onclick = function(event) { return Screen.validateForm(); }; ● CONS: – Limited to only one handler per element and event type – Poor separation of concerns: behavior mixed in with structure – Inconsistent event propagationBryan Basham – Introduction to JavaScript Slide 75
  76. 76. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy DOM Level 2 Event Handlers ● HTML Elements are event targets: «CORBA Interface» 0..* «CORBA Interface» EventTarget EventListener addEventListener(listener) handleEvent(event) removeEventListener(listener) dispatchEvent(event) «CORBA Interface» Event EventPhaseEnum type : DOMString CAPTURING_PHASE = 1 target : EventTarget {an element} AT_TARGET = 2 currentTarget : EventTarget BUBBLING_PHASE = 3 eventPhase : EventPhaseEnum timeStamp : DOMTimeStamp stopPropagation() : void preventDefault() : voidBryan Basham – Introduction to JavaScript Slide 76
  77. 77. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Standard Event Propagation ● The standard propagation model is a combination of the proprietary models: CAPTURE_PHASE BUBBLING_PHASE Element1 Element2 AT_TARGETBryan Basham – Introduction to JavaScript Slide 77
  78. 78. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Event Registration (HTML) <body onload="EventsLevel2.registerHandlers(false);"> <h1>Event Model: Level 2 w/ No Capturing</h1> <div id="outerBox"> Element1 <div id="innerBox"> Element2 </div> </div> </body>Bryan Basham – Introduction to JavaScript Slide 78
  79. 79. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Event Registration (JS) // Create the EventsLevel2 namespace var EventsLevel2 = { registerHandlers: function(capture) { var outerBox = document.getElementById(outerBox); var innerBox = document.getElementById(innerBox); outerBox.addEventListener("click", EventsLevel2, capture); innerBox.addEventListener("click", EventsLevel2, capture); }, handleEvent : function(event) { var div = event.currentTarget; console.info("Current target: " + div.id + " had event: " + event + " in phase: " + event.eventPhase); var propagate = confirm("Click OK to propagate the event."); if ( ! propagate ) event.stopPropagation(); } } // END of EventsLevel2 namespace definitionBryan Basham – Introduction to JavaScript Slide 79
  80. 80. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Types of Events ● User events are the majority – Clicking on buttons and links – Entering text – Submitting forms ● Ajax callbacks are handled as events – Four states: OPEN, HEADERS_RECEIVED, LOADING, DONE ● Timed events – Periodic events (do over and over) – Deferred events (do once after a delay)Bryan Basham – Introduction to JavaScript Slide 80
  81. 81. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Event Queue ● All events that have an handler get added to a queue that is sorted by the time of the event. ● Each script is executed sequentially in the order the events happened. ● If any given script takes a long time then it can delay the execution of other event handlers. ● SO... make your event handler scripts as efficient as possible.Bryan Basham – Introduction to JavaScript Slide 81
  82. 82. ● button / MouseOver 1331413671600 RJUG: 13-March-2012 Screen.buttonMouseOver 4ms 1331413671604Bryan Basham – Introduction to JavaScript 391ms button / Click 1331413671995 30ms Screen.buttonClick 1331413672005 From our updated Ajax example: 20ms Example Event Queue Ajax request / state=COMPLETE 1331413672025 Screen.populateDefinitions 7ms 1331413672032Slide 82 © Copyright 2012, Software Alchemy
  83. 83. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Events can be Delayed ● MouseOut event handler is delayed: Screen.populateDefinitions Screen.buttonMouseOut Ajax request / state=COMPLETE button / MouseOut 1331418198851 1331418198930 1331418196686 1331418198935 7ms 2244ms 3msBryan Basham – Introduction to JavaScript Slide 83
  84. 84. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Periodic Events ● The window object includes functions to setup periodic activities: ● For example, a clock: displayTime() { var now = new Date(); var h = now.getHours(); var m = now.getMinutes(); var s = now.getSeconds(); var time = h + ":" + m + ":" + s; var clockBox = document.getElementById(clockBox); clockBox.innerHTML = time; } setInterval(displayTime, 1000);Bryan Basham – Introduction to JavaScript Slide 84
  85. 85. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Periodic Clock Implementation var Clock = { displayTime : function(event) { var time = // calculate the time string from new Date() var clockBox = document.getElementById(clockBox); clockBox.innerHTML = time; }, toggleActivation : function() { Clock.ACTIVE = ! Clock.ACTIVE; if ( Clock.ACTIVE ) { Clock.INTERVAL_ID = setInterval(Clock.displayTime, 1000); document.getElementById(actButton).value = "Stop Clock"; } else { clearInterval(Clock.INTERVAL_ID); document.getElementById(actButton).value = "Start Clock"; } }, ACTIVE : false, INTERVAL_ID : 0, } // END of Clock namespace definitionBryan Basham – Introduction to JavaScript Slide 85
  86. 86. ● periodic event RJUG: 13-March-2012 1331596413012 Clock.displayTime 5ms 1331596413017Bryan Basham – Introduction to JavaScript 1000ms periodic event 1331596414012 Clock.displayTime 4ms 1331596414016 possible on the queue: 1000ms periodic event 1331596415022 Clock.displayTime 4ms 1331596415026 1000ms periodic event 1331596416019 Periodic Events are placed as evenly as Clock.displayTime 4ms 1331596416023 Periodic Events on the QueueSlide 86 © Copyright 2012, Software Alchemy
  87. 87. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Periodic Events on the Queue ● Even with an expensive operation periodic events are scheduled regularly: Clock.displayTime Clock.displayTime Clock.displayTime periodic event periodic event periodic event 1331599721443 1331599720455 1331599721226 1331599722217 1331599722436 1331599723204 771ms 217ms 774ms 219ms 768ms 988ms 993msBryan Basham – Introduction to JavaScript Slide 87
  88. 88. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Deferred Events ● A deferred event is a function that is placed on to the event queue after a specific delay. ● You can mimic a periodic function by putting the same operation back on the queue: displayTime() { var now = new Date(); var h = now.getHours(); var m = now.getMinutes(); var s = now.getSeconds(); var time = h + ":" + m + ":" + s; var clockBox = document.getElementById(clockBox); clockBox.innerHTML = time; // Do it again every second setTimeout("displayTime()", 1000); }Bryan Basham – Introduction to JavaScript Slide 88
  89. 89. ● deferred event RJUG: 13-March-2012 1331597131485 Clock.displayTime 5ms 1331597131490Bryan Basham – Introduction to JavaScript 995ms deferred event 1331597132485 Clock.displayTime 4ms 1331597132489 994ms deferred event 1331597133492 Clock.displayTime 4ms mechanism works fairly well: 1331597133496 1002ms deferred event When the operation is inexpensive this 1331597134498 Clock.displayTime 4ms 1331597134502 Deferred Events on the QueueSlide 89 © Copyright 2012, Software Alchemy
  90. 90. RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Deferred Events on the Queue ● But when the operation is expensive this mechanism begins to drift: Clock.displayTime Clock.displayTime Clock.displayTime Clock.displayTime deferred event deferred event deferred event deferred event 1331598304489 1331598306248 1331598307009 1331598308000 1331598308760 1331598309755 1331598305255 1331598310517 766ms 993ms 761ms 991ms 760ms 995ms 762msBryan Basham – Introduction to JavaScript Slide 90
  1. A particular slide catching your eye?

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

×