Übung

Ausgabemöglichkeiten in JavaScript

In dieser Übung lernst du, wie du mit alert() Popups erzeugst und mit console.log() Nachrichten in die Browser-Konsole schreibst. Du verknüpfst Buttons mit JavaScript-Funktionen.

Vorbereitung

Öffne die Vorlage-Datei _vorlage.html in Visual Studio Code oder Notepad++. Speichere sie in deinem Ordner unter dem Namen 0_ausgabemoeglichkeiten.html.

Ergänze den Quellcode wie folgt:

<html>
<head>
    <title>Ausgabemöglichkeiten</title>
    <meta charset="UTF-8">
    <script>
        "Use Strict"
        function fAlertHallo(){
            alert("Hallo");
        }
    </script>
</head>
<body>
    <h1>Ausgabemöglichkeiten</h1>
    <button onClick="fAlertHallo();">Ausgabe von Hallo in ein Popup!</button>
</body>
</html>

Speichere die Datei und führe sie im Browser aus (z. B. über „Run – Launch in Firefox“). Drücke den Button.

Beschreibe mit Worten: Was passiert, wenn du den Button drückst?

Arbeitsauftrag 2: Der Inspektor

Untersuche den HTML-Code mit den Entwicklertools:

Drücke F12, um die Entwicklertools zu öffnen.
Wähle den Reiter Inspektor (bzw. „Elements“) aus.
Drücke den Bildschirm-Pfeil-Button (Element auswählen).
Klicke auf „Ausgabemöglichkeiten“ und den Button und beobachte, wie der HTML-Code im Inspektor markiert wird.

Ziel: Du siehst, welcher HTML-Code zu welchem Element auf der Seite gehört. Das ist extrem hilfreich, um Fehler zu finden!

Arbeitsauftrag 3: Button „Welt“

Erzeuge einen zweiten Button:

Der Button soll den Text „Ausgabe von ‚Welt‘ in ein Popup!“ haben.
Schreibe eine Funktion fAlertWelt, die ein Popup mit „Welt“ erzeugt.
Verknüpfe den Button mit der Funktion (über onClick).
Speichere die Datei und teste sie im Browser.

Tipp: Schau dir die Funktion fAlertHallo aus der Vorbereitung an. Deine neue Funktion sieht fast genauso aus – du musst nur den Text in den Klammern von alert() ändern.

Arbeitsauftrag 4: Button „!“

Erzeuge einen dritten Button:

Der Button soll den Text „Ausgabe von ‚!‘ in ein Popup!“ haben.
Schreibe eine Funktion fAlertAusrufezeichen, die ein Popup mit „!“ erzeugt.
Speichere die Datei und teste sie im Browser.

Im Browser sollte nun folgendes erscheinen:

Ausgabemöglichkeiten
[Ausgabe von Hallo in ein Popup!]
[Ausgabe von Welt in ein Popup!]
[Ausgabe von ! in ein Popup!]

Arbeitsauftrag 5: Ausgabe in die Konsole

Jetzt lernst du eine zweite Ausgabemöglichkeit kennen: die Konsole.

Erzeuge im <script>-Bereich folgende Funktion:

function fConsoleHallo() {
    console.log("Hallo");
}

Erzeuge einen weiteren Button mit dem Text „Ausgabe von ‚Hallo‘ in die Konsole!“.
Verknüpfe den Button mit der Funktion fConsoleHallo.
Speichere die Datei.
Drücke F12 und wähle den Reiter Konsole („Console“).
Drücke den Button.

Beschreibe mit Worten: Was passiert, wenn du den Button drückst? Wo erscheint die Ausgabe – und warum sieht man sie nicht direkt auf der Webseite?

Arbeitsauftrag 6: Weitere Konsolen-Ausgaben

Erzeuge zwei weitere Buttons mit den entsprechenden Funktionen und Verknüpfungen. Als Vorlage kannst du die Funktion fConsoleHallo nehmen.

Zum Beispiel:

Ein Button „Ausgabe von ‚Welt‘ in die Konsole!“ → Funktion fConsoleWelt
Ein Button „Ausgabe von ‚!‘ in die Konsole!“ → Funktion fConsoleAusrufezeichen

Warum macht man das?
Die Befehle alert und console.log werden dazu verwendet, um Fehler im Quellcode zu finden (Debugging). Während alert ein Popup für den Nutzer zeigt, schreibt console.log die Ausgabe leise in die Konsole – perfekt, um während der Entwicklung Werte zu prüfen.