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.
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 |
---|---|---|
html(text) | Setzt den Inhalt der Elemente | html('<h1>Hallo</h1>'); |