3  Wie realisiere ich DHTML

• Problem: Unterschiedliche Programmierung in Internet Explorer und Netscape Communicator
  Grund: Unterschiedlicher Aufbau des Objektmodells
  --> Cross-Browser-Lösung geht in beiden Browsern
• keine klare Unterscheidung zwischen HTML und DHTML
  • HTML (bis Version 3.0): Zugriff über das Objektmodell auf ca. 15 tags
  • DHTML (ab Version 4.0): ungefähr 80 Objekte verfügbar

3.1 DHTML in Microsoft

• Unterschied anhand von Beispiel verdeutlichen
• Text in Form einer Schicht (Textabschnitt) definieren
  
  

  <div id="ebene1" style="color:red; visibility:hidden"> Hier kommt der vorerst unsichtbare Text </div>



• Definition der Funktionen, welche die Schicht erscheinen und wieder verschwinden lassen
• Um die Schicht "ebene1" anzusprechen schreiben wir
  
  

  window.document.all["ebene1"]


verkürzt



window.document.ebene1


ganz kurz



ebene1



• Um die Eigenschaft einer Schicht anzusprechen
  
  

  ebene1.style



• Schliesslich lautet die Funktion für die Anzeige der Schicht so:
  
  

  function zeigeSchicht(){ ebene1.style.visibiliti="visible"; }


Die Funktion für das Verbergen hingegen:



function verbergeSchicht(){ ebene1.style.visibiliti="hidden"; }

3.2 DHTML in Netscape

• Das gleiche Beispiel in Netscape Communicator
• Anfangsdefinition der Schicht ist in den beiden Browsern nicht genau gleich
  
  

  <div id="ebene1" style="position:absolute; color:red; visibility:hidden;">



• Definition der Funktionen um Schicht anzuzeigen und verbergen
  • Zugriff auf das Objekt "ebene1"
    
    

    window.document.layer["ebene1"]

  
  verkürzt
  
  

  document.layer["ebene1"]

  
  
  • Für die Funktion "zeigeSchicht()" ergibt sich folgender Code:
    
    

    document.ebene1.visibility="show"

  
  Und schliesslich für die Funktion "verbergeSchicht":
  
  

  document.ebene1.visibility="hide"

  
  

3.3 Cross-Browser-Lösung

• Das Beispiel mit Cross-Browser
• Um zwischen einer Funktion im IE 4.0 und einer Funktion im NC 4.0 unterscheiden zu können, brauchen wir ein Unterscheidungskriterium:
  
  

  If (document.layers)   ... hier folgt der Netscape-Code... else   ... hier folgt der Microsoft-Code...



• Funktionen "zeigeSchicht()" und "verbergeSchicht()" auf Cross-Browser arbeiten mit Übergabewerte. Dies wird beim Event-Handler "onClick" bei der Definition des Buttons festgelgt
  
  

  onClick="zeigeSchicht('ebene1')"


bzw.



onClick="verbergeSchicht('ebene1')"



• Die Funktion "zeigeSchicht()" nimmt den Übergabewert entgegen und setzt die visibility-Eigenschaft entweder auf "show" bzw. "visible":
  
  

  function zeigeSchicht (x){   if (document.layers)   document.layers[x].visibility="show";   else   document.all[x].style.visibility="visible"; }


Die Funktion "verbergeSchicht()" setzt die visibility-Eigenschaft entsprechend auf "hide" bzw. "hidden":



function verbergeSchicht (x){   if (document.layers)   document.layers[x].visibility="hide";   else   document.all[x].style.visibility="hidden"; }