: Retur til startside  : Retur til javaScript-startside   

FUNKTIONER ,  REFERENCER  og  VARIABLE

     :  Funktioner
 :  Parameteroverførslen 		             :  Referencer til objekter
 :  Box-type og ikke-box-type objekter
 :  Referencer til rammer 		             :  Variabelerklæringer
 :  objekttype Function
 
 

FUNKTIONER

En funktion skrives som funktionsnavn() eller funktionsnavn(parametre)
For at udføre funktionen skal der være et kald til den; det kan også komme fra HEAD eller BODY afsnittene.
Her et eksempel på en funktion der tager et navn som parameter og returnere en bestilling. Men en funktion behøver ikke at bruge parameter eller returnere noget.
<script>
  var navneliste= new Array("Olga","Jørgen","Sofus","Esmaralda","Ole");   var nlindex=0;   function oel(navn){
    if (nlindex==5) nlindex=0;
    if (navn == null) return oel("Fanden selv")
      else return "En øl til "+navn
  }
</script> Knappen nedenfor er lavet med koden:
<form name=AF>
<input type=button name=AB value="Hvem skal mange bajer ha"
       onclick="document.AF.AB.value=oel(navneliste[nlindex++]);if (nlindex>5) nlindex=0;")>
</form>
Ovenfor sker kaldet med javaScript-kide i en event-handler (onClick i en knap). javaScript-koden kan naturligvis også placeres et andet sted, f.eks. kan man få <A Href=javascript:funktionskald() til at kalde en javaScript-funktion (her kaldet funktionskald()). Man kan ikke efter javascript:  bruge anden javascript-kode end funktionskaldet, så vi må tilføje en funktion til scriptet ovenfor:

    function ABskift(){
      document.AF.AB.value=oel(navneliste[nlindex++])
    }

     <A HRef=javascript:ABskift() > Ølskifte </a>
 Ølskifte       (klik for at skifte tekst på knappen ovenfor)

Hvis en funktion skal bruge et tal som input, fordi det skal bruges i en regneoperation, og den får en streng der ikke kan opfattes som et tal, bliver resultatet konstanten NaN (not a number).

Man kan også importere funktionerne fra en extern fil :   ,  i <HEAD>-afsnittet (eller andetsteds) skriv

    <script SRC=MINFUNC.js></script>

 

Parameteroverførslen

Parameteroverførslen sker normalt "by value", dvs hvis én funktion sender en variabel til en anden funktion, og denne anden funktion ændrer dens værdi, påvirker det ikke variablens værdi i den første funktion. Undtagelsen er hvis parameteren (variablen) er et objekt, og den 2.den funktion ændrer værdien af en af de variable objektet ejer (parameteroverførsel "by reference"):
"by value":
<script>
function f2(a2){
  a2 = 10;
}

function f1(){
  var a1 = 8;
  var b1 = a1;
  f2(a1);
  alert("Før kaldet var a1 = " +b1+ " og nu er a1 = " +a1)
}</script>
 <form><input type=button onClick=f1() value='test "by value"'></form> 		"by reference":

<script>
function ff2(a2){
  a2.value = "Ny knapværdi";
}
</script>

<input type=button onClick=ff2(this) value="Gammel knapværdi">

      
Her bliver a1 (=8) overført til en parameter i funktion f1, og parameterens værdi ændres til 10. Det ændrer ikke værdien af a1. Her bliver knappen overført som en parameter til funktion ff2, og parameterens value ændres. Det ændrer knappens value.
 
Parameteroverførsel "by reference" kan somme tider give uventede resultater. Ovenfor er det så oplagt - der kan kun stå én ting på knappen - men det sker også hvis a er et objekt, og vi skriver b=a. b er nu et andet navn for samme objekt, og hvis b ændres vil a også blive ændret.   :  Klik for eksempel hvor én Array sættes lig en anden Array og reverse()'s.

I javaScript behøvs man ikke angive hvor mange parametre en funktion skal kaldes med (i modsætning til Java og C). Parametrene overføres til funktionen i form af et arrayobjekt ved navn arguments; elementerne i arrayet må dog ikke være tal.
Eksempel:
function parametertaeller(){
  var s="Funktionen blev kaldt med "+arguments.length+" parametre:      "
  for (var i=0; i<arguments.length; i++)
       s+="    "+i+" :  "+arguments[i];
  alert(s);
 }
Knapperne kalder function parametertaeller( . . . ) med
Den sidste knap: <input type=button value="3 parametre" onClick='parametertaeller("pnul","p1","p2")'>
 

REFERENCER til objekter

Hvis vi vil - eksempelvis - skrive til en knap (button), så må vi i javaScript-koden forklare vafforen knap. Så kigger vi på windowhirakiet og ser arvefølgen:
      window —> document —> form —> buttom
Der er ofte kun ét vindue og ét document, men flere forme og knapper, så for at udpege en bestemt knap må vi navngive den og den tilhørende form. vi kan så udpege knappen med
      window.document.formens_navn.knappens.navn
Vi har en "ØL"knap ovenfor, vi kaldte knappen "AB" og den tilhørende form "AF", så vi kunne skrive til knappen med
      document.AF.AB.value=oel(navneliste[nlindex++])
ordet "window" er sprunget over, så er det underforstået at det er "dette" vindue. Det kan forenkles endnu mere: Koden indeni knappen skal skrive til "denne" knap, og hertil har vi det reserverede ord "this", så vi havde bare behøvet at skrive
      this.value=oel(navneliste[nlindex++])
Eksemplet lige ovenfor benytter det reserverede ord this.

Kald til et andet vindue:
Hvis man åbner et nyt vindue med nytvindue=(open(...)) kan man i det nye vindue referere til det kaldende vindue med det reserverede ord opener (ejes af object window, så den hedder også window.opener) . Fra det gamle vindue kan man kalde det nye, der her har fået navnet "nytvindue", f.eks. kan man fra det gamle vindue ‘ndre indholdet i det nye vindue med en knap der har  onClick=nytvindue.location=FILX.HTM
Fra det nye vindue kan man ‘ndre indholdet i det kaldende vindue med opener.location=FILY.HTM

Hvis der bruges rammer henviser parent til den fil der kaldte "dette" vindue og man kan skifte indhold i en anden ramme med
parent.rammenavn=FILZ.HTM     :  se nedenfor
Metoden vist ovenfor, at kalde objekt efter navn er én af 3 måder at kalde et objekt på. De to andre bruger objektets typenavn efterfulgt af [index] hvor "index" enten kan være det navn der er brugt ved den første metode (husk gåseøjne), eller det kan være et nummer, hvor de objekter af denne type med de samme forældre nummereres 0, 1, 2 ... i den rækkefølge de forekommer i HTML-filen. I eksemplet ovenfor, lad os sige at "gofil" er den anden form (index 1 !) i HTML-filen, og "lukgofil" den 1.ste input type "button" i "gofil". Vi har altså -ideelt- 3 forskellige måder at referere til knappens value på:
 A:  document.gofil.lukgofil.value   (objektnavn)
 B:  document.forms[1].button[0].value   (index med nummer)
 C:  document.forms['gofil'].button['lukgofil'].value  (index med objektnavn)
Desværre er det ikke alle måderne der virker, og meget ofte skal man bruge en bastard-metode, f.eks. metode B til form og A til button: document.forms[1].lukgofil.value
Nedenfor har jeg derfor skrevet windows-hirakiet én gang til, men med farvevalgene:
 
  Hvid hvis den ikke er afprøvet   Rød hvis kun A virker   Mørkegrå hvis intet virker
Grøn hvis både A, B og C virker Gylden hvis kun B virker
window
history location document ToolbarTypes all
link anchor layers
forms all
 applet images area
TextTyper radio  checkbox button  reset  submit fileUpload select
  options
 
Hvis man tester en objecttype om A-B-C virker, men har stavet navnet på objekttypen forkert, kommer man til at kun A virker. Det kunne tolkes som om jeg har stavet forkert for 4.de niveau's objekterne, hvor jeg er kommet til, at kun A virker.
Navnene er fra en oversigt af Danny Goodman  ,  og jeg ved konkret at i oversigten stod "layer" i stedet for "layers", "form" i stedet for "forms" og "image" i stedet for "images". Den slags småfejl er uhyre tidsrøvende.
 
 

BOX-type og ikke-BOX-type objekter

Mange objekter er BOX-type (eller canvas-type), de refererer til et afgrænset, gerne firkantet, område på skærmen. Det er kun dem man kan give et navn når de defineres i HTML, og så referere til navnet fra anden javaScript-kode.
Andre objekter er ikke-box-type (inline-type), f.eks. objektet link som defineres med HTML-koden <A Href=...> tekst.. </A> Det er ikke en fejl at tildele disse elementer et navn, men der kan desværre ikke refereres til navnet udefra fra anden JavaScript-kode. Derimod kan man indeni elementet have eventHandlers der bruger javaScript kode.
Eks: (kræver naturligvis at objektet ejer eventHandler onMouseOver)
<A Href=FindesEj.HTM onMouseOver="alert('Æv bæv, du kan bare ikke klikke mig')"> Klik mig hvis du kan</a>
Klik mig hvis du kan
Følgende objekter er ikke-BOX-type:
Object-navn     HTML-kode
  link   <A href=...
  anchor  <A name=...
  area <MAP..><AREA ...></MAP>
 
 
 

Referencer til rammer

I HTML opbygges rammer med en styrende HTMLfil, der definerer rammernes indbyrdes placering, og rammerne hvis indhold kommer fra andre HTMLfiler. Her en udbygning af en metode, som jeg dog også har beskrevet tidligere (i <HTML afsnittene  :  Klik til rammer).
Styrende HTMLfil, window.parent
<FRAMESET Cols=".............">
    <FRAME  Src=FRAMFIL1.HTM  Name=F1>
    <FRAME  Src=FRAMFIL2.HTM  Name=F2>
    <FRAME  Src=FRAMFIL3.HTM  Name=F3>
  Du er i denne ramme,  
  F1=window
  og vil skifte indholdet i F2   		  Ramme F2 hedder  
  window.parent.F2  
  (set fra F1) 		  Ramme F3 hedder  
  window.parent.F3  
  (set fra F1)
 
window.location er adressen på den fil, der er i dette windue, og du kan lave en knap, der skifter indholdet i dette vindue, ved at kalde javaScript koden
    onClick='window.location=NyFil.HTM'
(dette svarer helt til HTML-kode <A Href=NyFil.HTM>)
det er overflødigt at skrive window, man kan nøjs med:
    onClick='location=NyFil.HTM'
I stedet for dette vindue kan du også skifte indholdet i et andet vindue:
   onClick='parent.F2.location=NyFil.HTM'
og kan f.eks. bytte om på indholdet i de to rammer F2 og F3 med
   var huskvindue=parent.F2.location
   parent.F2.location=parent.F3.location
   parent.F3.location=huskvindue
 
 

   VARIABLE

Man kan erklære så mange variable det skal være i én linie, med komma imellem, eks:
a=7, b=8, var c        (a og b, men ikke c, tillægges en værdi)
Variabelnavne må indeholde tegnene 0-9, a-z, A-Z og _  Første tegn må ikke være et tal, og der skelnes mellem store og små bogstaver

Variable erklæret i et script men udenfor en funktion:
  kan erklæres som       x=6    (og x får med det samme tildelt værdien 6)
eller                      var x=6    (her gør ordet "var" ingen forskel)
Variablen kan kaldes fra overalt i HTM-filen, når scriptet er gennemløbet.
Variable erklæret inde i en funktion:
  kan erklæres som x=6 eller var x=6. Med ordet "var" er variablen kun gyldig indenfor funktionen, uden "var" er den gyldig i hele HTM-filen, så snart funktionen har været kaldt bare én gang.
 :  Til toppen af siden