Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m288:learningunits:lu01:loesungen:05 [2026/08/25 11:48] – gelöscht - Externe Bearbeitung (Unbekanntes Datum) 127.0.0.1
+++ de:modul:m288:learningunits:lu01:loesungen:05 [2026/08/27 13:41] (aktuell) – vdemir
@@ Zeile 1: / Zeile 1: @@
+====== LU01.L05 - JS einbinden in den HTML-Code ======
+===== 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.
+{{:modul:m288:learningunits:lu01:aufgaben:lu01_a05_2.jpg?400|File-Organisation im VS-Code}}
+===== 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)
+===== Quellcode LU01_L05.html =====
+<code html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="js/LU01_L05.js" defer></script>
+  </head>
+<body>
+<h1>LU01.L05 - My Third JavaScript - Different linking of JS in HTML</h1>
+<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
+  V1 direkt beim HTML-Tag: Datums
+</button>
+<p id="demo"></p>
+<button type="button" onclick="version2()">
+  V2 - separaten Script-Tag: Ausgabe Namen
+</button>
+<h2 id="demo2"></h2>
+<button type="button" onclick="version3()">
+  V3 - separate Datei: Ausgabe der Hobbies
+</button>
+<h2 id="demo3"></h2>
+  <script>
+      function version2() {
+          document.getElementById('demo2').innerHTML = 'Volkan Demir';
+      }
+  </script>
+</body>
+</html>
+</code>
+===== Quellcode LU01_L05.js =====
+**Hinweis:** Achten Sie darauf, dass das JS-File mit der korrekten Pfadangabe im HTML eingebunden ist
+<code javascript>
+function version3() {
+          document.getElementById('demo3').innerHTML = 'Meine Hobbies sind: Fotografieren, Reisen und Wandern';
+ }
+</code>
+===== 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