Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Marcus Haller & René Schulze

Ähnliche Präsentationen


Präsentation zum Thema: "Marcus Haller & René Schulze"—  Präsentation transkript:

1 Marcus Haller & René Schulze
JavaScript Marcus Haller & René Schulze

2 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

3 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 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

4 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

5 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.", "width": "800" }

6 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

7 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 Marcus Haller & René Schulze.", "width": "800" }

8 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

9 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

10 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

11 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

12 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

13 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

14 JavaScript Sprachelemente
Mehrfach-Bedingungen Eingabe=window.prompt(“Zahl zwischen 1 und 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

15 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

16 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

17 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

18 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

19 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

20 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

21 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

22 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

23 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

24 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

25 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

26 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

27 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 JavaScript/Einfuehrung/ Marcus Haller & René Schulze


Herunterladen ppt "Marcus Haller & René Schulze"

Ähnliche Präsentationen


Google-Anzeigen