Lädt...

HTML JavaScript

Zuvor machte Accessibility Seiten mit Struktur nutzbar. JavaScript fügt Verhalten auf dem HTML hinzu: Klick, Textupdate, Server. Diese Lektion bleibt auf der HTML-Seite: wie eine Seite Skripte mit <script> lädt — kein voller JavaScript-Sprachkurs.

Warum Skriptladen zählt

Browser malen HTML zuerst. Skripte können das verzögern, bei falschem Pfad still scheitern oder Inhalt verstecken, der im Markup stehen sollte. Wissen wo <script> hingehört, wann src und was in HTML bleibt, hält die Seite ehrlich: lesbarer Inhalt, vorhandene Controls, optionales Verhalten. Accessibility-Gewohnheiten gelten weiter.

Direkte Antwort

1) <script>…</script> für ein kleines Inline-Snippet oder <script src="app.js"></script> für eine externe Datei. 2) Externe .js, sobald Logik wächst. 3) Viele legen Skripte ans Ende von body. 4) Sinnvollen Text und Controls in HTML behalten. 5) Moderne Apps nutzen ggf. type="module". 6) Dieser Kurs deckt nur Einbetten ab.

📊 Script wiring beginners use

Choice What it does Beginner tip
Inline script Code sits between script tags Fine for tiny demos; hard to reuse
External src Loads a .js file from a path Prefer as projects grow
End of body Script runs after markup above it Content can paint sooner
Behavior on HTML JS finds elements by id/selectors Elements must exist in the page
Content in HTML Text and controls stay in markup Page still makes sense if JS fails
Modules later type=module for modern apps Skip until you study JS deeply

Inline-Skript mit echtem Button

Kleine Seite: echter <button> mit id, dann <script>, das auf Klick den Text ändert. Markup bleibt zugänglich; das Skript fügt nur Verhalten hinzu.

Inline button click

html 
<button id="hi" type="button">Say hi</button>
<script>
document.getElementById("hi").addEventListener("click", function () {
document.getElementById("hi").textContent = "Hello!";
});
</script>

Inline-Demo lesen

  • Button ist echtes HTML — ohne JS sinnvoll und tastaturfreundlich
  • id gibt dem Skript einen stabilen Anker
  • Das script-Block hält wenige JS-Zeilen inline
  • addEventListener verdrahtet Verhalten, ersetzt den Button nicht
  • Ohne Skript bleibt „Say hi“
  • Vorherige Lektion: Struktur; hier Verhalten anbinden

Externes Skript mit src

Dieselbe Idee skaliert besser als eigene Datei. HTML deklariert nur den Pfad; Logik lebt in app.js. Pfade müssen zur Ordnerstruktur passen.

External script src

html 
<button id="hi" type="button">Say hi</button>
<script src="app.js"></script>

Externes Muster lesen

  • src holt und führt die Datei aus
  • HTML bleibt kurz; Verhalten in einer gemeinsamen .js
  • Falscher Pfad = kein Laden — Network prüfen
  • Skript nach dem Button oder auf Element warten
  • Bevorzugen Sie das gegenüber riesigen Inline-Blöcken
  • Weitere HTML-Lektionen folgen; tiefes JS ist ein eigener Kurs

Wie Verhalten laden

  • Winzige Demo: Inline neben dem Control kann reichen
  • Alles Wiederverwendbare/Wachsende: nach app.js und src
  • Kritischer Text/Navigation: zuerst HTML, dann JS-Enhance
  • Kaputtes Gefühl: zuerst src-Pfad prüfen
  • Accessibility: button/a/labels behalten — keine klickbaren divs
  • Volle Sprachstudie: Schleifen/Frameworks im JS-Kurs

Übung — HTML lädt das Skript

  1. Inline-Demo kopieren; Klick prüfen.
  2. Listener nach app.js, auf src umstellen, prüfen.
  3. Pfad brechen (wrong.js); Button bleibt „Say hi“.
  4. Skript ganz entfernen; HTML bleibt sinnvoll.
  5. Zweiten Button mit neuer id und Listener.
  6. Satz: HTML besitzt Inhalt und Struktur; script lädt optionales Verhalten.
  7. Nächste Lektion: kurze HTML-Zusammenfassung.

Typische Fehler

  • Kritische Sätze nur in JavaScript
  • Tippfehler/falscher Ordner in src
  • Riesige Inline-Skripte schwer wartbar
  • Skript vor Element-Existenz (head ohne Warten)
  • Zugängliche Buttons durch klickbare divs ersetzen
  • Diese Lektion als vollen JS-Lehrplan behandeln
  • Accessibility-Gewohnheiten vergessen

Zusammenfassung

  • script lädt JavaScript in eine HTML-Seite
  • Inline für Mini-Demos; src für externe .js beim Wachsen
  • Skripte so platzieren, dass Inhalt erscheint und nutzbar bleibt
  • Echten Inhalt und zugängliche Controls in HTML behalten
  • Accessibility war Struktur; diese Lektion ist Verhaltensverdrahtung
  • Weiter: kurze HTML-Zusammenfassung des bisherigen Wegs

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
5
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 58 von 68
Html Tutorial