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 //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. 
 +
 +===== Aufgabe =====
 +Realisieren Sie basierend auf der Aufgabe //LU01_A03// die nachfolgenden 3 Varianten, wie JavaScript ins HTML eingebunden wird. 
 +
 +  - Direkt im HTML-Tag: Ausgabe des Datums (Button 1)
 +  - Mittels Script-Tags: Ausgabe des Namens (Button 2)
 +  - Als separate Datei: Ausgabe der Hobbies (Button 3, muss noch angelegt werden)
 +
 +===== Zielvorgabe 1: Dateiorganisation =====
 +Ihr Files sollten wie folgt organisiert sein:
 +
 +{{:modul:m288:learningunits:lu01:aufgaben:lu01_a05_2.jpg?400|File-Organisation im VS-Code}}
 +
 +
 +===== 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}}
 +
 +
 +
 +
 +
 +
 +===== Lösungen =====
 +[[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