Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:ffit:js:learningunits:lu01:einfuehrung [2024/10/24 05:24] – kdemirci
+++ modul:ffit:js:learningunits:lu01:einfuehrung [2024/10/24 05:29] (aktuell) – kdemirci
@@ Zeile 7: / Zeile 7: @@
 ===== Verwendung von JavaScript =====
-Um JavaScript in eine Webseite einzubauen und auszuführen, kannst du es direkt in deinem HTML-Dokument einbinden oder in externe Dateien auslagern. Es gibt zwei grundlegende Möglichkeiten:
+Um JavaScript in eine Webseite einzubauen und auszuführen, kann man es direkt in deinem HTML-Dokument einbinden oder in externe Dateien auslagern. Es gibt zwei grundlegende Möglichkeiten:
-==== Einbettung von JavaScript im HTML-Dokument ====
+==== 1. Einbettung von JavaScript im HTML-Dokument ====
 Man kann JavaScript innerhalb des HTML-Dokuments in einem <script>-Tag platzieren. Dies ist nützlich, wenn man kleinere Skripte direkt in der Seite verwenden möchte.
@@ Zeile 32: / Zeile 32: @@
 </body>
 </html>
+</code>
+In diesem Beispiel wird der Text innerhalb des <p>-Tags durch JavaScript geändert, sobald die Seite geladen wird. Das Skript befindet sich direkt im HTML und wird innerhalb des <script>-Tags ausgeführt.
+==== 2. JavaScript aus einer externen Datei laden ====
+Wenn man grössere JavaScript-Dateien hat oder man den Code sauberer halten möchte, kann man das JavaScript in einer separaten Datei speichern und diese dann in das HTML-Dokument einbinden. Dies ist eine gängige Praxis in der Webentwicklung.
+**HTML-Datei**
+<code html>
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>JavaScript mit externer Datei</title>
+</head>
+<body>
+  <h1>Hallo Welt!</h1>
+  <p id="text">Dieser Text wird durch JavaScript geändert.</p>
+  <!-- Einbinden der externen JavaScript-Datei -->
+  <script src="script.js"></script>
+</body>
+</html>
 </code>
+**JavaScript-Datei**
+<code javascript>
+// JavaScript-Code, der die Textinhalte der Seite ändert
+document.getElementById("text").innerText = "Dieser Text wurde durch das externe JavaScript geändert!";
+</code>
+In diesem Beispiel enthält die Datei script.js den JavaScript-Code, der in der HTML-Seite eingebunden wird. Die Datei wird durch das src-Attribut des <script>-Tags verlinkt. Der Vorteil dieser Methode ist, dass der JavaScript-Code in einer separaten Datei wiederverwendet werden kann.
+==== Wichtige Hinweise ====
+Der <script>-Tag kann entweder im <head> oder am Ende des <body>-Tags platziert werden. Es ist üblich, ihn am Ende des <body> zu platzieren, um sicherzustellen, dass der HTML-Inhalt vollständig geladen ist, bevor das JavaScript ausgeführt wird.
+Wenn man JavaScript im <head>-Bereich einbindet und möchte, dass es erst nach dem Laden der Seite ausgeführt wird, kannst man das defer-Attribut verwenden:
+<code html>
+<script src="script.js" defer></script>
+</code>
+Das defer-Attribut sorgt dafür, dass das Skript nach dem Laden des HTML-Dokuments ausgeführt wird, aber noch vor dem DOMContentLoaded-Ereignis.