Introduction to JavaScript

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/SoftwareAlchemist

Bryan Basham – Introduction to JavaScript Slide 1


Introduction
Web standards Separate of Concerns

Intro


Introduction
to JavaScript
Event Functional
Model Programming

OO
DOM APIs
Programming



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 IE


Example Page



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)



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>



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;
}



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?


Why is this important?

conversion

Client Data Data
invoke Server

Behavior Behavior
.........
.........
......... enhance
UI Code
Presentation select next view

style / layout

Structure Structure
generate



Language Fundamentals


Intro symbols data types

syntax

JSON

Introduction
to JavaScript
Event Functional
Model Programming

OO
DOM APIs
Programming



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 }



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() ==> 462


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) ==> 420



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 */ };



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”'
'isn''t great!'
typeof “foo” ==> “string”
42 + “10” ==> “4210”

● Booleans (true and false)
typeof true ==> “boolean”



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


Even More Data Types
● Arrays
● Objects
● Functions
● Error (and subclasses)
● Special objects: Math and JSON
● null
typeof null ==> “object”

● undefined
typeof undefined ==> “undefined”



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]);
}



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



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 */ ) ==> undefined


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”


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 properly


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]); ==> 15



JavaScript Object Notation

● JSON, created by Douglas Crawford, is a
string notation for JS objects
– Just a subset; doesn't include functions
– Native support in ECMAScript v4+
– May require a library, json.js, for old browsers
– Don't 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 stores


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



Object-Oriented Programming



syntax

JSON
syntax core
Introduction no-class
to JavaScript
Event OO
Programming encapsulation
Model
ctor prototype
JSON hybrid OO
revisited

Functional
DOM APIs
Programming



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 objects



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] ==> 42



JavaScript Core Classes

● Built-in
– Object
– Date
– RegExp
– Error (and subclasses)
● Wrappers
– String, Number and Boolean
● Odd balls
– Function and Array


But wait... no classes

● You can't 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
r2.start ==> 13 start = 1
r2.end ==> 420 end = 10



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
this.getStart = function() { return start; }
this.getEnd = function() { return end; }
}

r1.start ==> undefined
r1.getStart() ==> 42
r1.getEnd() ==> 47

r2.getStart() ==> 13
r2.getEnd() ==> 420



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 = 420



Encapsulation (2)

● Creating setters
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() ==> 13



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 = 420


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 r3 = new Range(1.2, 3.14);


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 = 10



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


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 = 13



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 end



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?!?! Where's my object?



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



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.



Functional Programming



syntax

JSON
syntax core
to JavaScript
Event OO
Model
ctor prototype
JSON hybrid OO
revisited

DOM APIs Functional 1st class
Programming collection
functions
Ajax closures
event
handlers



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 same



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;
}

● Don't 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) ==> 10



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) ==> 15



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) ==> false


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]



Collections

● Example 2:
function find(array, pred) {
var value = array[i];
if ( pred(value) ) return value;
}
}

// Run unit tests
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”



Collections

● Example 3:
function gather(array, pred) {
var newArray = [];
var value = array[i];
if ( pred(value) ) newArray.push(value);
}
return newArray;
}

// Run unit tests
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”]



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 logging



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)



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/



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 definition



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 definition



Ajax Example
● Click on the button and JS requests the list of
definitions from the server:

● Here's what the HTTP request looks like in
Firebug:



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);
});
}
}


DOM APIs



syntax

JSON
syntax core
to JavaScript
Event OO
Model
ctor prototype
manipulation JSON hybrid OO
revisited
traversal window
Functional 1st class
DOM APIs
query functions
document closures
DOM Ajax event
handlers



Window
● The window object is the “global object”
● Control methods: close, focus, blur, move,
open, print and resize

navigator
frames[]
location
window
history
document
screen



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[]



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>


Document Example Model

<HTML>

<HEAD> <BODY>

<DIV>

<FORM>

<FIELDSET>

<OL>

<LI> <LI>

<LABEL> <INPUT “username”> <LABEL> <INPUT “userpass”> <A>



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 Node's ability to contain children of any
Node subtype, such as Text or Comment.

CDATASection



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() : boolean



Traversal Example
<li>
<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":Text



Traversal Example (reality check)
<li>
<a href="#">go</a>
</li>

LI:Element

h ild last
firstC Chil
d

ws:Text LABEL:Element ws:Text INPUT:Element ws:Text A:Element ws:Text

"Password":Text "go":Text



DOM Query APIs

Node

1
Document Element
documentElement
{AKA: the root node} tagName : DOMString
getElementsByTagName(tagName) : NodeList
getElementById(elementId) : Element getElementsByTagName(tagName) : NodeList
getElementsByClassName(clsName) : NodeList

NodeList
length : long

[idx] : Node
item(idx) : Node



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')



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)



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>


Event Model



syntax

JSON
Deferred operations syntax core
Event queue Introduction no-class
to JavaScript
Event OO
Model
DOM events ctor prototype
old models manipulation JSON hybrid OO
revisited
traversal window
DOM APIs
query functions
document closures
DOM Ajax event
handlers



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 element



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, submit



Event Propagation
Netscape Model Microsoft Model

Element1 Element1

Element2 Element2

Event Capturing Event Bubbling



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 propagation


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() : void



Standard Event Propagation
● The standard propagation model is a
combination of the proprietary models:

CAPTURE_PHASE

BUBBLING_PHASE
Element1

Element2

AT_TARGET



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>



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 definition



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)


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.


●
button / MouseOver
1331413671600
RJUG: 13-March-2012

Screen.buttonMouseOver

4ms
1331413671604

Bryan 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

1331413672032
Slide 82
© 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 3ms



Periodic Events
● The window object includes functions to setup
periodic activities:
● For example, a clock:

displayTime() {
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);



Periodic Clock Implementation
var Clock = {

displayTime : function(event) {
var time = // calculate the time string from new Date()
},
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 definition


●
periodic event
RJUG: 13-March-2012

1331596413012
Clock.displayTime

5ms
1331596413017

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 Queue

Slide 86


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 993ms



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 h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds();
var time = h + ":" + m + ":" + s;


// Do it again every second
setTimeout("displayTime()", 1000);
}


●
deferred event
RJUG: 13-March-2012

1331597131485
Clock.displayTime

5ms
1331597131490

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 Queue

Slide 89


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 762ms



Odds & Ends


IE debugging Intro symbols data types
Q&A
Firebug syntax

frameworks JSON
to JavaScript
Event OO
Model
revisited
traversal window
DOM APIs
query functions
document closures
DOM Ajax event
handlers



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 frameworks



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 response


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 inspector



Q&A


IE debugging Intro symbols data types
Q&A
Firebug syntax

frameworks JSON
to JavaScript
Event OO
Model
revisited
traversal window
DOM APIs
query functions
document closures
DOM Ajax event
handlers



Resources
● Head First JavaScript (O'Reilly)
● JavaScript – The Definitive Edition (O'Reilly)
● 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 Crawford's site and lectures
● JSON
● jQuery
● Others: Prototype, script.aculo.us, ExtJS, YUI, GWT, Dojo, and
so many more

Introduction to JavaScript

More Related Content

What's hot

Similar to Introduction to JavaScript

Recently uploaded

Introduction to JavaScript