|
| En lille praktisk indføring | Tilbage til oversigtstabel Tilbage |
Af novicen.dk
Lad dig ikke afskrække. Tag et skridt af gangen. Lad dig lede.
Det, du oplevede, netop da siden blev indlæst, var en pop-up boks af typen alert(). Boksen blev indlæst som følge af en hændelse. Den hændelse det er, når siden er kommet helt ind i din browser. Navnet for den aktuelle hændelse er onLoad="" og den skal indsættes sammen med de øvrige elementer i BODY-tag'en: <BODY onLoad="visboks()">.
<body bgcolor="#ffeedd" onload="visboks()">
I det aktuelle tilfælde kalder onLoad hændelsen en funktion, som hedder visboks(). Funktionen visboks() er i dette tilfælde placeret i HTML-dokumentets HEAD-sektion og indeholder en programlinie, der får pop-up boksen til at fremkomme: alert('Velkommen til\n\nDu skal klikke Ok,\nfor at komme videre :-)');
<script type="text/JavaScript"><!--
function visboks() {
alert('Velkommen til\n\nDu skal klikke Ok,\nfor at komme videre :-)');
}
// -->
</script>
alert() er selve advarselsboksen og det, som står indenfor parantesen bliver vist som tekst i boksen. Teksten skal være omklamret af anførselstegn - her er brugt enkelte. De baglæns skråstreger kaldes her for escape-karakterer og de bevirker, at JavaScript fortolker den efterfølgende karakter efter specielle retningslinier. I denne situation bliver n fortolket som en ny linie, når der skrives \n.
Kodestykkerne <!-- og // --> indsætter JavaScriptkoden som en HTML kommentar og det har kun virkning for de browsere, der er for gamle eller hvor anvendelse af JavaScript måtte være slået fra.
| Til top |
Billedet er indsat ved brug af en ordinær <IMG...> tag, der er tilføjet parametren name="billede". Herved bliver det muligt at få fat i selve indholdet for den position, som billedet optager. Med andre ord er det muligt for os, at skifte billedet ud med et andet.
<img height="70" width="200" src="billeder/normal.gif" name="billede">
Omkring billed tag'en er indsat henvisningskode <a href="...">...</a>, hvor der er indsat hændelse på tilsvarende vis, som ovenfor nævnte onLoad. De indsatte hændelser hedder her onMouseOver="" og onMouseOut="", der virker når musen bevæges ind over billedet hhv. når musen føres væk fra billedet.
<a href="Javascript:msKlik()" onmouseover='document.billede.src="billeder/over.gif"' onmouseout='document.billede.src="billeder/normal.gif"'><img height="70" width="200" src="billeder/normal.gif" name="billede"></a>
Af koden kan du se, at der i href="" delen er indsat en JavaScript:msKlik() henvisning. Dette er tilsvarende ovenstående også et funktionskald. Her kaldes blot funktionen msKlik(), der er indlejret i HTML-koden lige i nærheden af billedet.
<script type="text/JavaScript"><!--
function msKlik() {
document.billede.src="billeder/klik.gif";
}
// -->
</script>
Udskiftning af billedet foregår ved, at der indsættes et nyt billede på den plads, hvor det oprindelige billede er sat. Vi får adgang til denne plads, ved at bruge stien: document.billede.src, hvor "document" refererer til indeværende HTML dokument, "billede" refererer til name angivelse i IMG tag'en og ".src" indsættes for fil typen - her er .gif anvendt.
Når musen derfor føres ind over billedet, vil vores document.billede.src (= billedets indhold) blive skiftet ud med det billede, som er placeret på adressen billeder/over.gif. Tilsvarende vil ske, når musen føres væk fra billedet og begge tilstande effektueres direkte i hændelsesangivelsen i henvisnings koden.
I modsætning hertil sker udskiftning ved klik på billedet ved, at funktionen msKlik() kaldes i stedet for ved brug af hændelsen onClick="". I denne funktion foregår tilsvarende udskiftning. Denne metode er anvendt for ikke at have en tom eller manglende href="" angivelse, der kan give anledning til problemer i browseren.
| Til top |