Universalfunktioner

Et DHTML modulbibliotek skal bestå af universalfunktioner, det vil sige funktioner, der gør det ønskede, uanset hvilket element, der ønskes ændret. Som eksempel på en sådan fortsætter vi med en meget simpel DHTML øvelse, nemlig et script, der viser og skjuler et html-element i en hvilkensomhelst nyere browser:

Et simpelt eksempel: Skjul og vis et element

En sådan lille operation er et typisk eksempel på dynamisk HTML - vi ændrer på egenskaberne af et HTML-element, nemlig den blå kasse.

Skjul kassen
Vis kassen

<script type="text/javascript">
var ver3 = (navigator.appVersion.charAt(0) <= "3") 
	? true : false;
var dom = (document.getElementById) 
	? true : false;
var ie4 = (document.all && !document.getElementById) 
	? true : false;
var ns4 = (document.layers) 
	? true : false;
var ie5 = (document.all && document.getElementById) 
	? true : false;
var n6 = (document.getElementById && !document.all) 
	? true : false;
var msie = (document.all)
	? true : false;

function visElementet(){
  if (dom){
    objekt = document.getElementById('bluebox');
    objekt.style.visibility="visible";
  }
  if (msie)
    document.all['bluebox'].style.visibility
    --> ="visible"
  if (ns4) 
    document.layers['bluebox'].visibility
    --> ="show"
  if (ver3)
    alert("Denne funktion virker ikke 
    -->	i \nældre browsere")
}
function skjulElementet(){
  if (dom){
    objekt = document.getElementById('bluebox');
    objekt.style.visibility="hidden";
  }
  if (msie)
    document.all['bluebox'].style.visibility
      --> ="hidden"
  if (ns4) 
    document.layers['bluebox'].visibility
      --> ="hide"
  if (ver3)
    alert("Denne funktion virker ikke 
    -->	i \nældre browsere")
  }
</script>

Som du ser starter dette script i lighed med alle DHTML-scripts med en browsersniffer. Dernæst følger to funktioner, én der skal skjule elementet og én der skal vise elementet. Problemet med denne løsning er, at vi skal ha' sådanne to funktioner for hver eneste element, vi ønsker at vise og skjule efter behag.

Det problem klarer vi ved parameteroverførsel fra funktionskald til funktion, sålunde:

<script type="text/javascript">
function visElementet2(blok){
  if (dom){
    objekt = document.getElementById(blok);
    objekt.style.visibility
    --> ="visible";
  }
  if (ie4)
    document.all[blok].style.visibility
    --> ="visible"
  if (ns4) 
    document.layers[blok].visibility
    --> ="show"
  if (ver3)
    alert("Denne funktion virker ikke 
    -->	i \nældre browsere")
}
function skjulElementet2(blok){
  if (dom){
    objekt = document.getElementById(blok);
    objekt.style.visibility
    --> ="hidden";
  }
  if (ie4)
    document.all[blok].style.visibility
    --> ="hidden"
  if (ns4) 
    document.layers[blok].visibility
    --> ="hide";
  }
</script>

Skjul kassen
Vis kassen

Her ser du koden til de to linier, der udløser funktionerne:

<a href="javascript:skjulElementet2('redbox')">
Skjul kassen</a><br>
<a href="javascript:visElementet2('redbox')">
Vis kassen</a>

Til forskel fra det første eksempel med den blå kasse er de to funktionskald nu forsynet med en parameter, nemlig navnet på kassens ID. Funktionen virker nu på alle elementer med en ID - de kan hver for sig skjules og vises ved hjælp af de samme to funktioner - blot skal funktionskaldene forsynes med den ID, der karakteriserer det aktuelle element.

Blokvariable

Desværre, kan man sige, er ikke alle egenskaber helt så nemme at ændre på som visibility-egenskaben. Desuden kan vi forbedre vort universalscript noget ved så at sige at slå den grønne og den røde variable (objekt og blok i eksempelkoden herover) sammen. Det kigger vi på på siden blokvariable.

Oprettet: 24. juni 2002
Senest opdateret: 21. maj 2003