Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Vorhergehende Überarbeitung | |||
— | modul:m288:learningunits:lu01:aufgaben:05 [2025/08/18 13:10] (aktuell) – vdemir | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | ====== LU01.A05 - JS einbinden in den HTML-Code ====== | ||
+ | ===== Rahmenbedingungen ===== | ||
+ | * Sozialform: individual | ||
+ | * Hilfsmittel: | ||
+ | * VS Code Editor | ||
+ | * Zeit: 20 Minuten | ||
+ | * Erwartetes Resultat: 3 Buttons, die mittels unterschiedlicher EJS-Einbindung Informationen auf dem Browser ausgeben. | ||
+ | |||
+ | ===== Ausgangslage ===== | ||
+ | Sie haben im //LU01b - JavaScript in HTML einbinden// gelernt, dass es unterschiedliche Arten gibt JS-Code ins HTML einzubinden. | ||
+ | |||
+ | ===== Vorarbeiten ===== | ||
+ | - Legen Sie eine Kopie der Datei // | ||
+ | - Legen Sie ein Verzeichnis //scripts// für die zukünftigen JS-Scripte an. | ||
+ | - Legen Sie in dem Verzeichnis //scritps// eine Datei // | ||
+ | |||
+ | ===== Aufgabe ===== | ||
+ | Realisieren Sie basierend auf der Aufgabe // | ||
+ | |||
+ | - Direkt im HTML-Tag: Ausgabe des Datums (Button 1) | ||
+ | - Mittels Script-Tags: | ||
+ | - Als separate Datei: Ausgabe der Hobbies (Button 3, muss noch angelegt werden) | ||
+ | |||
+ | ===== Zielvorgabe 1: Dateiorganisation ===== | ||
+ | Ihr Files sollten wie folgt organisiert sein: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | |||
+ | ===== Zielvorgabe 2: Browserausgabe ===== | ||
+ | Ihre Lösung sollte in etwa wie folgt aussehen. | ||
+ | |||
+ | {{: | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Lösungen ===== | ||
+ | [[modul: | ||
+ | |||
+ | ---- | ||
+ | [[https:// |