bring life to your web pages with javascript and html5 part 2 ole ildsgaard hougaard - [email protected]
TRANSCRIPT
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
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 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
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.
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
Ole Ildsgaard Hougaard - [email protected]
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 - [email protected]
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 - [email protected]
Video in DOM
• Important methods:– load()– play()– pause()
• Fields:– src– controls– muted– volume
Ole Ildsgaard Hougaard - [email protected]
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 - [email protected]
Examples
• Changing the source:video.src = "gizmo.ogv";video.load();video.play();
• Changing the volume:video.volume = 0.5;
Ole Ildsgaard Hougaard - [email protected]
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' />
Ole Ildsgaard Hougaard - [email protected]
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 - [email protected]
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 - [email protected]
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;}
Ole Ildsgaard Hougaard - [email protected]
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);
Ole Ildsgaard Hougaard - [email protected]
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);
Ole Ildsgaard Hougaard - [email protected]
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.
Ole Ildsgaard Hougaard - [email protected]
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]