Bring Life to Your Web Pages with JavaScript and HTML5 Part 2 Ole Ildsgaard Hougaard - [email protected].

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 object

var o = new Object();

Using an object


o.x = 7;

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

alert(o.x);

Defining methods


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

o.x = 7;

o.showDoubleX();

Defining a point

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

Constructors

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

var pt = new Point(8.4, 11.2);

Defining a point

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

Exercises

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


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;


Exercises

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

var 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 images

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


Fill style

var 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 restore

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


Exercises

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


Bring Life to Your Web Pages with JavaScript and HTML5 Part 2 Ole Ildsgaard Hougaard - [email protected].

Documents

Transcript of Bring Life to Your Web Pages with JavaScript and HTML5 Part 2 Ole Ildsgaard Hougaard - [email protected].