Javascript (JS) ist eine vereinfachte Programmiersprache und kann zur Optimierung von Webseiten eingesetzt werden. Dazu ist es erforderlich, Einträge direkt im Quelltext vorzunehmen. Die Möglichkeiten mit JS sind natürlich sehr weitreichend. Einige Beispiele:

- Überprüfung von Formularfeldern auf Inhalte
- Laufschriften (Text Scrollers)
- Navigationsmenüs
- Cookies (Wiedererkennung von Besuchern)
- Besucherdaten auslesen (verwendeter Browser,    Auflösung, Land, Provider, etc.)
- Diashow
- Farb-, Blendeffekte

Beispiel eines einfachen Alert-Fensters mit Java-Script (siehe Beispiel 00 Tabelle1):

<SCRIPT LANGUAGE="JavaScript">
<!-- Beginn des JavaScripts
alert("Hallo Welt!\nMein erstes JavaScript");
document.write("Ist ja ganz einfach");
//-->
</SCRIPT>

Dieses JS zum Ausprobieren einfach in den Kopfteil (HEAD) der eigenen Webseite einfügen. Im Internet gibt es eine Vielzahl fertiger Java Scripts die du ausdrücklich kopieren darfst. Bei meinen Links findest du sicher das Richtige für deine Homepage. Meist ist dort auch beschrieben, welche Teile du in deinen Quelltext kopieren mußt und welche Parameter du verändern kannst.

Auf dem Weg zu mehr JS-Wissen ist ein Besuch bei Stefan Münz unumgänglich ;-) hier

Nun folgen einige JavaScript-Beispiele aus früheren Tutorien. Schau dir einfach mit dem Browser den Quelltext an (Ansicht - Quelltext).

Eines ist natürlich klar. Je mehr du selbst in JS auf die Beine stellen will, desto vorteilhafter ist es, wenn du dich auch bei den HTML-Tags auskennst, weil du mit JS die ganzen Seitenelemente ansprechen mußt. (z.B. Formularfeld, Button, etc.)

2. Der Einstieg

a. Variablen

Zuerst weist man einer Variable einen Wert zu. Das sieht in JavaScript (JS) so aus:

a = 5;
Zahl = 10;

Danach kann man mit diesen Variablen einfach weiterrechnen z.B.

Ergebnis = a + Zahl;

Zu achten ist hier auf die korrekte Groß- und Kleinschreibung von Variablen, weil "Ergebnis" nicht gleich "ergebnis" ist. In der Fachsprache heiß das, JS ist "case sensitive". Das betrifft aber nur Variablen und nicht Anweisungen.

Variablen braucht man zum Vergleichen und Rechnen. Sie sind grundsätzlich frei wählbar, dürfen aber keine reservierten Wörter sein
(zB.: if = 5; ist nicht korrekt).

Von Bedeutung ist auch ihre Lebensdauer. Kommen sie nämlich innerhalb eine Funktion (siehe Punkt 2c) vor, gelten sie nur innerhalb dieser. Befindet sich eine Variable an übergeordneter Stelle spricht man von einer globalen Variable, die also auch für alle Funktionen gilt.

Zeichenkettenvariablen:
entstehen wenn man einer Variable einen Text zuweist. Dieser muß immer unter Anführungszeichen stehen.

zB.: Meldung = "Ja da geht die Post ab!";
zB.: document.write("Das ist richtig");
ABER
      document.write(Meldung);

Numerische Variablen:
die Zuweisung erfolgt wie bereits gehabt ohne Anführungszeichen

Beim Vergleichen von Variablen mit Werten oder Text wird das doppelte == verwendet

if Wert == 5
if Meldung =="Vielleicht"

Falls du mal ein Ungleich benötigst, sieht das so aus: != Außerdem soll noch auf das "+" eingegangen werden, weil es beim Verbinden von vorgegebenem Meldungen und Variablen als Verknüpfungsoperator eingesetzt wird; z.B.:

alert ("Sie haben "+Variable+" eingegeben");

b. Schleifen

Schleifen sind dazu da einen Vorgang immer wieder auszuführen, bis ein bestimmter Zustand erreicht ist. Danach machen sie irgend etwas =) z.B.

while (i <== 99)
 {
  Quadrat(i)
  i = i + 1;
 }

Solange die Variable "i" also kleiner, gleich 99 ist, wird die Funktion "Quadrat" ausgeführt. Diese Funktion wird mit "i" ausgeführt. Der Wert wird hier in die Funtion mitgenommen und erhöht sich bei jedem Durchlauf der Schleife um 1, weil "i = i + 1" eben bedeutet dass zu "i" eins dazugezählt wird.

Ist i > als 99 werden die Anweisungen innerhalb der geschwungenen Klammern nicht ausgeführt. Diese Klammern mußt du bei Schleifen, Funktionen und IF-Anweisungen verwenden, wenn die darauffolgenden Anweisungen über mehr als eine Zeile gehen. Wenn da nur "i = i + 1" steht, brauchst du sie also nicht.

c. Funktionen

Funktionen sind Anweisungen, die aufgerufen werden müssen. Ohne Aufruf werden sie nämlich nicht ausgeführt. Aufgerufen werden sie über einen "Event-Handler" (siehe Punkt g) oder direkt z.B. in einer anderen Funktion:

function super()
  {
     alert("Sie haben gewonnen!");
     function Punkteberechnung()
  }

Beim Aufrufen der Funktion super geht ein Alert-
Fenster auf. Danach wird die Funktion Punkte-
berechnung ausgeführt.

d. If/Else If/Else

Hier kannst du Überprüfen ob eine bestimmte Bedingung gegeben ist und den Browser anweisen etwas auszuführen. Ist der Fall nicht eingetreten kannst du weitere Fälle überprüfen und darauf reagieren oder mit "Else" in allen sonstigen Fällen eine spezielle Vorgangsweise festlegen; Beispiel:

if (Zahl > 1000)
   {
        alert("Das ist viel!");
     else if (Zahl <= 1000)
        alert("Naja!");
     else
        alert("Da stimmt was nicht!");
   }

e. Objektorientierung in JS

JS ist objektorientiert. Das heißt es existiert eine Hierarchie von Objekten, die du alle ansprechen, auslesen oder beeinflussen kannst. An übergeordneter Stelle steht das Fenster gefolgt vom Dokument; Nach dem Objekt muß immer die Anweisung stehen. Beispiele:

window.open ("http://www.jku.at");

Hier wird ein neues Fenster geöffnet mit der Adresse der Uni-Linz.

Vorname = document.Umfrage.Name.value

Hier wird der Variable "Vorname" der Wert aus dem aktuellen Dokument (= aktuelle Internetseite) aus dem Fomular namens Umfrage, aus der Zelle namens "Name" zugewiesen.

f. Ausgewählte Anweisungen

alert("Hallo!");   ... erzeugt ein Fenster
prompt("Bitte Wert eingeben); ... Eingabefenster
document.write("Alles wird gut"); ... Textausgabe
confirm("Sind Sie sicher?"); ... Fenster
(siehe Tabelle1)

g. Event-Handler

Bei Eintritt eines bestimmten Ereignisses soll eine Funktion ausgeführt werden. Auf Webseiten können eine Reihe von Ereignissen eintreten; z.B:

onClick = "Berechnung()"
onMouseover = "..."
onMouseout = "..."
...

Bei Anklicken wird also die Funktion Berechnung ausgeführt. Sobald man mit der Maus beispielsweise über ein Bild fährt wird dies, und wenn man wieder wegfährt, jenes ausgeführt.

Diese Event-Handler stehen im BODY-Bereich des HTML-Dokuments. z.B. bei einem Button oder bei einer Grafik:

<INPUT TYPE="button" onClick="Berechnung()">
<IMG SRC="bild.gif" onMouseover="alert('hi')">

h. Kommentare/Dokumentation

Kommentare dienen dazu, dass du und auch andere Menschen sich bei deinen "Konstruktionen" schneller zurechtfinden. Bei JS geht das so:

/* Kommentar */

In dieser Form werden deine Kommentare vom Browser einfach ignoriert.

Wenn du dich mit JS beschäftigen willst geb ich dir den Tipp, dich im Internet nach Online-
Tutorials umzusehen oder besser noch, dir ein nettes Buch darüber zu kaufen.