Client Side Technologies: DHTML
Mr. Anukool Bajpai, COMM-IT Career Academy
2005 evoch, LLC
DHTML
DHTML = Dynamic HTML
It allows you to build rich client interfaces and to modify them dynamically
There is no DHTML standard
It is not a W3C, IEEE, ISO or anything else standard
DHTML is a collection of several standards
DHTML consists of HTML/XHTML, CSS, DOM and JavaScript (or ECMAScript)
2005 evoch, LLC
DHTML In A Nutshell
DHTML is too rich to cover in an hour
The technologies are way to rich to fully cover in this presentation. This presentation will: 1) Briefly introduce each technology with a quick example 2) Give a high-level overview of how to use each technology 3) Show some more advanced uses for the various technologies and review how each one works 4) Provide resources for further exploration of each technology
2005 evoch, LLC
HTML / XHTML
HTML = HyperText Markup Language
Allows you to define and structure the contents of your document. Latest (last?) version is 4.01.
XHTML = XML HyperText Markup Language
XML-Compliant definition of HTML. Current version is XHTML 1.1 which added no new HTML tags to HTML 4.01
Contents, not design
HTML/XHTML was never intended to convey design
2005 evoch, LLC
HTML / XHTML Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[Link] <HTML> <HEAD> <TITLE>Sample</TITLE> </HEAD> <BODY> <P>This is a sample paragraph</P> </BODY> </HTML>
2005 evoch, LLC
CSS
CSS = Cascading Style Sheets
Allows you to define the styles to apply to your document. Latest version is 2.1.
Design, not content
CSS is intended to separate design from content
Very powerful
CSS is much more powerful than HTML design tags
2005 evoch, LLC
CSS Example
<STYLE TYPE="text/css"> BODY { background-color: #CCCCCC; }
P{ border: 1px solid black; background-color: #FFFFFF; margin-bottom: 1em; } </STYLE>
2005 evoch, LLC
DOM
DOM = Document Object Model
Defines a hierarchical model of the document structure through which all document elements may be accessed
Nodes
The W3C DOM defines element of a document is a node of a particular type
Node Types
Common types are: document node, element node, text node, attribute node, comment node, document-type node
2005 evoch, LLC
DOM Example
document node
Document_type node <!DOCTYPE>
element node <HTML> element node <HEAD> element node <TITLE> text node "Sample" element node <BODY> element node <P> text node "This is a..."
2005 evoch, LLC
JavaScript
JavaScript
Allows you to add conditional, client-side logic and behavior to your document
JavaScript != JAVA
Even though they have similar names, they are very different
Very powerful
Current versions are incredibly powerful... fully objectoriented, conditional logic, DOM interaction, more
2005 evoch, LLC
JavaScript Example
<SCRIPT TYPE="text/javascript"> <!-function pushButton() { if ( confirm("Push a button") ) { alert("You pushed \"OK\""); } else { alert("You pushed \"Cancel\""); } } // --> </SCRIPT>
2005 evoch, LLC
DHTML Example
Style Switcher
Using JavaScript, this example dynamically "applies" the selected CSS style sheet, changing the design on the fly. - JavaScript interacts with DOM and cookies - Shows ability of CSS to affect design w/o changing HTML
function setActiveStyleSheet(title) { var i, a, main; for(i=0; (a = [Link]("link")[i]); i++) { if([Link]("rel").indexOf("style") != -1 && [Link]("title")) { [Link] = true; if([Link]("title") == title) [Link] = false; } } }
2005 evoch, LLC
Differences Between HTML and XHTML
HTML tags and attributes must be lowercase All attribute values must be quoted All elements that can contain others require end tags Empty elements must either have an end tag or self-close All attributes must be name/value pairs The name attribute is deprecated. Use id instead. Some others...
2005 evoch, LLC
Standards vs. Quirk Mode
2 Modes of Operation
All modern browsers support 2 modes: Standards Mode for standard-compliant code and "Quirks" Mode for older or non-compliant code
!DOCTYPE Specifies the Mode
A properly formatted DOCTYPE declaration puts the browser in Standards Mode. Otherwise, it's Quirks Mode.
<!DOCTYPE OutermostTag RespOrg PublicIdentifier SystemIdentifier> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[Link]
2005 evoch, LLC
HTML and CSS
<STYLE> tag
Delineates inline styles
<STYLE TYPE="text/css"> /* Styles go here... */ </STYLE>
<LINK> tag
References external style sheets. Allows for alternates.
<LINK REL="stylesheet" HREF="[Link]" TYPE="text/css">
STYLE attribute
Defines inline styles for a specific block of HTML code
<P STYLE="color: #FF0000; font-weight: bold;"> some text </P>
2005 evoch, LLC
CSS: Syntax
@import Directive
Loads an external style sheet. Does not allow alternates. Not supported in some older browsers.
Rules
Defines which styles to apply to which elements
Selectors
Specifies the element or type of element that style affects
Declarations
Specifies CSS properties and values
2005 evoch, LLC
CSS: Rule Structure P { color: #000000;
Declaration Declaration Block
font: arial;
Value Property
Selector Rule
2005 evoch, LLC
CSS: Selector Types
P { color: black; } P, H1, H2 { color: black; } * { color: black; } [Link], .Error { color: black; } #Menu { color: black; } *[title], A[href][title] { color: black; } A[title="home page"] { color: black; } A[title~="foo"] { color: black; } *[lang|="en"] { color: black; } UL LI UL { color: black; } P > STRONG { color: black; } H1 + P { color: black; } A:hover { color: black; } P:first-letter { font-size: 200%; } /* Element Selector */ /* Grouping Selector */ /* Universal Selector */ /* Class Selector */ /* ID Selector */ /* Attribute Selector */ /* Exact Attribute Selector */ /* Partial Attribute Selector */ /* Particular Attribute Selector */ /* Descendant Selector */ /* Child Selector */ /* Adjacent Sibling Selector */ /* Pseudo-Class Selector */ /* Pseudo-Element Selector */
2005 evoch, LLC
CSS: Common Declaration Properties
background background-repeat color float font-size height line-height list-style-type padding text-align text-transform visibility word-spacing background-attachment border cursor font font-style left list-style-image margin position text-decoration top white-space word-wrap background-color bottom display font-family font-weight letter-spacing list-style-position overflow right text-indent vertical-align width z-index
2005 evoch, LLC
CSS: Box Model
element
Padding
Border Margin
2005 evoch, LLC
HTML and JavaScript
<SCRIPT> tag
Delineates inline code or references external code files
<SCRIPT TYPE="text/javascript"> // Code goes here... </SCRIPT> <SCRIPT TYPE="text/javascript" SRC="[Link]"></SCRIPT>
Event Attributes
Defines event handlers for events of specific elements
<INPUT TYPE="Button" onClick="alert('Hi there!');" VALUE="Hi"> <IMG SRC="[Link]" onMouseOver="[Link]='[Link]';" onMouseOut="[Link]='[Link]';" >
2005 evoch, LLC
JavaScript
Full, feature-rich language
Supports all standard control mechanisms: conditionals, loops, variables, try/catch/throw, functions, "objects"
Very powerful
Earlier versions were limited. Current version is not.
Syntactically similar to CFScript
CFScript syntax was based on JavaScript
Access to most browser features/properties
Cannot normally access local file system, etc.
2005 evoch, LLC
Advanced DHTML Example 1
Bouncing Balls
Using a combination of all DHTML technologies, this example dynamically creates and tracks the movements of an unlimited number of bouncing balls. - Creates new content dynamically - DOM manipulation to render animation and live data
2005 evoch, LLC
Advanced DHTML Example 2
Zip Code Lookup
Uses XMLHttpRequest object to retrieve XML-formatted data without requiring a screen refresh. Data is retrieved from the server in the background. - Retrieves data from server in the background - DOM manipulation to parse XML document
2005 evoch, LLC
XMLHttpRequest Object Methods
Description Aborts the current request Returns all sets of response headers as a string getResponseHeader("label") Returns the value of the specified response header as a string open("method", Sets various request properties of the request "URL"[,asyncFlag[,"username"[, including URL, method (get or post), and "password"]]]) asynchronous handling flag. send(content) Sends the request along with optional POST content setRequestHeader("label", "value") Sets a header to be sent with the request Method abort() getResponseHeaders()
2005 evoch, LLC
XMLHttpRequest Object Properties
Method onreadystatechange readyState Description The event handler that will be fired on change of state Integer indicating object status: 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete Response from server in string format DOM-compatible object of response data Numeric HTTP status code returned by server HTTP status message returned by server
responseText responseXML status statusText
2005 evoch, LLC
