bring life to your web pages with javascript and html5
DESCRIPTION
Bring Life to Your Web Pages with JavaScript and HTML5. 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…. HTML5. - PowerPoint PPT PresentationTRANSCRIPT
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 stuffvar 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 objectvar x = 7;
x = x + x;
window.alert(x);
window is the global object.
Extending windowwindow.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-loopsvar 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 functionsfunction (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?
Exercises1. 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 titlethis.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 elementsfunction init() { this.dragArea = document.getElementById("dragArea");
this.image = document.getElementById("image");
//…}
Centering the picturefunction 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;};
Exercises3. 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.)