Dies ist eine alte Version des Dokuments!
LU01.A06 - JS einbinden in den HTML-Code
Rahmenbedingungen
- Sozialform: individual
- Hilfsmittel:
- VS Code Editor
- Zeit: 15 Minuten
- Erwartetes Resultat:
- Der JS-Code der separaten Datei wurde korrekt eingebunden.
- Die Ausgabe wird als Alerts bzw. in der Browserkonsole ausgegeben.
Vorarbeiten
Kopieren Sie den nachfolgenden Quellcode in die nachfolgenden Dateien
LU01_A06.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Essentials</title>
<!-- Aufgabe 2 -->
<!-- Ausgabe als Alert-Box, der Code dazu ist in einer separaten Datei gespeichert -->
<!-- Hier muss die zweite JS-Datei eingebunden werden -->
<!-- Code hier ergänzen -->>
</head>
<h1>LU01_A06: How to write some text with JavaScript i.e. Hello ...</h1>
<body>
<!-- Aufgabenteil 1 -->
<!-- Schreiben Sie hier eine alert box direkt rein und testen die Ausgabe -->
<script>
// Die Alert-Box wird hier direkt reingeschrieben.
// Code hier ergänzen
</script>
<!-- Aufgabe 3 -->
<!-- Ausgabe wird in der Browserkonsole angezeigt -->
<!-- Hier muss die dritte JS-Datei eingebunden werden -->
<!-- Code hier ergänzen -->
</body>
</html>
scripts/LU01_L06_2.js
alert("Hello Variante 2: Als Alert-Box im separaten File!")
scripts/LU01_L06_3.js
console.log('Hello Variante 3 in der Browserconsole: im separaten File!');
// Hello, World! will be printed to the console
Aufgabe A
- Erstellen Sie einen Ordner script und legen dort eine JS Datei mit dem Namen LU01_L05.js an und kopieren den nachfolgenden JS Code in diese Datei.
Aufgabe B
- Passen Sie die Beschriftung des Buttons auf Zeige Datum an.
- Erweitern Sie die Aufgabe um ein weiteres Button mit der Beschriftung Zeige Namen, der beim Klicken Ihren Namen im Format <h2> am Monitor ausgibt.
