Javascript-Grundlagen

Wer HTML und CSS bereits in seinen Grundzügen kennt, hat sich sicherlich schon gefragt, wie man mit dem Aufrufer der Seite eigentlich interagieren kann. Weder reines HTML noch CSS sind aktuell in der Lage Befehle vom Nutzer entgegen zu nehmen und bis auf einige Effekte wie das Berühren eines Links damit dieser sich färbt, sind einem auch mit CSS letzten Endes die Hände gebunden.

Hierfür gibt es Javascript. Mit Hilfe von Javascript kann man für etwas Interaktivität sorgen. Ein Klick auf einen Link muss nicht immer bedeuten, dass sich eine neue Seite öffnet. Ein Linkklick kann auch eine Ausgabe mit OK-Button erzeugen.

In den nun folgenden Beispielen, werden kleine Anfänge in Javascript gezeigt:

Klick mich

Würde man auf diesen Link klicken, würde ein Feld mit einem OK-Button erzeugt, dass den Benutzer mit "Hallo" begrüßt.

Selbstverständlich kann Javascript überall in die Webseite eingebunden werden.

Meißt bindet man Javascript im Kopf der Seite, also in den sogenannten

-Bereich ein, allerdings ist dies schon lange nicht mehr Pflicht. Auch die type-Deklaration darf in modernen Browsern weggelassen werden.

In diesem Beispiel wurde eine Funktion deklariert, mit dem Namen "hello". Deutlich zu erkennen ist, dass diese Funktion lediglich eine Ausgabe erzeugen soll.

Aufrufen könnte man diese wieder mit einem Link:

Klick mich

Oder zu Beginn, wenn die Webseite geladen wird, könnte man die Funktion automatisch aufrufen. Dazu müsste man das

-Tag so gestallten:

Neben diesen Aufrufen, gibt es noch die Möglichkeit des "onclick". Ein Beispiel dafür wäre dieser Link:

Klick mich

Bei einem Klick auf diesen Link würde man zunächst die Ausgabe der Funktion "hello" erhalten und anschließend nach dem Klick auf das "OK"-Feld der Ausgabe würde man auf dem im "href" definierten Link umgeleitet werden.

Javascript kann nicht nur Ausgaben erzeugen und Eingaben entgegen nehmen, es kann auch die im HTML-Dokument befindlichen Elemente in seiner Darstellung verändern.

Nehmen wir an, wir hätten einen Text-Absatz:

Ich bin ein Absatz

und ich ändere die Farbe

Das passende Javascript würde so aussehen:

Würde man nun auf den Link klicken, würde sich der gesamte Text innerhalb des Absatzes rot färben. Die Funktion ist dabei sehr einfach gehalten. Zuerst wird im Dokument ("document"), ein Element mit der CSS-ID "absatz" gesucht (getElementById("absatz")) und dabei in dessen Darstellung die Schriftfarbe auf Rot gesetzt (style.color="red").

Alle Befehle sind dabei mit einem Punkt, dem Punkt-Operator, verbunden, um anzuzeigen, dass es sich dabei um eine einzige Befehlskette handelt.

Über Javascript gibt es selbstverständlich noch eine Menge mehr zu wissen. Mittels Javascript kann man unter anderem auf alle CSS-Eigenschaften der Elemente zugreifen und diese verändern.