Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

JavaScript and HTML5

Prof. Cesare Pautasso
http://www.pautasso.info
[email protected]
@pautasso

Object-Oriented JavaScript

O-O Java vs. O-O JavaScript

Java: Class-based	JavaScript: Prototype-based
Classes/Objects	Objects (only)
Class definitions + Constructors	Protoypes + Constructors
Objects created with `new`	Objects created with `new`
Inheritance of Classes	Inheritance using Prototypes
Cannot change class definitions at run time	Constructor/Prototype only give initial definition. Objects definition can be changed at run time

Properties

Object = flexible container of unordered collection of named properties (and methods)

In Java: JSObject = Map<String, Object>

var student = {}

Create an empty object

student.name = "Peggy";
student.university = "USI";
student.date_of_birth = new Date();

Populate its properties

Methods

student.age = function() { 
	return (new Date().getTime()) – 
	        this.date_of_birth.getTime();
}

Declare a method for the object

Use this to access the fields of the object

 if (student.age() > 18) { ... }

Call a method

`this`

f(x);                // function call

this = the global object

obj.m(x);            // method call

this = the object obj

new C();             // constructor

this = the new object

onclick="m(this)"     // event handler

this = the DOM element on which the event occurs

Constructors

Any function called with new becomes a constructor

Constructor names typically begin with an uppercase letter

function Person(name) {
   this.name = name;
   this.age = function() {...};
   return this; //not needed
}
//call the constructor
var me = new Person("Peggy"); 
me.age();

this inside the constructor refers to the newly created object
The constructor initializes the properties and the methods of the new object

Constructors (!)

Only functions called with new become a constructor.

What happens if you forget new?

function Person(name) {
   this.name = name;
   this.age = function() {...};
   return this; //not needed
}
//call the function
var me = Person("Peggy"); 
me.age();

this inside the function refers to the global object
The function updates the properties and the methods of the global object

Object Literals

var person = { 
  name: "Peggy", 
  date_of_birth: new Date(1927,0,31), 
  address: {
    street: 'Via Buffi',
    number: 13
  }
}

Objects can also be created directly using object literals following the JavaScript Object Notation (JSON)

person.address.number =

JSON Syntax

Constructor with Literals

lowercase function name

function person(name, dob) { 
  return {
    name: name, 
    date_of_birth: dob, 
    age: function() {
       return...
    }
  } 
}

var p = person("Peggy", new Date(...));

new not needed here!

Sometimes called factory methods

Object Augmentation

person.height = "120cm";
person.hello = function() { ... };

You can add properties and methods to an object even after it has been created

delete person.height;

Properties and methods can be removed from an object with the delete operator

Testing Object Fields

Never assume an object's field has been defined

var o = {};
if (o) { //o is defined
}
o.field = x;
if (o.field) { // o.field is defined
}
if (o && o.field) {
// both o and o.field are defined
}

Parasitic Inheritance

1. return a new JSON object

function person(name, dob) {
  return { 
    name: name, 
    date_of_birth: dob, 
    age: function(){...}
  };
}
function student(name, dob, uni) {
  var that = person(name, dob); 
  that.uni = uni; 
  that.canEnroll = function() {...}; 
  return that;
}

var s = student(“Peggy”, new Date(...), “USI”);
if (s.age() > 18 && s.canEnroll() ) { ... }

2. Create the “super” object

3. Augment it

new not needed here!

Object Composition

function person(name, dob) {
  return { 
    name: name, 
    date_of_birth: dob, 
    age: function(){...}
  };
}
function student(name, dob, uni) {
  var that = {};
  that.person = person(name, dob); 
  that.uni = uni; 
  that.canEnroll = function() {...}; 
  return that;
}
var s = student(“Peggy”, new Date(...), “USI”);
//s = {person: {name: "Peggy", date_of_birth: , age: },
//     uni: "USI", canEnroll: }

Power Constructors

function class(a,b) { 
  // initialize the object from the superclass 
  var that = superclass(a);
  // declare private properties
  var private_c; 
  // declare private methods
  function private_method() {...} 
  // declare public properties
  that.public_d = b;
  // declare public methods
  that.public_method = function(p) { 
    this.public_d ... ;
    private_c; 
    private_method();
  }
  return that;
}

Namespaces

var namespace = {};

Define a prefix to protect all your objects and functions so that their names do not conflict with others

Everything within the namespace is always visible. Use packages to separate the external public interface from the private implementation

namespace.o = {};
namespace.f = function() {};

Packages

Syntax reminder:
var x = function(){}();

var package = function () { 
  // declare private properties
  var private_c; 
  // declare private methods
  function private_method() {...} 
  // declare public interface
  return {
    //declare public properties
    public_d: 100,
    // declare public methods
    public_method: function(p) { 
      var x = p || public_d;
      private_c;
      private_method();
    }
  }
} ();

Warning: remember to call the function to instantiate the package

Dynamic HTML

What is dynamic HTML?

Manipulate an HTML document from the JavaScript code

Add new elements
Remove existing elements
Change the position of elements in the tree
Modify element content (innerHTML)
Control the element CSS style (formatting, visibility, position, layout)
Respond to user events

DOM

Document Object Model

<html>
  <head></head>
  <body>
    <h1>Heading 1</h1>
    <p>Paragraph.</p>
    <h2>Heading 2</h2>
    <p>Paragraph.</p>
  </body>
</html>

This HTML string is parsed by the browser and represented as objects that can be accessed from JavaScript code

DOM Tree

Traversing the DOM

document //root of the tree
document.body //the body element node
document.body.firstChild 
document.body.lastChild
document.body.childNodes[] // array of children

Navigate through the DOM tree

Finding DOM Elements

document.getElementById('section1');
document.getElementsByTagName('div');

Direct, random-access to specific elements

document.getElementsByClassName("section");
document.querySelector("#section1"); 
document.querySelectorAll("div"); 
document.querySelectorAll(".section"); 
document.querySelectorAll("table > tr > td");

New HTML5 API (Use CSS selectors in JavaScript)

Creating DOM Elements

The newly created elements are not connected to the document tree

document.createElement(tagName)
document.createTextNode(text)

//clone the element
node.cloneNode()       

//clone the element and its descendents
node.cloneNode(true)

Adding elements to the tree

//Add neu as the lastChild of node
node.appendChild(neu)

//Add to the children of node before sibling.
node.insertBefore(neu, sibling)
node.insertBefore(neu, node.firstChild)

// Swap the old child element with neu.
node.replaceChild(neu, old)
old.parentNode.replaceChild(neu, old)

Removing DOM elements

//remove the old child node and return it
node.removeChild(old)

//remove the old node itself
old.parentNode.removeChild(old)

Working with CSS Styles

//read-write the style class of a node element
node.className

//for multi-class elements (HTML5)
node.classList

//low-level access to the style properties
node.style.property

CSS properties map 1:1 with JavaScript properties (except property names that contain “-”. z-index → zIndex, background-color → backgroundColor, etc.)

DOM Node Properties

N.nodeName
N.attributes
N.id
N.name
N.className
N.classList
N.style
N.innerHTML
N.textContent

DOM Tree Traversal

N.childNodes
N.firstChild
N.lastChild
N.nextSibling
N.ownerDocument
N.parentNode
N.previousSibling

https://developer.mozilla.org/en-US/docs/DOM/Node

Event Listeners

//add or remove event listeners 
N.addEventListener(type, listener, capture)
N.removeEventListener(type, listener, capture)

type (string identifying event without the on prefix)
listener (call-back function triggered by the event)
capture (true, will prevent other nodes to receive the same event)

//more primitive
N.onclick = listener

Examples (with anonymous listener):

document.addEventListener("click", 
   function(event) { alert(event); }, false);
document.onclick = function(event) { ... }

innerHTML

N.innerHTML = '<b>Text</b>';

Access the HTML Parser

//prepare the content
content = ... 
//add it to the document (once)
N.innerHTML = content;

Construct the content first and later add it to the document once to minimize page redraw operations by the browser

HTML5 JavaScript

Canvas
GeoLocation
Local Storage
Web Workers
Drag and Drop

canvas

Draw on the page from JavaScript code

<canvas id="cid" width="640" height="480"></canvas>

Define a canvas element for drawing

var c=document.getElementById("cid");
var ctx=c.getContext("2d");

Get access to the 2d drawing context

ctx.fillStyle
ctx.strokeStyle
ctx.rect()
ctx.fillRect()
ctx.arc()
ctx.moveTo()
ctx.lineTo()
ctx.fillText()
ctx.drawImage()
ctx.getImageData()

More information: https://developer.mozilla.org/en-US/docs/Canvas_tutorial

localStorage

Key-value persistent storage on the browser

localStorage.key = value; //value is a string
var value = localStorage.key;
if (localStorage.key) //check if key exists

localStorage.setItem('key',value);
var value = localStorage.getItem('key');

Alternative Syntax

What if you want to store objects?

localStorage.key = JSON.stringify(object);

Convert the object into a JSON string before storing it

var object = JSON.parse(localStorage.key)

Parse the stored JSON string back into the object

geolocation

Find out where the user is on the planet

navigator.geolocation.getCurrentPosition(
  function(position) {
  	 position.coords.latitude;
  	 position.coords.latitude;
   }, function(error) {
     // error.code can be:
     //   0: unknown error
     //   1: permission denied
     //   2: position unavailable
     //   3: timed out
   });

The first callback is called when the position has been computed. The second error handling callback is optional.

navigator.geolocation.watchPosition(function(position) {
  //track the position as it changes
});

Web Workers

main.js

var worker = new Worker('worker.js'); 
worker.onmessage = function(event) {
    console.log(event.data); 
}
worker.postMessage('start');

worker.js

self.onmessage = function(event) {
	//do some work
	var data; //output
	self.postMessage(data);
}

Drag and Drop

Transfer Object set by the source in the dragstart event, read by the target in the drop event

http://www.html5rocks.com/en/tutorials/dnd/basics/

References

Douglas Crockford, JavaScript: The Good Parts, O’Reilly, May 2008
Danny Goodman, Michael Morrison, JavaScript Bible, 6th Edition, Wiley, April 2007
David Flanagan, JavaScript: The Definitive Guide, Fifth Edition, O’Reilly, August 2006
Jeremy Keith, HTML5 for Web Designers, A Book Apart, 2010
Mark Pilgrim, Dive into HTML5

Use a spacebar or arrow keys to navigate

JavaScript and HTML5

Object-Oriented JavaScript

O-O Java vs. O-O JavaScript

Properties

Methods

this

Constructors

Constructors (!)

Object Literals

JSON Syntax

Constructor with Literals

Object Augmentation

Testing Object Fields

Parasitic Inheritance

Object Composition

Power Constructors

Namespaces

Packages

Dynamic HTML

What is dynamic HTML?

DOM

DOM Tree

Traversing the DOM

Traversing the DOM

Finding DOM Elements

Creating DOM Elements

Adding elements to the tree

Removing DOM elements

Working with CSS Styles

DOM Node Properties

Event Listeners

innerHTML

HTML5 JavaScript

canvas

localStorage

geolocation

Web Workers

Drag and Drop

Useful links

References

`this`