Teil 1. Javascript (ablaufgesteuertes Programmieren)    15.3.08  Helmut Klatt

Historisch gesehen, hat sich u.a. wegen der beschränkteren technischen Möglichkeiten zunächst diese Form des Programmierens (z.B. mit PASCAL) entwickelt. Der algorithmische Kern ist dabei häufig leichter zu erkennen, wenn er nicht von einer Fülle von Steuermöglichkeiten (Ereignissteuerung, insbesondere Nutzung der Maus in Verbindung mit der grafischen Benutzeroberfläche) umhüllt ist.


  • Der Computer ist ein universelles Werkzeug
  • Er kann Befehle (Kommandos, Anweisungen) ausführen, die weit über bloßes Rechnen (compute) hinausgehen. Das Herz bzw. Hirn des Computers ist der Mikroprozessor (CPU = Central Processing Unit). Er besitzt sehr viele elektrische Anschlüsse (siehe Foto). Auf jeder angeschlossenen Leitung liegt eine Spannung von 0 Volt (kurz 0) oder 5 Volt (kurz 1) an. Ein Bit (Binary digit) ist die kleinste Informationseinheit (Alternative 0 oder 1). Die Informationen, die in dieser Form auf den Leitungen liegen, können sich in der Taktfrequenz des Mikroprozessors (z.B. 2,8 Gigaherz = 2800 000 000 mal pro Sekunde) ändern. Acht Bit werden zu einem Byte zusammengefasst. Achtstellige Binärzahlen können z.B. die Zahlen von 0 bis 255 darstellen. Auch jeder Befehl an den Mikroprozessor bekommt eine Nummer. Diese Befehle bilden den eingebauten Befehlssatz des Mikroprozessors.

  • Maschinensprache
  • Der Mikroprozessor kann durch die korrekte Anwendung der Befehle dieses Befehlssatzes (Maschinensprache) programmiert werden. Alle Befehl müssen ihm letztlich in dieser Form mitgeteilt werden. Das ist aber für den Programmierer sehr mühsam. Man hat deswegen höhere Programmiersprachen geschaffen, wo die Befehle einfacher formuliert werden können, weil sie sich auf wesentliche Aufgaben konzentrieren. Die Befehle sind zudem in der Regel mit Hilfe der englischen Sprache gebildet und somit intuitiv verständlich.

  • Compiler und Interpreter
  • Die Befehle müssen nun aber in die Maschinensprache übersetzt (interpretiert) werden. Bei Javascript leistet dies z.B. der Browser (Internet Explorer, Firefox usw.). Auch bei MSW-Logo musste man das Programm, das man zum Entwickeln des Programms benötigte, benutzen um das fertige Programm auszuführen. Bei einem solchen Interpreter wird jeder Befehl übersetzt und auch sofort ausgeführt. Bei Visual-Basic gibt es dazu die Runtime-Module (VBRun##.dll).
    Für manche Programmiersprachen (z.B. Pascal) gibt es Compiler, die den ganzen Quelltext (source-code) erst komplett übersetzen und dabei auch noch eine Optimierung vornehmen. Solche Programme sind in der Ausführung schneller. Das Ergebnis ist eine ".exe"-Datei (=execute), die direkt (also ohne zusätzliches Programm) auf Betriebssystemebene ausgeführt werden kann.

  • Zu Javascript
  • Damit ein Javascriptprogramm im Browser gestartet werden kann, muss es in eine HTML-Datei eingebunden sein. Javacript gehört jedoch nicht selbst zu HTML, sondern dient als Hilfsmittel und Ergänzung zu HTML. Eine der häufigsten Anwendungen besteht in der Bearbeitung bzw. Überprüfung von Formulareingaben (z.B. Online-Bestellungen, Abfragen bei Suchmaschinen oder anderen Datenbanken) bevor diese an den Server weitergeleitet werden.
    JavaScript wurde zu diesem Zweck 1995 von Netscape eingeführt und sollte auch nicht mit dem viel mächtigeren Java, das wesentlich mehr leisten kann, verwechselt werden. Allerdings sind viele Befehle gleich oder sehr ähnlich aufgebaut.
    JavaScripts werden auf dem eigenen Rechner im Browser ausgeführt. Die gängigen Browser (insbesondere Netscape und Internet-Explorer) sind so eingerichtet, dass sie die Scripts zur Laufzeit interpretieren können. Diese Fähigkeit des Browsers lässt sich - aus Sicherheitsgründen - auch abschalten. Andere Scriptsprachen wie z.B. PHP oder CGI laufen auf dem Server und können dementsprechend nicht vom Benutzer manipuliert werden, weshalb sie häufig bevorzugt werden.
    Für das Schreiben von Javascript-Programmen benötigt man lediglich einen einfachen Texteditor wie Notepad, EditPad-Lite oder Html-Edit. Sehr Aufschlussreiches zu Javascript findet man bei Selfhtml .

  • Entwicklungsumgebung
  • Als Entwicklungswerkzeug empfehle ich den HTML-Editor Phase5 (v5.5): Download-Seite (www.qhaut.de) Klicke unten auf "Download Now"!
    Normalerweise benötigt man für ein Projekt mehrere Sitzungen. Es ist sinnvoll, wenn man lernt, ein Projekt gleich am Anfang sinnvoll anzulegen. Unter dem Menüpunkt "Projekt -> Neues Projekt" wählen wir eine passendere Bezeichnung an Stelle von Neues Projekt1. Die Optionen können so bleiben. Bei den Verzeichnissen wählen wir - nachdem wir zuvor einen geeignet benannten Ordner z.B. "javascript" (in der Schule natürlich auf dem Laufwerk Z im Ordner "winhome") eingerichtet haben, diesen Ordner als Stammordner. Unter Neue Dokumente kann man z.B. unter Autor noch seinen Namen eintragen. Dann auf übernehmen klicken.

  • HTML-Rahmen erstellen
  • Wenn im HTML-Editor links oben das richtige Projekt eingestellt ist, gehen wir auf Datei -> Neues Dokument
    Nun klicken wir ohne weitere Eintragungen auf Übernehmen. Wir markieren dann den gesamten Text und löschen ihn.
    Jetzt markieren wir den untenstehenden Quelltext (im Textfeld) um ihn zu "Kopieren" und um ihn danach in HTML-Edit mit  "Einfügen" zu übertragen.

    Im Bereich der Leerzeile  05 zwischen  04  <script ...>  und  06 </script>  wird nun das eigentliche Javascript-Programm eingetragen.

    04 <script type="text/javascript">
    leitet in HTML den Javascript-Bereich ein. Dieser Bereich wird mit   06 </script> abgeschlossen.
    Bemerkung:  In Zeile 04 darf man auch schreiben <script language="Javascript">

  • Programmstruktur EVA
  • EVA = Eingabe - Verarbeitung - Ausgabe ist eine besonders einfache Programmstruktur.

    Beispiel EVA: Eingabe einer Zahl, Verarbeitung = Quadrieren der Zahl und schließlich Ausgabe der Quadratzahl.


       Eingabe mit  prompt()    -    Ausgabe mit  alert()

       Jede Anweisung wird mit einem  Semikolon  abgeschlossen.

       Die Variable (Speicher) links von dem Gleichheitszeichen wird
       mit dem Inhalt / Ergebnis der rechten Seite gefüllt.

       Die Seiten dürfen nicht vertauscht werden.



    Quadrieren einer Zahl


    TESTEN   Nach oben

    Bemerkungen zu
    prompt: Zwischen den runden Klammern stehen zwei durch ein Komma getrennte Texte (in Anführungszeichen). Der zweite Text ist in der Regel leer.
    alert: Zwischen den runden Klammern steht ein Text, der oft durch + aus mehreren Teiltexten zusammengesetzt ist. Der Inhalt der Variablen y wird automatisch in einen Text umgewandelt. Würde man hier "y" verwenden, so würde nur der Name der Variablen "y" ausgegeben.

    Das eigentliche Programm besteht nur aus den drei Zeilen
    05 (Eingabe) 06 (Verarbeitung) und (Ausgabe). x und y sind selbstgewählte Bezeichnungen für Variablen. Dagegen sind prompt und alert feste Ein- bzw. Ausgabefunktionen in Javascript.


    ANMERKUNG    zur Ablaufsteuerung
    Man kann an dem obigen Beispiel gut erkennen, dass hier keine Ereignissteuerung vorliegt (sobald das Programm abläuft): Die Maus wird hier überhaupt nicht benötigt.


    Beispiel EVA (2): Eingabe zweier Zahlen, Verarbeitung = Addieren der beiden Zahlen, Ausgabe der Summe.


       Umwandlung von Text in eine Zahl mit  parseFloat()
       Typische Fehlermeldung:  NaN = not a number.



    Addieren zweier Zahlen


    TESTEN   Nach oben

    Bemerkungen zum entscheidenden Unterschied der obigen Beispiele:
    In beiden Beispielen wird mit prompt zunächst die eingegebene Zahl als Text an die jeweilige Variable übergeben. In Zeile  07  wird dementsprechend das + im Sinne des Aneinanderfügens zweier Texte interpretiert. Nach Umwandlung der Texte x1, y1 in Zahlen x2, y2 mit parseFloat findet in Zeile  11  nun eine mathematische Addition statt.

    Im vorausgegangenen Beispiel hat der Browser in Zeile  06  automatisch eine Umwandlung in Zahlen vorgenommen, da die Multiplikation von Texten keinen Sinn macht. Sicherheitshalber hätte man auch hier eine Umwandlung mit parseFloat durchführen können, da möglicherweise nicht alle Browser die automatische Umwandlung vornehmen.


  • pq-Formel (1) - ein aus der Mathematik bekanntes Lösungsverfahren (Algorithmus)
  • Beispiel PQ1: pq-Formel zur Lösung von quadratischen Gleichungen der Form x2+p*x+q = 0




    pq-Formel  (1) ohne Abfangen von Fehlern


    TESTEN   Nach oben
    Diese erste Lösung ist nur eine Vorstufe zu der folgenden Lösung.
    In Zeile 09 wird mit der Alertbox der Lösungstext ausgegeben. Dieser setzt sich aus 4 Einzeltexten zusammen, die durch  + aneinandergefügt werden.  "x1=". Die Zeichen zwischen den Anführungszeichen werden direkt als Text ausgegeben. Direkt danach kommt  x1 ohne Anführungszeichen. Nun wird der Inhalt der Variablen x1 ausgegeben, der, auch wenn dies eine Zahl ist, automatisch in einen Text verwandelt und auch so behandelt wird.
  • pq-Formel (2) - mit bedingter Anweisung
  •    Bedingte Anweisung:    if (Bedingung)   {Anweisung};

       mit Alternative:    if (Bedingung)   {Anweisung}   else   {Alternativanweisung};

       else = sonst

       Standardfunktion  Math.sqrt()    = squareroot = Quadratwurzel

       Mehrere Anweisungen werden durch geschweifte Klammern { und } in einem
       Anweisungsblock (Verbundanweisung) zusammengefasst.





    pq-Formel  (2) mit Abfangen von Fehlern


    TESTEN   Nach oben
    Dies ist die eigentliche Lösung. Sie ist durch Abänderung / Verfeinerung aus der vorherigen Groblösung entstanden. Solche Verbesserungen kommen beim Programmieren häufig vor.



    Tipp zu nützlichen Übungen: Man kann in Phase5 (HTML-Edit) unter Datei "Neues HTML-Dokument" und dann "Leeres Dokument erstellen" auswählen *). zunächst den Quelltext des zugehörigen Beispiels hinüberkopieren und entsprechend abändern. Hat es mit den Änderungen geklappt, sollte man sich unbedingt testen, ob man den ganzen Quelltext auch ohne vorherige Kopie in eine leere HTML-Datei eintragen kann.
    *)Natürlich kann man auch einen einfachen Text-Editor wie "Notepad" verwenden. Die Datei muss hinterher die Endigung ".htm" oder ".html" bekommen.

    Für die Wahl von Bezeichnungen gelten einfache Regeln: Das erste Zeichen muss ein Buchstabe sein, danach sind auch Ziffern erlaubt und es dürfen außer dem _ (Unterstrich) keine Sonderzeichen (z.B. auch nicht ä,ö,ü,ß) und keine Leerzeichen darin vorkommen. Groß- und Kleinschreibung werden unterschieden! Bei den Bezeichnungen muss man außerdem beachten, dass sie nicht zu den Javascript-Befehlswörtern gehören.



    Alle Vergleichsoperatoren
    = =  gleich "=" !=  ungleich "≠"
    <  kleiner <=  kleiner oder gleich "≤"
    > größer >=  größer oder gleich "≤"

    Mehrere Anweisungen können durch geschweifte Klammern { } zu einem Anweisungsblock verbunden werden. Dies wird in diesem Beispiel in Verbindung mit der "If-Anweisung" genutzt. Mit Hilfe der "If-Anweisung" bzw. "If-else-Anweisung" kann der Ablauf eines Programms (in Abhängigkeit von Zwischenergebnissen) gesteuert (kontrolliert) werden. Solche "Kontrollstrukturen" sind Bestandteil aller Programmiersprachen.

    if( BEDINGUNG )   { ANWEISUNG1; ANWEISUNG2; ... ; letzte ANWEISUNG }; 
    Folge-ANWEISUNG ;


    Trifft die Bedingung nicht zu, werden alle Anweisungen in den geschweiften Klammern übersprungen und das Programm wird sofort mit der Folge-ANWEISUNG fortgesetzt.

    Die if-Anweisung kann auch wie folgt fortgesetzt werden:

    if( BEDINGUNG )   { ANWEISUNG1; ANWEISUNG2; ... ; letzte ANWEISUNG ;}
    else
    {
    alternative ANWEISUNG1; alternative ANWEISUNG2; ... ; letzte alternative ANWEISUNG;}
    Folge-ANWEISUNG;


    Trifft die Bedingung nicht zu, werden nun alle Anweisungen in den geschweiften Klammern nach dem else ausgeführt und das Programm wird anschließend mit der Folge-ANWEISUNG fortgesetzt.



  • Summe der Zahlen von 1 bis n
  •    FOR-Schleife   (auch Zählschleife)

       for   ( Startwert  der Zählvariablen ;   Bedingung  für Zählvariable ;   Veränderung der Zählvariablen )
          {  zu wiederholende  Anweisungen  };





    Summe der Zahlen von 1 bis n    (1+2+3+...+n)


    TESTEN   Nach oben
    In Zeile  06  muss die Variable summe den Wert 0 bekommen, weil sie sonst in Zeile  08  auf der rechten Seite beim ersten Durchlauf (für i=1) noch ohne definierten Inhalt wäre. In  07  ist i die Zählvariable (kann aber auch anders heißen z.B. zaehler). Die Schleife wird solange ausgeführt wie die Bedingung i<=n erfüllt ist. Die Veränderung der Schleifenvariablen i=i+1 erfolgt jeweils erst am Ende eines Durchlaufs.



       WHILE-Schleife   (while = solange)

       while   ( Bedingung )
          {  zu wiederholende  Anweisungen  };


    Maximale Anzahl nmax der Summanden bis maxsumme. Maxsumme soll dabei nicht überschritten werden:
    1 +2 +3 +...+nmax  ≤  maxsumme





    TESTEN   Nach oben
    Wenn die Anzahl der Wiederholungen nicht bekannt ist, kann man die Zählschleife (FOR-Schleife) natürlich nicht verwenden. Da hier die Anzahl nmax der Summanden bestimmt werden soll, wird in diesem Fall ausnahmsweise auch gezählt. Dies muss aber mit Zeile  06  und Zeile  09  selbst organisiert werden. Der Schritt zurück in den Zeilen  11  und  12  ist notwendig, weil beim letzten Durchlauf maxsumme gerade überschritten wurde, woraufhin die Bedingung in Zeile  08  noch weitere Schleifendurchläufe verhindert.