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.

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

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

Quellcode LU01_L05.js

Hinweis: Achten Sie darauf, dass das JS-File mit der korrekten Pfadangabe im HTML eingebunden ist

// Sichtbar im globalen Scope machen (falls irgendwas klemmt):
window.version3 = function () {
  const target = document.getElementById('demo3');
  if (!target) {
    return;
  }
  target.innerHTML = 'Meine Hobbies: Fotografieren, Reisen und Wandern';
};
 
console.log('LU01_A05.js geladen.');

Browserausgabe

Ihre Lösung sollte in etwa wie folgt aussehen.

Volkan Demir