EchoEcho.Com
KOMPLETTE WEBKURSER

HJEM KURSER JAVASCRIPT INTRO     
EchoEcho.Com
TOOLS & RESSOURCER
 HJEM 
 
 KURSER 
 
 RESSOURCER 
 
 REDSKABER 
 
 DOKUMENTATION 
   
 OVERSIGT 
  
  SØG PÅ DETTE SITE

FORESLÅ DETTE SITE
FORESLÅ DETTE SITE      

JAVASCRIPT INTRO

INTRODUKTION


PLACERING I HTML


DET FØRSTE SCRIPT


STORE BOGSTAVER


POP UP BOXE


VARIABLE


IF OG ELSE


FUNKTIONER


EVENTS


LOOPS


ARRAYS

JavaScript :
EVENTS

Events er handlinger, der kan spores af Javascript.

Et eksempel kunne være onMouseOver-eventen, som spores, når brugeren bevæger musen henover et objekt.

En anden event er onLoad-eventen, som bliver sporet, så snart siden er færdig med at loade.

Normalt bruges events i kombination med funktioner, for at funktionen ikke starter, før eventen har fundet sted.

Et eksempel kunne være en funktion, som animerer en knap.

Funktionen skifter simpelthen mellem to billeder - et billede, som viser knappen i up-state, og et andet billede, som viser knappen i down-state.

Hvis denne funktion kaldes en onMouseOver-event, så vil den få det til se ud som om, at knappen trykkes ned, når musen bevæges hen over billedet.

Følgende er de vigtigste events, der bliver sporet af Javascript:

EventSpores nårHTML-tags
onFocus=""Form-felter får fokusUdvælg, Tekst, Tekstområde
onBlur=""Form-felter mister fokusUdvælg, Tekst, Tekstområde
onChange=""Indholdet i et felt ændresUdvælg, Tekst, Tekstområde
onSelect=""Tekst udvælgesTekst, Tekstområde
onMouseOver=""Musen bevæger sig hen over et linkA
onMouseOut=""Musen bevæger sig væk fra et linkA
onClick=""Musen klikker på et objektA, Knap, Tjekboks,
Radio, Reset, Submit
onLoad=""Siden er færdig med at loadeBody, Frameset
onUnload=""Browseren åbner nyt dokumentBody, Frameset
onSubmit=""Der trykkes på submit-knappenForm


Events bliver brugt af to hovedårsager:
  • For at udføre en funktion efter at have sporet eventen, og/eller


  • For at vise pop-op-bokse efter at have sporet eventen.


Nedenfor er en kort beskrivelse af hovedårsagerne til hver enkelt event.




onFocus, onBlur og onChange bruges hovedsageligt i kombination med form-felters gyldighed.

Lad os antage, at du har en funktion kaldet validateEmail(), som tjekker, om en indtastet email-adresse har et @ i sig, og om den har en meningsfuld slutning såsom "com", "net" etc. Lad os ydermere antage, at brugeren kan indtaste sin email-adresse i en form.

I dette tilfælde skal du bruge onChange-eventen for at kalde funktionen, hver gang brugeren ændrer indholdet i feltet:

<input type="text" size="20" onChange="validateEmail()">;


Klik her for at lære mere om forms.
Klik her for at lære mere om form-felt-gyldighed.




onLoad og onUnload bruges hovedsageligt til pop-op'er, som vises, når brugeren kommer ind på eller forlader siden.
En anden vigtig brug er i kombination med cookies, som bør sættes ved ankomsten til eller afskeden med siden.

Du har måske en pop-op, som beder brugeren om at indtaste sit navn første gang, han/hun kommer ind på siden. Navnet lagres så i en cookie. En cookie lagrer ydermere datoen, når den besøegnde forlader din side.
Næste gang den besøgende kommer ind på din side, vil en pop-op sige: "Velkommen Bill Clinton, denne side er ikke blevet opdateret, siden sidst du besøgte den for 8 dage siden".

Klik her for at lære mere om at indsætte cookies.
Klik her for at lære mere om pop-op-bokse.

En anden mere eller mindre almindelig brug af onLoad og onUnload-events er dette: Nogle irriterende sider har en funktion, som med det samme åbner flere andre vinduer, så snart du kommer ind på siden. Dette er et klart brud på netiketten, og bliver ikke anset for at være godt web-design.




onSubmit bliver brugt af én eneste årsag: At vurdere alle felter i en form, før de faktisk bliver sendt.

I ovennævnte eksempel med onChange viste vi, hvordan du kan vurdere et enkelt form-felt.

Nogle gange vil den besøgende dog finde det irriterende at få vurderinger lige midt i indtastningen i en forms felter. I stedet for at vurdere efter hvert input, kunne du vente med at lade formen blive vurderet til brugeren klikker på sendeknappen.

Det kan gøres ved at bruge onSubmit-eventen.


Antag at du lavede en funktion kaldet checkform(), som vurderede indtastninger i en form.

Nu vil du have, at denne funktion bliver kaldt, når brugeren klikker på sendeknappen.
Hvis indholdet ikke accepteres af din funktion, skal afsendelsen annulleres.
På denne måde bliver intet sendt, med mindre din funktion accepterer indholdet.

Du skal gøre følgende: indsæt en onSubmit-event i <form>-tagget på denne måde:

<form method="ditvalg" action="ditvalg" onsubmit="returner tjekform()">


Funktionen tjekform() returnerer enten sand eller forkert.
Hvis den returnerer sand vil afsendelsen blive gennemført.
Hvis den returnerer forkert vil afsendelsen blive annulleret.

Klik her for at lære mere om forms.
Klik her for at lære mere om formgyldighed.




onMouseOver og onMouseOut bruges hovedsageligt af en årsag: Til at lave animerede knapper.

Måske har du bemærket, at disse events kun kan bruges i kombination med link-tagget <a>.

Men events er ofte mere brugbare i kombination med billed-tagget <img>. Kunsten at få eventen til at fungerer på et billede er simpelthen at lave billedet om til et link (hvis billedet ikke rent faktisk skal fungere som et link, kan du altid få det til at linke til et tomt anker, som vist i eksemplet nedenfor).

Eksempel: en alert-boks dukker op, når en onMouseOver spores på et billede:



HTML'en i eksemplet:

<a href="#" onMouseOver="alert('Jeg sporede en onMouseOver-event'); return false" onMouseOut="alert('Jeg sporede en onMouseOut-event'); return false">
<img src="rainbow.gif" width="60" height="60">
</a>


NB: a href="#" linker billedet til ingenting. Hvis du faktisk ønsker, at billedet skal linkes til en side, skal du i stedet indtaste adressen på siden her.

Klik her for at lære mere om links og # ankre.
Klik her for at lære mere om alert-bokse.



<< TILBAGE
LÆS MERE >>

JAVASCRIPT MENU

JAVASCRIPT INTRO


ANIMEREDE KNAPPER


BROWSER DETECTION


COOKIES


POPUP VINDUER


DROP DOWN MENU


FORM VALIDERING


FRAMESET SCRIPT


MULTI LINK








EchoEcho.Com
KOMPLETTE WEBKURSER
 HJEM 
 
 KURSER 
 
 RESSOURCER 
 
 REDSKABER 
 
 DOKUMENTATION 
   
 OVERSIGT 
EchoEcho.Com
TOOLS & RESSOURCER

(c) Copyright 1998-1999 NetKontoret - All Rights Reserved         Opdateret: 09/20/2001 12:10:09