LU01.A06 - JS einbinden in den HTML-Code

• Sozialform: individual
• Hilfsmittel:
  • VS Code Editor
• Zeit: 15 Minuten
• Erwartetes Resultat:
  1. Der JS-Code der separaten Datei wurde korrekt eingebunden.
  2. Die Ausgabe wird als Alerts bzw. in der Browserkonsole ausgegeben.

Ergänzen Sie den Code an 3 Stellen, sodass die Ausgaben der unterschiedlichen Varianten im Browser angezeigt werden:

Hinweis: Weiter unten haben Sie Code-Snippets, die Sie für Ihre Lösung verwenden können.

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:

Die Ausgabe der Alert-Box-wird durch durch direkten Code im HTML-Tag realisiert. Das Ergebnis sollte in etwa wie folgt aussehen:

Die Browser-Konsolenausgabe wird durch das die Einbindung des separate Files LU01_L06_3.js generiert. Das Ergebnis sollte in etwa wie folgt aussehen:

Kopieren Sie den nachfolgenden Quellcode-Vorlage in die nachfolgenden Dateien

LU01_L06.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Essentials</title>
    <!-- Variante 2 -->
    <!-- Ausgabe als Alert-Box, der Code dazu ist in einer separaten Datei gespeichert -->
    <script src="scripts/LU01_L06_2.js"></script>
</head>
<body>
 
<h1>LU01_A06: How to write some text with JavaScript i.e. Hello ...</h1>
 
<!-- Variante 1 -->
<!-- Ausgabe geschieht direkt als PopUp-Alert-Box-->
<script>
    alert("Hello Variante 1: Direkt im Code!");
</script>
 
<!-- Variante 3 -->
<!-- Ausgabe wird in der Browserkonsole angezeigt -->
<script src="scripts/LU01_L06_3.js"></script>
 
</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

LU01.L06

Volkan Demir