Einfache Dynamik mit JavaScript
Mit JavaScript lernen Sie hier Ihre vermutlich erste Programmiersprache kennen. JavaScript ist eine einfache Programmiersprache mit der Sie Einfluss auf das Verhalten Ihrer Webseite nehmen können.
Zunächst sollten Sie sich dabei über eine Eigenart von JavaScript im Vergleich zu anderen Programmiersprachen für das Web klar werden: JavaScript wird nicht auf dem Server ausgeführt. Die Anweisungen, die Sie hier geben, werden vom Browser des Nutzers umgesetzt, über den Sie keine Kontrolle haben. So kann der Nutzer JavaScript ausschalten oder einschränken. Trotz oder gerade wegen dieser Eigenart ist JavaScript auf Webseiten weit verbreitet. Bietet dieser Web doch eine Möglichkeit, Nutzeraktionen zu verarbeiten, ohne immer wieder Daten zwischen Server und Hinter hin- und herzuschicken
JavaScript einbauen
Für den Einbau der JavaScript-Befehle gibt es einen eigenen HTML-Befehl. Unterstützt der Browser Javascript nicht, wird der Inhalt ignoriert:
<script type=“text/javascript“></script>
Möchten Sie die JavaScript-Code in einer eigenen Text-Datei verwalten, können Sie ihn auch auslagern und diese Datei als Quelle angeben:
<script type=“text/javascript“ src=“mein_javascript.js“></script>
JavaScript und CSS
JavaSCript bietet Ihnen auch die Möglichkeit, CSS-Angaben zu verändern. So können Sie Beispielsweise durch CSS-Angaben versteckte Elemente einblenden, wenn der Nutzer einen Bereich Ihrer Webseite anklickt oder mit der Maus darüber fährt. Auch lassen sich Schriftgrößen oder Farben bei Aktionen des Nutzers oder zeitgesteuert verändern, ohne dass die Seite neu geladen werden muss.
Diese Funktionen können hier nur angerissen werden. In der Fachliteratur finden Sie aber zahlreiche Werke, die sich mit diesen Möglichkeiten befassen.
Weitere Beispiele für die Nutzung von JavaScript
Einfaches Beispiel
<script type=“text/javascript“>
alert('Willkommen auf '+document.location.href+'!');
</script>
Sobald der Browser beim Lesen der HTML-Datei auf diese Zeile stößt, wird er eine Warnmeldung (altert) anzeigen. Diese trägt den Text „Willkommen auf“. Zudem ermittelt JavaScript die aktuelle Adresse der Datei (document.location.href) und baut diese in die Meldung mit ein.
Farbe ändern
Nehmen Sie diese Zeilen in Ihr HTML-Dokument auf:
<h1 id=“test“ style=“color: green“>Grüne Überschrift</h1> <a href=“#“ onClick=“return WerdeRot();“>werde rot</a> <script type=“text/javascript“> function WerdeRot() </script>
Sie erzeugen so eine in grün dargestelllt Überschrift und einen Link. Klicken Sie auf den Link, rufen Sie die JavaScript-Funktion „WerdeRot“ auf. Diese nutzt die vergebene ID „test“, um die Überschrift innerhalb Ihres Dokuments zu erkennen und weist der CSS-Eigenschaft „color“ den neuen Wert „red“ (rot) zu. Zudem wird zurück gemeldet, dass die Verarbeitung abgebrochen werden soll (return false). So wird der Klick selbst nicht aktv-