Tasse muggefugg Das unvergleichliche
DRÖPPEZ's
Einsteigerhandbuch JavaScript
Hello World bis der Arzt kommt
 Droeppez

    drei Sätze voraus
    Hello World in der Alertbox
    bei Mausklick Alertbox
    komplexeres Beispiel - Ereignissteuerung, Funktionen, DOM-Objekte im Zusammenhang

Inhalt Anfang runter rückwärts vorwärts suche suche suche suche suche
Das Thema "Hello World" ist damit noch lange nicht abgehakt. Man kann der Welt auf vielerlei Weise Hallo sagen oder etwas beliebiges anderes mitteilen.

Für Debugging ist es durchaus sinnvoll, entweder Meldungen in einer Alertbox auszugeben oder dynamisch auf eine Seite zu schreiben.
Inhalt Anfang hoch runter rückwärts vorwärts suche suche suche suche suche
Zuerst will ich Dir die Alertbox vorstellen:

Erklärungen Quelltext 
                 Dokumenttyp definieren:

 Beginn HTML-Quelltext, Inhalte deutsch:
              Anfang des Dokumentkopfes:
JavaScript als allgemeine Scriptsprache:
                    Titel des Dokuments:
         eingebettetes Script einbinden:
                    als HTML-Kommentar
  Hello World in die Alertbox schreiben:
              Ende des HTML-Kommentars
                 Script-Bereich beenden:
                Ende das Dokumentkopfes:
   Anfang des darzustellenden Dokuments:
     Ende des darzustellenden Dokuments:
              Ende des HTML-Quelltextes:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Hello World</title>
<script type="text/javascript">
<!--
window.alert("Hello World");
//-->
</script>
</head>
<body>
</body>
</html>

Der Quelltext unseres Programms besteht ebenfalls nur aus exakt einer Zeile:
window.alert("Hello World");

Sieh Dir jetzt bitte das Beispiel an, indem Du diesem link hier folgst.
Nur nochmal zur Erinnerung: der gelbe Kasten mit dem roten Rand, der immer von oben eingeschwebt kommt, wird nur eingeblendet und gehört nicht zu der Seite, auf der er angezeigt wird. Also nicht verwirren lassen!
Inhalt Anfang hoch runter rückwärts vorwärts suche suche suche suche suche
Diese Gelegenheit will ich nutzen, um Dir zu zeigen, wie man die Ausführung von Befehlen direkt an das Auftreten bestimmter Ereignisse koppelt.
Solche Ereignisse können beispielsweise das Anklicken eines Seitenelements durch den Nutzer, das Überfahren eines Seitenelements mit der Maus, das Auswählen einer Checkbox oder ähnliche Aktionen sein.
Zur Veranschaulichung hier ein weiteres Beispiel, was auf das Anklicken eines links die Alertbox öffnet:

Erklärungen Quelltext 
                     Dokumenttyp definieren:

     Beginn HTML-Quelltext, Inhalte deutsch:
                  Anfang des Dokumentkopfes:
    JavaScript als allgemeine Scriptsprache:
                        Titel des Dokuments:
                    Ende das Dokumentkopfes:
       Anfang des darzustellenden Dokuments:
link, der auf einen JavaScript-Befehl zeigt:
                                      Text
                             Ende des Links:
         Ende des darzustellenden Dokuments:
                  Ende des HTML-Quelltextes:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Hello World</title>
</head>
<body>
<a href="javascript:window.alert('Hello World')">
klick mich
</a>
</body>
</html>

Wie Du siehst, mußte ich in der Zeile
<a href="javascript:window.alert('Hello World')">

unterschiedliche Gänsefüßchen verwenden, für das HTML-Attribut die doppelten (") und für den Funktionsparameter einfache (').

Sieh Dir jetzt bitte das Beispiel an, indem Du diesem link hier folgst.
Inhalt Anfang hoch runter rückwärts vorwärts suche suche suche suche suche
Weiterhin hast Du die Möglichkeit, bestimmte Seitenelemente mit Text zu füllen. Du kannst in diese Seitenelemente sogar Bilder und HTML-Texte einbauen.
Wie auch im letzten Beispiel will ich dies an bestimmte Ereignisse knüpfen, diesmal an das Überfahren des Seitenelements mit der Maus.

Erklärungen Quelltext 
                     Dokumenttyp definieren:

     Beginn HTML-Quelltext, Inhalte deutsch:
                  Anfang des Dokumentkopfes:
    JavaScript als allgemeine Scriptsprache:
                        Titel des Dokuments:
                Anfang des Script-Bereiches:
                        als HTML-Kommentar
    globale Variablendefinition für Objekte:
 (diese Variablen gelten im ganzen Script)

                 Deklaration einer Funktion:
                 Anfang des Funktionsblocks:
    DOM-Objekt zum Element mit id="mySpan1":
    DOM-Objekt zum Element mit id="mySpan2":
      Ereignisbehandlung Maus über Objekt 1:
      Ereignisbehandlung Maus über Objekt 2:
                   Ende des Funktionsblocks:

                 Deklaration einer Funktion:
                 Anfang des Funktionsblocks:
       Objekt1: "Hello World" weiß auf blau:
    Objekt2: "Hello World" schwarz auf gelb:
                   Ende des Funktionsblocks:

                 Deklaration einer Funktion:
                 Anfang des Funktionsblocks:
    Objekt1: "Hello World" schwarz auf gelb:
       Objekt2: "Hello World" weiß auf blau:
                   Ende des Funktionsblocks:
                     HTML-Kommentar zuende
                  Ende des Script-Bereiches:
                    Ende das Dokumentkopfes:
                 Dokument mit load-Ereignis:
          Kommentar zum lesen und verstehen:
                      span mit id="mySpan1":
                                      Text
                              Ende des span:
                            Zeilenumbrüche
                      span mit id="mySpan2":
                                      Text
                              Ende des span:
         Ende des darzustellenden Dokuments:
                  Ende des HTML-Quelltextes:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Hello World</title>
<script type="text/javascript">
<!--
var obj1,obj2;


function EreignisUeberwachung()
{
  obj1=document.getElementById("mySpan1");
  obj2=document.getElementById("mySpan2");
  obj1.addEventListener("mouseover",mausUeber1,true);
  obj2.addEventListener("mouseover",mausUeber2,true);
}

function mausUeber1(evt)
{
  obj1.innerHTML="<span style=\"color:white; background:blue;\">Hello World</span>";
  obj2.innerHTML="<span style=\"color:black; background:yellow;\">Hello World</span>";
}

function mausUeber2(evt)
{
  obj1.innerHTML="<span style=\"color:black; background:yellow;\">Hello World</span>";
  obj2.innerHTML="<span style=\"color:white; background:blue;\">Hello World</span>";
}
//-->
</script>
</head>
<body onLoad="EreignisUeberwachung();">
<!-- einmalig beim Laden soll die Funktion EreignisUeberwachung(); aufgerufen werden -->
<span id="mySpan1">
&uuml;berfahre mich mit der Maus
</span>
<br><br>
<span id="mySpan2">
&uuml;berfahre mich mit der Maus
</span>
</body>
</html>

Das war sicher erst einmal ein hartes Brot. An dieser Stelle habe ich Dir ein paar neue Sachen gezeigt, die Du, wenn Du Anfänger bist, noch nie gesehen hast. Jetzt ist es für Dich wichtig, zu erfahren, was ich dort eigentlich hingeschrieben habe und zu welchem Zweck.

Aber sieh Dir das Beispiel erstmal in Aktion an, indem Du diesem link hier folgst.

Um zu erfahren, was alles bedeutet, solltest Du jetzt das JavaScript-Tutorial öffnen, indem Du auf die gepunktete Tasse suche klickst. Wie sonst auch wird ein gelber Kasten mit rotem Rand eingeschwebt kommen, der Dir sagt, welches Kapitel Du aufschlagen sollst.

weiter ----->
Inhalt Anfang hoch rückwärts vorwärts suche suche suche suche suche
Autor: Ulrich Kritzner