Introduction to JavaScript
Upcoming SlideShare
Loading in...5
×
 

Introduction to JavaScript

on

  • 1,709 views

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

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

Statistics

Views

Total Views
1,709
Views on SlideShare
1,704
Embed Views
5

Actions

Likes
0
Downloads
84
Comments
0

2 Embeds 5

http://www.linkedin.com 3
https://www.linkedin.com 2

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

Introduction to JavaScript Introduction to JavaScript Presentation Transcript

  • 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
  • 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
  • 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
  • RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Example PageBryan Basham – Introduction to JavaScript Slide 4
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • ● 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
  • 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
  • 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
  • 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
  • ● 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
  • 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
  • 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
  • ● 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
  • 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
  • RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Odds & Ends Web standards Separate of Concerns IE debugging Intro symbols data types Q&A Firebug syntax Odds & Ends Language frameworks 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 91
  • RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Frameworks ● Low-level frameworks – Makes DOM scripting easier – Examples: jQuery, Prototype and Script-aculo-us ● High-level frameworks – Provides GUI widgets – Examples: Dojo, YUI and ExtJS ● Plugins for low-level frameworksBryan Basham – Introduction to JavaScript Slide 92
  • RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Firebug ● The FireFox debugger – Console and logging – Command-line with access to code of the page – Set breakpoints and walk-through execution ● Analyze: – View script files – View dynamic DOM structure – View CSS rules and box structure – View all downloaded files – View Ajax HTTP requests and responseBryan Basham – Introduction to JavaScript Slide 93
  • RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Internet Explorer ● IE has been the bane of web developers for years, but getting better ● Use IETester to test how your app works in a variety of versions of IE ● Recent versions of IE have a decent debugger and DOM inspectorBryan Basham – Introduction to JavaScript Slide 94
  • RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Q&A Web standards Separate of Concerns IE debugging Intro symbols data types Q&A Firebug syntax Odds & Ends Language frameworks 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 95
  • RJUG: 13-March-2012 © Copyright 2012, Software Alchemy Resources ● Head First JavaScript (OReilly) ● JavaScript – The Definitive Edition (OReilly) ● DOM Scripting (friends of ed) ● jQuery Reference Guide (PACKT) ● designing with web standards, 2nd ed. (New Riders) ● Mozilla: site ● ECMAScript standard: site and PDF ● Douglas Crawfords site and lectures ● JSON ● jQuery ● Others: Prototype, script.aculo.us, ExtJS, YUI, GWT, Dojo, and so many moreBryan Basham – Introduction to JavaScript Slide 96