LU01.A06 - JS einbinden in den HTML-Code

Rahmenbedingungen

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:

Ausgaben des 2. Aufgabe

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

 Ausgaben des 1. Aufgabe

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:

Ausgabe der 3. Aufgabe

Lösungen

Lösung LU01.L06


Volkan Demir / Elena Mastrandrea