JS

JavaScript (JS) legt Verhalten und Interaktion einer Webseite fest.

Mit HTML/CSS ist es nicht möglich zu programmieren, dynamische Inhalte zu erstellen oder Interaktionen mit den Benutzenden zu realisieren. Deshalb wurden die ursprünglichen Websprachen um einige Skriptsprachen erweitert, die in die bestehende HTML/CSS-Struktur eingebunden werden können. JavaScript (JS) ist eine Skriptsprache, die hauptsächlich für dynamisches HTML in Web-Browsern eingesetzt wird. Es ist eine zur Erweiterung des HTML-Befehlssatzes entwickelte kompakte Skriptsprache, die es ermöglicht, objektorientierte Anwendungen in Internetseiten zu implementieren. JavaScript wurde 1995 von Netscape eingeführt und lizenziert. JavaScripts werden wahlweise direkt in der HTML-Datei oder in separaten Dateien notiert. Sie werden beim Laden der Webseite vom Web-Browser interpretiert. Dazu besitzen moderne Web-Browser entsprechende Interpreter-Software. JavaScripte können in Texteditoren eingegeben werden. JavaScript bringt viele sinnvolle Erweiterungen des recht eingeschränkten HTMLs, so zum Beispiel das Verifizieren von Formularen, das berechnen mathematischer Formeln oder auch Interaktionen und Effekte (z. B. Rotieren von Inhalten). Achtung, nicht jeder Nutzende hat JS im Browser aktiviert, es kann also sein, dass Skripts nicht abgespielt werden.


Einbindung JavaScript (JS) in HTML-Datei

Das JS kann direkt in den body-Bereich eingebunden werden, wenn das Resultat genau an dieser Stelle auf der Webseite erscheinen soll.

<body><script type="text/javascript">HIER FOLGT DAS SKRIPT</script></body>

Das Skript kann auch im head-Bereich eingebunden werden, wenn die Funktion erst später angewählt wird. So wird das Skript beim Laden der Seite gelesen, aber allenfalls erst zu einem späteren Zeitpunkt aktiviert.

<head><script type="text/javascript">HIER FOLGT DAS SKRIPT</script></head>

Seit HTML 4 ist es möglich, JavaScript-Codes in separaten Dateien zu notieren. Das ist sehr nützlich, wenn gleiche JavaScript-Funktionen in mehreren HTML-Dateien verwendet werden wollen. Dann muss der Code nur einmal notiert sowie in mehreren HTML-Dateien im Head referenziert werden.

<head><script type="text/javascript" src="meinskript.js"></script></head>

Hier folgen meine Skripts in einer separaten Datei als meinskript.js abgespeichert.


JavaScript Aufbau

JavaScript besteht aus einer kontrollierten Anordnung von Anweisungen:
- Variablen
- Operatoren
- Objekte
- Eigenschaften
- Funktionen

Diese Befehle werden durch einen JavaScript-Interpreter des Browsers bewertet und in Maschinencode umgesetzt, damit der Computer/Rechner diese Ausführen kann.

Variablen
Variablen sind nichts anderes als Behälter, welche Werte zur späteren Verwendung aufbewahren (z. B. Ergebnisse einer Berechnung). Mit der Anweisung 'var' plus den Namen der Variablen werden diese definiert. Um die Variable zu initialisieren, also mit Wert zu versehen, wird der Zuweisungsoperator = und der gewünschte Wert angegeben. Es gibt in JS folgende grundlegende Datentypen:
- Zahlen
- Zeichenketten (Strings, Zeichenfolge aus Buchstaben, Zahlen, Sonderzeichen)
- boolesche Werte (Wahrheitswerte - Bedingung erfüllt, nicht erfüllt - true/false)
- undefined (Variable deklariert, aber kein Wert zugewiesen)
- Objekte (komplexer Datentyp)

var SinnDesLebens = 42;


Operatoren
Operatoren werden verwendet, um Berechnungen durchzuführen oder Verknüpfungen, Vergleiche zwischen Variablen herzustellen.
Es gibt in JS folgende grundlegende Operatoren:
- Arithmetische Operatoren (+, -, *, /, etc.)
- Vergleichsoperatoren (=, != ungleich, >,< etc.)
- logische Operatoren ( && und, || oder, ! nicht)
- Verknüpfungsoperatoren (+)

var SinnDesLebens = 42; var Alter > 18;


Kontrollstrukturen - Verzweigungen und Schleifen
Kontrollstrukturen enthalten Anweisungen. Die Anweisungen geben bestimmte Regeln an, was wann ausgeführt werden soll. Man unterscheidet grundsätzlich zwei Arten von Kontrollstrukturen - Verzweigungen und Schleifen. Mittels Verzweigungen ist es möglich, die Ausführung einer oder mehrere Anweisungs-Blöcke von Bedingungen abhängig zu machen (if, else). Schleifen ermöglichen es, einen Anweisungs-Block wiederholt ausführen zu lassen (for, while, do). Der Befehl wird nach der Anweisung in Klammer aufgeführt. Der Skriptblock wird anschliessend in den geschweiften Klammern eingefügt und mit einem Semikolon abgeschlossen.

var SinnDesLebens = 42; var Alter > 18; { if (SinnDesLebens == 42) alert(1); if (SinnDesLebens != 42) alert(0); if (Alter >= 18) alert("Bitte anschauen!"); if (Alter <= 17) alert("Bitte nicht anschauen!"); }

Im Beispiel werden die Inhalte der Variablen SinnDesLebens und Alter mit fixen numerischen Werten (42, 18) verglichen.

Kommentare einbinden
Es können auch Kommentare eingebunden werden, um einzelne Anweisungen zu erklären. Kommentare werden vom JavaScript-Interpreter ignoriert. Einen wahlweise ein- oder mehrzeiligen Kommentar wird mit /* eingeleitet. Mit der umgekehrten Folge */ wird der Kommentar beendet.
Einen einzeiligen Kommentar wird mit der Zeichenfolge // gestartet. Der Browser ignoriert dann den nachfolgenden Text bis zum nächsten Zeilenende.

var SinnDesLebens = 42; var Alter > 18; { if (SinnDesLebens == 42) /*Um abzufragen, ob zwei Werte gleich sind, zwei == */ alert(1); if (SinnDesLebens != 42) // Um abzufragen, ob zwei Werte unterschiedlich sind, die Zeichen != alert(0); if (Alter >= 18) alert("Bitte anschauen!"); if (Alter <= 17) alert("Bitte nicht anschauen!"); }

Selbstdefinierte Variablen/Objekte/Funktionen - Namen vergeben
An vielen Stellen in JavaScript werden eigene Namen vergeben, für selbst definierte Funktionen, eigene Objekte oder Variablen.

Bei selbst vergebenen Namen gelten folgende Regeln:
- sie dürfen keine Leerzeichen enthalten
- sie dürfen nur aus Buchstaben und Ziffern bestehen - das erste Zeichen muss ein Buchstabe sein
- sie dürfen als einziges Sonderzeichen den Unterstrich "_" enthalten
- sie dürfen nicht mit einem bereits reservierten Wort identisch sein


JS Funktionen
Mit Hilfe von Funktionen 'function' können eigene, in sich abgeschlossene JavaScript-Prozeduren programmiert werden, die dann über den Aufruf der Funktion ausgeführt werden können. Dabei kann bestimmt werden, bei welchem Ereignis (beispielsweise Anklicken eines Buttons) die Funktion aufgerufen und ihr Programmcode ausgeführt wird. Die Funktionen können direkt innerhalb einer HMTL-Seite oder in einer Seite separaten JavaScript-Datei definiert werden. An erlaubten Stellen, z.B. innerhalb der einleitenden HTML-Tags (body, a href etc.) oder in einem Formular-Tag (input) können solche selbst definierte Funktionen dann mit Hilfe eines Event-Handlers aufgerufen werden. Folgende Eigenschaften benötigen Funktionen:
- eine Funktion beginnt mit dem Schlüsselwort 'function'
- gefolgt vom Namen der Funktion
- gefolgt von einem Paar runder Klammern mit den Argumenten der Funktion, Kommas trennen die Argumente der Funktion (wenn eine Funktion keine Argumente hat, bleibt die Klammer leer)
- Die Anweisungen der Funktion stehen in einem Paar geschweifter Klammer

JS Event-Handler
Event-Handler sind ein wichtiges Bindeglied zwischen HTML und JavaScript. Event-Handler werden meist in Form von Attributen in HTML-Tags notiert. Event-Handler erkennt man daran, dass solche HTML-Attribute immer mit on beginnen, zum Beispiel onclick. Hinter dem Istgleichzeichen wird in Anführungszeichen eine JavaScript-Anweisung notiert. Jeder Event-Handler steht für ein bestimmtes Anwenderereignis, onclick etwa für das Ereignis "Anwendende hat mit der Maus geklickt". Der Anzeigebereich des HTML-Elements, in dem der Event-Handler notiert ist, ist das auslösende Element. Wenn der Event-Handler onclick beispielsweise in einem Formular-Button notiert wird, wird der damit verknüpfte JavaScript-Code nur dann ausgeführt, wenn der Mausklick im Anzeigebereich dieses Elements erfolgt.

Das Beispiel zeigt, wie Event-Handler auch in HTML-Tags funktionieren. Es wird eine Überschrift H1 definiert. Innerhalb der Überschrift sind die Event-Handler onmouseover und onmouseout notiert. Der Event-Handler onmouseover tritt in Aktion, wenn Anwendende die Maus in den Anzeigebereich der Überschrift bewegen, und onmouseout wird aktiv, wenn die Maus wieder aus dem Anzeigebereich herausbeuget wird. Mit Hilfe von this wird Bezug auf das aktuelle Objekt genommen und kann mittels der Eigenschaft innerHTML mit jedem Aktivwerden eines der beiden Event-Handler den Text der Überschrift dynamisch austauschen.

<h1

onmouseover="this.innerHTML = 'Hier ist der Beweis!'"

onmouseout="this.innerHTML = 'Ich bin dynamisch'">

Ich bin dynamisch

</h1>


JavaScript-Bibliotheken

Für die Erstellung von browserübergreifenden Webanwendungen mit Hilfe von JavaScript stehen JavaScript-Bibliotheken (Toolkits) bereit. Es handelt sich dabei um eine Sammlung von JavaScript-Funktionen. Toolkits, die nicht nur häufig benutzte Standardfunktionen zur Verfügung stellen, sondern durch ein besonderes Maß an Abstraktion eine grundlegend andere Programmierung nach sich ziehen, werden auch Frameworks genannt. Zu den bekannten JavaScript-Bibliotheken und Frameworks zählt unter anderem jQuery. Die von John Resig entwickelte Bibliothek wurde im Januar 2006 veröffentlicht und wird laufend weiterentwickelt.

Vorherige Seite: CSS Nächste Seite: bilderundgrafiken