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

<!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>

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:

Zielvorgabe 2: Browserausgabe

Ihre Lösung sollte in etwa wie folgt aussehen.

Volkan Demir