JavaScript Schnellstart / JavaScript Schnellstart Modul 4 – Ausblick in deine Zukunft
0%
In Bearbeitung

JavaScript Schnellstart: HTML

In diesem Kurs hast du in einem komfortablen Online-Editor programmiert. Wenn du JavaScript später in „freier Wildbahn“ erleben möchtest, wirst du um eine zusätzliche Sprache nicht herumkommen.

Schnelleinstieg in HTML

Mit HTML kannst du Inhalte definieren, die in deinem Browser angezeigt werden. HTML alleine wird aber nur statische feste Inhalte anzeigen, mit denen die Webseiten-Interaktion begrenzt ist.

Um eine bessere Interaktion und Benutzererfahrung zu ermöglichen benutzen wir JavaScript. Damit kannst du HTML in deinem Browser „zum Leben erwecken“. Du kannst HTML-Elemente erstellen, verändern und löschen.

JavaScript im Browser ist so mächtig, dass du damit ganze Anwendungen und Spiele im Browser erstellen kannst. HTML ist dabei ein wichtiger Bestandteil. Ohne geht's nicht.

In HTML können wir JavaScript auf zwei verschiedene Arten einbetten und ausführen lassen.

JavaScript in HTML einbetten

Zum einen kannst du dein Programm direkt in HTML eingeben. Dafür gibt es das <script>-Element.

So verwendest du das Script-Element in deiner HTML-Datei:

<!DOCTYPE html>
<html lang="de-DE" id="html">
  <head>
    <title>JavaScript in HTML</title>
  </head>
  <body>
    <h1>Das ist eine JavaScript Testseite</h1>
    <script>
      alert("Hallo auf lerneProgrammieren.de!");
    </script> 
  </body>
</html>

Der andere Weg ist über eine extra JavaScript-Datei (.js). Anstatt den Code in ein <script>-Element einzutragen, wird der Pfad der JavaScript-Datei per src-Attribut eingetragen.

So verlinkst du eine JavaScript-Datei (.js) in HTML, in unserem Fall die Datei meinjavascript.js:

<!DOCTYPE html>
<html lang="de-DE" id="html">
  <head>
    <title>JavaScript in HTML</title>
  </head>
  <body>
    <script src="meinjavascript.js"></script>
  </body>
</html>

Hinweis: Wenn du im Umgang mit HTML noch nicht sicher bist, empfehle ich dir den LerneProgrammieren HTML-Schnellstart.

In der folgenden Übung werden wir auf einen Klick eines HTML-Elementes reagieren. Für dich ist der Code wichtig, der zwischen den <script>-Elementen steht.