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 (Rechtsklick und Ziel speichern unter auswählen)

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-2.1.4.min.js eingebunden:

<script type="text/javascript" src="jquery-2.1.4.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">
      $('body').html('<h1>Neuer Inhalt</h1>');
    </script>
  </body>

Auf Ereignisse reagieren

Befehle, die direkt im <script>-Element stehen, werden sofort ausgeführt. Oft möchte man aber Befehle erst zu einem späteren Zeitpunkt ausführen. Dazu wird eine Funktion definiert. Das ist eine Sammlung von Befehlen, die auf Wunsch ausgeführt werden können.

Hier wird eine Funktion mit dem Namen changeContent definiert:

function changeContent() {
  $('body').html('<h1>Neuer Inhalt</h1>');
}

Achtung: Ein Funktionsname darf nur aus Gross- und Kleinbuchstaben bestehen.

Mit dem jQuery-Befehl click kann nun festgelegt werden, dass die in der Funktion definierten Befehle ausgeführt werden sollen, wenn auf ein bestimmtes Element geklickt wird:

$('h1').click(changeContent);

jQuery-Befehle

HTML Ändern

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>');`
`html(text)`	Ersetzt den Inhalt der Elemente	`$('body').html('<h1>Hallo</h1>');`
`removeClass(class)`	Entfernt eine Klasse aus den Elementen	`$('h1').removeClass('greentext');`

Animationen

Befehl	Beschreibung	Beispiel
`hide()`	Versteckt die Elemente	`$('.loesung').hide();`
`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();`

Ereignisse

Befehl	Beschreibung	Beispiel
`click(funktion)`	Wenn auf ein Element geklickt wird…	`$('h1').click(showContent);`
`hover(funktion)`	Wenn der Mauszeiger über ein Element bewegt wird…	`$('h1').hover(showContent);`

Zeitsteuerung

Mit setTimeout kann festgelegt werden, dass eine Funktion nach einer bestimmten Dauer (in Millisekunden) ausgeführt werden soll:

function doSomething() {
}
 
setTimeout(doSomething, 1000);

Mit setInterval wird die Funktion immer wieder nach der angegebenen Dauer ausgeführt:

function doSomething() {
}
 
setInterval(doSomething, 1000);

Links

jQuery-Referenz