01 Ein Klick verändert die Webseite

Orientierung

Warum ist das wichtig?

Mit HTML hast du die Inhalte einer Webseite aufgebaut und mit CSS ihr Aussehen gestaltet. Viele Webseiten reagieren aber auch auf ihre Benutzer: Nach einem Klick erscheint eine Information, ein Hinweis verschwindet oder ein Text ändert sich.

Solche Reaktionen kann JavaScript auslösen. Dabei arbeiten HTML und JavaScript zusammen: Ein Ereignis in HTML startet JavaScript. JavaScript verändert anschließend ein HTML-Element.

Was kannst du am Ende?

Du kannst

einen Button auf einen Klick reagieren lassen,
eine JavaScript-Funktion aufrufen,
ein HTML-Element über seine ID finden und
den Text eines HTML-Elements verändern.

HTML und CSS solltest du bereits kennen. Du brauchst für diese Lektion noch keine Variablen, Bedingungen oder Schleifen.

Erarbeitung

Theorie

Zum Nachlesen

Betrachte zunächst diese beiden Ausschnitte:

html

        <button onclick="zeigeInfo()">
            Information anzeigen
        </button>

        <p id="infotext">Klicke auf den Button.</p>

html

        <script>
            function zeigeInfo()
            {
                document.getElementById("infotext").textContent =
                    "Berlin ist die Hauptstadt Deutschlands.";
            }
        </script>

Der Ablauf beginnt im HTML-Code:

Jemand klickt auf den Button.
`onclick` bedeutet: Führe beim Anklicken etwas aus.
`zeigeInfo()` ruft die gleichnamige Funktion auf.
Die Befehle zwischen `{` und `}` werden ausgeführt.

Eine **Funktion** ist eine Gruppe von Befehlen mit einem Namen. Sie wird mit dem Schlüsselwort `function` angelegt. Runde Klammern gehören zum Funktionsnamen. Die geschweiften Klammern begrenzen die Befehle der Funktion.

Der lange Befehl in der Funktion lässt sich von links nach rechts lesen:

`document` meint die angezeigte Webseite.
`getElementById("infotext")` sucht das Element mit der ID `infotext`.
`textContent` bezeichnet seinen Textinhalt.
Mit `=` erhält der Textinhalt einen neuen Wert.

Wichtig ist die genaue Schreibweise. Der Name in `getElementById("infotext")` muss mit der ID im HTML-Code übereinstimmen. Auch `zeigeInfo()` muss genauso heißen wie die zugehörige Funktion.

Der JavaScript-Code steht im `<script>`-Bereich. Bei `onclick` steht nur der Aufruf der Funktion. So bleibt der HTML-Code übersichtlich.

Kurz gesagt:

**Klick → Funktionsaufruf → Funktion → HTML-Element → neuer Text**

Aufgaben zum Einstieg

Öffne die Berlin-Infokarte im Editor und im Browser. Speichere nach jeder Änderung und lade die Webseite im Browser neu.

Aufgabe 1

Probiere alle drei Buttons aus. Notiere noch einmal für den Button „Begrüßung“,

        1. welches Ereignis die Reaktion auslöst,
        2. welche Funktion aufgerufen wird und
        3. welches HTML-Element sich verändert.

Aufgabe 2

Suche im Quelltext die Funktion `zeigeBegruessung()`. Verändere den ausgegebenen Text zu einer eigenen Begrüßung.

Aufgabe 3

Der Button „Einwohner“ gibt noch eine falsche Information aus. Berlin hat ungefähr 3,9 Millionen Einwohner. Korrigiere den Text in der passenden Funktion.

Aufgabe 4

Füge im HTML-Code diesen Absatz unter dem Infotext ein:

html

<p id="motto">Berlin wartet auf dich.</p>

Ergänze anschließend im Scriptbereich:

javascript

           function aendereMotto()
           {
               document.getElementById("motto").textContent =
                   "Berlin ist immer eine Reise wert.";
           }

Füge einen Button ein, der diese Funktion aufruft.

Aufgabe 5

Ergänze eine zweite Funktion `setzeMottoZurueck()` und einen passenden Button. Der ursprüngliche Satz soll wieder erscheinen.

Aufgabe 6

Bringe die folgenden Schritte in die richtige Reihenfolge:

        Der Textinhalt wird ersetzt.
        `onclick` ruft eine Funktion auf.
        Ein Element wird angeklickt.
        JavaScript findet das Element über seine ID.

Aufgabe 7

Erkläre in zwei bis drei Sätzen, wozu die ID eines HTML-Elements benötigt wird.

Aufgaben zur Fehlersuche

Die folgenden Codestücke enthalten jeweils einen Fehler. Beschreibe ihn und verbessere den Code.

Aufgabe 8

Fehlersuche

html

<button onklick="zeigeInfo()">Information</button>

Aufgabe 9

Fehlersuche

html

<p id="infotext">Noch keine Information.</p>

javascript

document.getElementById("infoText").textContent = "Hallo";

Aufgabe 10

Fehlersuche

html

<button onclick="zeigeOrt()">Ort anzeigen</button>

javascript

           function zeigeOert()
           {
               document.getElementById("infotext").textContent =
                   "Berlin";
           }

Aufgabe 11

Fehlersuche

javascript

           function zeigeInfo()
               document.getElementById("infotext").textContent =
                   "Eine Information";
           }

Weitere Aufgaben

Aufgabe 12

Ergänze einen Button „Bundesland“. Er soll einen passenden Satz über Berlin ausgeben. Lege dafür eine neue Funktion an.

Aufgabe 13

Ergänze einen zweiten Absatz mit einer eigenen ID. Eine Funktion soll gleichzeitig den Infotext und diesen zweiten Absatz verändern. Schreibe dafür zwei Befehle zwischen die geschweiften Klammern derselben Funktion.

Aufgabe 14

Ändere die Beschriftung eines Buttons durch JavaScript. Auch ein Button kann eine ID und einen Textinhalt besitzen.

Aufgabe 15

Erstelle selbst einen Fehler, bei dem JavaScript wegen einer falschen ID nicht das gewünschte Element findet. Tausche deinen Quelltext mit einer anderen Person und lasst euch gegenseitig den Fehler suchen.

Zusammenfassung

Was musst du wissen und können?

HTML stellt die Elemente einer Webseite bereit. Eine ID gibt einem Element einen eindeutigen Namen. Ein Ereignis wie `onclick` kann eine JavaScript-Funktion aufrufen.

Mit

javascript

document.getElementById("eineId").textContent = "Neuer Text";

findet JavaScript ein HTML-Element und verändert dessen Text.

Was ist der nächste Schritt?

Text ist nur eine Eigenschaft eines HTML-Elements. In der nächsten Lektion veränderst du mit JavaScript auch Bilder und die Gestaltung der Infokarte.