de:modul:m288:learningunits:lu01:aufgaben:06

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.


Vorhergehende Überarbeitung
—de:modul:m288:learningunits:lu01:aufgaben:06 [2026/09/08 10:33] (aktuell) – [Lösungen] vdemir
Zeile 1: Zeile 1:
 +====== LU01.A06 - JS einbinden in den HTML-Code ======
  
 +===== Rahmenbedingungen =====
 +  * Sozialform: individual
 +  * Hilfsmittel: 
 +    * VS Code Editor
 +  * Zeit: 20 Minuten
 +  * Erwartetes Resultat: 
 +    - Der JS-Code der separaten Datei wurde korrekt eingebunden. 
 +    - Die Ausgabe wird als Alerts bzw. in der Browserkonsole ausgegeben. 
 +
 +===== Aufgabe =====
 +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.
 +
 +==== 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:
 +
 +{{:modul:m288:learningunits:lu01:aufgaben:lu01_l06_2.jpg?600|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:
 +
 +{{:modul:m288:learningunits:lu01:aufgaben:lu01_a06_1.jpg?600| 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:
 +
 +{{:modul:m288:learningunits:lu01:aufgaben:lu01_a06_3.jpg?600|Ausgabe der 3. Aufgabe}}
 +
 +
 +===== Vorarbeiten =====
 +
 +Kopieren Sie die nachfolgenden Quellcode-Vorlage in ihre Lösungsdatei LU01_L06.html. 
 +
 +**LU01_L06.html**
 +
 +<code html>
 +<!DOCTYPE html>
 +<html lang="en">
 +<head>
 +  <meta charset="UTF-8">
 +  <title>JavaScript Essentials</title>
 +  
 +  <!-- Aufgabe 1 -->
 +  <!-- 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 2 -->
 +  <!-- 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>
 +</code>
 +
 +**scripts/LU01_L06_2.js**
 +
 +<code javascript>
 +alert("Hello Variante 2: Als Alert-Box im separaten File!")
 +</code>
 +
 +**scripts/LU01_L06_3.js**
 +
 +<code javascript>
 +console.log('Hello Variante 3 in der Browserconsole: im separaten File!'); 
 +// Hello, World! will be printed to the console
 +</code>
 +
 +----
 +[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir