Kurs: Programmieren in JavaScript


Inhaltsverzeichnis:


Alle Dateien als Zip-Datei (entpacken mit WinZip o . ä.)

  1. Vorbemerkungen
    1. Was ist überhaupt ein Programm?
    2. Warum programmieren?
  2. Grundlegende Sprachelemente
    1. Was bedeutet Syntax?
    2. Kontrollstrukturen
      1. Anweisung
      2. Folge
      3. Bedingung
      4. Auswahl
      5. Wiederholung
    3. Literale
    4. Variablen

  3. Weitere Sprachelemente
    1. Prozeduren
    2. Funktionen
    3. Objekte
    4. Algorithmen

  4. Beispiel-Programme

  5. Literatur

  1. Vorbemerkungen

    1. Was ist überhaupt ein Programm?

      im Lexikon:

      1. Plan, Ziel, Darlegung von Grundsätzen
      2. festgelegte Folge, vorgesehener Ablauf, z. B. bei einer Fernsehsendung oder Aufführung, Tagesordnung
      3. bei elektronischen Datenverarbeitungsanlagen: durch Zeichen dargestellte Folge von Anweisungen zur Lösung einer bestimmten Aufgabe
      Um Probleme der realen Welt zu lösen, kann ein Computer genutzt werden. Der Computer kann aber kein (z. B. Rechen-) Problem allein lösen, sondern ihm muß ein Lösungsweg vorgegeben werden. Damit der Computer "versteht" was er zu tun hat, wird der Lösungsweg in einer besonderen Sprache formuliert, der sog. Programmiersprache. Dabei handelt es sich um besondere Formulierungen, die der Computer versteht bzw. die in eine für ihn verständliche Sprache übersetzt werden. Die Programmiersprache beschreibt also die notwendigen Arbeitsschritte, die ausführt werden sollen.

      zum Inhaltsverzeichnis

    2. Warum programmieren?

      Obwohl es heute eine unüberschaubare Zahl von kommerziellen und auch kostenlosen Programmen gibt, decken diese nur eine bestimmte Anzahl von Einsatzgebieten ab. Will man die Einsatzgebiete erweitern oder existieren spezielle Anforderungen, muß programmiert werden.
      1. Automatisierung: eine bestimmte Handlung muß in einer genau festgelegten Reihenfolge wiederholt werden
      2. Beispiel: zur Sicherung der Qualität eines Produktes muß es im Herstellungsprozeß durchgemessen werden: dazu müssten für jedes Produkt Meßwerte abgelesen, in eine Tabelle eingetragen und auf Einhaltung der Vorgaben überprüft werden. Schneller ginge es, wenn ein Programm geschrieben würde, daß die Meßwerte automatisch erfasst und auswertet.

      3. Standard-Software anpassen: Standard-Software existiert für viele Aufgaben (z. Textverarbeitung, Tabellenkalkulation u. s. w.). Die Grenzen werden aber schnell erreicht, wenn spezielle Anforderungen gestellt werden.
      4. Beispiel: Sie haben eine Datenbank mit Kundendaten aufgebaut. Jetzt wollen sie auf diese Daten von einem anderen Programm zugreifen, das dieses Format nicht unterstützt (d. h. nicht lesen kann). Dann müssten Sie alle Daten erneut eingeben - oder ein Programm zum Konvertieren der Daten schreiben...

      5. Individual-Software: Software für eine ganz speziellen Anwendungsfall
      6. Erklärung: für verschieden Einsatzgebiete und Branchen gibt es so spezielle Anforderungen, dass die Software individuell erstellt werden muss.

      zum Inhaltsverzeichnis

  2. Grundlegende Sprachelemente

    1. Was bedeuten Syntax und Semantik?

      In jeder Programmiersprache gibt es Syntax und Semantik.
      Die Syntax beschäftigt sich mit der sprachlichen Form der Programme. Sie legt fest, welche Ausdrücke, Befehle, Vereinbarungen die Programmiersprache bilden, d. h. die sprachlichen Regeln.
      Die Semantik beschäftigt sich mit der Bedeutung des Programmcode (d. h. was er bewirkt) und mit den zulässigen Kombinationen von Sprachelementen.

      Syntaktische Elemente:
      Jedes Programmiersprache kann als eine Anzahl von möglichen Operationen betrachtet werden, die auf bestimmte Daten in einer bestimmten Abfolge angewandt werden. Unterschiede gibt es natürlich in den zulässigen Daten, den verfügbaren Operationen und den verfügbaren Mechanismen und Vorschriften zu Ablauf und Strukturierung.

      Bezeichner:
      Bezeichner werden genutzt, um Variablen, Prozeduren und Funktionen einen Namen zu geben. Je nach Sprache gibt es für Bezeichner genaue Vorschriften.

      JavaScript: Bezeichner dürfen nur mit einem Buchstaben (A..Z und a..z) beginnen. Folgen dürfen dann weitere Buchstaben, der Unterstrich (_) und Ziffern. Groß- und Kleinschreibung wird unterschieden (X ist nicht gleich x) !!!

      Regeln und Konventionen für Bezeichner:

      Der Bezeichner sollte den Verwendungszweck widerspiegeln. Beispiel: primzahl und nicht p

      Bei Bezeichnern, die aus mehreren Wörtern bestehen, gibt es zwei verschiedene Konventionen:

      1. Unterstrich zwischen den Wörtern, Beispiel: Primzahl_berechnen
      2. ersten Buchstaben des folgenden Wortes groß schreiben, Beispiel: PrimzahlBerechnen oder berechnenPrimzahl oder primzahlBerechnen
      Reservierte Wörter:
      Eine Reihe von Wörtern sind in JavaScript als sog. Schlüsselwörter festgelegt. Sie dürfen daher nicht als Bezeichner verwendet werden, da sie schon eine Bedeutung innerhalb der Programmiersprache haben. Liste aller reservierten Wörter

      Kommentare:
      In fast jeder Programmiersprache gibt es die Möglichkeit von Kommentaren: Texte, die zwar keine Auswirkungen auf den Computer haben, einem Leser des Programm-Codes aber Erklärungen geben. Dieses ist nicht nur "Fremde" wichtig - auch selber helfen einem Kommentare, die eigenen Gedanken später wieder zu verstehen....

      In JavaScript gibt es zwei Kommentar-Arten:

      1. Kommentare innerhalb einer Zeile:

      2. // Dieses ist ein Kommentar - der gesamte Text nach dem // wird von JavaScript ignoriert.
      3. Kommentare über mehrere Zeilen:

      4. /* längerer Kommentar */
        alle Zeilen, die innerhalb der /* - Klammer stehen, sind Kommentar.

        Beispiel:
        /* Diese JavaScript-Funktion berechnet
           einen Mittelwert aus den vorge-
           geben Werten.
           erstellt am 12.11.99 Autor H.K.  */

      Kommentare gibt es auch in HTML:
      <!-- Dieses ist ein HTML-Kommentar, der über mehrere Zeilen gehen kann. -->

      Kommentare werden neben ihrer eigentlichen Ausgabe auch benutzt, um den Quelltext der JavaScript-Programme zu "verbergen". Dieses ist notwendig, falls der Browser z. B. kein JavaScript versteht und dann den (für den Betrachter der Seite völlig unverständlichen) JavaScript-Code auf der Seite anzeigen würde.

      Beispiel für das "Verbergen" von JavaScript:

      <HTML><HEAD><TITLE>Korrektes JavaScript mit Kommentierung</TITLE>
      </HEAD>
      <BODY>
      <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
      <!--        // Anfang eines HTML-Kommentars - der nachfolgende JavaScript-
                  // Code wird von HTML ignoriert.

      // hier stehen normalerweise die JavaScript-Anweisungen

      // -->      // Ende des HTML-Kommentars als Javascript-Kommentar
                  // Dieses ist notwendig, da der HTML-Kommentar -->
                  // sonst als fehlerhaftes JavaScript interpretiert würde.

      </SCRIPT>
      </BODY>
      </HTML>

      zum Inhaltsverzeichnis


    2. Kontrollstrukturen

      1. Anweisung

      2. Eine Anweisung ist ein einzelner Befehl in der Programmiersprache. Beispiele:
        1. ;

        2. In JavaScript gibt es z. B. die leere Anweisung, die nur aus einem ; besteht. Man benutzt sie an Stellen, bei denen von der Sprachstruktur eine Anweisung erwartet wird, aber kein Befehl d. h. "Nichts" ausgeführt werden soll.
        3. Zuweisung

        4. einer Variablen wird ein Wert zugewiesen: n = n + 1;
        5. Anweisungsblock

        6. an manchen Stellen wird von der Sprachstruktur nur eine Anweisung erwartet. Ein Anweisungsblock fasst mehrere Befehle zusammen:
          {
          Anweisung1;
          Anweisung2;
          Anweisung3;
          }
        Berechnungsoperatoren:
        Syntax Operation
        A + B Addition
        A - B Subtraktion
        A * B Multiplikation
        A / B Division
        A % B Modulo (Rest der Division)

        Beispiel:
        16 / 5 ergibt als Ergebnis 3.2
        16 % 5 ergibt als Ergebnis 1

        zum Inhaltsverzeichnis

      3. Folge (Sequenz)

        Eine Reihe von Anweisungen, die nacheinander bearbeitet werden:
        Anweisung1;
        Anweisung2;
        Anweisung3;
        Anweisung4;
        ...

        zum Inhaltsverzeichnis

      4. Bedingung

        Vergleichs-Operatoren:
        Syntax Logische Operation Beispiel
        A == B A gleich B n == 0
        A != B A ungleich B n != 0
        A > B A größer B n > 10
        A >= B A größer oder gleich B n >= 3.5
        A < B A kleiner B k < -5
        A <= B A kleiner oder gleich B n<= 100

        Logische Verknüpfungen:
        Syntax Verknüpfung Beispiel
        ! NICHT !(a == 0)
        && UND (a == 0) && (b == 0)
        || ODER (a > 10) || (b < 50)

        zum Inhaltsverzeichnis

      5. Auswahl (Alternative)

        Manchmal kann ein Programm nicht einfach nacheinander ablaufen, sondern es ist abhängig von einer Bedingung ein anderer Ablauf erforderlich. Das Programm wird z. B. in zwei "Zweige" aufgeteilt. Beispiel: Sie geben Namen in eine Adressverwaltung ein. Das Programm prüft, ob der Name, den Sie eingegeben haben, bereits vorhanden ist oder nicht. Es gibt hier zwei Möglichkeiten als Ergebnis der Abfrage "Name vorhanden?": "true" = "JA" oder "false" = "NEIN"

        Auswahl (gif)

        zum Inhaltsverzeichnis

        • einseitige Auswahl

          Eine einseitige Auswahl ist dadurch gekennzeichnet, dass nur ein Zweig (für den Fall "true") existiert. Falls die Bedingung "true" ergibt, werden die nachfolgenden Befehle ausgeführt, bei "false" werden sie nicht ausgeführt.

          Einseitige Auswahl (gif)

          Beispiel in Javascript:
          if (n == 0)
             alert ("n ist gleich Null: Division unmöglich!");
          // nachfolgende Befehle

          zum Inhaltsverzeichnis

        • zweiseitige Auswahl

          Beschreibung: s. Auswahl
          Zweiseitige Auswahl (gif)

          Beispiel in Javascript:
          if (n >0)
             confirm ("Alles in Ordnung.");
          else
             alert ("Problem: n kleiner oder gleich Null");
          // nachfolgende Befehle

          zum Inhaltsverzeichnis

        • mehrseitige Auswahl

          Die mehrseitige Auswahl entspricht im Prinzip der zweiseitigen Auswahl, aber es existieren mehr als zwei Alternativen...
          Beispiel bei einer Rabattstaffel:
          Ein Händler gibt 5% Rabatt, wenn Sie mindestens für 750 DM einkaufen und 8% bei einem Einkaufswert von mehr als 2000 DM.

          WENN Gesamtpreis >=2000 DANN 8% Rabatt abziehen SONST WENN Gesamtpreis >=750 DANN 5% Rabatt abziehen SONST kein Rabatt

          Mehrseitige Auswahl (gif)

          in JavaScript:
          if (Gesamtpreis >= 2000)
             Gesamtpreis = Gesamtpreis*0.92     // 1. Alternative: 8 % Rabatt
          else
             if (Gesamtpreis >= 750)
                Gesamtpreis = Gesamtpreis*0.95  // 2. Alternative: 5 % Rabatt
             else
                ;           // 3. Alternative: kein Rabatt
          // nachfolgende Befehle

          zum Inhaltsverzeichnis

      6. Wiederholung

        zum Inhaltsverzeichnis
        • Zählergesteuerte Wiederholung

          Damit wird eine Zählschleife erstellt. Sie kann verwendet werden, um eine Zahlenfolge (z. B. 1,3,5,7,9,... 49) zu erhalten. Sie hat immer einen Startwert und eine Endbedingung:
          Beispiel in Javascript:
          for (n=1;n<50;n=n+2)
          {
          Befehl(e)
          }

          Die Zählschleife wird durch for eingeleitet. In der Klammer stehen die näheren Angaben. n = 1 weißt der Variablen n den Wert 1 zu. Danach wird durch n < 50 festgelegt, bis wohin gerechnet werden soll (in diesem Beispiel solange wie n kleiner 50 ist). Am Ende steht die Anweisung für die Zahlenfolge ( n = n + 2), d.h. es soll jeweils der vorherige Wert der Variablen n plus 2 gerechnet werden).
          Nachgestellt stehen in der geschweiften Klammer Befehl(e), die wiederholt werden sollen.

        • Bedingte Wiederholung (Schleife)

          Hier handelt es sich um Befehle, die mehrfach wiederholt werden sollen. Irgendwann muß aber in der Regel die Wiederholung beendet werden, da sonst der Rechner nichts anderes mehr tun kann. Eine erneute Wiederholung wird davon abhängig gemacht, ob eine bestimmte Bedingung erfüllt ist:

          zum Inhaltsverzeichnis

          • mit Eingangsbedingung (prechecked loop)

            Hier wird die Wiederholungs-Bedingung geprüft, bevor überhaupt ein Befehl ausgeführt wird. Es kann also sein, dass die Befehle innerhalb der Schleife gar nicht ausgeführt werden!
            Beschreibung auf Deutsch:
            während diese "Bedingung" erfüllt ist, wiederhole die folgenden Befehle: {Befehl(e)}

            in JavaScript:
            while (Bedingung)
            {
            // Befehl(e)
            }
            zum Inhaltsverzeichnis

          • mit Ausgangsbedingung (postchecked loop)

            Hier wird die Wiederholungs-Bedingung erst geprüft, nachdem die Befehl(e) innerhalb der Schleife ausgeführt worden sind. Die Befehle innerhalb der Schleife werden also mindestens einmal ausgeführt!
            Beschreibung auf Deutsch:
            wiederhole die folgenden Befehle: {Befehle} solange diese "Bedingung" erfüllt ist.

            in JavaScript:
            do
            {
            // Befehl(e)
            }
            while (Bedingung)

            Beispiel:
            i = 10;
            do
            {
            i = i-1;
            }
            while ( i > 2);

        zum Inhaltsverzeichnis

    3. Literale

      Literale sind feste "Werte" innerhalb einer Sprache. Zum Beispiel gibt es in Javascript String- (=Zeichenketten-) Literale. Sie sind durch einfach oder durch doppelte Anführungszeichen festgelegt.
      "Dieses ist ein String-Literal"
      'Dieses ist ebenfalls ein String-Literal'

      Weitere Literale wären z. B. 125 oder 1.23456.

      Unterschied zu den Variablen ist also, das sich der Wert eines Literals nicht ändern kann.
      zum Inhaltsverzeichnis <

    4. Variablen

      Wie in der Mathematik gibt es auch in Computersprachen den Begriff Variable. Hiermit ist dann ein Speicherelement für einen Wert gemeint, das über seinen "Namen" (=Bezeichner) angesprochen werden kann. (Für die Namensgebung gelten die oben besprochenen Regeln für Bezeichner.) Einer Variablen muß dann innerhalb des Programms ein Wert zugewiesen werden. In JavaScript ist diese Variable dann sofort "vorhanden" und könnte weiter genutzt werden. (In anderen Programmiersprachen ist das teilweise etwas aufwändiger...)
      Beispiel:
      i = 5;
      laenge = 2.5;
      a3BV = "aa33BB";


      Der besseren Übersicht sollten aber bei erstmaliger Benutzung die Variablen durch das reservierte Wort var kenntlich gemacht werden (s. u.). Dazu muß auch nicht sofort ein Wert zugewiesen werden. Also besser
      Beispiel:
      var i, j;
      var laenge = 2.5;
      var a3BV = "aa33BB";


      Wichtiger Hinweis:
      Variablen haben unterschiedliche Datentypen, z. B. Ganzzahl, Fließkommazahl oder String.
      So hat z. B. die obige Variable i den Datentyp Ganzzahl,laenge den Datentyp Fließkommazahl und a3BV den Datentyp String (Zeichenkette).
      Bei der Benutzung von Datentypen ist JavaScript nicht ganz so penibel wie andere Programmiersprachen. Teilweise sind Operationen trotzdem nur mit einem bestimmten Datentyp möglich. Zur Umwandlung der Typen sind daher einige Funktionen vordefiniert:

      Name Parametertyp Ergebnistyp Beispiel Beschreibung
      parseInt() Zeichenkette Ganzzahl parseInt( prompt("Startwert",10) ) Wandelt eine übergebene Zeichenkette in eine Ganzzahl um
      Gibt NaN (Not a Number) zurück, wenn die Zeichenkette fehlerhaft ist.
      parseFloat() Zeichenkette Fließkommazahl parseFloat(prompt("Startwert",10.5) Wandelt eine übergebene Zeichenkette in eine Fließkommazahl um (Dezimalzeichen ist der Punkt)
      Gibt NaN (Not a Number) zurück, wenn die Zeichenkette fehlerhaft ist.
      Number() Objekt Zahl var d = new Date ("March 15, 1998 08:27:00");
      document.write( Number(d) )
      Wandelt eine Objekt in eine Zahl um.
      Gibt NaN (Not a Number) zurück, wenn die Umwandlung nicht möglich ist.
      String() Objekt Zeichenkette var d = new Date ();
      document.write( String(d) );
      Wandelt eine Objekt in eine Zeichenkette um.
      eval() Zeichenkette Zahl eval(this.form.Eingabe.value) Berechnet den Werte der übergebenen Zeichenkette (z. B. wie hier aus einem Eingabefeld, z. B. "3+5*7.2")
      isNaN() Wert Boolean isNaN(this.form.Eingabe.value) Ermittelt, ob ein zu übergebender Wert eine ungültige Zahl ist (NaN = Not a Number).
      Gibt true zurück, wenn der Wert keine Zahl ist, und false, wenn es eine Zahl ist

      Ausprobieren

      Gültigkeitsbereich von Variablen (global/lokal)

      Normalerweise sind Variablen in JavaScript sofort verfügbar, nachdem Sie zum ersten mal benutzt worden sind. Sie gelten dann überall im kompletten nachfolgenden Programm. Man nennt sie globale Variablen.

      Grafik

      Die Variable Chef gilt also auch in den Funktionen Montageabteilung und Serviceabteilung (grüner Bereich). Dieses Verfahren hat aber einen entscheidenden Nachteil: Verändert eine Funktion eine der globalen Variablen (s. Grafik), ist diese Variable auch für alle folgenden Funktionen verändert. Dieses kann zu sehr merkwürdigen Fehlern führen (Seiteneffekt - ein Effekt, den man meist gar nicht wollte und der auch schwer zu finden ist...).
      Besser und übersichtlicher ist die Verwendung von lokalen Variablen. Sie werden durch das Schlüsselwort var erzeugt und gelten nur in dem erzeugenden Programmteil. Sie können sogar den gleichen Namen wie globale Variablen tragen, ohne sich gegenseitig zu stören!

      Grafik

      So werden Seiteneffekte sicher vermieden.

      zum Inhaltsverzeichnis


  3. Weitere Sprachelemente

    1. Prozeduren

      Eine Prozedur ist eine Zusammenfassung von mehreren Befehlen unter einem Namen. Dieses hat mehrere Vorteile:
      • Eine Prozedur kann an mehreren Stellen im gleichen Programm aufgerufen werden. Man spart dadurch manchmal eine Menge Schreibarbeit.
      • Eine Prozedur kann im Programm mit unterschiedlichen Argumenten aufgerufen werden.
      • Eine Prozedur kann in einem anderen Programm wiederverwendet werden. Man spart dadurch manchmal eine Menge Zeit.
      • Der Name kann die Programmierung mit einer sinnvollen Bezeichnung verdeutlichen.
      zum Inhaltsverzeichnis
    2. Funktionen

      Funktionen haben große Ähnlichkeit mit Prozeduren. Unterschied ist in der Regel, daß Funktionen einen Ergebnis- oder Rückgabewert erzeugen, der direkt weiterverarbeitet werden kann.

      In Javascript gibt es aber nur den Begriff function. Damit werden sowohl Prozeduren als auch Funktionen definiert.
      (Um einen Rückgabewert festzulegen, wird innerhalb einer function zusätzlich der Bezeichner return benutzt. (s. u.) )

      Syntax für Funktionen:
      function Bezeichner (Argument1, Argument2, ...)
      {
      Anweisung(en)
      }

      Die Anzahl der Argumente ist beliebig und darf auch 0 sein, d. h. kein Argument. Trotzdem muß in JavaScript aber immer die Klammer geschrieben werden.

      Beispiel für eine "Prozedur"
      function SchreibeBrutto (Netto, Prozentsatz)
      {
      Wert = Netto * ( 1 + ( Prozentsatz / 100 ) );
      document.write(Wert);
      }

      Diese Prozedur hat 2 Argumente und schreibt das Ergebnis in das HTML-Dokument. Das geschieht aber nur, wenn die Funktion "aufgerufen" wird. Der obige Quelltext dient zunächst nur dazu, die Funktion zu deklarieren (sprich: erklären), d. h. dem Computer mitzuteilen, was er tun muß, falls die Funktion aufgerufen wird. Der Computer wird also nur etwas "schlauer" - er tut aber noch nichts! Das geschieht erst später. Dazu wird die Funktion im weiteren Programm aufgerufen, z. B. durch:

      SchreibeBrutto(150,10)

      Jetzt erst wird der Computer die Prozedur tatsächlich abarbeiten: den Wert 165 berechnen und in das Dokument schreiben.

      Beispiel für eine "Funktion"
      function Brutto (Netto, Prozentsatz)
      {
      Wert = Netto * ( 1 + ( Prozentsatz / 100 ) );
      return Wert;
      }

      Diese "Funktion" arbeitet ähnlich wie die "Prozedur" SchreibeBrutto. Unterschied ist nur der veränderte Aufruf. Diese Funktion erzeugt einen Rückgabewert und man kann sie daher an Stelle einer Variable benutzen:

      Netto = Brutto(150,10);
      oder auch
      document.write( Brutto(150,10) );

      Mit so einer "Funktion" kann man also wie mit anderen Variablen rechnen... zum Inhaltsverzeichnis


    3. Objekte

      Ähnlich wie Funktionen eine Reihe von Befehlen unter einem Namen zusammenfassen, ist ein Objekt eine Zusammenfassung von Eigenschaften (=Variablen) und Methoden (=Funktionen). Einige Standardobjekte sind in JavaScript bereits vordefiniert. Man kann aber auch eigene Objekte erzeugen.
      Beispiel

  4. Beispiel-Programme

  5. Literatur

    Einige "Literaturempfehlungen":

Autor: Hubert Köppelmann

Stand: 07.07.2003