JavaScript

Einleitung

JavaScript ist eine Programmiersprache, mit welcher der HTML-Code einer Webseite manipuliert werden kann, nachdem die Webseite schon im Browser angezeigt wird. Somit ermöglicht JavaScript das Gestalten von interaktive Webseiten.

Wir verwenden zusätzlich die weit verbreitete JavaScript-Bibliothek jQuery, welche den Zugriff auf den HTML-Code mit CSS-Selektoren ermöglicht.

Mit dem folgenden Beispiel wird der Inhalt der aktuellen Webseite geändert:

$('body').html('<h1>Neuer Inhalt</h1>');

Mit $(…) wird mit einem CSS-Selektor ein oder mehrere HTML-Elemente ausgewählt.
Das folgende Punkt bedeutet, dass auf die ausgewählten Elemente ein Befehl angewendet werden soll.
Der Befehl html(…) bedeutet, dass der Inhalt der ausgwählten Elemente auf den angegebenen HTML-Code gesetzt werden soll.
Mit dem Strichpunkt ; wird der Befehl abgeschlossen.
Achtung: Der CSS-Selektor und der HTML-Code muss in einfachen Anführungszeichen stehen.

Einbindung in HTML

Wie bei CSS kann Javascript direkt in eine HTML-Datei eingefügt werden oder in einer separaten Datei gespeichert werden.

Direkt in der HTML-Datei

Den JavaScript-Code, welchen Sie selbst schreiben, wird üblicherweise direkt in die HTML-Datei eingebunden. Er innerhalb eines <script>-Elements stehen. Das <script>-Element wird üblicherweise ganz am Ende des <body>-Elements platziert.

  <body>
    Inhalt der Website
    <script type="text/javascript">
      alert("Hallo");
    </script>
  </body>

In einer eigenen JS-Datei

Häufig wird vordefinierter JavaScript-Code verwendet. Dieser ist als JS-Datei erhältlich und wird in die HTML-Datei eingebunden, indem beim <script>-Elements der Dateiname als Wert des src-Attributs angegeben wird.

Mit dem folgenden HTML-Code wird die JavaScript-Datei jquery.min.js eingebunden:

<script type="text/javascript" src="jquery.min.js"></script>

jQuery-Befehle

Befehl	Beschreibung	Beispiel
`addClass(class)`	Fügt den Elementen eine Klasse hinzu	`addClass('hidden')`
`html(text)`	Setzt den Inhalt der Elemente	`html('<h1>Hallo</h1>')`