MDU - Interaktionskonstruktion

En event udløses af en brugerbestemt handling i browseren. Klikker brugeren fx på en musetast eller trykker på en tast udløses en event. Når disse events finder sted, kan man via JavaScript bede om at få udført forskellige handlinger. Det sker ved at indsætte en såkaldt eventhandler. Eventhandlere bliver knyttet til et objekt i DOM, så eventhandleren aktiveres i det øjeblik den handling, som eventhandleren er beregnet til at spore, finder sted i relation til objektet.

Det er eventhandlerne der er interessante her, for uden dem ville de indtrufne events ikke blive opfanget, og de ville dermed ikke udløse noget som helst. Er der derimod en eventhandler knyttet til objektet, kan eventhandleren sættes til at udføre en stump JavaScript kode eller et kald til en JavaScript funktion, i det øjeblik eventen finder sted.

En eventhandler er således knyttet til et objekt i DOM. Eventhandlere er lette at genkende, fordi de altid er forsynet med prefikset on.

<button onclick="alert('Boo!');">Click me</button>

<a href="#" onclick="alert('Boo!');">Click me</a>

Eventhandlers

Herunder ser du en liste med de mest almindelige events i JavaScript og de tilsvarende eventhandlere. Du får samtidig en angivelse af, hvornår de udløses, og hvilke elementer de er knyttet til. Du skal dog være opmærksom på, at i nyere browsere kan de viste events anvendes sammen med en del flere objekter end dem, der er nævnt her.

Eksempler på anvendelse

Event Object

Event	Anvendelse
onblur	Lukke popup vinduer når de mister fokus
onchange	Løbende formvalidering af enkeltelementer
onclick	Udløser handlinger i forbindelse med tryk på knap, etlink eller et tekstfelt.
onload	Et script som udføres, når en side loades, fx billeder der skifter
onmouseover	Rollover effekt
onmouseout	Rollover effekt
onresize	Replacering af elementerne i et vindue, hvis de er placeret i forhold til vinduets størrelse.
onsubmit	Kald af en valideringsrutine når der trykkes på submit en form

Using Events with Functions
1. Inline Events onclick="alert('welcome'); Eksempler: Lommeregner, hotelplaner , Random generator

2. The Traditional Model
function message(){ alert(”Welcome”); }
window.onload = message; // no parentheses after message!

3. The jQuery

JavaScript Biblioteket Jquery

Fordele ved Javascript biblioteket JQuery eri følge introartikel af Dave Sawyer McFarland

Her gives der eksempel på hvordan en HTML tabel kan gøres med brugervenligt og funktionelt via JQuery.

$(document).ready(function() {
$('tr:even').addClass('striped');

});

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

#header {color:#0033FF ;}

.paragraf {background-color:#00CC33; border:dotted }

</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="js/jquery.js"></script>

function aabenBox(){
$("#blueBox").fadeIn();
}
function gemBox(){
$("#blueBox").hide();

}

function newHeadText(){

$("#header").html("Hello World ");

}

</script>

<body>

<div id="blueBox">BLUE BOX</div>
<h1 id="header"> A Headline </h1>

<p class="paragraf"> Intro to use of Jquery </p>

</form>

</body>
</html>

Flere Jquery eksempler:

Chapter 7

Chapter 8

Chapter 9

Chapter 10

Opgaver/Øvelser

2. Tilføj den manglende JavaScript code sådan at lommeregneren på nedenstående link kommer til at virke.

3. Lav en form validering af følgende html form ved at tilføje de manglende elementer i javascript funktionen.

Hint: Forbind submit knappen med valideringsfunktionen. Giv input felterne en id. Hent brugerinput og gem dem i nogle javascript variabler.

Prøv at undersøge hvordan Jquery kan bruges til at validere formen på denne side.

4. Gruppeøvelse: Afprøve en eller flere Jquery effekter som I kan finde på/via:

Lav en kort præsentation for klassen af jeres Jquery prototype. Prøv at kommentere jeres kode så godt som muligt.

Event	Genereres af	Handlingen udløses når	Event handlerens navn
abort	image	Brugeren afbryder indlæsningen af et billede	onabort
blur	window og form elementer	Et formelement, en frame eller et vindue mister fokus	onblur
change	text field, text area og select liste	Værdien ændres og elementet mister fokus	onchange
click	checkbox, radio knap, submit knap, reset knap, knap (button) og link	Der klikkes på formelementet eller linket	onclick
dragdrop	window	Et objekt, fx en fil trækkes ind over og slippes i et vindue	ondragdrop
error	image og window	Der opstår en fejl under indlæsning af et billede eller et dokument	onerror
focus	window og form elementer	Et formelement, en frame eller et vindue får fokus	onfocus
keydown	document, image, link og textarea	En tast trykkes ned på tastaturet	onkeydown
keypress	document, image, link og textarea	En tast trykkes ned og holdes nede	onkeypress
keyup	document, image, link og textarea	En tast frigives	onkeyup
load	document	En webside læses ind i browseren	onload
mousedown	document, button, link	En museknap trykkes ned	onmousedown
mousemove	ingen objekter	Markøren bevæger sig	onmousemove
mouseout	link, image	Markøren forlader et område eller et link	onmouseout
mouseover	link, image	Markøren bevæger sig ind over et område eller et objekt	onmouseover
mouseup	document, button, link	En museknap frigives	onmouseup
move	window	Et vindue flyttes	onmove
reset	reset knappen i en form	Der trykkes på reset knappen i en form	onreset
resize	window	Et vindue ændre størrelse	onresize
select	text felt, text area og selectliste	Et element vælges	onselect
submit	submit knappen i en form	Der trykkes på submit knappen i en form	onsubmit
unload	document	En webpage forlades	onunload

Interaktionsudvikling 2.sem. foraar 2010, Multimediedesigneruddannelsen, Århus Erhvervsakademi

Interaktion 2.semester - Konstruktion og modellering

Plan for dag 3.

Læsestof til disse lektioner

Events