: Retur til startside  : Retur til javaScript-startside   

FUNKTIONER ,  REFERENCER  og  VARIABLE

     :  Funktioner
 :  Parameteroverførslen,
HTML <—> Javascript kald
 :  Event-handler og formularer
             :  Referencer til objekter
 :  Box-type og ikke-box-type objekter    
 :  Referencer til rammer 		 :  Variabelerklæringer
 :  objekttype Function		         se evt. osse
  kontrolstrukturer (if, for, while ... )
 
 

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 "en øl til 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>
Filnavne der ender med .js er traditionelt filer ned javaScript-funktioner(), der kan være standard-bliotek for flere HTML-sider.

 

Event-handler og formularer

Metoden med en event-handler (oversat: Hændelses-håndteringsredskab) i en formular er meget benytet, fordi man har mulighed for at indtaste en parameter:
<INPUT type=TEXT value="Velkommen til min alert" onClick="alert(this.value)">

Her har vi input-typen TEXT med value="Velkommen til min alert", men den input-type kan man skrive i, prøv at ændre teksten og så får du en alert-sætning med alert på det du har skrevet. Parameteren bliver med det reserverede or "this" overført til alert.

I stedet for alert kunne der osse stå noget vi ville validere, f.eks et årstal som vi ville sikre var et helt tal, det vil sige det nærmeste heltal der er mindre end eller lig med. Og INPUT type TEXT hører til i en formular, så lad os få en navngiven formular (navn "FF") til en navngiven input (navn ii):
<Form name=FF>
<INPUT type=TEXT name=ii value="Goddag 100 gange til aarstalsValidator() " onChange="aarsalsValidator(this.value)">
</Form>

input-elementet refereres som FF.ii, og dette navn bruges til at sende facit fra function aarstalsvalidator tilbage til FF.ii
aarstalsValidator(string) piller et positivt heltal fra strengen, eller returnerer NaN hvis den ikke finder noget tal:
function aarstalsValidator(aarstal){
   while ( (aarstal.length>0)&&((aarstal.charCodeAt(0)<48)||((aarstal.charCodeAt(0))>57))) aarstal=aarstal.slice(1); // fjern foranstilede tegn der ikke er tal
   FF.ii.value = parseInt(aarstal);
}

Event-handlere:
onBlur onChange onClick
onFocus onMove onSelect

=1>
input-typer:Event-handlere der virker med denne input-type
button onBlur, onClick, onFocus, onMouseDown
chekbox onBlur, onClick, onFocus
password onBlur, onFocus
radio onBlur, onClick onFocus,
reset onClick, onFocus
select onChange, onFocus
submit onClick, onFocus
text onChange, onBlur, onFocus, onSelect/td>

Der er flere Event-handlere (onAbort, onDragDrop, onDoubleClick, onError, onKeyPress, onKeyDown, onKeyPress, onKeuUp, unLoad, onMouseMove, onMouseOut, onMouseOver, onMouseOut, onMove, onReset, onResize, onSubmite, onUnload
De virker mest på elementer der ikke er tilknyttet en formular || såsom document, FileUpload, Form, Image, IMG, Link, Layer, Textarea, window, eller skjult med attributten hidden.

Endelig er der konstruktionen <A Href="javascript:JavaScriptKode()">Klik mig for at udføre koden</A>, hvor funktionen "JavaScriptKode()" så bliver udført hvis man klikker på det understregede (Klik mig for at udføre koden) som ved et andet link. Se "ølskifte" i det blå afsnit ovenfor.

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