JavaScript Spoiler für applet-code

DaMoN1993

Commander
Registriert
Dez. 2006
Beiträge
2.118
Komplett-update:
ich habe jetzt einen code im internet gefunden.
aber verstehen tue ich ihn nicht wirklich.
ich habe ihn jetzt schon in die HTML-seite eingebaut, aber da ich das verstehen will was ich da mache, damit ich es bald auch selbst kann, hätte ich den code gerne mal erklärt bekommen:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head><title>spoiler</title> <script type="text/javascript"> <!--
function zeige (wert,was){
var lay = document.getElementById('box'+wert);
if(lay.style.display == "none"){
lay.style.display = "block"; 
was.firstChild.nodeValue = "Hide";
} else{
lay.style.display = "none"; 
was.firstChild.nodeValue = "Show";
}
}
//--> </script> </head> <body> <div>Achtung, Spoiler!<button onclick="zeige(1,this);" style="width:50px;">Show</button></div> <div style="display:none;" id="box1"><p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10"alt="Valid XHTML 1.0 Strict" style="height:31px; width:88px; border-width:0px;" /></a> </p></div> <h1>Der Rest der Seite...</h1> </body> </html>
ich strukturiere mal was ich gerne gewusst hätte:
was bewirkt...
  • document.getElementById('box+wert);
  • if(lay.style.display == "none"){
  • lay.style.display = "block";
  • was.firstChild.nodeValue = "Hide";
  • onclick="zeige(1,this);
  • div style="display:none;" id="box1"

so, mal meine gedanken zu den punkten:
1:ich wusste mal grob was die funktion bewirkt(document.getElementById), heute ist aber alles wieder weg. meinen Englischkenntnissen nach denke ich mal es ruft den Status eines Elementes ab? was bedeuten die Variablen?
2:if-schleife ist klar, lay.style.display wird auf "none" gesetzt
3:keine ahnung
4:keine ahnung
5:ruft funktion "zeige()" auf, was bedeuten die variablen?
6:eigentlich schon fast peinlich, ist ja alles HTML^^ aber wenn wir schonmal dabei sind: was bewirkt style="display:none;"(ich denke mal hat was mit punkt 2/3/4 zutun?), und welchen zweck hat es dem div-container die ID box1 zu geben?

ein bisschen ausführlich geworden, aber ihr würdet mir damit einen riesen gefallen tun.
PS: angewendet habe ich das ganze übrigens hier: Klickmich
Danke
Damon
*edit: PUSH! bitte helft mir!*
 
Zuletzt bearbeitet:
1.: getElementById(name) holt das Objekt aus dem document-Container mit der id "name". Also wenn Du ein <div id="foo">...</div> im HTML Code hast, dann bekommst Du dieses Objekt mit dem JavaScript-Aufruf document.getElementById('foo')

2.: "if" ist keine Schleife! Auch wird hier nichts gesetzt. "==" ist ein Vergleichsoperator, das einfache Istgleichzeichen ist der Zuweisungsoperator!

lay.style.display referenziert die CSS-Eigenschaft "display" vom Objekt, das in der Variable lay gespeichert ist. "none" bedeutet bei dieser CSS-Eigenschaft: unsichtbar und kein Platzhalter

3.: lay.style.display="block" macht lay sichtbar und stellt es als Blockelement dar (erzeugt einen sichtbaren Zeilenumbruch)

4.: der Wert des ersten Kind-Elements vom Objekt in der Variable "was" in der DOM-Hierarchie wird auf "Hide" gesetzt.

5.: die Funktion und die Bedeutung der Parameter stehen im Klartext da. Wozu diese verwendet werden, wird bei genauerem Hinsehen deutlich.
1 ist die Ganzzahl, die benötigt wird, um die Box-ID zu erzeugen
this ist ein Zeiger auf das aktuelle Objekt (wäre in dem Fall ein Button aus dem HTML-Dokument)

6.: zu display: siehe vorige Punkte, damit der DIV-Container angesprochen werden kann, benötigt dieser eine ID. Und da der Code voraussetzt, dass das ID-Attribut des HTML-Elements mit "box" beginnen muss, beginnt auch das DIV-Element aus Deiner Frage mit "box".
 
OT: Deine Beschreibung zur Punktspiegelung: An welchem Punkt spiegelst du das eigentlich? In deiner Skizze fehlt das wichtigste: Der Punkt um den du spiegelst. Was du da hast ist eine Achsenspiegelung durch die Achse die durch A und B geht.
 
DANKE XunnD!
@Darii:
die webseite habe ich aus langeweille gemacht, als training zum info-unterricht.
dort erstellen wir hauptsächlich solche zeichnungen und entwerfen dazu ein großes lexikon im html-format, vor den Ferien hatten wir die aufgabe "Punktspoiegelung". Achsenspiegelung hatten wir schon, und punktspiegelung sollten wir selbst erarbeiten, aber da die stunde zu kurz war wurde nichts verglichen, klassenkameraden haben es mir so beschrieben.
MfG
Damon
 
Zurück
Oben