(WebE) - Vorlesung 5: DOM Implementierungen, JavaScript, DHTML

Web (Site) Engineering (WebE)
Vorlesung 5: DOM Implementierungen, JavaScript, DHTML
B. Schiemann, P. Reiß
Lehrstuhl für Informatik 8
Universität Erlangen-Nürnberg
17. 11. 2009
1 / 24
Übersicht
JavaScript
JSON
DHTML
DOM-Support durch Implementierung
DOM und Java
2 / 24
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 / 24
JavaScript
Einsatzgebiete
I
Validierung von Formulardaten
I
Dynamisierung von Webseiten
I
Aussehen
I
Anpassung an 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 / 24
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 / 24
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 / 24
JavaScript
Nachteile
I
Möglicher Missbrauch:
I
I
I
I
Verschleiern von Linkzielen (Statusbar)
Deaktivieren der üblichen Mausfunktionen
z.B. Verhindern, Quelltext zu sehen
Werbepopups
Bereits zahlreiche Sicherheitslücken
„Deaktivieren Sie JavaScript“
7 / 24
JavaScript
Einbinden in HTML
I
Externe 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 " >
</ script>
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 ! " ) ;
</ script>
I
Über Eventhandler in HTML-Tags
< i n p u t t y p e = " t e x t " name= " Eingabe "
onclick=" validate ( ) ">
8 / 24
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 / 24
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 / 24
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 / 24
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 / 24
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 / 24
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 " ;
} e l s e 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 / 24
JavaScript
JSON
JSON — JavaScript Object Notation [Cro07]
I
I
Text Format für JavaScript Objekte und Daten
Es gibt im wesentlichen zwei Strukturen:
1. Mengen von Name-Werte-Paaren
2. Listen (Arrays)
I
Mit den Name-Werte-Paaren, kann ein Objekt übertragen werden:
15 / 24
DHTML
Dynamic HTML (DHTML)
I
Seiten ändern sich während der Darstellung im Browser
I
Interaktivität (Ergonomie!)
I
Events für Benutzerinteraktion
Kombination aus
I
I
I
I
I
HTML
Skriptsprache: meist JavaScript
DOM
CSS
16 / 24
DHTML
JavaScript und DOM
Über das DOM kann JavaScript
I
auf alle Elemente einer Webseite zugreifen
I
Elemente oder ihre Eigenschaften ändern
I
Neue Elemente hinzufügen
I
Elemente entfernen
17 / 24
DHTML
JavaScript-Navigation DOM-Baum
Zugriff auf DOM-Elemente
I
Über id: document.getElementById("theID")
I
Über tags: document.getElementByTagName("h1")
Über Methoden der Elemente:
I
I
I
I
I
I
I
Array childNodes
firstChild: erster Kindknoten
lastChild: letzter Kindknoten
parentNode: Elternknoten
previousSibling: vorheriger Geschwisterknoten
nextSibling: nächster Geschwisterknoten
18 / 24
DHTML
Modifikation des DOM-Baums
I
appendChild(Kind): Hängt Kind unterhalb des Elements ein
I
cloneNode: Erzeugt identischen Knoten
I
createElement: Erzeugt neuen Knoten
I
removeNode: Entfernen des Kontens
I
replaceNode: Ersetzen des Knotens
I
setAttribute: Attribut eines Knotens wird gesetzt
19 / 24
DHTML
DOM-Support durch Implementierung
Gecko und DOM
I
DOM Level 1 −→ perfekt
I
DOM Level 2 −→ gut (NodeIterator fehlt, Bugs)
I
DOM Level 3 −→ 5 Teile nur teilweise implementiert
I
Gut dokumentierte API [Ind07] auf den Mozilla Seiten
I
Schwierige Performance-Ausagen, da Crossplatform
I
Fazit: Manipulation der XML-Inhalte clientseitig gut machbar
20 / 24
DOM und Java
DOM und Java
I
Java implementiert DOM direkt
→ org.w3c.dom Paket direkt in Java API enthalten
NodeList topNodes =
doc . getDocumentElement ( ) . getChildNodes ( ) ;
for ( i n t j = 0;
j <= ( topNodes . getLength ( ) − 1 ) ; j ++) {
Node topNode = topNodes . i t e m ( j ) ;
if (
topNode . getNodeName ( ) . equalsIgnoreCase (
" #comment " ) ) {
I
Seit Java 5.0: Java API for XML Processing (JAXP) integriert.
I
JDOM[H+ 07] und dom4j [Str07] nicht vergessen!
21 / 24
DOM und Java
JDOM
I
Pure Java-API für die Verarbeitung von XML
I
Eine der Möglichkeiten für DOM-Zugriff
I
Beinhaltet SAX und DOM
I
Kann mit Xerces und Xalan kombiniert werden
22 / 24
DOM und Java
Zusammenfassung
JavaScript
JSON
DHTML
DOM-Support durch Implementierung
DOM und Java
23 / 24
DOM und Java
Vielen Dank
I
Für Ihre Aufmerksamkeit!
I
Fragen?
24 / 24
DOM und Java
Douglas Crockfor.
Introducing json.
http://json.org/, 2007.
Jason Hunter et al.
Jdom.
http://www.jdom.org/index.html, 2007.
Individual mozilla.org Contributors.
Gecko dom reference.
http://developer.mozilla.org/en/docs/Category:
Gecko_DOM_Reference, 2007.
James Strachan.
dom4j: the flexible xml framework for java.
http://dom4j.org/index.html, 2007.
24 / 24