1. Bring Life to Your Web Pages with JavaScript and HTML5 Part 2 Ole Ildsgaard Hougaard - oih@viauc.dk

2. Objects JavaScript is object-oriented Everything is an object: – Numbers – Lists – Functions – "Common" objects Objects change dynamically There are no classes

3. Creating an object var o = new Object();

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

5. Defining methods var o = new Object(); o.showDoubleX = function() { var y = o.x + o.x; alert(y); } o.x = 7; o.showDoubleX();

6. Defining methods var o = new Object(); o.showDoubleX = function() { var y = o.x + o.x; alert(y); } o.x = 7; o.showDoubleX();

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

8. Constructors function Point(x, y) { this.x = x; this.y = y; } var pt = new Point(8.4, 11.2);

9. 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());

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

11. HTML 5 multimedia New tags and. Inherit from HTMLMediaElement Support for embedding media just like. Support for adding controls. Support for various Support for control through JavaScript. Ole Ildsgaard Hougaard - oih@viauc.dk

12. Video The video tag: 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

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

14. More than one source Ole Ildsgaard Hougaard - oih@viauc.dk

15. Video in DOM Important methods: – load() – play() – pause() Fields: – src – controls – muted – volume Ole Ildsgaard Hougaard - oih@viauc.dk

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

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

18. Exercises 7.Create a video player in pure HTML5 using the 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. or ) and write the status of the video player to that element when the status changes. Ole Ildsgaard Hougaard - oih@viauc.dk

19. Canvas is like an 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: Ole Ildsgaard Hougaard - oih@viauc.dk

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

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

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

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

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

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

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

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