1Marcus Haller & René Schulze JavaScript. 2Marcus Haller & René Schulze Übersicht Einordnung Vergleich Java – JavaScript Einbettung in HTML Event-Handler

1Marcus Haller & René Schulze

JavaScript


Übersicht

Einordnung

Vergleich Java – JavaScript

Einbettung in HTML

Event-Handler in HTML

JavaScript - Sprachelemente

Objekt-Referenz

Vor- und Nachteile

Quellen

3

4

5

6

8

22

26

27


Einordnung

clientseitige Programmiersprache gemeinsame Entwicklung von Sun & Netscape Ende 95 – parallel zu Java – unter Codename: LiveScript V1 fest in Netscape Navigator 2 eingebaut – einzig NS konnte JS interpretieren & ausführen 1996 Nav 3 – JS Fassung 1.1 erweitert durch Sun & Netscape - V 1.2 + neue Event-Handler Detailverbesserungen - V1.3 V 1.4 wurde übersprungen V 1.5 & 2005 in Mozilla erstmals V 1.6


JavaScript Java

Wird direkt in HTML-Code geschrieben Programmierung notwendig z.B. mit grafischem Tool oder JDK (Java Development Kit)

Code muss kompiliert werdenkeine separaten Dateien (*.java und *.class) nötig

Läuft immer nur in einem Web-Browser Eigenständige Applikationen möglich

Einfache Analyse möglich, da direkt im HTML Code

Originaler Java-Sourcecode wird benötigt zur Analyse

Einfacher konzipiert z.B. bei Definition vonVariablen – hier einfach „var“ unabhängigob Zahl, Zeichen oder Wahrheitswert

Vergleich JavaScript – Java


Einbettung in HTML

direkt in HTML-Code da sich Netscape Communicator und MIE allgemein durchgesetzt haben, reicht:

<HTML><HEAD><TITLE></TITLE></HEAD><SCRIPT TYPE = “text/javascript”>// Jetzt würde der JavaScript – Code folgen!!!</SCRIPT><BODY></BODY></HTML>



z.B. mit Klick der Maus tritt JavaScript-intern ein Ereignis mit JavaScript versucht man, manche dieser Ereignisse abzufangen und darauf zu reagieren dafür benötigt man Event-Handler, die als Attribute mancher HTML-Tags in den HTML-Code eingebunden werden beginnt grundsätzlich mit „on“

Beispiele: onClick Klicken der Maus onMouseover Mauszeiger über Objekt onKeyup Loslassen einer Taste


<HTML><HEAD><SCRIPT LANUGAGE="JavaScript"></SCRIPT></HEAD><BODY><A HREF="#" onMouseover="swap()"><IMG SRC="bild1.gif" NAME= "bild"></A></BODY></HTML>



JavaScript Sprachelemente

Aufbau der Sprache ähnlich anderer Programmiersprachen.Es gibt folgende JavaScript-Sprachelemente:

- Anweisungen und Anweisungsblöcke- Kommentare- Bedingte Anweisungen- Variablen- Operatoren- Schleifen und Wiederholungen- Funktionen- Objekte und Methoden



Notation- Zuweisung: Variable=Ausdruck

a = 123

- Anweisung: Anweisung

i = i + 1

- Anweisungsblock: {Anweisung; Anweisung;…}

{

a = 123;

i = i + 1;

}



Für selbstvergebene (Variablen)Namen gelten folgende Konventionen:

- keine Leerzeichen- max. 32 Zeichen- nur Buchstaben und Ziffern- Sonderzeichen nur _- Case sensitive (Groß-/Kleinschreibung wird unterschieden)- Kommentare: /* … */ (mehrzeilig)

// (einzeilig)



Variablen- Definition mit: var (nicht zwingend erforderlich)

- Definition außerhalb einer Funktion: globale Variable

- Definition innerhalb einer Funktion: lokale Variable

-Beispiele: var i,x;Zahl=99; //KonstanteChar=“Dies ist ein Text“ //Konstante



Operatoren- Vergleichsoperatoren:

x == y; x != yx > y; x < y; x >= y; x <= y

- Arithmetische Operatoren:+, -, *, /, % (modulo)x+=3; x*=4; x/=3;x++; x--;

- Logische Operatoren:&&: Bool‘sche UND-Verknüpfung||: Bool‘sche ODER-Verknüpfung



Bedingte AnweisungenZur Abfrage von Bedingungen steht die if-Anweisung, bei Bedarf auch mit else, zur Verfügung

- if (Bedingung) {Anweisung(en)}- if (Bedingung) {Anweisung(en)} else {Anweisung(en)}- if (Bedingung) {Anweisung(en)} else if (Bedingung) Anweisung(en)}



Mehrfach-BedingungenEingabe=window.prompt(“Zahl zwischen 1 und 3

eingeben“Switch(Eingabe){case“1“:Alert(“Sie haben eine 1 eingegeben“);Break;Case“2“:alert(„“Sie haben eine 2 eingegeben“);Break;Case“3“:alert(“Sie haben eine 3 eingegeben“);break}



Schleifen- while (Bedingung) {Anweisung}- do {Anweisung} while (Bedingung)- for (Bedingung) {Anweisung}- for (Variable in Objekt) {Anweisung}-Beispiel: while((UserEingabe!=Passwort)&&(Counter<=3))

{ Anweisungen } for(i=1; i<=100; i++) { Anweisungen }

Mit break kann man vorzeitig Schleifen verlassen, mit continue sofort den nächsten Schleifendurchlauf einleiten.



Funktionen- Zweck: Ausgliederung mehrfach benötigter

Anweisungen bzw. zur besseren Übersicht

- Eine Funktion ist die Zusammenfassung einer

Anweisungsfolge unter einem Namen

- Sie müssen vor ihrem Aufruf deklariert werden:

function Name()

{

Anweisungen;

}

- Aufgerufen wird eine Funktion z.B. über Event-

Handler wie ONCLICK=“Name()“



Funktionen- Wichtige Funktionenalert(message) zeigt den String message in einerm Dialogfenster an

confirm(question) stellt die Frage question in einem Dialogfenster mit

zwei Knöpfe; Ergebnis: true = OK, false = Cancel

Alle Texte in diese Funktionen sind JavaScript-Strings und nicht HTML. Alle drei Aufrufe sind, laut Norm "modal", d.h. weitere Arbeit wird unterbrochen, bis der Benutzer eine Antwort gibt. Bei alert in Netscape auf Unix-Rechner geht alles allerdings weiter!


ObjekteJavaScript ist eine objektorientierte Sprache ohne Klasse. Neue Objekte werden mit dem new-Operator deklariert, z.B.:

obj = new Objekt();obj.text = “ein Text“;obj.wert = 123;

Ein Objekt hat verschiedene Eigenschaften und verschiedene Fähigkeiten, z.B.:

Objekt: AutoEigenschaften: Typ, FarbeFähigkeiten: Fahren, Bremsen

Einige Vordefinierte Objekte:Image, Array, Boolean, Date, Function, String



MethodenMethoden sind Funktionen, die Aktionen ausführen, aber im Gegensatz zu alleinstehenden Funktionen an ein bestimmtes Objekt gebunden sind.

Methoden bilden die Eigenschaften eines Objektes und werden durch eine .-Verknüpfung aufgerufen:

Auto.fahren()

Viele vordefinierte JavaScript-Objekte haben Methoden, z.B.:

Objekt: history Methode: history.back



ObjektmodellEigenschaften („properties“) und Fähigkeiten („methods“) werden Objekten zugeordnet und können ihrerseits wieder als Objekte fungieren, so dass sie eine Hierarchie bilden:

object1.object2.objectn.propertyobject1.object2.objectn.method()

window.document.write(“Hallo“);



Objekthierarchie

KlasseAuto

ObjektTraum-

auto

ObjektEigenes

_auto

Eigen-schaft

TypFerrari

Eigen-schaft FarbeGelb

Methodefahren()

Methodefahren()

Eigen-schaft FarbeGrau

Eigen-schaft

TypSeat



Objekt-Referenz

JS basiert auf Objekten wichtige Konzepte der objektorientierten

Programmiersprachen fehlen z.B. Vererbung

zu jedem Objekt gehören Eigenschaften und Methoden

Unterschiedliche Objektkategorien (Vordefinierte -, HTML-, Browser- & Selbstdefinierte Objekte)


Objekt-Referenz

Math-Objekt Objektkategorie: Vordefinierte Objekte Mathematische Funktionen lassen sich

bearbeiten

Eigenschaften: E, SQRT2, Pi Methoden: sin(x), exp(x), log(x)


Objekt-Referenz

Button-Objekt Objektkategorie: HTML-Objekt Schaltfläche in einem Formular in

JavaScript abgebildet Objekt ist ein Element des Form-Objekts

Eigenschaften: form, name, type Methoden: blur, click, focus


Objekt-Referenz

Document-Objekt Objektkategorie: Browser-Objekt Erzeugen von HTML-Seiten & Zugriff auf

diese

Eigenschaften: bgColor, title, cookie Methoden: writeln, open, handleEvent


Vor- und Nachteile

Vorteile Nachteile

Plattformunabhängig Keine Dateien auf Festplatte des Internet-Surfers speicherbar (Ausnahme Cookies)

Realisation von Abfragen wie z.B. Eingabe eines Passwortes mit Überprüfung

nicht kompatibel mit allen Browsern

Kann nicht dauerhaft den Inhalt von HTML-Dateien ändern – nur dynamische Änderungen möglich

Keine Anbindung an eine Datenbank möglich + keine Abfrage von Datenbanken

Unsicher für Angriffe aus dem Netz


Quellen

Michael Seeboerger-Weichselbaum: Das Einsteigerseminar JavaScript. Landsberg: Verlag Moderne Industrie Buch AG & Co. KG

Martin Baier: JavaScript für Einsteiger.Bonn: Bonner Presse Vertrieb

http://www.monecke.de/kurse/javascript/index.phtml

http://www.galileocomputing.de/openbook/javascript/

http://www-cgi.uni-regensburg.de/WWW_Server/Dokumentation/JavaScript/Einfuehrung/

Documents

1Marcus Haller & René Schulze JavaScript. 2Marcus Haller & René Schulze Übersicht Einordnung Vergleich Java – JavaScript Einbettung in HTML Event-Handler