Bring Life to Your Web Pages with JavaScript and HTML5 Part 2

Bring Life to Your Web Pages with JavaScript and HTML5Part 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 object var o = new Object();

Using an object var o = new Object(); o.x = 7; o.x = o.x + o.x; alert(o.x);

Defining methods var o = new Object(); 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 • 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 • OggTheora • 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('Unsupportedcodec.'); 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

Exercises • 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'); varctx = 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: Arc var canvas = document.getElementById('canvas'); varctx = 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 images function 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 style var canvas = document.getElementById('canvas'); varctx = 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 restore var canvas = document.getElementById('canvas'); varctx = 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

Exercises • Make a canvas and add an event handler so the page draws a circle where the user is clicking. • Change previous exercise to drawing an image. • 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

Bring Life to Your Web Pages with JavaScript and HTML5 Part 2