Marcus Haller & René Schulze JavaScript Marcus Haller & René Schulze
Marcus Haller & René Schulze Ü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 Marcus Haller & René Schulze
Marcus Haller & René Schulze 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 Marcus Haller & René Schulze
Marcus Haller & René Schulze Vergleich JavaScript – Java JavaScript Java Wird direkt in HTML-Code geschrieben Programmierung notwendig z.B. mit grafischem Tool oder JDK (Java Development Kit) Code muss kompiliert werden keine 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 von Variablen – hier einfach „var“ unabhängig ob Zahl, Zeichen oder Wahrheitswert Marcus Haller & René Schulze
Marcus Haller & René Schulze 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> Marcus Haller & René Schulze
Marcus Haller & René Schulze Event-Handler in 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 Marcus Haller & René Schulze
Marcus Haller & René Schulze Event-Handler in HTML <HTML><HEAD> <SCRIPT LANUGAGE="JavaScript"> <!--if (document.images) img = new Image(100, 100) img.src="bild2.gif" function swap() { if (document.images) document.bild.src = img.src } //--></SCRIPT></HEAD> <BODY><A HREF="#" onMouseover="swap()"> <IMG SRC="bild1.gif" NAME= "bild"></A> </BODY></HTML> Marcus Haller & René Schulze
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 Marcus Haller & René Schulze
JavaScript Sprachelemente Notation - Zuweisung: Variable=Ausdruck a = 123 - Anweisung: Anweisung i = i + 1 - Anweisungsblock: {Anweisung; Anweisung;…} { a = 123; i = i + 1; } Marcus Haller & René Schulze
JavaScript Sprachelemente 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) Marcus Haller & René Schulze
JavaScript Sprachelemente 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; //Konstante Char=“Dies ist ein Text“ //Konstante Marcus Haller & René Schulze
JavaScript Sprachelemente Operatoren - Vergleichsoperatoren: x == y; x != y x > 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 Marcus Haller & René Schulze
JavaScript Sprachelemente Bedingte Anweisungen Zur 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)} Marcus Haller & René Schulze
JavaScript Sprachelemente Mehrfach-Bedingungen Eingabe=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“); Case“3“: alert(“Sie haben eine 3 eingegeben“); break} Marcus Haller & René Schulze
JavaScript Sprachelemente 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++) Mit break kann man vorzeitig Schleifen verlassen, mit continue sofort den nächsten Schleifendurchlauf einleiten. Marcus Haller & René Schulze
JavaScript Sprachelemente 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()“ Marcus Haller & René Schulze
JavaScript Sprachelemente Funktionen - Wichtige Funktionen alert(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! Marcus Haller & René Schulze
Marcus Haller & René Schulze JavaScript Sprachelemente Objekte JavaScript 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: Auto Eigenschaften: Typ, Farbe Fähigkeiten: Fahren, Bremsen Einige Vordefinierte Objekte: Image, Array, Boolean, Date, Function, String Marcus Haller & René Schulze
Marcus Haller & René Schulze JavaScript Sprachelemente Methoden Methoden 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 Marcus Haller & René Schulze
Marcus Haller & René Schulze JavaScript Sprachelemente Objektmodell Eigenschaften („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.property object1.object2.objectn.method() window.document.write(“Hallo“); Marcus Haller & René Schulze
Marcus Haller & René Schulze JavaScript Sprachelemente Objekthierarchie Klasse Auto Objekt Eigenes_auto Objekt Traum-auto Eigen-schaft Typ Ferrari Eigen-schaft Farbe Gelb Methode fahren() Eigen-schaft Typ Seat Eigen-schaft Farbe Grau Methode fahren() Marcus Haller & René Schulze
Marcus Haller & René Schulze 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) Marcus Haller & René Schulze
Marcus Haller & René Schulze Objekt-Referenz Math-Objekt Objektkategorie: Vordefinierte Objekte Mathematische Funktionen lassen sich bearbeiten Eigenschaften: E, SQRT2, Pi Methoden: sin(x), exp(x), log(x) Marcus Haller & René Schulze
Marcus Haller & René Schulze 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 Marcus Haller & René Schulze
Marcus Haller & René Schulze Objekt-Referenz Document-Objekt Objektkategorie: Browser-Objekt Erzeugen von HTML-Seiten & Zugriff auf diese Eigenschaften: bgColor, title, cookie Methoden: writeln, open, handleEvent Marcus Haller & René Schulze
Marcus Haller & René Schulze 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 Marcus Haller & René Schulze
Marcus Haller & René Schulze 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/ Marcus Haller & René Schulze