DVG3 - JavaScript1 Java Script Vortrag: Anke Schulz 18.1.2000

DVG3 - JavaScript 1

Java ScriptVortrag: Anke Schulz18.1.2000

DVG3 - JavaScript 2

Geschichte

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.

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 .

DVG3 - JavaScript 3

Varianten

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.

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.

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.

DVG3 - JavaScript 4

Was ist Java Script?

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.

JavaScript wird in HTML-Dokumente eingebunden, sie stellt diverse Funktionalitäten zur Verfügung.

Javascript-Programme werden erst durch den Internet-Browser ausgeführt.Die Programmierung erfolgt als normaler Text im HTML-Code einer Seite.

Sie ist zwar nicht objektorientiert, aber dafür objektbasiert. So arbeitet man mit der Methodik einer objektorientierten Sprache, kann aber keine eigenen Objektklassen anlegen.

Da es sich bei JavaScript um eine Script-Sprache handelt, ist auch kein Compiler zum Übersetzen des Programms erforderlich

JavaScript kann den Server und das Netz entlasten , indem Berechnungen auf dem Client ausgeführt werden. Das ist meistens auch schneller.

DVG3 - JavaScript 5

Erweiterungen zu HTML

Überprüfung von Bedingungen (if ... else), das Abarbeiten von Schleifen (for ..., while ...) 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

Durchführung von Berechnungen Überprüfung von Formularen vor dem Abschicken,

Änderung des Inhalts mehrerer Frames mit einem Link, dynamisches Ändern von Farben, dynamisches Austauschen von eingebundenen Bildern

DVG3 - JavaScript 6

Was kann JavaScript? 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.

JavaScript kann mit dem Browser interagieren : Fenster öffnen und schließen, die Statusleiste beschreiben, in der History umherwandern, ...

JavaScript kann HTML schreiben oder auf anderen Wegen Ziele erreichen, die man mit HTML auch erreichen könnte. Beispielsweise Links setzen und Schrift formatieren.

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.

Ausgaben sind meist Bildschirmdarstellungen, können aber auch Sound sein oder der Druck der Seite, oder Mailversand, ...

Eine HTML-Seite, die JavaScript enthält, darf maximal 32K groß sein.

DVG3 - JavaScript 7

Was kann Java Script nicht?

JavaScript kann nicht Dateien schreiben, weder auf die Platte des Users noch auf den Server(außer Cookies ), auch keine Registry-Einträge o.ä.

JavaScript kann nicht die Daten von Browserfenstern fremder Server lesen .

JavaScript kann nicht "fremde" Fenster schließen , unsichtbare Fenster anlegen, rahmenlose Fenster anlegen.

JavaScript kann nicht heimlich e-Mails verschicken . 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.

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

DVG3 - JavaScript 8

Java und JavaScript- Unterschiede 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.

In JavaScript werden Objekt-Referenzen erst zur Laufzeit geprüft, in Java bereits während der Compilierung.

JavaScript ist objekt-basierend und kennt keine Vererbung, Java ist objekt-orientiert, Objekte vererben ihre Eigenschaften.

JavaScript-Code ist in das HTML-Dokument integriert und kann auf die (meisten) HTML-Elemente zugreifen. Java-Applets sind getrennt von der HTML-Seite.

In JavaScript müssen die Typen der verwendeten Variablen nicht deklariert werden, in Java ist das erforderlich.

In JavaScript werden Objekt-Referenzen erst zur Laufzeit geprüft, in Java bereits während der Compilierung.

DVG3 - JavaScript 9

Sicherheit

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.

DVG3 - JavaScript 10

Java Script in HTML einfügen

Java Script wird in den HTML text eingefügt:

<html> <head><title>Test</title> <script language="JavaScript">  </script> </head> <body></body> </html>

. 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 </script> das Script abgeschlossen.

Die ganze Folge von Anweisungen wird nach Interpretation des Scripts vom Browser so gesehen, als ob reiner HTML-Code verwendet würde.


Hello World

Java Script <center> <script language="JavaScript">  </script> </center>

Bsp 1

HTML <center>

<font size=+2> Hello World! </font>

</center>


Operatoren I

Arithmetische (also auf Zahlen anzuwendende) Operatoren sind + Addition, z.B. 4 + 3 = 7 - Subtraktion, z.B. 4 - 3 = 1 * Multiplikation, z.B. 4 * 3 = 12 / Division,z.B. 12 / 3 = 4 % Der Modulo Operator liefert den ganzzahligen Divisionsrest,

z.B. "11 % 3 = 2", denn 11 geteilt durch 3 ergibt 3 Rest 2 Kurzformen wie in Java x++ x--

z = (x < y) ? x : y Einzeilige Bemerkungen werden durch // eingeleitet und werden dann vom Browser

nicht beachtet! Mehrzeilige Bemerkungen beginnen mit /* und enden mit */


Operatoren II

Bit-weise logische Operatoren werden auf (die 32-bit Darstellung von) Zahlen oder logischen Werten angewandt:

& logisches UND, 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.

| logisches ODER,z.B. "true | false = true" oder "9 | 3 = 11" (binär 1001 | 0011 = 1011)

^ 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).

>> rechts Shift, z.B. "9 >> 2 = 2" (binär 0010). << links Shift, z.B. "9 << 2 = 36" (binär 100100).


Rechnungen

3 Schafe haben 12 Beine <script language="JavaScript">  </script> Bsp 1 Wie in Java gibt es auch hier die verschiedenen Zuweisungs möglichkeiten


Variable

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.

Mit einer Deklaration kann, muß aber nicht, eine Wertzuweisung verbunden sein. (Wie bei Java)

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


Gültigkeit von Variablen

Es wird zwischen globalen und lokalen Variablen unterschieden. Lokale Variablen gelten nur innerhalb einer Funktion. Globale Variablen gelten überall innerhalb des aktuellen Dokuments.

Lokale Variablen entstehen, wenn die Variablen mit dem Schlüsselwort var innerhalb einer Funktion definiert werden.

Wenn die Variablen durch direkte Wertzuweisung innerhalb einer Funktion definiert werden, entstehen globale Variablen.

Eine Variable, die außerhalb einer Funktion deklariert wird, ist grundsätzlich eine globale Variable, egal ob var verwendet wurde oder nicht.


Einfache Dialogbox

Es erscheint eine einfache Dialogbox mit einem Button.

function dialog () { alert ("das ist meine Hompage"); } <BODY onload="dialog ()">...</BODY>

Bsp 2


Dialogbox mit zwei Schaltflächen

function dialog () { var Eingabe; Eingabe= confirm (“Du kommst zu meiner Hompage"); if (Eingabe==true) { window.open ("JS Bsp 3.html"); } else { window.document.write ("<H3> Schade, daß Du meine Seite nicht sehen willst!</H3>"); } } <BODY onload="dialog ()">...</BODY>

Bsp 4


Dialogbox mit Eingabefeld

function dialog () { var Eingabe; Eingabe=prompt (“....?"); if (Eingabe==“xy") { } else { } } Bsp 5


Browser abfragen

Durch den Befehl navigator.appName wird der Browser ermittelt

Bsp 9

Dynamische grafische Links

Die Links können sich verändern, wenn die Maus auf das Bild kommt, wieder weg geht oder wenn es angeklickt wird.

Bsp 6

Documents

DVG3 - JavaScript1 Java Script Vortrag: Anke Schulz 18.1.2000