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

Größe: px

Ab Seite anzeigen:

Download "Übersicht. Web (Site) Engineering (WebSE) Was ist JavaScript? Nachträge. JavaScript. Vorlesung 4: JavaScript, DOM, DHTML. P. Reiß, B."

Meta Fromm
vor 6 Jahren
Abrufe

1 Übersicht Web (Site) Engineering (WebSE) Vorlesung 4: JavaScript, DOM, DHTML JavaScript P. Reiß, B. Schiemann Lehrstuhl für Informatik 8 Universität Erlangen-Nürnberg Document Object Model DHTML 1 / 32 2 / 32 Nachträge Was ist JavaScript? 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 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 3 / 32 4 / 32

2 Einsatzgebiete Geschichte Validierung von Formulardaten Dynamisierung von Webseiten Aussehen Anpassung am Browserverion Interaktion mit Server Reaktion auf Events (z.b. Mausklick) Spielereien (nützlich bis nervig) 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) 5 / 32 6 / 32 Geschichte II Nachteile 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 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 7 / 32 8 / 32

3 Einbinden in HTML Vordefinierte Standardobjekte 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 ( ) " > 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 9 / / 32 Beispiel: Window-Objekt Events 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 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. 11 / / 32

4 Events II Events III 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. 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. 13 / / 32 JavaScript Beispiel DOM 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" ; } } 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 15 / / 32

5 DOM-Level 1,2,3 DOM Level 1 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 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 17 / / 32 DOM Level 2 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) 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 19 / / 32

DOM Level 3 DOM Level 3 Übersicht DOM Level 3 von 12.2003 bis 4.2004 Insgesamt 16 Module Komplett neu: Load&Save (Parser u.

6 DOM Level 3 DOM Level 3 Übersicht 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 / / 32 DOM Beispiel aus letzter Vorlesung HTML-Dokument DOM Beispiel II Dokumentenmodell des Beispiel-Dokuments <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 / / 32

7 DOM Implementierungen DOM und Java 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) 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 " ) ) { 25 / / 32 Dynamic HTML (DHTML) JavaScript und DOM Seiten ändern sich während der Darstellung im Browser Interaktivität (Ergonomie!) Events für Benutzerinteraktion Kombination aus HTML Skriptsprache: meist JavaScript DOM CSS Über das DOM kann JavaScript auf alle Elemente einer Webseite zugreifen Elemente oder ihre Eigenschaften ändern Neue Elemente hinzufügen Elemente entfernen 27 / / 32

8 JavaScript-Navigation DOM-Baum Modifikation des DOM-Baums 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 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 29 / / 32 Zusammenfassung Vielen Dank JavaScript Document Object Model Für Ihre Aufmerksamkeit! Fragen? DHTML 31 / / 32

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

Ähnliche Dokumente

Multimediale Web-Anwendungen. JavaScript. Einführung. MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 1.

Multimediale Web-Anwendungen. JavaScript. Einführung. MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 1. Multimediale Web-Anwendungen JavaScript Einführung MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 1 Entstehungsgeschichte: JavaScript 1995 Netscape Communications Corp. (Brendan Eich)