Scribd
Upload
148 views

Client Side Technologies - DHTML

HTML / XHTML = HyperText Markup Language Allows you to define and structure the contents of your document. DOM = Document Object Model Defines a hierarchical model through which all document elements may be accessed. JavaScript (or ECMAScript) allows you to build rich client interfaces and to modify them dynamically.

Uploaded by

guptkashish
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
148 views

Client Side Technologies - DHTML

HTML / XHTML = HyperText Markup Language Allows you to define and structure the contents of your document. DOM = Document Object Model Defines a hierarchical model through which all document elements may be accessed. JavaScript (or ECMAScript) allows you to build rich client interfaces and to modify them dynamically.

Uploaded by

guptkashish
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 26

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" "http://www.w3.org/TR/html4/loose.dtd"> <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 = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { a.disabled = true; if(a.getAttribute("title") == title) a.disabled = 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" "http://www.w3.org/TR/html4/loose.dtd">
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="default.css" 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; } P.urgent, .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="code.js"></SCRIPT>

Event Attributes
Defines event handlers for events of specific elements
<INPUT TYPE="Button" onClick="alert('Hi there!');" VALUE="Hi"> <IMG SRC="blue.gif" onMouseOver="this.src='red.gif';" onMouseOut="this.src='blue.gif';" >
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

You might also like