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.

jQuery

Für die folgenden Beispiele wird die jQuery-Bibliothek benötigt. Diese kann hier heruntergeladen werden.

jquery-2.1.4.min.js

Einbindung in HTML

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

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>

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>

Auf Ereignisse reagieren

jQuery-Befehle

Befehl	Beschreibung	Beispiel
`addClass(class)`	Fügt den Elementen eine Klasse hinzu	`$('h1').addClass('greentext');`
`append(text)`	Fügt zusätzlichen Inhalt in die Elemente ein	`$('body').append('<p>Noch was…</p>');`
`hide()`	Versteckt die Elemente	`$('.loesung').hide();`
`html(text)`	Ersetzt den Inhalt der Elemente	`$('body').html('<h1>Hallo</h1>');`
`removeClass(class)`	Entfernt eine Klasse aus den Elementen	`$('h1').removeClass('greentext');`
`show()`	Zeigt die Elemente an	`$('.loesung').show();`
`slideDown()`	Klappt die Elemente nach unten auf	`$('.loesung').slideDown();`
`slideToggle()`	Klappt die Elemente auf oder zu	`$('.loesung').slideToggle();`
`slideUp()`	Klappt die Elemente nach oben zu	`$('.loesung').slideUp();`
`toggle()`	Ändert die Sichtbarkeit	`$('.loesung').toggle();`