Arbeitsauftrag 1: Vorbereitung
- Öffnen Sie die Datei
_vorlage.html in Visual Code Studio / Notepad++.
- Speichern Sie die Datei in Ihrem Ordner unter
0_ausgabemoeiglichkeiten.html ab.
- Ergänzen Sie 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>
- Speichern Sie die Datei.
- Führen Sie die Datei mit Run – Launch in Firefox aus. Automatisch wird Firefox geöffnet.
- Drücken Sie den Button.
- Beschreiben Sie mit Worten, was passiert:
2 Der Inspektor
Untersuchen Sie den HTML-Code, indem Sie folgende Arbeitsanweisungen ausführen:
- Drücken Sie F12. Der Werkzeugkasten öffnet sich.
- Wählen Sie den Inspektor aus.
- Drücken Sie den Bildschirm-Pfeil-Button.
- Drücken Sie auf „Ausgabemöglichkeiten“ und den Button und beobachten Sie, wie im Inspektor der HTML-Code entsprechend markiert wird.
3 Button „Welt“
- Erzeugen Sie einen zweiten Button, in dem Ausgabe von ‚Welt‘ in ein Popup! steht.
- Schreiben Sie eine Funktion
fAlertWelt, die ein Popup mit Welt erzeugt.
- Speichern Sie die Datei.
4 Button „!“
- Erzeugen Sie einen dritten Button, in dem Ausgabe von ‚!‘ in ein Popup! steht.
- Schreiben Sie eine Funktion
fAlertAusrufezeichen, die ein Popup mit ! erzeugt.
- Speichern Sie die Datei.
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!]
5 Ausgabe in die Konsole
- Erzeugen Sie folgende Funktion im
<script>-Bereich:
function fConsoleHallo() {
console.log("Hallo");
}
- Erzeugen Sie einen weiteren Button Ausgabe von ‚Hallo‘ in die Konsole! im HTML-Bereich und verknüpfen Sie den Button mit der Funktion.
- Speichern Sie die Datei.
- Drücken Sie F12. Der Werkzeugkasten öffnet sich.
- Wählen Sie die Konsole aus.
- Drücken Sie den Button.
- Beschreiben Sie mit Worten, was passiert:
6 Weitere Konsolen-Ausgaben
- Erzeugen Sie zwei weitere Buttons mit den entsprechenden Funktionen und Verknüpfungen.
Hinweis: Die Befehle alert und console.log werden dazu verwendet,
um Fehler im Quellcode zu finden.