de:modul:m288:learningunits:lu01:aufgaben:05

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m288:learningunits:lu01:aufgaben:05 [2026/08/25 11:31] – gelöscht - Externe Bearbeitung (Unbekanntes Datum) 127.0.0.1de:modul:m288:learningunits:lu01:aufgaben:05 [2026/09/08 10:32] (aktuell) – [Lösungen] 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 JS-Einbindung Informationen auf dem Browser ausgeben.
 +
 +===== Ausgangslage =====
 +Sie haben im //LU01b - JavaScript in HTML// gelernt, dass es in JS unterschiedliche Arten gibt JS-Code ins HTML einzubinden. Wir wollen nun diese Varianten praktisch anwenden.
 +
 +===== Vorarbeiten =====
 +  - Legen Sie im Visual Studio Code ein Projektverzeichnis //scripts// für die zukünftigen JS-Scripte an.
 +  - Legen Sie in dem Verzeichnis //scripts// eine Datei //LU05_L05.js// an. Ihr JS-Code wird hier gespeichert.
 +  - Kopieren Sie den nachfolgenden HTML-Code inm Ihre Lösungsdatei und bearbeiten Sie den Auftrag gemäss Aufgabenbeschreibung.
 +
 +
 +===== Basisquellcode für LU01_L05.html =====
 +
 +<code html>
 +<!DOCTYPE html>
 +<html>
 +<body>
 +<h1>My Second JavaScript</h1>
 +
 +<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
 +Click me to display Date and Time.</button>
 +<p id="demo"></p>
 +
 +
 +<button type="button2" onclick="document.getElementById('demo2').innerHTML = 'Volkan Demir'">
 +Click me to display my full name</button>
 +<h1 id="demo2"></h1>
 +
 +</body>
 +</html> 
 +
 +</code>
 +===== Aufgabe =====
 +Realisieren Sie basierend auf der Aufgabe //LU01_L03.html// 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}}
 +
 +----
 +[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir