Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:m288:learningunits:lu01:aufgaben:05 [2025/08/18 11:30] – vdemir
+++ modul:m288:learningunits:lu01:aufgaben:05 [2025/08/18 13:10] (aktuell) – vdemir
@@ Zeile 5: / Zeile 5: @@
   * Hilfsmittel:
     * VS Code Editor
-  * Zeit: 10 Minuten
+  * Zeit: 20 Minuten
-  * Erwartetes Resultat: Zwei Arten von HelloWorld (unterschiedlich eingebunden).
+  * Erwartetes Resultat: 3 Buttons, die mittels unterschiedlicher EJS-Einbindung Informationen auf dem Browser ausgeben.
 ===== Ausgangslage =====
-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.
+Sie haben im //LU01b - JavaScript in HTML einbinden// gelernt, dass es unterschiedliche Arten gibt JS-Code ins HTML einzubinden.
 ===== Vorarbeiten =====
-. Erstellen Sie eine Datei //LU01_L05.html// und kopieren den nachfolgenden Code hinein.
+  - Legen Sie eine Kopie der Datei //LU01_A03.html// an und nennen Sie diese //LU01._A05.html//.
+  - Legen Sie ein Verzeichnis //scripts// für die zukünftigen JS-Scripte an.
+  - Legen Sie in dem Verzeichnis //scritps// eine Datei //LU05_A05.js// an.
-  <!DOCTYPE html>
+===== Aufgabe =====
-  <html lang="en">
+Realisieren Sie basierend auf der Aufgabe //LU01_A03// die nachfolgenden 3 Varianten, wie JavaScript ins HTML eingebunden wird.
-  <head>
-    <meta charset="UTF-8">
-    <title>Übung 1</title>
-  </head>
+  - Direkt im HTML-Tag: Ausgabe des Datums (Button 1)
-  <body>
+  - Mittels Script-Tags: Ausgabe des Namens (Button 2)
+  - Als separate Datei: Ausgabe der Hobbies (Button 3, muss noch angelegt werden)
-  </body>
-  </html>
-. Des weiteren erstellen Sie einen Ordner //script//
+===== Zielvorgabe 1: Dateiorganisation =====
+Ihr Files sollten wie folgt organisiert sein:
-. Legen sie im Ordner Script eine JS-Datei mit dem Namen //LU01_L05.js// an und kopieren den nachfolgenden Code hinein.
+{{:modul:m288:learningunits:lu01:aufgaben:lu01_a05_2.jpg?400|File-Organisation im VS-Code}}
-  alert('Hello everybody!');
-**Das Ergebnis sollte wie folgt aussehen.**
+===== Zielvorgabe 2: Browserausgabe =====
+Ihre Lösung sollte in etwa wie folgt aussehen.
+{{:modul:m288:learningunits:lu01:aufgaben:lu01.a05.jpg?600|Zielvorgabe der Lösung}}
-===== 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:05|Lösung LU01.L05]]
 ----
 [[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