Web (Site) Engineering (WebSE)

Größe: px

Ab Seite anzeigen:

Download "Web (Site) Engineering (WebSE)"

Maja Walter
vor 6 Jahren
Abrufe

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 3 / 32 Nachträge Vorlesung 3: class ist Universalattribut Vorlesung 3: Es können mehrere externe Stylesheets eingebunden werden, spätere Definitionen überschreiben frühere Vorlesung 3: Javascript 1.7 seit Firefox 2.0b1 (Firefox 1.5 hatte Version 1.6) Vorlesung 2: Mkcol-HTTP Befehl (WebDAV), wie angedeutet, makecollection aka Directories

4 4 / 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

5 5 / 32 Einsatzgebiete Validierung von Formulardaten Dynamisierung von Webseiten Aussehen Anpassung am Browserverion Interaktion mit Server Reaktion auf Events (z.b. Mausklick) Spielereien (nützlich bis nervig)

6 6 / 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)

7 7 / 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

8 8 / 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

9 9 / 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 ( ) " >

10 10 / 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

11 11 / 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

12 12 / 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.

13 13 / 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.

14 14 / 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.

15 15 / 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" ; } }

16 16 / 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

17 17 / 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

18 18 / 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

19 19 / 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)

20 20 / 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

21 21 / 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

22 DOM Level 3 Übersicht 22 / 32

23 23 / 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 >

24 24 / 32 DOM Beispiel II Dokumentenmodell des Beispiel-Dokuments

25 25 / 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 + + (u.a. Arabica SAX) und PHP DOM Level 3: Apache C + + (Xerces)

26 26 / 32 DOM und Java Wie bereits angesprochen: 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 " ) ) {

27 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 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 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 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 31 / 32 Zusammenfassung JavaScript Document Object Model DHTML

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

33 32 / 32 ECMA. Standard ECMA-262 ECMAScript Language Specification. publications/files/ecma-st/ecma-262.pdf, W3C. Document Object Model (DOM)

Ähnliche Dokumente

Übersicht. Web (Site) Engineering (WebSE) Was ist JavaScript? Einsatzgebiete. JavaScript. Vorlesung 4: JavaScript, DOM, DHTML. P. Reiß, B.

Übersicht. Web (Site) Engineering (WebSE) Was ist JavaScript? Einsatzgebiete. JavaScript. Vorlesung 4: JavaScript, DOM, DHTML. P. Reiß, B. Übersicht Web (Site) Engineering (WebSE) Vorlesung 4:, DOM, P. Reiß, B. Schiemann Lehrstuhl für Informatik 8 Universität Erlangen-Nürnberg 06. 11. 2007 1 / 32 2 / 32 Was ist? Einsatzgebiete Relativ einfache