bring life to your web pages with javascript and html5 ole ildsgaard hougaard - [email protected]
TRANSCRIPT
![Page 2: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/2.jpg)
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]
![Page 3: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/3.jpg)
HTML5
• New tags: <header>, <footer>, <datalist>, <article>, <section>, …
• Multimedia support: <audio>, <video>
• New APIs: canvas, drag-and-drop support
Ole Ildsgaard Hougaard - [email protected]
![Page 4: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/4.jpg)
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
![Page 5: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/5.jpg)
Why JavaScript?
• Saves server roundtrips• Saves bandwidth• Saves server processing power• (Almost) standard• No installation required• Powerful language
![Page 6: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/6.jpg)
Why not JavaScript?
• Slow (in some browsers)• Might be switched off• Not completely standard• Yet another language to learn• Strange language
![Page 7: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/7.jpg)
The simple stuff
var x = 7;
x = x + x;
alert(x);
No type
Part of browser environment
![Page 8: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/8.jpg)
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>
![Page 9: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/9.jpg)
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>
![Page 10: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/10.jpg)
The window object
var x = 7;
x = x + x;
window.alert(x);
window is the global object.
![Page 11: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/11.jpg)
Extending window
window.x = 7;
x = x + x;
window.alert(window.x);
x is a field in the window object.
![Page 12: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/12.jpg)
What does this do?
window.x = 7;
x = x + x;
window.alert(window.y);
![Page 13: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/13.jpg)
Arrays and for-loops
var numbers = [1, 2, 4, 8];
for(var i = 0; i < numbers.length; i++) { alert(numbers[i]);}
![Page 14: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/14.jpg)
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
![Page 15: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/15.jpg)
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
![Page 16: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/16.jpg)
Anonymous functions
function (x) { var y = x + x; alert(y);}
![Page 17: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/17.jpg)
Calling an anonymous functionvar x = 7;
(function (x) { var y = x + x; alert(y);})(x);
![Page 18: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/18.jpg)
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?
![Page 19: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/19.jpg)
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.
![Page 20: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/20.jpg)
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)
![Page 21: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/21.jpg)
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
![Page 22: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/22.jpg)
Changing the title
this.x = 7;
x = x + x;
document.title = x;
![Page 23: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/23.jpg)
Dragging an image
<img>
<div>
![Page 24: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/24.jpg)
Body of the document
<body onload="init()"> <div id="dragArea"> <img id="image" src="facepalm-bear.jpg">
</div> </body>
![Page 25: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/25.jpg)
Let's get stylish
<style> #dragArea { width: 800px; height: 600px; border: 1px solid black; position: relative; overflow: hidden; } #image { position: absolute; } </style>
![Page 26: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/26.jpg)
Events
• DOM has an event model• Examples of events:
– onload– onclick, onmousedown, onmousemove,
onmouseup– onscroll– onsubmit
![Page 27: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/27.jpg)
Setting an event handler• In the HTML:<body onload="init()"> … </body>
• In JavaScript code:document.body.onload = init;… but when?
![Page 28: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/28.jpg)
Finding elements
function init() { this.dragArea = document.getElementById("dragArea");
this.image = document.getElementById("image");
//…}
![Page 29: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/29.jpg)
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;
//…}
![Page 30: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/30.jpg)
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;};
![Page 31: Bring Life to Your Web Pages with JavaScript and HTML5 Ole Ildsgaard Hougaard - oih@viauc.dk](https://reader030.vdocuments.pub/reader030/viewer/2022020717/551c5bcd5503467b488b57ea/html5/thumbnails/31.jpg)
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.)