bring life to your web pages with javascript and html5 ole ildsgaard hougaard - [email protected]
TRANSCRIPT
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 - [email protected]
HTML5
• New tags: <header>, <footer>, <datalist>, <article>, <section>, …
• Multimedia support: <audio>, <video>
• New APIs: canvas, drag-and-drop support
Ole Ildsgaard Hougaard - [email protected]
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
<!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 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 functionfunction 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 functionvar x = 7;
(function (x) { var y = x + x; alert(y);})(x);
Saving a function in a variableshowDouble = 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
<img>
<div>
Body of the document
<body onload="init()"> <div id="dragArea"> <img id="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() { //…
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 versionfunction 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.)