Administreres af:

Funktioner

Tilbage til oversigtstabel Tilbage

Af: novicen.dk

Funktioner

Funktioner er små selvstændige stykker kode, der kan indbygges på hjemmesiden og som først bliver effektueret, når de specifikt bliver kaldt. Det vil sige, når der bliver bedt om, at de skal udføres. I praksis betyder det, at det kodestykke, som skrives i funktionen bliver indkapslet i dokumentet og først bragt til udførelse ved en given hændelse.

Eksempelvis kunne vi bygge en function, som når siden er indlæst i browseren popper op og fortæller os, hvorfra vi har klikket. Funktioner kapsles ind med startkoden "function" efterfulgt af det navn, som vi giver funktionen og tilsat to modstillede paranteser (). Indholdet i funktionen angives mellem to modstillede krøllede paranteser {//indhold her;}

<script type="text/JavaScript"><!--
function visRef() {
  reference = document.referrer;
  if (reference!="") {
    alert("Du har fulgt linket fra:\n" +reference);
    }
  }
// -->
</script>

BODY TAG'en skal derefter tilføjes hændelsen onLoad="visRef()", for at udløse alert boksen i funktionen.

Kald til funktioner kan også foregå direkte fra et programgennemløb, således at du i forbindelse med indlæsningen af et dokument kan foretage beregninger indkapslet i funktioner. Det er på denne måde muligt dels at gøre koden mere overskuelig og dels at genbruge de opsatte beregningsrutiner.

Anvendelse af funktionen visRef() kunne derfor få følgende udseende:

<script type="text/JavaScript"><!--
function visRef() {
  reference = document.referrer;
  if (reference!="") {
    alert("Du har fulgt linket fra:\n" +reference);
    }
  }

visRef();

// -->
</script>

Forskellen på denne metode og anvendelse af onLoad-hændelsen er, at i sidste tilfælde vises pop-up boksen, når kodeafviklingen når linien visRef(); hvor første eksempel vil give pop-up boksen når alt andet er indlæst.

Der er i eksemplet anvendt en variabel kaldet reference og denne er tildelt værdien document.referrer, som oplyser fra hvilken web-side brugeren har klikket sig frem. Der er i funktionen indsat en "if"-betingelse. Denne er uddybende omtalt på siden med betingelser og den bevirker, at såfremt brugeren indtaster adressen på hjemmesiden direkte i adressefeltet i browseren, vil der ikke komme nogen pop-up boks.

Mellem de to modstillede almindelige paranteser er det muligt at angive parametre, som funktionen kan efterbearbejde. Det bliver dermed muligt at anvende den samme funktion til at håndtere samme type opgave men med forskellige startbetingelser.

Vi kunne eksempelvis anvende den samme funktion til at lægge to tal sammen, hvor vi tester mellem forskellige værdier af de to tal. Funktionen kunne, for eksemplets skyld, kaldes via onClick hændelser på forskellige links.

function addering(inputA, inputB) {
  tekst = "Resultatet af summen mellem " +inputA +" og " +inputB +" er:\n\n"
  resultat = inputA + inputB;
  alert(tekst + resultat);
  }

Funktionen kunne være bygget som en del af den eksisterende kode men er her tilknyttet ved at indsætte koden for kald til ekstern JavaScript:

<script type="text/JavaScript" src="beregning.js">

Der er for hver enkelt af de angivne links indlagt en onClick hændelse i A TAG'en. Hændelsen kalder funktionen med de forskellige inputvariable. Eksempelvis:

<a href="JavaScript:void(0)" onclick="addering(54, 3)">Se resultat af 54 + 3</a>

Forsøg dig selv ved at bygge en funktion op, der ganger to tal med hinanden eller trækker to tal fra hindanden.

Det er muligt at anvende funktioner, som kalder hinanden indbyrdes og det er muligt at få funktioner til at returnere et resultat dvs. en svarværdi. Forestil dig eksempelvis, at vi altid skal sørge for, at tallene vi arbejder med er positive. Vi kunne for eksemplets skyld foretage denne test i en ekstra indbygget funktion, som vi kalder lavPositiv(), der omregner vores tal til altid at være positivt. Vi gemmer denne gang vores funktioner i en .js-fil , som vi kalder for posberegning.js og gør igen her brug af "if"-betingelsen.

function adderTal(inputA, inputB) {
  inputA =lavePositiv(inputA);
  inputB =lavePositiv(inputB);
  tekst = "Resultatet af summen mellem " +inputA +" og " +inputB +" er:\n\n"
  resultat = inputA + inputB;
  alert(tekst + resultat);
  }

function lavPositiv(inputTal) {
  if (inputTal>=0) {
    return inputTal;
    }
  else {
    inputTal *= -1;
    return inputTal;
    }
  }

Se resultat af 2 + -23

Se posberegning.js

Læg mærke til, at funktionen der lægger de to tal sammen har fået et nyt navn. Dette skyldes, at vi ikke kan have mere en et element med samme navn på den samme hjemmeside. Vi må f.eks. heller ikke samtidig have et formularfelt, hvis name="adderTal" eller "lavPositiv". Selvom vores funktioner ligger i to forskellige eksterne filer, så bliver disse indlejret på den samme hjemmeside og funktionerne skal derfor have entydige og forskellige navne, for ikke at konflikte. De samme navne kan genbruges på andre sider - også indenfor samme web-sted - men må altså ikke optræde mere en én gang for hver side.

Det første vi foretager i funktionen adderTal() er, at inputdata - inputA hhv. inputB - bliver konverteret, ved at de føres til funktionen lavPositiv(), der returnerer den samme værdi, hvis tallet i forvejen er positivt men som ganger med -1, og dermed gør tallet positivt, hvis det fra starten er negativt.

På tilsvarende vis er det muligt at returnere værdierne true eller false, hvis vi arbejder med logiske udtryk.

Til top