DHTML XML DHTML Hold attention and attract users
- Slides: 35
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. “ - W 3 C 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: inner. Text
<html> <head> <title>Object Model</title> <script type = "text/javascript"> <!-function start() { alert( p. Text. inner. Text ); p. Text. inner. Text = "Thanks for coming. "; } // --> </script> </head> <body onload = "start()"> <p id = "p. Text">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 += " " + document. all[ loop ]. tag. Name; p. Text. inner. HTML += elements; } // --> </script> </head> <body onload = "start()"> <p id = "p. Text">Elements on this Web page: </p> </body> </html>
<html> <head> <title>Object Model</title> <script type = "text/javascript"> <!-var elements = "<ul>"; function child( object ) { var loop = 0; elements += "<li>" + object. tag. Name + "<ul>"; } // --> </script> </head> <body onload = "child( document. all[ 4 ] ); my. Display. outer. HTML += elements; my. Display. outer. HTML += '</ul>'; "> <p>Welcome to our <strong>Web</strong> page!</p> <p id = "my. Display"> Elements on this Web page: </p> for ( loop = 0; loop < object. children. length; loop++ ) { </body> if ( object. children[ loop ]. children. length ) </html> child( object. children[ loop ] ); else elements += "<li>" + object. children[ loop ]. tag. Name + "</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 input. Color = prompt( "Enter a color name for the " + "background of this page", "" ); document. body. style. background. Color = input. Color; } // --> </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 on. Click 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 e. Xtensible 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 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 + = 1 or more ? = 0 or 1 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, address 1, address 2, city, state, zip, phone, flag )> <!ATTLIST contact type CDATA #IMPLIED> <!ELEMENT name ( #PCDATA )> <!ELEMENT address 1 ( #PCDATA )> <!ELEMENT address 2 ( #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 )>
W 3 C XML Schema Uses a syntax similar to XML
<schema xmlns = "http: //www. w 3. org/2001/XMLSchema" xmlns: deitel = "http: //www. deitel. com/booklist" target. Namespace = "http: //www. deitel. com/booklist"> <element name = "books" type = "deitel: Books. Type"/> <complex. Type name = "Books. Type"> <sequence> <element name = "book" type = "deitel: Single. Book. Type" min. Occurs = "1" max. Occurs = "unbounded"/> </sequence> </complex. Type> <complex. Type name = "Single. Book. Type"> <sequence> <element name = "title" type = "string"/> </sequence> </complex. Type> </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 get. Parent. Node get. Node. Value get. First. Child get. Next Sibling get. Attributes insert. Before get. Elements. By. Tag. Name
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 <? xml version="1. 0" encoding="ISO-8859 -1"? > Select all the titles: /bookstore/book/title <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> <year>2005</year> <price>29. 99</price> </book> <book category="WEB"> <title lang="en">Learning XML</title> <author>Erik T. Ray</author> <year>2003</year> <price>39. 95</price> </bookstore> Select the title of the first book: /bookstore/book[1]/title Select price nodes with price>35: /bookstore/book[price>35]/price
<? 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> <year>2005</year> <price>29. 99</price> </bookstore> Exercise: Create a DTD from this XML
Michelle benjamin phd
Vertical blinds
Object model and collections in dhtml
Dhtml stands for
Dhtml introduction
Is dhtml new language explain shortly
Dhtml form
Nn webklient
Dhtml
Opposites attract magnets
Magnets attract and repel
Homeostasis motivation
Which universal force can repel as well as attract?
An atom's ability to attract electrons
Opposite charges attract.
Opposites attract law
Why did christianity attract so many followers?
Electron dot structure of magnesium fluoride
For which reason did persia attract foreign
The twofold goal of marketing is to attract new customers
Particles attract each other
Which universal force can repel as well as attract
Qxa=e
Like charges attract or repel
Wet cell
The struggle among sellers to attract consumers
Like charges attract or repel
Like charges attract or repel
Things that attract each other
Which diagram shows magnets that will attract each other?
Why do opposites attract chemistry
Why did the city of alexandria attract scholars
Dynamics 365 for talent onboard
Attract new customers by promising superior value
The struggle among sellers to attract consumers
Baha attract
