Download presentation
Presentation is loading. Please wait.
1
DHTML & XML
2
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
3
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
4
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
5
<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>
7
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)
8
<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>
10
<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>";
12
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>
14
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
15
Event onClick One of the most common events
When user clicks a specific item with the mouse, the onclick event fires
16
<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>
18
Other Events window.onerror
<body onmousemove = “call function()”> onmouseover and onmouseout ---> Rollovers onfocus and onblur ---> Form processing
19
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
20
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
21
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
22
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
23
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
24
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
25
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
26
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
27
<!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 )>
28
W3C XML Schema Uses a syntax similar to XML
29
<schema xmlns = "http://www.w3.org/2001/XMLSchema"
xmlns:deitel = " targetNamespace = " <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>
30
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
31
DOM Node object methods getParentNode getNodeValue getFirstChild
getNext Sibling getAttributes insertBefore getElementsByTagName
32
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
33
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!
34
XPath Example Select all the titles: /bookstore/book/title
<?xml version="1.0" encoding="ISO "?> <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
35
Create a DTD from this XML
<?xml version="1.0" encoding="ISO "?> <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
Similar presentations
