Web (Site) Engineering (WebSE)

Transkript

1 1 / 32 Web (Site) Engineering (WebSE) Vorlesung 4: JavaScript, DOM, DHTML P. Reiß, B. Schiemann Lehrstuhl für Informatik 8 Universität Erlangen-Nürnberg

2 2 / 32 Übersicht JavaScript Document Object Model DHTML

3 JavaScript 3 / 32 Was ist JavaScript? Relativ einfache Skriptsprache Für HTML geschaffen Im Browser interpretiert Nicht streng typisiert: Numerische Variablen (Number) Zeichenketten (String) Boolesche Werte (Boolean) null, undefined Alle anderen sind vom Typ object Der Datentyp einer Variablen kann sich ändern (!) Sandbox-Modell

4 JavaScript 4 / 32 Einsatzgebiete Validierung von Formulardaten Dynamisierung von Webseiten Aussehen Anpassung am Browserversion Interaktion mit Server Reaktion auf Events (z.b. Mausklick) Spielereien (nützlich bis nervig) Web 2.0-Anwendungen (später im Semester)

5 JavaScript 5 / 32 Geschichte 1995: Netscape Navigator 2.0 mit LiveScript Dez 1995: Umbenennung in JavaScript, Version 1.0 Marketinggründe 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) 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)

6 JavaScript 6 / 32 Geschichte II Juni 1997: ECMA (European Computer Manufacturers Association) veröffentlicht ECMA-262 (EMCAScript) Okt. 1997: IE4, deckt JavaScript 1.1 ab, DOM-ähnliche Erweiterungen zum Zugriff auf alle Elemente April 1998: ISO-Norm: ISO/IEC 16262:1998 ECMAScript language specification... (verschiedene Sprachversionen, v.a. Etablierung des DOM) Okt. 2006: Firefox 2.0 mit JavaScript 1.7

7 JavaScript 7 / 32 Nachteile Möglicher Missbrauch: Verschleiern von Linkzielen (Statusbar) Dekativieren der üblichen Mausfunktionen z.b. Verhindern, Quelltext zu sehen Werbepopups Bereits zahlreiche Sicherheitslücken Dekaktivieren Sie JavaScript

8 JavaScript 8 / 32 Einbinden in HTML Externes Datei < s c r i p t src="js. j s " type= " t e x t / j a v a s c r i p t " > </ s c r i p t > 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 ( " Hallo Welt! " ) ; </ s c r i p t > Über Eventhandler in HTML-Tags < i n p u t type= " t e x t " name= " Eingabe " o n c l i c k = " v a l i d a t e ( ) " >

9 JavaScript 9 / 32 Vordefinierte Standardobjekte Beim Laden einer Seite werden verschiedene JavaScript-Objekte initialisiert: navigator: U.a. Name und Version des Browsers window: Hierarchisch höchstes Objekt document: Eigenschaften des HTML-Dokuments, z.b. title background documentelement (DOM) location: Eigenschaften der aktuellen URL history: Zuvor besuchte Seiten

10 JavaScript 10 / 32 Beispiel: Window-Objekt open/close: Öffnen, schliessen von Fenstern alert: Popup eines Alarm-Fensters confirm: Bestätigungsfenster prompt: Eingabefenster focus/blur: Setzt Fenster in Vorder-/Hintergrund scrollto: scrollt zu übergebenen Koordinaten

11 JavaScript 11 / 32 Events Load: Das Laden eines Dokumentes wurde abgeschlossen. Unload: Das Dokument wird wieder verlassen. Abort: Das Laden wurde durch den Anwender abgebrochen. Focus: Eingabefokus wurde erhalten. Blur: Abgabe des Eingabefokus. KeyUp: Taste wurde losgelassen. KeyPress: Taste wurde gedrückt und wieder losgelassen.

12 JavaScript 12 / 32 Events II KeyDown: Taste wird gedrückt. Error: Beim Laden des Dokumentes ist ein Fehler aufgetreten. Change: Der Wert hat sich geändert. Click: Das Element wurde von der Maus angeklickt. Submit: Ein Formular wurde abgeschickt. Reset: Ein Formular wurde zurückgesetzt. Select: Ein Text oder ein Teil davon wurde markiert.

13 JavaScript 13 / 32 Events III Resize: Die Größe eines Fensters oder Frames wurde verändert. Move: Ein Fenster oder ein Frame wurde bewegt. MouseDown: Maustaste wird gedrückt MouseUp: Die Maustaste wurde wieder losgelassen. MouseOver: Der Mauszeiger ist in den Bereich des Objektes eingetreten. MouseOut: Der Mauszeiger hat den Bereich des Objektes wieder verlassen. MouseMove: Die Maus wurde bewegt.

14 JavaScript 14 / 32 JavaScript Beispiel f u n c t i o n playext ( 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" ; } }

15 Document Object Model 15 / 32 DOM Dokument-Konzept zentrale Rolle Wird vom W3C [W3C05] definiert und bietet: Plattform- und Sprachunabhängigkeit Dynamischen Zugriff auf und Aktualisierung von Inhalt Struktur Stil eines Dokuments Dokument wird als Baum betrachtet

16 Document Object Model 16 / 32 DOM-Level 1,2,3 Zugriff auf Dokumente via Javascript und JScript (WSH) DOM Level 0 : IE 3.0 und Netscape 3.0 Inzwischen 3 Versionen, Level genannt DOM Level 1 ( nd Ed.) Alle Großen beteiligt (IBM, Netscape, Microsoft,...) Ziel: Zugriff auf HTML Dokumente mittels zwei Schnittstellendefinitionen a) DOM Core b) DOM HMTL

17 Document Object Model 17 / 32 DOM Level 1 Kern regelt Laden, Speichern, DocType, Knotenlisten, Elemente, Attribute und Blätter,... DOM HMTL basiert auf HTML 4.0 DOM HTML Level 1 spezialisiert das Core-Modell z.b. Document HMTLDocument Definiert in CORBA-IDL z.b. interface HTMLTitleElement : HTMLElement { attribute DOMString text;}; Schnittstellen in ECMA-Script [ECM99] und JAVA

18 Document Object Model 18 / 32 DOM Level 2 DOM Level 2 von aber HTML von Auf Level 1 aufbauend DOM HTML 2 nicht abwärtskompatibel Stärker an XML ausgerichtet (HTML 4.01, XHTML 1.0) Mehr Module Views (nach Anwendung CSS) Events (Target, Listener) Style (abstrakt, CSS) Traversal/Range (TreeWalker, NodeIterator und Bereiche)

19 Document Object Model 19 / 32 DOM Level 2 DOM Core überschaubare Neuigkeiten: 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

20 Document Object Model 20 / 32 DOM Level 3 DOM Level 3 von bis Insgesamt 16 Module Komplett neu: Load&Save (Parser u. Serializer), Validation ( aided editing ) Insgesamt ein umfangreicheres Update der bestehenden Spezifikationen Änderungen an Dokument-Schnittstelle z.b.: Document.renameNode Document.inputEncoding, Document.xmlEncoding

21 Document Object Model 21 / 32 DOM Level 3 Übersicht

22 Document Object Model 22 / 32 DOM Beispiel aus letzter Vorlesung HTML-Dokument <html > <head>< t i t l e >Weltfirma </ t i t l e > </head> <body> <h1>weltfirma </ h1> <hr > <ul > < l i ><a h r e f = " about. html " >Wir ueber uns </ a> < l i ><a h r e f = " prod. html " >Unser Produkt </ a> </ ul > <p> Wir a l s Weltfirma... </ body> </ html >

23 Document Object Model 23 / 32 DOM Beispiel II Dokumentenmodell des Beispiel-Dokuments

24 Document Object Model 24 / 32 DOM Implementierungen DOM sprachunabhängig erst Implementierungen bieten APIs Folgende Liste nach W3C (nicht vollständig) DOM Level 1: Apache und Oracle Bibliotheken für C,C + + und PLSQL DOM Level 2: Bibliotheken für Python, Lingo, C + + und PHP DOM Level 3: Apache C + + und Java (Xerces[Fou07])

25 Document Object Model 25 / 32 DOM und Java 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. item ( j ) ; i f ( topnode. getnodename ( ). equalsignorecase ( " #comment " ) ) { Seit Java 5.0: Java API for XML Processing (JAXP) integriert. JDOM[H + 07] und dom4j [Str07] nicht vergessen!

26 Document Object Model 26 / 32 Gecko und DOM DOM Level 1 perfekt DOM Level 2 gut (NodeIterator fehlt, Bugs) DOM Level 3 5 Teile nur teilweise implementiert Gut dokumentierte API [Ind07] auf den Mozilla Seiten Schwierige Performance-Ausagen, da Crossplatform Fazit: Manipulation der XML-Inhalte clientseitig gut machbar

27 DHTML 27 / 32 Dynamic HTML (DHTML) Seiten ändern sich während der Darstellung im Browser Interaktivität (Ergonomie!) Events für Benutzerinteraktion Kombination aus HTML Skriptsprache: meist JavaScript DOM CSS

28 DHTML 28 / 32 JavaScript und DOM Über das DOM kann JavaScript auf alle Elemente einer Webseite zugreifen Elemente oder ihre Eigenschaften ändern Neue Elemente hinzufügen Elemente entfernen

29 DHTML 29 / 32 JavaScript-Navigation DOM-Baum Zugriff auf DOM-Elemente Über id: document.getelementbyid("theid") Über tags: document.getelementbytagname("h1") Über Methoden der Elemente: Array childnodes firstchild: erster Kindknoten lastchild: letzter Kindknoten parentnode: Elternknoten previoussibling: vorheriger Geschwisterknoten nextsibling: nächster Geschwisterknoten

30 DHTML 30 / 32 Modifikation des DOM-Baums appendchild(kind): Hängt Kind unterhalb des Elements ein clonenode: Erzeugt identischen Knoten createelement: Erzeugt neuen Knoten removenode: Entfernen des Kontens replacenode: Ersetzen des Knotens setattribute: Attribut eines Knotens wird gesetzt

31 DHTML 31 / 32 Zusammenfassung JavaScript Document Object Model DHTML

32 DHTML 32 / 32 Vielen Dank Für Ihre Aufmerksamkeit! Fragen?

33 DHTML 32 / 32 ECMA. Standard ECMA-262 ECMAScript Language Specification. files/ecma-st/ecma-262.pdf, The Apache Software Foundation. Welcome to xerces Jason Hunter et al. Jdom Individual mozilla.org Contributors. Gecko dom reference. Gecko_DOM_Reference, James Strachan. dom4j: the flexible xml framework for java.

34 32 / 32 DHTML W3C. Document Object Model (DOM)