Dies ist eine alte Version des Dokuments!
Inhaltsverzeichnis
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.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"> $('body').html('<h1>Neuer Inhalt</h1>'); </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(); |