Informatik JavaScript Erste Schritte Beispiele

Einführung

Was ist JavaScript?

JavaScript (JS) ist eine plattformunabhängige Programmiersprache, mit der Webseiten mit zusätzlichen Funktionen ausgestattet werden können, z.B. aufklappbare Menüs, Laufschriften, Nutzereingaben, Überprüfung von Formularfeldern auf korrekte Inhalte, Bildwechsel ect. Plattformunabhängig bedeutet, dass JS in jeder Kombination von Browser und Betriebssystem arbeitet. Das stimmt grundsätzlich, im Detail gibt es aber Abweichungen in der Form, dass einige Befehle von unterschiedlichen Browsern abweichend oder gar nicht ausgeführt werden

JS enthält alle Konstrukte einer vollwerwertigen Programmiersprache, wie Variable, Alternativen und Zyklen. Dagegen ist der Zugriff auf Dateien nicht möglich. Der einzige Weg, Daten dauerhauft zu speichern, sind Cookies.

JS ist wie der Name schon sagt, eine Scriptsprache. Das bedeutet, es können keine eigenständigen Programme mit JS erstellt werden. Scripte können immer nur in einem Browser abgearbeitet werden. Die Sprache wurde prinzipiell für das Internet entwickelt und dient i.A. dazu, "starre"HTML-Seiten zu dynamisieren und mit Funktionalität zu bereichern. Die von JS durchgeführten Änderungen, Berechnungen usw. sind nur Auswirkungen auf den Client-Rechner gültig und sind nach dem Schließen des Browserfensters hinfällig

Grundsätzliches

Einbinden fertiger Scripte

Um Scripte in HTML-Seiten einzubinden, gibt es zwei Möglichkeiten. Man kann die Scripte entweder [A] in einer externen Datei speichern(name.js) oder [B] innerhalb eines Script-Tags direkt in das HTML-Dokument schreiben. Oft setzt man die Scripte noch in einen HTML-Kommentar-Tag, falls der Benutzer die Ausführung von Scripten aus Sicherheitsgründen unterbunden hat.


    [A] <script src="name.js" type="text/javascript></script>

   [B]  <script type="text/javascript>
   <!--
   JS-Befehle
   -->
   </script>

Scriptsammlungen mit fertigen Scripten für vielfältige Anwendungen findet man man im Internet. Aber es geht doch nichts über Eigenbau ;-))

Funktionen

Zur Lösung eines bestimmten Problem sind meistens eine ganze Reihe von Anweisungen erforderlich. Zusammengehöige Anweisungen werden in Blöcken zuammengefasst.


 {
 Anweisungen
 }

Die geschweiften Klammern treten also immer paarweise auf, egal wie viele Anweisungsblöcke geschrieben wurden. Der Kern von JS sind jedoch Funktionen. Sie bestehen aus einem Funktionskopf, der den Namen der Funktion enthält und einen Anweisungsblock. Funktionen werden in einem script-Bereich definiert.


 function funktionsname ()
 {
 Anweisungen
 }

Funktionen ausführen - Ereignisse

Der Programmierer hat seine Pflicht getan: Eine Funktion test()- zum Beispiel soll sie die Angaben in einem Formular auf Vollständigkeit überprüfen ist geschrieben und in das HTML-Dokument eingefügt. Aber wann ist der richtige Moment, die Funktion auszuführen?

Damit der aufgeschriebene Quellcode auch tatsächlich ausgeführt wird, muss die Funktion gestartet - aufgerufen - werden. Der Funktionsausfruf wiederum wird durch Ereignisse (Events) gesteuert. Der Programmierer legt fest, welches Ereignis eine Funktion startet. Im Beispiel wird er sicher eine Schaltläche "Fertig" einfügen. Beim Ereignis Klicken auf Schaltfläche, wird die Funktion gestartet. Dafür verwendet man sogenannte Eventhandler.


 <img src="button.jpg" onClick="test()">

Typische Ereignisse sind:

Ereignis (Event)	Eventhandler
Klick auf Element	onClick
Laden einer Seite	onLoad
Mausbewegung über ein Element	onMouseOver
Mausbewegung von Element herunter	onMouseOut
Drücken einer Taste	onKeypress
Änderung der Werte in einem Formularelement	onChange

Als Elemente sind normale HTML-Elemente möglich, man ein Bild ebenso anklicken wie einen Absatz, eine Überschrift oder den ganzen Body. Soll ein Link zum aufrufen einer Funktion eingesetzt werden, verwendet man statt onClick folgendes Konstrukt:


 <a href="javascript:test()">

Namen

Funktionen und Variable müssen eindeutig benannt werden. Die Namensgebung unterliegt einigen Beschränkungen. Zulässig sind Klein- und Großbuchstaben sowie Ziffern. Ein gültiger Name beginnt stets mit einem Buchstaben. Sonderzeichen und Umlaute sind nicht erlaubt. Gültige Namen: Zahl, zahl, zahl1, Zahl_1, z1, zahl17, z, a. Groß und Kleinschreibung muss beachtet werden: Zahl und zahl sind zwei verschiedene Variablen

Ungültige Namen sind: 1z, Größe, zahl-1 ...

JS-Sprachelemente

Variable

In der Mathematik ist die Benutzung von Variablen eine Selbstverständlichkeit. Wenn man den genauen Wert einer Größe noch nicht kennt, verwendet man eine Variable. Auch in der Programmierung sind Variable unerläßlich: Ein Onlinespiel soll zum Beispiel die Punkte des Spielers ermitteln. Dieser Wert ist natürlich variabel, also erst einmal unbekannt.


 var punkte;

Mit dieser Zeile wird durch das Schlüsselwort var eine Variable mit dem Namen Punkte definiert und zur weiteren Verwendung bereitgestellt (Deklaration). Das Semikolon schließt die Befehlszeile ab.Zu Beginn des Spieles ist der Punktestand bekannt, man kann der Variable also sofort mit der Deklaration einen Wert zuweisen.


 var punkte=0;

Nach Spielende kann man dem Spieler seinen Punktestand mitteilen


 alert(punkte);

Der Alert-Befehl erzeugt ein Meldungsfenster, dass hier nicht das Wort 'Punkte' sondern den Wert der Variable punkte, also den erreichten Punktestand ausgibt.

Natürlich kann man auch den Namen des Spielers in die Meldung einbeziehen. Dieser ist im Allgemeinen von Spieler zu Spieler verschieden, d.h. auch für den Spielernamen wird eine Variable benötigt. Anders als in der Mathematik gibt es in der Programmierung auch Text- bzw. Zeichen-Variable.


 var Name='Otto';

Der einzige Unterschied in der Festlegung der Variable Name zur Variable punkte sind die Hochkommas, die Name zur Zeichenvariable machen. Zeichenketten oder Strings werden prinzipiell durch Hochkommas gekennzeichnet. Die Punktemeldung könnte jetzt so aussehen:


 alert(Name + 'hat ' + punkte + 'Punkte');

Demo

Wie man sieht, werden für die Variablen Name und punkte die Werte eingesetzt, während die in Hochkommas gesetzten Zeichenketten(Strings) unverändert ausgegeben werden. Der Operator "+" verbindet die einzelnen Teile.

Operatoren

Jedesmal, wenn der Spieler einen Punkt erzielt, muss sich der Wert der Variable punkte ändern. In fast allen Scripten werden die Werte von Variablen verändert oder verglichen. Dafür verwendent man Operatoren. Einige Beispiele erklären sich im Prizip selbst:


 var summe = zahl1 + zahl2;
 var differenz = zahl1 - zahl2;
 var produkt = zahl1 * zahl2;
 var quotient = zahl1/zahl2;

Die fünf Operatoren sind recht einfach. Fünf? Der Zuweisungsoperator = wird immer dann verwendet, wenn eine Variable einen neuen Wert bekommt. Das Pluszeichen + bedeutet nur bei Zahlen eine Addition, zwischen zwei Strings bewirkt es eine Anneinanderreihung der Zeichenketten.

Die Erhöhung des Punktekontos sieht folgendermaßen aus:


 punkte = punkte + 1;  // Erhöhung um einen Punkt
 punkte = punkte + 5;  // Erhöhung um fünf Punkte

Der neue Wert der Variable punkte ergibt sich aus dem alten Wert plus den Zuwachs. In JS kann man diese Zeile auch verkürzt aufschreiben.


 punkte++;             // Erhöhung um einen Punkt
 punkte+=5;             // Erhöhung um fünf Punkte
 punkte-=2;             // Punktabzug um 2 Punkte

Um zu prüfen, welche Wert eine Variable besitzt, benötigt man Vergleichsoperatoren. Im Spielebeispiel, wenn ein Spieler eine bestimmte Mindestpunktzahl nicht erreicht, erreicht er das nächste Level nicht.

= =	ist gleich
!=	ungleich
< bzw <=	kleiner als bzw. kleiner oder gleich
> bzw. >=	größer als bzw. größer oder gleich

Die if-Anweisung

Immer wieder müssen Scripte auf unterschiedliche Bedingungen reagieren. Alle Programmiersprachen verfügen über eine "wenn"-Anweisung


 if (Bedingung) {
    //Anweisungsblock, der nur ausgeführt wird, wenn die Bedingung erfüllt ist
                }

Zum Beispiel


 if (punkte==10) {
    alert('nächstes Level erreicht');
                }

Häufig ist auch interessant, wie zu verfahren ist, wenn die Bedingung nicht erfüllt ist. Dazu wird die if-Anweisung um einen else-Zweig ergänzt.


 if (Bedingung) {
    //Anweisungsblock, der nur ausgeführt wird, wenn die Bedingung erfüllt ist
                }
    else        {
    //Anweisungsblock, der nur ausgeführt wird, wenn die Bedingung nicht erfüllt ist
                }
 

 if (punkte<10) {
    alert('Lusche!')
                }
    else        {
    alert('nächstes Level');
                }

Schleifen mit der for-Anweisung

Zur Löung vieler Probleme ist es notwendig, Anweisungen mehrfach auszuführen. Die Zähl-Schleife (for) ist hierfür ein geeignetes Mittel. Dabei wird eine Zählvariable (oft i) von einem Startwert bis zu einem Endwert durchgezählt und jedes Mal wird der Schleifenblock ausgeführt


   for (i=startwert; i< endwert ; i++ )
        {
        //Schleifenblock
         }

i++ bedeutet, dass in Einerschrittengezählt wird, für Zweierschritte notiert man i+=2.

Beispiel und der JS-Code:


  for (i=1; i<4 ; i++ )
   {
    alert( i + '.te Warnung');
    }

Schleifen mit der while-Anweisung

Mit der While-Anweisung werden ebenfalls Wiederholungen realisiert. Der Unterschied zu for ist, dass die Anzahl der Wiederholungen noch nicht von vornherein bekannt ist. Die Steuerung der Wiederholung erfolgt durch eine Bedingung. Solange die Startbedingung erfüllt ist, wird der Schleifenblock ausgeführt.


  while(Startbedingung)
    {
    //Schleifenblock
    }

Als Beispiel dient die Abfrage einer Kopfrechenaufgabe, sie wird solange wiederholt, bis der Benutzer die richtige Antwort eingibt. Auch hier der JS-Quellcode

 
 var tip = 0;
 while(tip!=42)
   {
   var tip = prompt('Wieviel ist 7*6',' ');
   }

Der Befehl prompt erzeugt ein Eingabe-Fenster mit zwei Parametern: Hinweis und Voreinstellung Die Eingabe des Nutzers kann in einer Variable gespeichert werden.

 
    var variablenname = prompt('Hinweistext','Standardwert');

Auf dieser Seite