DVG3 - JavaScript1 Java Script Vortrag: Anke Schulz 18.1.2000.

Präsentation zum Thema: "DVG3 - JavaScript1 Java Script Vortrag: Anke Schulz 18.1.2000."—  Präsentation transkript:

1

2 DVG3 - JavaScript1 Java Script Vortrag: Anke Schulz 18.1.2000

3 DVG3 - JavaScript2 Geschichte n JavaScript wurde von Netscape zunächst unter dem Code-Namen mocha, dann unter dem Namen Live-Script entwickelt. Dabei hat man sich stark an der Programmiersprache Java von Sun orientiert. Nachdem Netscapes Entwicklung von Sun als "legitimer" Ableger von Java anerkannt wurde, hat man als endgültigen Namen JavaScript gewählt. n JavaScript Version 1.0 wurde von Netscape erstmals 1995 in der Browser- Version 2.00 auf den Markt gebracht. Die weiterentwickelte Version 1.1 ist mit der Browser-Version 3.0 verfügbar. Mit Netscape 4.0, folgt JavaScript Version 1.2.

4 DVG3 - JavaScript3 Varianten n JScript ist die Microsoft-Variante von JavaScript - nicht identisch, aber doch weitgehend kompatibel. Schwierig sind vor allem die neueren Befehle, die noch nicht standardisiert sind. n ECMA ist eine europäische Standardisierungsorganisation, der u.a. Microsoft und Netscape angehören. ECMA-Script ist der Versuch eines "Standard- JavaScripts". Obwohl alle die Befolgung dieses Standards versprechen, ist das Ziel noch nicht ganz erreicht. Eine Verwendung von ECMA-Script verspricht aber schon eine weitreichende Kompatibilität. n VB-Script ist eine der vielen VisualBasic-Varianten von Microsoft. Da nur der IE VB-Script versteht, ist es nicht so verbreitet. Hinzu kommt, daß es nicht so sicher ist wie JavaScript, so daß die VB-Script-Verwendung bei den meisten Surfern deaktiviert ist.

5 DVG3 - JavaScript4 Was ist Java Script? n JavaScript ist kein direkter Bestandteil von HTML, sondern eine eigene Programmiersprache. Diese Sprache wurde jedoch eigens zu dem Zweck geschaffen, HTML-Autoren ein Werkzeug in die Hand zu geben, mit dessen Hilfe sich WWW-Seiten optimieren lassen. n JavaScript wird in HTML-Dokumente eingebunden, sie stellt diverse Funktionalitäten zur Verfügung. n Javascript-Programme werden erst durch den Internet-Browser ausgeführt.Die Programmierung erfolgt als normaler Text im HTML-Code einer Seite. n Sie ist zwar nicht objektorientiert, aber dafür objektbasiert. So arbeitet man mit der Methodik einer objektorientierten Sprache, kann aber keine eigenen Objektklassen anlegen. n Da es sich bei JavaScript um eine Script-Sprache handelt, ist auch kein Compiler zum Übersetzen des Programms erforderlich n JavaScript kann den Server und das Netz entlasten, indem Berechnungen auf dem Client ausgeführt werden. Das ist meistens auch schneller.

6 DVG3 - JavaScript5 Erweiterungen zu HTML n Überprüfung von Bedingungen (if... else), n das Abarbeiten von Schleifen (for..., while...) n Reaktion auf Ereignisse, z.B. Mouse-Clicks oder Bewegung der Maus über bestimmte Elemente, ohne dazu mit dem Webserver in Kontakt treten zu müssen n Durchführung von Berechnungen n Überprüfung von Formularen vor dem Abschicken, Änderung des Inhalts mehrerer Frames mit einem Link, dynamisches Ändern von Farben, dynamisches Austauschen von eingebundenen Bildern

7 DVG3 - JavaScript6 Was kann JavaScript? n JavaScript kann auf Eingaben reagieren und entsprechende Ausgaben machen. Eingaben können z.B. Tastatureingaben oder Mausbewegungen und -klicks des Benutzers sein, aber sich auch aus der Umgebung des Benutzers herleiten, wie Betriebssystem, verwendeter Browser. n JavaScript kann mit dem Browser interagieren : Fenster öffnen und schließen, die Statusleiste beschreiben, in der History umherwandern,... n JavaScript kann HTML schreiben oder auf anderen Wegen Ziele erreichen, die man mit HTML auch erreichen könnte. Beispielsweise Links setzen und Schrift formatieren. n JavaScipt kann auch noch Cookies auf der Platte des Users speichern - in beschränkter Anzahl und Größe, nur lesbar vom Server aus, der sie geschrieben hat, nur mit Name/Wert-Paaren. n Ausgaben sind meist Bildschirmdarstellungen, können aber auch Sound sein oder der Druck der Seite, oder Mailversand,... n Eine HTML-Seite, die JavaScript enthält, darf maximal 32K groß sein.

8 DVG3 - JavaScript7 Was kann Java Script nicht? n JavaScript kann nicht Dateien schreiben, weder auf die Platte des Users noch auf den Server(außer Cookies ), auch keine Registry-Einträge o.ä. n JavaScript kann nicht die Daten von Browserfenstern fremder Server lesen. n JavaScript kann nicht "fremde" Fenster schließen, unsichtbare Fenster anlegen, rahmenlose Fenster anlegen. n JavaScript kann nicht heimlich e-Mails verschicken. n JavaScript kann nicht den Quellcode einer Datei verbergen, auch nicht seinen eigenen. Der Browser muß ihn lesen können, also kann das der User auch. n JavaScript hat keine Grafik-Fähigkeiten. Es kann keine Striche oder Kreise malen. Fertige Grafikdateien allerdings kann es (wie HTML) anzeigen, mit den Filtern im IE sogar bearbeiten

9 DVG3 - JavaScript8 Java und JavaScript- Unterschiede n Ein Browser arbeitet eine HTML-Seite von oben nach unten durch. Das bedeutet, daß Javascript-Befehle sich erst auf Objekte beziehen dürfen, wenn diese schon erzeugt wurden. JavaScript wird zur Laufzeit interpretiert, Java wird bei der Entwicklung compiliert. n In JavaScript werden Objekt-Referenzen erst zur Laufzeit geprüft, in Java bereits während der Compilierung. n JavaScript ist objekt-basierend und kennt keine Vererbung, Java ist objekt- orientiert, Objekte vererben ihre Eigenschaften. n JavaScript-Code ist in das HTML-Dokument integriert und kann auf die (meisten) HTML-Elemente zugreifen. Java-Applets sind getrennt von der HTML-Seite. n In JavaScript müssen die Typen der verwendeten Variablen nicht deklariert werden, in Java ist das erforderlich. n In JavaScript werden Objekt-Referenzen erst zur Laufzeit geprüft, in Java bereits während der Compilierung.

10 DVG3 - JavaScript9 Sicherheit n Von Anfang an galt: JavaScript kann nicht auf die Festplatte des Anwenders schreiben. In der im Netscape 2.00 enthaltenen Version war es allerdings noch möglich, mit JavaScript die Verzeichnisse auf der Festplatte zu lesen. Außerdem war es möglich, die History-Liste (also die Liste der bisher vom Benutzer besuchten URL's) des Browsers auszulesen. Und schließlich war es in dieser ersten Version möglich, ohne Zutun des Benutzers Mail's - unter dem Namen des benutzers - an beliebige Adressen zu verschicken. Mit Netscape 2.01 wurden diese drei Möglichkeiten beseitigt.

11 DVG3 - JavaScript10 Java Script in HTML einfügen n Java Script wird in den HTML text eingefügt: n n Test n n <!-- n.... // JavaScript Programmtext Der Beginn des Scripts wird durch das HTML-tag gekennzeichnet. Die folgende Zeile, die HTML-Kennung für den Beginn eines Kommentars, dient dazu, das eigentliche Script vor Browsern zu "verstecken", die kein JavaScript beherrschen.

12 DVG3 - JavaScript11... und wieder beenden n.... n //--> n n. Am Ende wird das "Verstecken" des JavaScripts mit der HTML-Kennung --> abgeschlossen. Da wir uns aber noch innerhalb des Scripts befinden, muß diese HTML-Kennung wiederum vor dem JavaScript-Interpreter versteckt werden. Dazu dient das //, daß innerhalb von JavaScript einen Kommentar kennzeichnet. Schließlich wird mit das Script abgeschlossen. n Die ganze Folge von Anweisungen wird nach Interpretation des Scripts vom Browser so gesehen, als ob reiner HTML-Code verwendet würde.

13 DVG3 - JavaScript12 Hello World Java Script n n <!-- n document.write(" "); document.write("Hello World!"); document.write(" "); n //--> n n Bsp 1 n HTML n n Hello World! n

14 DVG3 - JavaScript13 Operatoren I n Arithmetische (also auf Zahlen anzuwendende) Operatoren sind n + Addition, z.B. 4 + 3 = 7 n - Subtraktion,z.B. 4 - 3 = 1 n * Multiplikation,z.B. 4 * 3 = 12 n / Division,z.B. 12 / 3 = 4 n % Der Modulo Operator liefert den ganzzahligen Divisionsrest, z.B. "11 % 3 = 2", denn 11 geteilt durch 3 ergibt 3 Rest 2 n Kurzformen wie in Java n x++ x-- n z = (x < y) ? x : y n Einzeilige Bemerkungen werden durch // eingeleitet und werden dann vom Browser nicht beachtet! n Mehrzeilige Bemerkungen beginnen mit /* und enden mit */

15 DVG3 - JavaScript14 Operatoren II n Bit-weise logische Operatoren werden auf (die 32-bit Darstellung von) Zahlen oder logischen Werten angewandt: n & logisches UND, n z.B. "true & false = false" oder "9 & 3 = 1", denn die Binärdarstellung 1001 von 9 bitweise UND-verknüpft mit der Binärdarstellung 0011 von 3 ergibt 0001. n | logisches ODER, z.B. "true | false = true" oder "9 | 3 = 11" (binär 1001 | 0011 = 1011) n ^ logisches XOR (exklusives Oder: entweder oder, aber nicht beides), z.B. "true ^ false = true" aber "true ^ true = false" oder "9 ^ 3 = 10" (binär 1001 ^ 0011 = 1010). n >> rechts Shift,z.B. "9 >> 2 = 2" (binär 0010). n << links Shift,z.B. "9 << 2 = 36" (binär 100100).

16 DVG3 - JavaScript15 Rechnungen 3 Schafe haben 12 Beine n n <!-- n var anzahl; n var name="Schafe"; n anzahl=3; n var beine=4*anzahl; n var satz=anzahl+" "+name+" haben "+beine+" Beine"; n document.write(satz); n //--> n n Bsp 1 n Wie in Java gibt es auch hier die verschiedenen Zuweisungs möglichkeiten

17 DVG3 - JavaScript16 Variable n Mit dem Schlüsselwort var werden Variablen deklariert. Im Gegensatz zu Java muß bei der Deklaration kein Typ angegeben werden; es wird also nicht festgelegt, ob es sich bei der Variablen um einen Zahlentyp, einen Character oder einen String handelt. Die Typfestlegung wird automatisch von JavaScript bei jeder Wertzuweisung vorgenommen. Eine Variable kann innerhalb eines Scripts seinen Typ (mehrfach) ändern. JavaScript unterscheidet zwischen Groß- und Kleinschreibung. n Mit einer Deklaration kann, muß aber nicht, eine Wertzuweisung verbunden sein. (Wie bei Java) n Das Schlüsselwort var zur Variablen-Deklaration ist nicht grundsätzlich erforderlich; beim ersten Auftreten eines bisher nicht verwendeten Variablennamens legt JavaScript die entsprechende Variable auch von allein an. Die Verwendung oder Nicht-Verwendung von var entscheidet jedoch über den Gültigkeitsbereich der Variablen

18 DVG3 - JavaScript17 Gültigkeit von Variablen n Es wird zwischen globalen und lokalen Variablen unterschieden. n Lokale Variablen gelten nur innerhalb einer Funktion. n Globale Variablen gelten überall innerhalb des aktuellen Dokuments. n Lokale Variablen entstehen, wenn die Variablen mit dem Schlüsselwort var innerhalb einer Funktion definiert werden. n Wenn die Variablen durch direkte Wertzuweisung innerhalb einer Funktion definiert werden, entstehen globale Variablen. n Eine Variable, die außerhalb einer Funktion deklariert wird, ist grundsätzlich eine globale Variable, egal ob var verwendet wurde oder nicht.

19 DVG3 - JavaScript18 Einfache Dialogbox n Es erscheint eine einfache Dialogbox mit einem Button. n function dialog () n { n alert ("das ist meine Hompage"); n }... n Bsp 2

20 DVG3 - JavaScript19 Dialogbox mit zwei Schaltflächen n function dialog () n { n var Eingabe; n Eingabe= confirm (Du kommst zu meiner Hompage"); n if (Eingabe==true) n { window.open ("JS Bsp 3.html"); n } n else n { window.document.write (" Schade, daß Du meine n Seite nicht sehen willst! "); n } }... Bsp 4

21 DVG3 - JavaScript20 Dialogbox mit Eingabefeld n function dialog () n { n var Eingabe; n Eingabe=prompt (....?"); n if (Eingabe==xy") n { } n else n { } n } n Bsp 5

22 DVG3 - JavaScript21 Browser abfragen n Durch den Befehl navigator.appName wird der Browser ermittelt n Bsp 9 n Dynamische grafische Links n Die Links können sich verändern, wenn die Maus auf das Bild kommt, wieder weg geht oder wenn es angeklickt wird. n Bsp 6