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 - oih@viauc.dk

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 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 - oih@viauc.dk

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

Ole Ildsgaard Hougaard - oih@viauc.dk

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

Ole Ildsgaard Hougaard - oih@viauc.dk

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>

Ole Ildsgaard Hougaard - oih@viauc.dk

Video in DOM• Important methods:

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

• Fields:– src– controls– muted– volume

Ole Ildsgaard Hougaard - oih@viauc.dk

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

Ole Ildsgaard Hougaard - oih@viauc.dk

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

• Changing the volume:video.volume = 0.5;

Ole Ildsgaard Hougaard - oih@viauc.dk

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 - oih@viauc.dk

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

Ole Ildsgaard Hougaard - oih@viauc.dk

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

Ole Ildsgaard Hougaard - oih@viauc.dk

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

Ole Ildsgaard Hougaard - oih@viauc.dk

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 - oih@viauc.dk

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

Ole Ildsgaard Hougaard - oih@viauc.dk

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

Ole Ildsgaard Hougaard - oih@viauc.dk

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

Ole Ildsgaard Hougaard - oih@viauc.dk

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.

Ole Ildsgaard Hougaard - oih@viauc.dk

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 - oih@viauc.dk