Dies ist eine alte Version des Dokuments!
LU01.A06 - JS einbinden in den HTML-Code
Rahmenbedingungen
- Sozialform: individual
- Hilfsmittel:
- VS Code Editor
- Zeit: 10 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
Ergänzen Sie den Code an 3 Stellen, sodass die Ausgaben der unterschiedlichen Varianten im Browser angezeigt werden:
Aufgabe 2 Die Ausgabe der Alert-Box wird durch das die Einbindung des separate Files LU01_L06_2.js generiert. Das Ergebnis sollte in etwa wie folgt aussehen:
Aufgabe 1 Die Ausgabe der Alert-Box-wird durch durch direkten Code im HTML-Tag realisiert. Das Ergebnis sollte in etwa wie folgt aussehen:
Aufgabe 3 Die Browser-Konsolenausgabe wird durch das die Einbindung des separate Files LU01_L06_3.js generiert. Das Ergebnis sollte in etwa wie folgt aussehen:
