bring life to your web pages with javascript and html5 part 2

Bring Life to Your Web Pages with JavaScript and HTML5

Part 2

Ole Ildsgaard Hougaard - [email protected]

Objects• JavaScript is object-oriented• Everything is an object:

– Numbers– Lists– Functions– "Common" objects

• Objects change dynamically• There are no classes

Creating an objectvar o = new Object();

Using an objectvar o = new Object();

o.x = 7;

o.x = o.x + o.x;

alert(o.x);

Defining methodsvar o = new Object();

o.showDoubleX = function() { var y = o.x + o.x; alert(y);}

o.x = 7;

o.showDoubleX();

Defining a pointvar pt = new Object();

pt.distance = function() { var x2 = this.x * this.x; var y2 = this.y * this.y; return Math.sqrt(x2 + y2);}

pt.x = 8.4;pt.y = 11.2;

alert(pt.distance());

Constructorsfunction Point(x, y) { this.x = x; this.y = y;}

var pt = new Point(8.4, 11.2);

Defining a pointfunction Point(x, y) { this.x = x; this.y = y; this.distance = function() { var x2 = this.x * this.x; var y2 = this.y * this.y; return Math.sqrt(x2 + y2); }}

var pt = new Point(8.4, 11.2);alert(pt.distance());

Exercises6. Create a Rectangle "class":

– Create a JavaScript function that takes an object and returns the product of the x- and y-attributes.

– Create an object with a width and a height attribute and an area() method that returns their product.

– Create a Rectangle constructor that creates objects like in the previous exercise.

HTML 5 multimedia• New tags <audio> and <video>.• Inherit from HTMLMediaElement• Support for embedding media just

like <img>.• Support for adding controls.• Support for various • Support for control through

JavaScript.Ole Ildsgaard Hougaard - [email protected]

Video• The video tag:

<video src="gizmo.mp4" controls autoplay/>• Important attributes:

– src: URL to the video to play.– poster: URL to an image when the video is not playing.– autoplay: Start playing automatically– controls: Show controls for play, pause, volume– loop: Repeat the video– muted: Play the video without sound


The codec problem• Ogg Theora

– Preferred by most browsers – requires extra installation in some

– Used to be standard in HTML5– Not so widely used– Might require manual install

• H.264– Preferred by Apple and Microsoft– Widely used– Not supported by many others


More than one source<video width="427px" height="240px"

autoplay="autoplay"> <source src="gizmo.mp4" type="video/mp4" /> <source src="gizmo.webm" type="video/webm" /> <source src="gizmo.ogv" type="video/ogg" /></video>


Video in DOM• Important methods:

– load()– play()– pause()

• Fields:– src– controls– muted– volume


Events• Events: play, pause, volumechange, error• Example:video.onerror = function (e) { switch (e.target.error.code) { case e.target.error.MEDIA_ERR_NETWORK: alert('Network error.'); break; case e.target.error.MEDIA_ERR_DECODE: alert('Unsupported codec.'); break; case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED: alert('Unsupported format.'); break; }}


Examples• Changing the source:video.src = "gizmo.ogv";video.load();video.play();

• Changing the volume:video.volume = 0.5;


Exercises7. Create a video player in pure HTML5

using the <video> tag, but without controls.

– Add buttons for play/pause, higher volume and lower volume.

– Add an event handler that can give a message if an error occurs.

– Add a text element (e.g. <span> or <p>) and write the status of the video player to that element when the status changes. Ole Ildsgaard Hougaard - [email protected]

Canvas• <canvas> is like an <img> but

without the image…• … except you can draw on it.• To draw on a canvas, get it's 2D-

context and call methods on it.• Canvas:<canvas id='canvas' width='600px' height='400px' />


What can you do with a canvas?• Lines, polygons, circles, arcs, Bezier

curves, quadratic curves.• Drawing images.• Gradients, translations, rotations,

compositions, clipping paths• Saving and restoring


Example: Polygon var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(75,50); ctx.lineTo(100,75); ctx.lineTo(100,25); ctx.closePath(); //The third side. ctx.stroke(); //Or fill()


Example: Arcvar canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(75, 50, 20, 0, 2 * Math.PI);ctx.moveTo(100,75);ctx.arc(100, 75, 10, 0, Math.PI);ctx.moveTo(50,100);ctx.arc(50, 100, 40, Math.PI/2, 2 * Math.PI);

ctx.fill();Ole Ildsgaard Hougaard - [email protected]

Loading imagesfunction showImage(ctx, src, x, y) { var image = new Image(); image.onload = function() { ctx.drawImage(image, x, y); }; image.src = src;}


Fill stylevar canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');ctx.fillRect(25,25,100,100);ctx.fillStyle='rgb(255,255,255)';ctx.fillRect(50,50,50,50);


Save and restorevar canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');ctx.fillRect(25,25,100,100);ctx.save();ctx.fillStyle='rgb(255,255,255)';ctx.fillRect(50,50,50,50);ctx.restore();ctx.fillRect(62,62,26,26);


Exercises8. Make a canvas and add an event

handler so the page draws a circle where the user is clicking.

9. Change previous exercise to drawing an image.

10.Make a Scribble application.


Conclusion• JavaScript is functional and object-

oriented.• Use JavaScript to manipulate objects

in the DOM.• HTML5 is good for showing media,

but remember the codec problems.• Canvas can be used for any kind of

2D graphics.Ole Ildsgaard Hougaard - [email protected]

bring life to your web pages with javascript and html5 part 2

Documents