1Marcus Haller & René Schulze JavaScript. 2Marcus Haller & René Schulze Übersicht Einordnung...
-
Upload
koloman-blenker -
Category
Documents
-
view
110 -
download
0
Transcript of 1Marcus Haller & René Schulze JavaScript. 2Marcus Haller & René Schulze Übersicht Einordnung...
1Marcus Haller & René Schulze
JavaScript
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
4
5
6
8
22
26
27
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 1.2 + neue Event-Handler Detailverbesserungen - V1.3 V 1.4 wurde übersprungen V 1.5 & 2005 in Mozilla erstmals V 1.6
4Marcus Haller & René Schulze
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
5Marcus 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>
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
7Marcus Haller & René Schulze
<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>
Event-Handler in HTML
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
9Marcus Haller & René Schulze
JavaScript Sprachelemente
Notation- Zuweisung: Variable=Ausdruck
a = 123
- Anweisung: Anweisung
i = i + 1
- Anweisungsblock: {Anweisung; Anweisung;…}
{
a = 123;
i = i + 1;
}
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)
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; //KonstanteChar=“Dies ist ein Text“ //Konstante
12Marcus Haller & René Schulze
JavaScript Sprachelemente
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
13Marcus Haller & René Schulze
JavaScript Sprachelemente
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)}
14Marcus Haller & René Schulze
JavaScript Sprachelemente
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}
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.
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()“
17Marcus Haller & René Schulze
JavaScript Sprachelemente
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!
18Marcus Haller & René Schulze
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
JavaScript Sprachelemente
19Marcus Haller & René Schulze
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
JavaScript Sprachelemente
20Marcus Haller & René Schulze
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“);
JavaScript Sprachelemente
21Marcus Haller & René Schulze
Objekthierarchie
KlasseAuto
ObjektTraum-
auto
ObjektEigenes
_auto
Eigen-schaft
TypFerrari
Eigen-schaft FarbeGelb
Methodefahren()
Methodefahren()
Eigen-schaft FarbeGrau
Eigen-schaft
TypSeat
JavaScript Sprachelemente
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)
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)
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
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
26Marcus 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
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
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/