Marcus Haller & René Schulze

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

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

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

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

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

Event-Handler in HTML <HTML><HEAD> <SCRIPT LANUGAGE="JavaScript"> </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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Marcus Haller & René Schulze

Ähnliche Präsentationen

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

Ähnliche Präsentationen

Über Projekt

Feedback

Anmelden

Anmeldung über soziales Netzwerk:

Marcus Haller & René Schulze

Ähnliche Präsentationen

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

Ähnliche Präsentationen

Über Projekt

Feedback