Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard -

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 -

HTML5 New tags:,,,,, … Multimedia support:, New APIs: canvas, drag-and-drop support Ole Ildsgaard Hougaard -

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 var x = 7; x = x + x; alert(x); No type Part of browser environment

Simple HTML page Simple

Other simple HTML page Simple var x = 7; x = x + x; alert(x);

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 window object.

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(var i = 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 window object What is the difference between methods and fields containing functions?

Exercises 1.Create an HTML page with a JavaScript program that adds the first 10 numbers and shows the result. 2.(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

Body of the document

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

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

Setting an event handler In the HTML: … 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() { //… var areaWidth = dragArea.clientWidth; var areaHeight = dragArea.clientHeight; var imgWidth = image.clientWidth; var imgHeight = 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 3.Create an HTML page with a button. Show the sum of the first 10 numbers when the button is pressed. 4.Add a field to the page and 5.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.)