Bring Life to Your Web Pages with JavaScript and HTML5

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

Web and Multimedia • HTML 1 had pictures, but nothing else. • HTML 2, 3 and 4? The same(!) • What do we do instead? Plug-ins. • Possible plug-ins: Windows Media Player, Apple QuickTime, Adobe Flash • De-facto standard: Flash • but… Ole Ildsgaard Hougaard - oih@viauc.dk

HTML5 • New tags: <header>, <footer>, <datalist>, <article>, <section>, … • Multimedia support: <audio>, <video> • New APIs: canvas, drag-and-drop support Ole Ildsgaard Hougaard - oih@viauc.dk

JavaScript • Not Java! • A scripting language (whatever that means) • A dynamic language (whatever that means) • Used to Java or C#? • JavaScript can be quite familiar • JavaScript can be a bit odd • JavaScript can be downright weird

Why JavaScript? • Saves server roundtrips • Saves bandwidth • Saves server processing power • (Almost) standard • No installation required • Powerful language

Why not JavaScript? • Slow (in some browsers) • Might be switched off • Not completely standard • Yet another language to learn • Strange language

The simple stuff No type var x = 7; x = x + x; alert(x); Part of browser environment

Simple HTML page <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Simple</title> <script language="javascript" src="simple.js"> </script> </head> <body> </body> </html>

Other simple HTML page <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Simple</title> <script language="javascript"> var x = 7; x = x + x; alert(x); </script> </head> <body> </body> </html>

The window object var x = 7; x = x + x; window.alert(x); window is the global object.

Extending window window.x= 7; x = x + x; window.alert(window.x); x is a field in the windowobject.

What does this do? window.x= 7; x = x + x; window.alert(window.y);

Arrays and for-loops var numbers = [1, 2, 4, 8]; for(vari = 0; i < numbers.length; i++) { alert(numbers[i]); }

Functions • A function is like a method in other languages • The syntax is like Java except you don't have types • Defining a function means defining a method on the this object • Functions are first-class citizens

Defining and calling a function function showDouble(x) { var y = x + x; alert(y); } var x = 7; showDouble(x); • showDouble is a method on the this object • y is a local variable

Anonymous functions function (x) { var y = x + x; alert(y); }

Calling an anonymous function var x = 7; (function (x) { var y = x + x; alert(y); })(x);

Saving a function in a variable showDouble = function (x) { var y = x + x; alert(y); } var x = 7; showDouble(x); • showDouble is a field on the windowobject • What is the difference between methods and fields containing functions?

Exercises • Create an HTML page with a JavaScript program that adds the first 10 numbers and shows the result. • (Optional) Create a JavaScript function that takes a number (call it n) and returns a function. The returned function should take a number (call it m) and return m*n.

Interacting with the page • The primary interaction with the browser is through the document • The document is the HTML document that the browser is rendering • The document is modelled in an object model • It's the Document Object Model (DOM)

The DOM • The document object model represents all elements of the HTML/CSS as an object • Main objects are: window and document • window is used to interact with the browser window • document is used to interact with HTML/CSS

Changing the title this.x = 7; x = x + x; document.title = x;

Dragging an image <div> <img>

Body of the document <body onload="init()"> <div id="dragArea"> <imgid="image"src="facepalm-bear.jpg"> </div> </body>

Let's get stylish <style> #dragArea { width: 800px; height: 600px; border: 1px solid black; position: relative; overflow: hidden; } #image { position: absolute; } </style>

Events • DOM has an event model • Examples of events: • onload • onclick, onmousedown, onmousemove, onmouseup • onscroll • onsubmit

Setting an event handler • In the HTML:<body onload="init()"> … </body> • In JavaScript code:document.body.onload = init;… but when?

Finding elements function init() { this.dragArea = document.getElementById("dragArea"); this.image = document.getElementById("image"); //… }

Centering the picture function init() { //… varareaWidth = dragArea.clientWidth; varareaHeight = dragArea.clientHeight; varimgWidth = image.clientWidth; varimgHeight = image.clientHeight; image.style.left = (areaWidth - imgWidth) / 2; image.style.top = (areaHeight - imgHeight) / 2; //… }

Let's make a simpler version function init() { //… dragArea.onclick = move; } function move(event) { // Internet Explorer hack: if (!event) event = window.event; image.style.left = event.clientX - dragArea.offsetLeft; image.style.top = event.clientY - dragArea.offsetTop; };

Exercises • Create an HTML page with a button. Show the sum of the first 10 numbers when the button is pressed. • Add a field to the page and • Create an HTML page with a gallery of images (whatever you can find on the net or your own harddisk). There should be a "previous" and a "next" link to flip through the images. (Hint: You can set the "src" attribute of an image element.)

Bring Life to Your Web Pages with JavaScript and HTML5