pagetutor.com - HTML tutorials for the rest of us
JavaScript Tutor v 1.0 oversat af Ewan Rasmusson & Andrew Smith af Joe Barta
pagetutor.com
Download zip fil.
JavaScript Tutor - Lektion 4

"Events".

Hvad er en "event"? En Event er når noget sker. F.eks som når du flytter musen, et klik på musen, indlæsning af en side, osv.

Vi kan lave en almindelig advarsels boks, som kommer frem når siden indlæses ved hjælp af onLoad "event handler i body tag'et"... 

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="JavaScript"><!--

function HejVerden()
{
   alert ('Hej Verden!');
}

//--></SCRIPT>

</HEAD>
<BODY onLoad="HejVerden()">

Hej

</BODY>
</HTML>

Prøv det.

Hvad er der ellers? Mange mennesker bruger "onMouseOver event handlers" i links. Her er det samme eksempel med et par små ændringer... 

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="JavaScript"><!--

function HejVerden()
{
   alert ('Hej Verden!');
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="" onMouseOver="HejVerden()">Hej</A>

</BODY>
</HTML>

Prøv det.

Du vil opdage at linket ikke peger på noget. Det er ikke noget vi vil have på en færdig side, men da vi er i gang med at lære, lader vi det være.

Vi kan også lave en "onMouseOut". Alert kommer ikke frem før musen bevæger sig væk fra linket. 

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="JavaScript"><!--

function HejVerden()
{
   alert ('Hej Verden!');
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="" onMouseOut="HejVerden()">Hej</A>

</BODY>
</HTML>

Prøv det.

"onClick"er også en "event handler" 

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="JavaScript"><!--

function HejVerden()
{
   alert ('Hej Verden!');
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="" onClick="HejVerden()">Hej</A>

</BODY>
</HTML>

Prøv det.

Øvelse: Nu er det din tur... lav en side som spørger om dit navn, og bagefter siger Hej dit navn! når siden indlæses.

Her er en løsning.

Du kan have lige så mange funktioner, som du har lyst til. Det er en god idè at holde orden i dem og begrænse antallet... 

[SNIP]
function HejVerden()
{
   alert ("Hej Verden");
}

function HejStinky()
{
   alert ("Hej Stinky!");
}
[SNIP]

Øvelse: Nu skal du lave en web side ved at bruge de tre røde knapper og to funktioner. Siden skal spørge efter brugerens navn onLoad. Når musen bevæger sig over en af de tre røde knapper, kommer en alert frem med f.eks "Hej Joe. Du flyttede musen over nummer 1".

Her er en løsning.

Så er det på tide at forklare semikolon (;) som findes sidste i nogle af linier. Brug semikolon til at afslutte en kommando. Det fortæller browseren når en kommando afsluttes og en anden begynder. Du kan også placere flere kommandoer på en linie, adskilt med et semikolon... 

instruktion1;
instruktion2;
instruktion3;
er det samme som 
instruktion1; instruktion2; instruktion3;

<< Tilbage         Næste >>

JavaScript Tutor

   Lektioner:   Intro  1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25