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 [2025/08/25 13:07] – [Lösungen] vdemirde:modul:m288:learningunits:lu01:aufgaben:05 [2026/09/08 10:32] (aktuell) – [Lösungen] vdemir
Zeile 6: Zeile 6:
     * VS Code Editor     * VS Code Editor
   * Zeit: 20 Minuten   * Zeit: 20 Minuten
-  * Erwartetes Resultat: 3 Buttons, die mittels unterschiedlicher EJS-Einbindung Informationen auf dem Browser ausgeben.+  * Erwartetes Resultat: 3 Buttons, die mittels unterschiedlicher JS-Einbindung Informationen auf dem Browser ausgeben.
  
 ===== Ausgangslage ===== ===== Ausgangslage =====
-Sie haben im //LU01b - JavaScript in HTML einbinden// gelernt, dass es unterschiedliche Arten gibt JS-Code ins HTML einzubinden. +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 ===== ===== Vorarbeiten =====
-  - Legen Sie eine Kopie der Datei //LU01_A03.html// an und nennen Sie diese //LU01._A05.html//.  +  - Legen Sie im Visual Studio Code ein Projektverzeichnis //scripts// für die zukünftigen JS-Scripte an. 
-  - Legen Sie ein Verzeichnis //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. 
-  - Legen Sie in dem Verzeichnis //scritps// eine Datei //LU05_A05.js// an. +  - 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 ===== ===== Aufgabe =====
-Realisieren Sie basierend auf der Aufgabe //LU01_A03// die nachfolgenden 3 Varianten, wie JavaScript ins HTML eingebunden wird. +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)   - Direkt im HTML-Tag: Ausgabe des Datums (Button 1)
Zeile 33: Zeile 55:
  
 {{:modul:m288:learningunits:lu01:aufgaben:lu01.a05.jpg?600|Zielvorgabe der Lösung}} {{:modul:m288:learningunits:lu01:aufgaben:lu01.a05.jpg?600|Zielvorgabe der Lösung}}
- 
-===== Lösungen ===== 
-[[de:modul:m288:learningunits:lu01:Lösungen:05|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 [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir
  
  • de/modul/m288/learningunits/lu01/aufgaben/05.1756120067.txt.gz
  • Zuletzt geändert: 2025/08/25 13:07
  • von vdemir