Moderner JavaScript-Einsatz

[molily]

Hallo,

Nach dem Lesen der Tipps muss ich meine Frage neu formulieren, da ich, glaube ich, ein weiteres Problem habe.
Ich habe davon gesprochen, dass mein Javascript voll im HTML-Code drin ist. Und ich muss dass umdrehen in "dass in meinem Javascript HTML-Code ist.

Ich glaube, da läuft was grundsätzlich falsch, deshalb beschreibe ich mal eine ganz anders Lösung, anstatt dir zu zeigen, wie du den HTML-Code letztlich doch wieder ins JavaScript packst. Da kommt nämlich letztlich auch nichts besseres heraus.

Siehe es einmal so: Du hast Teile des Dokuments, du willst du einblenden, wenn der Anwender auf eine Schaltfläche klickt. Ja, dieses HTML sollte erst einmal Teil des Dokuments sein. Ganz normal irgendwo im Dokument stehen. Ohne JavaScript wäre es bestenfalls sichtbar. Wenn JavaScript verfügbar ist, wird die Interaktivität hinzugefügt.

Jetzt müsstest du dir eine sinnvolle HTML-Struktur überlegen, mit der du das realisieren kannst. Nun, welche Struktur hat dein Dokument denn? Ich würde sagen, eine solche:

<h1>Referenzen</h1>  
   <h2>Webdesign</h2>  
      <h3>Die Webseite der Schule in Bergatreute</h3>  
         <p>... Beschreibung ...</p>  
      <h3>Die Reisewebseite von INAustralINA</h3>  
         <p>...</p>  
      <h3>Die Privatseite des Inhabers von Webdizain</h3>  
         <p>...</p>  
   <h2>Printdesign</h2>  
      <h3>...</h3>  
        ... Und so weiter, ich denke, du hast es verstanden.  

Das sieht doch schon sehr aufgeräumt aus. Diese h3-Unterabschnitte können wir nun mittels JavaScript verstecken und beim Klick auf einen Link als »Tip« einblenden.

Also brauchen wir eine Art Navigation, die wir später umstylen, sodass sie so aussieht, wie deine horizontale Bilder-Liste, und mit der nötigen JavaScript-Logik versehen werden:

<h2>Webdesign</h2>  
  
<ul id="webdesign-navigation">  
<li id="link-bergatreute"><a href="#bergatreute">Die Webseite der Schule in Bergatreute</a></li>  
<li>... dasselbe für INAustralINA ...</li>  
... usw.  
</ul>  
  
<div id="bergatreute">  
   <h3>Die Webseite der Schule in Bergatreute</h3>  
   <p>...</p>  
</div>  
  
usw.

Das könnte erstmal der HTML-Code sein, dann bauen wir schrittweise CSS und JavaScript hinzu.

Erstmal verstecken wir den Unterabschnitte, aber nur wenn JavaScript aktiv ist (siehe unten):

body.javascript-aktiv #bergatreue { display:none; }

Dann bauen wir die Navigation um:

#webdesign-navigation, #webdesign-navigation li { margin:0; padding:0; list-style-type:none; }  
#webdesign-navigation li { float:left; }  
#webdesign-navigation a { display:block; }  
#link-bergatreute a { width:44px; height:44px; background-image:url(/images/site_ghwrsb.jpg); overflow:hidden; padding-top:50px; }

Und so weiter, das nur als schnelles ungeprüftes Beispiel des Konzepts. Das soll nur sagen, dass man aus der obigen Listennavigation mit einigen Standardkniffen die gleiche Darstellung wie jetzt zaubern kann.

Nun zum Hinzufügen der JavaScript-Interaktivität nach dem erfolgreichen Laden des Dokuments:

function init () {  
   // Setze body-Klasse, damit die CSS-Regeln aktiv werden  
   document.body.className = "javascript-aktiv";  
   // Hole alle a-Elemente in der Navigation  
   var links = document.getElementById("webdesign-navigation").getElementsByTagName("a");  
   // Durchlaufe sie  
   for (var i = 0, a; a = links[i]; i++) {  
      // Füge jedem einen Event-Handler zu  
      a.onclick = openTooltip;  
   }  
}  
  
window.onload = init;  
  
// Event-Handler  
function openTooltip () {  
   // Bestimme Ziel-ID anhand des href-Attributs  
   var id = this.getAttrbute("href").substring(1);  
   // Da steht dann jetzt beim ersten Link »bergatreute« drin  
   // Rufe eine Funktion aus der Tooltip-Bibliothek auf, übergebe ihr die ID  
   TagToTip(id);  
   // Unterbreche Standard-Event-Handling  
   return false;  
}

Das ist jetzt auch nur Konzept-Code, da muss sicher mehr gemacht werden. Und wenn man einige Tools wie Helferscripte, Bibliotheken oder Frameworks verwendet, ist das viel einfacher und flexibler umsetzbar. Aber das kommt mit der Zeit, wenn man an die Grenzen stößt. (Ich habe z.B. mit IDs gearbeitet. Man will den CSs- und JavaScript-Code natürlich nicht wiederholen für die mehreren IDs. Es gibt JavaScript-Helferscripte zum Ansprechen von Elementen aufgrund gewisser Kriterien, z.B. getElementsByClassName.)

Nun, was haben wir damit erreicht:
Eine relativ saubere Trennung von HTML, CSS und JavaScript. Alle Inhalte stehen ordentlich ausgezeichnet und strukturiert im Dokument. Die Formatierungen und die letztliche Darstellung der Referenzenliste kann komplett im CSS gesteuert werden. Die Inhalte sind ohne JavaScript zugänglich, denn die JavaScript-Logik schaltet sich optional hinzu. JavaScript-Interaktivität und CSS-Formatierungen lassen sich unabhängig vom HTML ändern.
Die Theorie dahinter nennt sich »Unobtrusive JavaScript« bzw. das Layermodell:
http://aktuell.de.selfhtml.org/weblog/javascript-einsatz

Mathias