Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

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

Ähnliche Präsentationen


Präsentation zum Thema: "1Marcus Haller & René Schulze JavaScript. 2Marcus Haller & René Schulze Übersicht Einordnung Vergleich Java – JavaScript Einbettung in HTML Event-Handler."—  Präsentation transkript:

1 1Marcus Haller & René Schulze JavaScript

2 2Marcus Haller & René Schulze Übersicht Einordnung Vergleich Java – JavaScript Einbettung in HTML Event-Handler in HTML JavaScript - Sprachelemente Objekt-Referenz Vor- und Nachteile Quellen

3 3Marcus 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 neue Event-Handler Detailverbesserungen - V1.3 V 1.4 wurde übersprungen V 1.5 & 2005 in Mozilla erstmals V 1.6

4 4Marcus Haller & René Schulze JavaScriptJava Wird direkt in HTML-Code geschriebenProgrammierung 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-BrowserEigenstä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 Vergleich JavaScript – Java

5 5Marcus Haller & René Schulze Einbettung in HTML direkt in HTML-Code da sich Netscape Communicator und MIE allgemein durchgesetzt haben, reicht: // Jetzt würde der JavaScript – Code folgen!!!

6 6Marcus 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

7 7Marcus Haller & René Schulze Event-Handler in HTML

8 8Marcus 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

9 9Marcus Haller & René Schulze JavaScript Sprachelemente Notation - Zuweisung:Variable=Ausdruck a = Anweisung:Anweisung i = i Anweisungsblock: {Anweisung; Anweisung;…} { a = 123; i = i + 1; }

10 10Marcus 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)

11 11Marcus 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

12 12Marcus Haller & René Schulze JavaScript Sprachelemente Operatoren - Vergleichsoperatoren: x == y; x != y x > y; x = y; x <= y - Arithmetische Operatoren: +, -, *, /, % (modulo) x+=3; x*=4; x/=3; x++; x--; - Logische Operatoren: &&: Boolsche UND-Verknüpfung ||: Boolsche ODER-Verknüpfung

13 13Marcus 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)}

14 14Marcus Haller & René Schulze JavaScript Sprachelemente Mehrfach-Bedingungen Eingabe=window.prompt(Zahl zwischen 1 und 3 eingeben Switch(Eingabe) {case1: Alert(Sie haben eine 1 eingegeben); Break; Case2: alert(Sie haben eine 2 eingegeben); Break; Case3: alert(Sie haben eine 3 eingegeben); break}

15 15Marcus 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++) { Anweisungen } Mit break kann man vorzeitig Schleifen verlassen, mit continue sofort den nächsten Schleifendurchlauf einleiten.

16 16Marcus 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()

17 17Marcus 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!

18 18Marcus Haller & René Schulze 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 JavaScript Sprachelemente

19 19Marcus Haller & René Schulze 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 JavaScript Sprachelemente

20 20Marcus Haller & René Schulze 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); JavaScript Sprachelemente

21 21Marcus Haller & René Schulze Objekthierarchie Klasse Auto Objekt Traum- auto Objekt Eigenes _auto Eigen- schaft Typ Ferrari Eigen- schaft Farbe Gelb Methode fahren() Methode fahren() Eigen- schaft Farbe Grau Eigen- schaft Typ Seat JavaScript Sprachelemente

22 22Marcus 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)

23 23Marcus 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)

24 24Marcus 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

25 25Marcus 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

26 26Marcus Haller & René Schulze Vor- und Nachteile VorteileNachteile PlattformunabhängigKeine 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

27 27Marcus 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 JavaScript/Einfuehrung/


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

Ähnliche Präsentationen


Google-Anzeigen