Web (Site) Engineering (WebSE) Vorlesung 4: JavaScript, DOM, DHTML
P. Reiß, B. Schiemann Lehrstuhl für Informatik 8 Universität Erlangen-Nürnberg
06. 11. 2007
1 / 32
Übersicht
JavaScript
Document Object Model
DHTML
2 / 32
JavaScript
Was ist JavaScript? I
Relativ einfache Skriptsprache
I
Für HTML geschaffen
I
Im Browser interpretiert Nicht streng typisiert:
I
I I I I I
Numerische Variablen (Number) Zeichenketten (String) Boolesche Werte (Boolean) null, undefined Alle anderen sind vom Typ object
Der Datentyp einer Variablen kann sich ändern (!) I
Sandbox-Modell
3 / 32
JavaScript
Einsatzgebiete
I
Validierung von Formulardaten
I
Dynamisierung von Webseiten
I
Aussehen
I
Anpassung am Browserversion
I
Interaktion mit Server
I
Reaktion auf Events (z.B. Mausklick)
I
Spielereien (nützlich bis nervig)
I
Web 2.0-Anwendungen (später im Semester)
4 / 32
JavaScript
Geschichte
I
1995: Netscape Navigator 2.0 mit LiveScript
I
Dez 1995: Umbenennung in JavaScript, Version 1.0 −→ Marketinggründe
I
April 1996: Navigator 3.0 mit JavaScript 1.1 Zugriff auf Bilder (Rollover-Effekte) Mai 1996: Internet Explorer 3 ist JavaScript-fähig (1.0)
I
I I
I
JScript (rechtliche Gründe) Spezielle Erweiterungen: Zugriff auf Dateisystem, Betriebssystem
Okt. 1996: Veröffentlichung von JavaScript 1.2 (Netscape Communicator 4.0, Juni 1997 erster Browser)
5 / 32
JavaScript
Geschichte II
I
Juni 1997: ECMA (European Computer Manufacturers Association) veröffentlicht ECMA-262 (EMCAScript)
I
Okt. 1997: IE4, deckt JavaScript 1.1 ab, DOM-ähnliche Erweiterungen zum Zugriff auf alle Elemente
I
April 1998: ISO-Norm: „ISO/IEC 16262:1998 ECMAScript language specification“
I
. . . (verschiedene Sprachversionen, v.a. Etablierung des DOM)
I
Okt. 2006: Firefox 2.0 mit JavaScript 1.7
6 / 32
JavaScript
Nachteile
I
Möglicher Missbrauch: I I
I
I
Verschleiern von Linkzielen (Statusbar) Dekativieren der üblichen Mausfunktionen z.B. Verhindern, Quelltext zu sehen Werbepopups
Bereits zahlreiche Sicherheitslücken „Dekaktivieren Sie JavaScript“
7 / 32
JavaScript
Einbinden in HTML I
Externes Datei < s c r i p t s r c = " JS . j s " t y p e = " t e x t / j a v a s c r i p t " >
I
Quelltext in HTML-Datei < s c r i p t type=" t e x t / j a v a s c r i p t " > a l e r t ( " H a l l o Welt ! " ) ;
I
Über Eventhandler in HTML-Tags < i n p u t t y p e = " t e x t " name= " Eingabe " onclick=" validate ( ) ">
8 / 32
JavaScript
Vordefinierte Standardobjekte Beim Laden einer Seite werden verschiedene JavaScript-Objekte initialisiert: I
navigator: U.a. Name und Version des Browsers
I
window: Hierarchisch höchstes Objekt document: Eigenschaften des HTML-Dokuments, z.B.
I
I I I
title background documentElement (DOM)
I
location: Eigenschaften der aktuellen URL
I
history: Zuvor besuchte Seiten
9 / 32
JavaScript
Beispiel: Window-Objekt
I
open/close: Öffnen, schliessen von Fenstern
I
alert: Popup eines Alarm-Fensters
I
confirm: Bestätigungsfenster
I
prompt: Eingabefenster
I
focus/blur: Setzt Fenster in Vorder-/Hintergrund
I
scrollTo: scrollt zu übergebenen Koordinaten
10 / 32
JavaScript
Events
I
Load: Das Laden eines Dokumentes wurde abgeschlossen.
I
Unload: Das Dokument wird wieder verlassen.
I
Abort: Das Laden wurde durch den Anwender abgebrochen.
I
Focus: Eingabefokus wurde erhalten.
I
Blur: Abgabe des Eingabefokus.
I
KeyUp: Taste wurde losgelassen.
I
KeyPress: Taste wurde gedrückt und wieder losgelassen.
11 / 32
JavaScript
Events II
I
KeyDown: Taste wird gedrückt.
I
Error: Beim Laden des Dokumentes ist ein Fehler aufgetreten.
I
Change: Der Wert hat sich geändert.
I
Click: Das Element wurde von der Maus angeklickt.
I
Submit: Ein Formular wurde abgeschickt.
I
Reset: Ein Formular wurde zurückgesetzt.
I
Select: Ein Text oder ein Teil davon wurde markiert.
12 / 32
JavaScript
Events III
I
Resize: Die Größe eines Fensters oder Frames wurde verändert.
I
Move: Ein Fenster oder ein Frame wurde bewegt.
I
MouseDown: Maustaste wird gedrückt
I
MouseUp: Die Maustaste wurde wieder losgelassen.
I
MouseOver: Der Mauszeiger ist in den Bereich des Objektes eingetreten.
I
MouseOut: Der Mauszeiger hat den Bereich des Objektes wieder verlassen.
I
MouseMove: Die Maus wurde bewegt.
13 / 32
JavaScript
JavaScript Beispiel
f u n c t i o n p l a y E x t ( playerType , u r l ) { i f ( playerType == " r e a l " ) { l o c a t i o n . h r e f = " h t t p : / / . . . / n−j o y . rm " ; } else i f ( playerType == "ms" ) { l o c a t i o n . h r e f = " h t t p : / / . . . r e d i r e c t . l s c ?c= l i v e & media=ms&stream=ndr / l i v e / n−j o y .wma" ; } }
14 / 32
Document Object Model
DOM
I
Dokument-Konzept zentrale Rolle
I
Wird vom W3C [W3C05] definiert und bietet:
I
Plattform- und Sprachunabhängigkeit Dynamischen Zugriff auf und Aktualisierung von
I
I I I
Inhalt Struktur Stil
eines Dokuments I
Dokument wird als Baum betrachtet
15 / 32
Document Object Model
DOM-Level 1,2,3
I
Zugriff auf Dokumente via Javascript und JScript (WSH)
I
DOM „Level 0“: IE 3.0 und Netscape 3.0
I
Inzwischen 3 Versionen, Level genannt
I
DOM Level 1 (09.2000 2nd Ed.)
I
Alle „Großen“ beteiligt (IBM, Netscape, Microsoft,...) Ziel: Zugriff auf HTML Dokumente mittels zwei Schnittstellendefinitionen
I
a) DOM Core b) DOM HMTL
16 / 32
Document Object Model
DOM Level 1
I
Kern regelt Laden, Speichern, DocType, Knotenlisten, Elemente, Attribute und Blätter,...
I
DOM HMTL basiert auf HTML 4.0
I
DOM HTML Level 1 spezialisiert das Core-Modell z.B. Document → HMTLDocument
I
Definiert in CORBA-IDL z.B. interface HTMLTitleElement : HTMLElement { attribute DOMString text;};
I
Schnittstellen in ECMA-Script [ECM99] und JAVA
17 / 32
Document Object Model
DOM Level 2
I
DOM Level 2 von 11.2000 aber HTML von 1.2003
I
Auf Level 1 aufbauend
I
DOM HTML 2 nicht abwärtskompatibel
I
Stärker an XML ausgerichtet (HTML 4.01, XHTML 1.0) Mehr Module
I
I I I I
Views (nach Anwendung CSS) Events (Target, Listener) Style (abstrakt, CSS) Traversal/Range (TreeWalker, NodeIterator und Bereiche)
18 / 32
Document Object Model
DOM Level 2
I
DOM Core überschaubare Neuigkeiten: I
I
I
I
Dokument bekommt importNode-, createElementNS-, createAttributeNS-, getElementsByTagNameNS- und getElementById-Funktionen DOMImplementation bekommt createDocumentType- und createDocument-Funktionen Weitere DOM-Exception-Codes
Viele Neuerungen beziehen sich auf Namespaces
19 / 32
Document Object Model
DOM Level 3
I
DOM Level 3 von 12.2003 bis 4.2004
I
Insgesamt 16 Module
I
Komplett neu: Load&Save (Parser u. Serializer), Validation („aided editing“)
I
Insgesamt ein umfangreicheres Update der bestehenden Spezifikationen
I
Änderungen an Dokument-Schnittstelle z.B.: Document.renameNode Document.inputEncoding, Document.xmlEncoding
20 / 32
Document Object Model
DOM Level 3 Übersicht
21 / 32
Document Object Model
DOM Beispiel aus letzter Vorlesung HTML-Dokument < t i t l e > W e l t f i r m a < / t i t l e > W e l t f i r m a < / h1> < l i >Wir ueber uns < / a> < l i >Unser Produkt < / a> Wir a l s W e l t f i r m a . . . 22 / 32
Document Object Model
DOM Beispiel II Dokumentenmodell des Beispiel-Dokuments
23 / 32
Document Object Model
DOM Implementierungen
I
DOM sprachunabhängig → erst Implementierungen bieten APIs
I
Folgende Liste nach W3C (nicht vollständig)
I
DOM Level 1: Apache und Oracle Bibliotheken für C,C + + und PLSQL
I
DOM Level 2: Bibliotheken für Python, Lingo, C + + und PHP
I
DOM Level 3: Apache C + + und Java (Xerces[Fou07])
24 / 32
Document Object Model
DOM und Java I
Java implementiert DOM direkt → org.w3c.dom Paket direkt in Java API enthalten NodeList topNodes = doc . getDocumentElement ( ) . getChildNodes ( ) ; for ( int j = 0; j
