Die Skriptsprache JavaScript: Lernziele in dieser Veranstaltung

Die Skriptsprache JavaScript:
Lernziele in dieser Veranstaltung
    Überblick über Funktionsweise und
     Anwendung von JavaScript
    Programmieren kleiner Beispiele
    Verstehen von JavaScript-Code
            Oft verwendet man Skripte wieder oder kopiert
             Code aus anderen HTML-Seiten (soweit das
             erlaubt ist)

12.06.2020                     Prof. Dr. K. Mehner-Heindl    74

Stärken und Schwächen von HTML
    Reines HTML beschreibt Struktur von Dokumenten
      Webseiten sind zum Betrachten gedacht
      Benutzerinteraktion ist auf Navigieren begrenzt
      Webseiten (ohne JavaScript etc.) ändern Inhalte nicht

      Seiten können auf Server dynamisch erzeugt

    Ausnahmen
      Formulare (Eingeben, Löschen, Absenden)
      Animierte Bilddateien, Multimedia-Plugins, Java-
        Applets
    In reinem HTML kann nicht auf Benutzereingaben
     reagieren (z.B. Überprüfung einer Eingabe)
    In Ergänzung wird eine Programmiersprache gebraucht

12.06.2020                 Prof. Dr. K. Mehner-Heindl      75

Antwort auf Schwächen: JavaScript

    Programmiersprache JavaScript
            Variablen, Funktionen, …
            Anweisungen, Funktionsaufrufe,
            Verarbeitung von Eingaben, Erzeugen von Ausgaben
            (Namens-)Ähnlichkeit zur Programmiersprache Java, aber
             einfacher
            Viele Browser-Varianten und Versionen
    Eng mit HTML verknüpft
            Zugriff auf Elemente der Webseite und auf Browser
            JavaScript-Programme in HTML-Dateien integriert
    JavaScript wird vom Browser ausgeführt
            JavaScript wird nicht in anderen Code übersetzt
            Daher wird es Skriptsprache genannt

12.06.2020                        Prof. Dr. K. Mehner-Heindl          76

Was passiert beim Aufruf einer
Webseite, die JavaScript enthält?
    HTML wird zum Client übertragen.
            Falls vorhanden wird JavaScript mit übertragen
    Browser stellt HTML dar.
            Browser führt zusätzlich JavaScript aus
            Browser wird auf Client-Computer ausgeführt
    JavaScript kann dabei nur auf den Client
     zugreifen, nicht auf den Webserver.
            Aus Sicherheitsgründen darf JavaScript aber
             auch nicht auf alles auf dem Client zugreifen!

12.06.2020                     Prof. Dr. K. Mehner-Heindl     77

Anwendungen von JavaScript
    Interaktiv Bilder anzeigen z.B. Bilderbuch/Fotoalbum
            Alle Bilder werden vorab mit der Webseite geladen und in
             derselben Webseite ausgetauscht
    Berechnungen basierend auf Benutzereingaben
            Beispiel Taschenrechner, Währungsrechner
    Analysen von Benutzereingaben
            Überprüfung von Formulareingaben
    Dynamisches Erzeugen und Ändern einer HTML-
     Seite
            Beispiel dynamische Grafiken auf Schaltflächen

    …Berechnungen und Änderungen, die ohne
     Kommunikation mit Server möglich sind
12.06.2020                        Prof. Dr. K. Mehner-Heindl            78

Einbettung von JavaScript in HTML5

    JavaScript steht innerhalb eines speziellen
     Tags
            
             …
             
    JavaScript verwenden in Attributen von
     HTML-Tags
            
12.06.2020                Prof. Dr. K. Mehner-Heindl   79

Aufgaben und Bestandteile eines
JavaScript-Programms
    Programm hat die Aufgabe, Daten zu verarbeiten
            Daten kommen aus Dateien, aus Datenstreams oder von der
             Benutzeroberfläche
            Daten werden in mehreren Schritten mit Zwischenergebnissen
             verarbeitet
            Ergebnis-Daten werden auf der Benutzeroberfläche dargestellt,
             abgespeichert, oder versendet

    Programm besteht daher aus
            einer internen Repräsentation von Daten (Variablen,
             Zahlenwerte, Zeichenketten, etc.)
            Befehlen zum Einlesen von Daten
            einer Folge von Rechnungen auf Daten (Anweisungen,
             Funktionsaufrufe, etc.)
            Befehlen zum Ausgeben von Daten

12.06.2020                          Prof. Dr. K. Mehner-Heindl               80

Repräsentation von Daten (1)
    Variablen sind benannte Speicherplätze für Werte.
    Variablen werden einmal definiert mit var und dann verwendet.

            Beispiel Integer (Ganze Zahlen, kodiert als Binärzahlen)
             
              var x=1;                     /*Repräsentation von Werten*/
              var z=0;
              z=x+10;                      /*Additionsergebnis*/
             document.write(z);            /*Daten-Ausgabe (Webseite)*/
             
            Beispiel String (Zeichenketten, kodiert als Binärcode)
             var name = “Katharina“;                  /*Repräsentation String*/
             var kette =                              /*Strings verbinden*/
               name + “ “+“Mehner-Heindl“
             alert(kette);                            /*Daten-Ausgabe (Dialog)*/

    Zuweisung von Werten an Variablen mit =.
    Verwendung von Variablen wie Zahlenwerte oder Strings.

12.06.2020                            Prof. Dr. K. Mehner-Heindl               81

Einlesen von Daten (1)
    Wenn Daten nicht vorher bekannt sind, können sie vom Benutzer als
     String (Zeichenkette) erfragt werden.

    Jeder eingegebene String wird in einer eigenen Variable gespeichert.

            Beispiel
             
             var t1= prompt(“Bitte Text eingeben!“, /*Einlesen*/
                             “Hier tippen“);
             var t2= prompt((“Bitte Text eingeben!“, /*Einlesen*/
                             “Hier tippen“);
             var t3= t2+t1;   /*Berechnung: Strings verbinden*/
             document.write(t3);      /*Daten-Ausgabe*/
             
12.06.2020                         Prof. Dr. K. Mehner-Heindl               82

Einlesen von Daten (2)
    prompt(…) speichert die Eingabe immer als
     String, auch wenn Ziffern eingegeben wurden
      var inhalt = prompt(“Bitte geben Sie
       etwas ein“, “Hier eingeben“);
      document.write(inhalt+inhalt);
             gibt eine Verkettung von Strings aus

    parseInt(…) wandelt Zeichenketten aus Ziffern in
     eine ganze Zahl um
      var zahl = parseInt(inhalt);

      document.write(zahl+zahl);
             gibt die Summe von zwei Zahlen aus
12.06.2020                         Prof. Dr. K. Mehner-Heindl   83

Variable: Metapher Dose                                                        x

1.      var wert1;                                       1.      Trägt außen eine Beschriftung
        erzeugt eine Variable namens wert1
                                                         2.      Ist anfangs leer,
2.      Am Anfang enthält die Variable automatisch               d.h. enthält Zettel mit „null“
        den Wert „null“
                                                         3.      Bekommt einen neuen Inhalt,
3.      wert1 = “Hallo“;                                         d.h. Dose öffnen, alten Zettel
        weist der Variablen als Wert den String                  entfernen, neuen Zettel mit String
        „Hallo“ zu                                               reinlegen.

4.      document.write(wert1);                           4.      Inhalt angucken,
        liest den Wert der Variablen und schreibt                d.h. Dose öffnen, Zettel angucken
        ihn auf die HTML-Seite
                                                         5.      Inhalt verändern,
5.      wert1 = parseInt(“3“);                                   d.h. Dose öffen, Zettel entfernen,
        weist der Variablen den Zahlenwert 3 zu                  neuen Zettel mit Zahlenwert
                                                                 reinlegen.
6.      document.write(wert1+1);
        gibt den Zahlenwert 4 auf der HTML-Seite         6.      (Farbe des Zettels zeigt an, ob ein
        aus. (Im Fall von Strings werden diese                   String oder ein Zahlenwert darauf
        aneinandergefügt.)                                       steht.)

     12.06.2020                           Prof. Dr. K. Mehner-Heindl                              84

1. Übungsaufgabe
1.      Schreiben Sie eine HTML-Seite mit
        JavaScript Bereich.
2.      Lesen Sie mit zwei prompt(…)-Aufrufen
        nacheinander zwei Zifferketten ein.
3.      Geben Sie die Verkettung der Zifferketten
        als Strings aus.
4.      Wandeln Sie die Zifferketten in ganze
        Zahlen um.
5.      Geben Sie die Summe der Zahlen aus.

12.06.2020              Prof. Dr. K. Mehner-Heindl   85

Repräsentation von Daten (2)
    Wahrheitswerte (Bool‘sche Werte) true, false
            Beispiel var vorhanden=true;
    Vergleiche liefern Wahrheitswerte
            Beispiel Vergleich mit String
             var test = (value==“Katharina“);
    Logische Operationen
            Logischer Vergleich, logisches Und, logisches Oder, logisches
             Nicht
            Beispiele
                vorhanden==true
                (x2)
                (name==“Mehner-Heindl“)&& (vorname==“Katharina“)
                !true

12.06.2020                           Prof. Dr. K. Mehner-Heindl              86

Rechnungen: Anweisungen
    Immer begrenzt durch ein Semikolon ;
    Zuweisung
            x = y + z;
    Funktionsaufrufe
            document.write(“Text oder Variable“);
            var x = prompt(“Bitte…“, “Hier…“);
            alert(“Achtung,…“);
            var y = parseInt(“2017“);
    Einfache if-Anweisung (Bedingte Ausführung)
            if (z > 0) {
             /* hier kommen Anweisungen, die ausgeführt
             werden, wenn die Bedingung wahr ist */
             };

12.06.2020                   Prof. Dr. K. Mehner-Heindl   87

2. Übungsaufgabe (if-Statement)
    Erzeugen Sie einen prompt(…)-Aufruf, mit
     dem man die Anzahl von Pizzen bei einer
     Bestellung festlegen kann.
    Wenn die Zahl größer als 10 ist, geben Sie
     eine Meldung aus, dass die Bearbeitung der
     Bestellung länger als eine Stunde dauert.

12.06.2020            Prof. Dr. K. Mehner-Heindl   88