Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:m288:learningunits:lu01:aufgaben:06 [2025/08/18 11:28] – angelegt vdemir
+++ modul:m288:learningunits:lu01:aufgaben:06 [2025/08/18 14:08] (aktuell) – vdemir
@@ Zeile 8: / Zeile 8: @@
   * Erwartetes Resultat:
     - Der JS-Code der separaten Datei wurde korrekt eingebunden.
-    - Die Ausgabe wurde des Alerts wird am Browser ausgegeben.
+    - Die Ausgabe wird als Alerts bzw. in der Browserkonsole ausgegeben.
-===== Ausgangslage =====
+===== Vorarbeiten =====
-In der Aufgabe //LU01.A03 - Erste Schritte// haben Sie Ihr JavaScript direkt in der W3School-Testumgebung in einem einzigen HTML-File eingebettet und ausgeführt. Jetzt wollen wir unser JS aus einer externen JS-Datei holen und in unserem HTML-File einbinden.
+Kopieren Sie den nachfolgenden Quellcode in die nachfolgenden Dateien
-===== Vorarbeiten =====
+**LU01_A06.html**
-. Erstellen Sie eine Datei //LU01_L05.html// und kopieren den nachfolgenden Code hinein.
   <!DOCTYPE html>
@@ Zeile 21: / Zeile 20: @@
   <head>
     <meta charset="UTF-8">
-    <title>Übung 1</title>
+    <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 -->
-  </body>
+    <!-- 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>
-. Des weiteren erstellen Sie einen Ordner //script//
+**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:
-. Legen sie im Ordner Script eine JS-Datei mit dem Namen //LU01_L05.js// an und kopieren den nachfolgenden Code hinein.
+**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:
-  alert('Hello everybody!');
+{{:modul:m288:learningunits:lu01:aufgaben:lu01_l06_2.jpg?600|Ausgaben des 2. Aufgabe}}
-**Das Ergebnis sollte 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:
+{{: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}}
-===== 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.
 ===== Lösungen =====
-[[modul:m288:learningunits:lu01:Lösungen:04|Lösung LU01.L04]]
+[[modul:m288:learningunits:lu01:Lösungen:06|Lösung LU01.L06]]
 ----
 [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir / Elena Mastrandrea