HOME -> JS_TUTORIAL -> js-05 Tirsdag, 27. Juni 2017

HOME
FORUM
OPEN DIRECTORY
BOOKMARK
Offentliggjort 2003 - Opdateret n/a

Lektion 05

Funktioner

Indhold

 

TopIndledning
Det kan undertiden være svært at læse et stort JavaScript, som indeholder en masse kode. Nogen gange er den samme kode måske blevet anvendt to eller flere gange. Ved at anvende funktioner kan du gøre dit script mere overskuelig, og samtidig anvende funktionerne flere steder. Du kan altså kalde funktionen så mange gange du har brug for den.
Funktioner kan modtage en række data (input) og efterfølgende returnere en bearbejdet værdi (output).

Definition: Funktioner er en gruppe (blok) af instruktioner, som kan opfattes som en enhed. Disse kan kaldes fra andre steder i programmet.


Syntaks:

function funktionsnavn(argumenter)
{
    en eller flere instruktioner
}



 

TopGennemgang af funktionens syntaks
En funktion startes med ordet function, og efterfølges af det navn som du har givet denne (funktionsnavn). Der er altid parenteser () efter funktionsnavnet, inden man anvender krøllede parenteser {}. De krøllede parenteser indeholder en række instruktioner som ønskes udført.

 

TopEksempel på en funktion

<script type="text/JavaScript">
function advarsel() {
    alert("Wooow, dette er en advarsel!")
}
</script>


Nu har vi lavet en funktion. Og for at vise at den virker kan vi efterfølgende kalde denne med event handleren onclick.

 

TopAt kalde en funktion
Normalt anvendes en event handler til at kalde en function. Tager vi vores function fra før, kan denne kaldes når der klikkes på knappen "Vis som eksempel".


<input type="button" value="Vis som eksempel" onclick=" advarsel()" />


 

 

TopSend din information til en funktion
Meget ofte har man brug for at kunne sende informationer til en funktion for at få den behandlet. I vores eksempler anvender vi event handleren onclick sammen med metoden alert for at illustrere anvendelsen. Du kunne lige så godt havde sendt informationer fra et formular til gennemsyn via en funktion, der kontrollerer om alle felter er udfyldt korrekt.


<script type="text/JavaScript">
function NYadvarsel(meddelelse) {
    alert(meddelelse)
}
</script>


knappen ændres tilsvarende:


<input type="button" value="Vis som eksempel" onclick="NYadvarsel('Her er en NY advarsel!')" />


 

Nu har du faktisk muligheden for at anvende funktionen NYadvarsel alle de gange du måtte have brug for det. Du tilføjer ganske enkelt en ny knap med den advarsel du ønsker skal poppe up.


<html>
<head>
<title>Function</title>

<script type="text/javascript">
<!-- Skjuler scriptet

function advarsel(meddelelse) {
alert(meddelelse)
}

// Slut skjul scriptet -->
</script>
</head>

<body>
<h2>Lidt forskellige advarsler!</h2>
<hr />
<form>
<input type="button" value="Advarsel 1" onclick="advarsel('Wooow, dette er en advarsel!')" />
<input type="button" value="Advarsel 2" onclick="advarsel('Dette er din anden advarsel!')" />
<input type="button" value="Advarsel 3" onclick="advarsel('Så for du ikke flere advarsler!')" />
</form>
</body>
</html>


Vis som eksempel

Dette var kun en lille smagsprøve på hvad funktioner kan anvendes til. En funktion kan rent faktisk være temmelig omfattende, og dermed fylde væsentlig mere end de tre linier vi havde i vores eksempel.

 

Videre til næste lektion der omhandler event handler.

EVENT HANDLER >>

 

Copyright © 2002 - 2017
NETeXplorer.dk · All rights reserved Top