DHTML & XML
DHTML Hold attention and attract users to come back Eye-catching graphics Interactive and animated --> combining HTML with a scripting language and/or stylesheet "Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated.“ - W3C Is not a language
DHTML Object Model Object model allows web authors to: Control the presentation of their pages Gives them access to all elements on their Web page The whole web page (elements, forms, tables, frames etc.) is represented in an object hierarchy
Object Referencing Simplest way to reference an element: id attribute Element is represented as an object Its various (X)HTML attributes become properties Properties can be manipulated by scripting Example: innerText
<html> <head> <title>Object Model</title> <script type = "text/javascript"> <!-- function start() { alert( pText.innerText ); pText.innerText = "Thanks for coming."; } // --> </script> </head> <body onload = "start()"> <p id = "pText">Welcome to our Web page!</p> </body> </html>
Collections: all and children all = a collection (array) of all the (X)HTML elements in a document, in the order in which they appear children = a collection for a specific element that contains that element’s child elements (direct descendants)
<html> <head> <title>Object Model</title> <script type = "text/javascript"> <!-- var elements = ""; function start() { for ( var loop = 0; loop < document.all.length; ++loop ) elements += "<br />" + document.all[ loop ].tagName; pText.innerHTML += elements; } // --> </script> </head> <body onload = "start()"> <p id = "pText">Elements on this Web page:</p> </body> </html>
<html> <head> // --> <title>Object Model</title> </script> </head> <script type = "text/javascript"> <!-- <body onload = "child( document.all[ 4 ] ); var elements = "<ul>"; myDisplay.outerHTML += elements; myDisplay.outerHTML += '</ul>';"> function child( object ) { <p>Welcome to our <strong>Web</strong> page!</p> var loop = 0; elements += "<li>" + object.tagName + "<ul>"; <p id = "myDisplay"> Elements on this Web page: for ( loop = 0; loop < object.children.length; loop++ ) </p> </body> if ( object.children[ loop ].children.length ) </html> child( object.children[ loop ] ); else elements += "<li>" + object.children[ loop ].tagName + "</li>"; } elements += "</ul>" + "</li>";
Dynamic Styles: using user response to change style <html> <head> <title>Object Model</title> <script type = "text/javascript"> <!-- function start() { var inputColor = prompt( "Enter a color name for the " + "background of this page", "" ); document.body.style.backgroundColor = inputColor; } // --> </script> </head> <body onload = "start()"> <p>Welcome to our Web site!</p> </body> </html>
Event Model Scripts can respond to user interactions and change the page accordingly Mouse movements Keystrokes Content becomes more dynamic while interfaces become more intuitive
Event onClick One of the most common events When user clicks a specific item with the mouse, the onclick event fires
<html> <head> <title>DHTML Event Model - onclick</title> <!-- The for attribute declares the script for --> <!-- a certain element, and the event for a --> <!-- certain event. --> <script type = "text/javascript" for = "para" event = "onclick"> <!-- alert( "Hi there" ); // --> </script> </head> <body> <!-- The id attribute gives a unique identifier --> <p id = "para">Click on this text!</p> <!-- You can specify event handlers inline --> <input type = "button" value = "Click Me!" onclick = "alert( 'Hi again' )" /> </body> </html>
Other Events window.onerror <body onmousemove = “call function()”> onmouseover and onmouseout ---> Rollovers onfocus and onblur ---> Form processing
Filters and Transitions Transitioning between pages Random dissolves, horizontal/vertical blinds Make letters glow, drop shadows or blur Flip text horizontally or vertically Transparency effects Specified using CSS filter property
XML eXtensible Markup Language Open technology for electronic data exchange and storage Derived from SGML (Standard Generalized Markup Language) Contains only data, not formatting instructions Each application that process the XML data can display it/manipulate it differently Stylesheet: XSL Permits authors to create entirely new markup languages for describing data
Other XML-related Technologies Xpath: a language for accessing parts of an XML document XSL-FO: an XML vocabulary used to describe document formatting XSLT: a language for transforming XML documents
Processing an XML document XML parser (XML processor) Check an XML document’s syntax and enable software programs to process marked-up data Support the Document Object Model (DOM) or Simple API for XML (SAX) DOM-based parsers build tree structures containing XML document data in memory SAX-based parsers process XML documents and generate events that contain data from the XML document
XML Document Structure To define the proper structure of the XML document DTD (Document Type Definition) XML Schema When an XML document references a DTD or a schema, parsers read the DTD/schema and check whether the XML document is valid Well-formed is a must before validation These parsers are called validating parsers
XML Namespaces To prevent naming collisions Example: <subject>Math</subject> <subject>Wound Infection</subject> Becomes: <school:subject>Math</school:subject> <medical:subject>Wound Infection</medical:subject> school and medical are namespace prefixes
XML Namespaces Each namespace prefix has a corresponding URI (Uniform Resource Identifier) that uniquely identifies the namespace A URI can refer to a document, resource or anything on the Web URI is not URL URL is a path to a file on the WWW URI is simply a name
DTD Uses EBNF (Extended Backus-Naur Form) grammar * = 0 or more The order of elements matter CDATA = character data --> will be passed to the application “as is” PCDATA = Parsed Character data (text), no markup characters
<!ELEMENT letter ( contact+, salutation, paragraph+, closing, signature )> <!ELEMENT contact ( name, address1, address2, city, state, zip, phone, flag )> <!ATTLIST contact type CDATA #IMPLIED> <!ELEMENT name ( #PCDATA )> <!ELEMENT address1 ( #PCDATA )> <!ELEMENT address2 ( #PCDATA )> <!ELEMENT city ( #PCDATA )> <!ELEMENT state ( #PCDATA )> <!ELEMENT zip ( #PCDATA )> <!ELEMENT phone ( #PCDATA )> <!ELEMENT flag EMPTY> <!ATTLIST flag gender (M | F) "M"> <!ELEMENT salutation ( #PCDATA )> <!ELEMENT closing ( #PCDATA )> <!ELEMENT paragraph ( #PCDATA )> <!ELEMENT signature ( #PCDATA )>
W3C XML Schema Uses a syntax similar to XML
<schema xmlns = "http://www.w3.org/2001/XMLSchema" xmlns:deitel = "http://www.deitel.com/booklist" targetNamespace = "http://www.deitel.com/booklist"> <element name = "books" type = "deitel:BooksType"/> <complexType name = "BooksType"> <sequence> <element name = "book" type = "deitel:SingleBookType" minOccurs = "1" maxOccurs = "unbounded"/> </sequence> </complexType> <complexType name = "SingleBookType"> <element name = "title" type = "string"/> </schema>
DOM Document Object Model A hierarchical tree structure of a document Each tag name is a node A node that contains other nodes (called children or child nodes) is called a parent node. Sibling nodes Descendant nodes Ancestor nodes
DOM Node object methods getParentNode getNodeValue getFirstChild getNext Sibling getAttributes insertBefore getElementsByTagName
XSL Specifies how programs should render XML document data Group of 3 technologies: XSL-FO (Formatting Objects) PDF, plain text (paper printing oriented) XSLT (Transformations) transforming XML into other formats Xpath --> syntax for accessing parts of an XML document XML and XSL’s relationship is similar to HTML and CSS
XSLT Transforming using XSLT involves two tree structures Source tree (the XML source doc) Result tree (the XML or HTML document to be created) XPath is used to locate parts of the source tree document that match templates defined in the XSL stylesheet Navigation is selected!
XPath Example Select all the titles: /bookstore/book/title <?xml version="1.0" encoding="ISO-8859-1"?> <bookstore> <book category="COOKING"> <title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category="CHILDREN"> <title lang="en">Harry Potter</title> <author>J K. Rowling</author> <price>29.99</price> <book category="WEB"> <title lang="en">Learning XML</title> <author>Erik T. Ray</author> <year>2003</year> <price>39.95</price> </bookstore> Select all the titles: /bookstore/book/title Select the title of the first book: /bookstore/book[1]/title Select price nodes with price>35: /bookstore/book[price>35]/price
Create a DTD from this XML <?xml version="1.0" encoding="ISO-8859-1"?> <bookstore> <book category="COOKING"> <title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category="CHILDREN"> <title lang="en">Harry Potter</title> <author>J K. Rowling</author> <price>29.99</price> </bookstore> Exercise: Create a DTD from this XML