© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 1 Dynamic HTML Minder Chen [email protected]

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 1

Dynamic HTML

Minder [email protected]

http://65.168.115.5/dhtml/


COURSE OVERVIEW

• Overview

This course introduces you to Dynamic HTML, extension of the traditional static HTML document, to create pages that are live and interactive on the client.

• Objective

Upon completion of this course, you should be able to – understand new features of Dynamic HTML– dynamically change the rendering and content of a document– create visually HTML documents that interact with the user without

the burden of relying on server-side programs


TABLE OF CONTENTS

1. Introduction to Dynamic HTML

2. Dynamic Styles2. Dynamic Styles2.1 Cascading Style Sheets2.1 Cascading Style Sheets

2.2 2.2 Dynamic Style and CSSDynamic Style and CSS

2.3 Style Sheet Properties 2.3 Style Sheet Properties

2.4 Dynamic Styles2.4 Dynamic Styles

3. Dynamic Position3. Dynamic Position

4. Dynamic Contents4. Dynamic Contents

5. Data Binding

6. Dynamic HTML Object Model


References

• Shelley Powers, Dynamic HTML, IDG Books, 1998. • Danny Goodman, Dynamic HTML: The Definitive

Reference, O'Reilly, 1998. • Dynamic HMTL tutorial at:

– For cross-browser compatibility by Shelley Powers: http://www.yasd.com/samples/dhtml/toc.htm

– http://www.microsoft.com/workshop/– http://msdn.microsoft.com/workshop/author/css/reference/attributes.asp

• HTML 4.0 Working Draft at http://www.w3.org/TR/WD-html40/

• CSS1 Recommendation at http://www.w3.org/TR/REC-CSS1

• CSS Positioning Working Draft at http://www.w3.org/TR/WD-positioning

• Preliminary version of the Document Object Model requirements document at http://www.w3.org/DOM/drafts/requirements.html


1. Introduction to Dynamic HTML


What Is Dynamic HTML?What Is Dynamic HTML?• HTML is an application of SGML(Standard Generalized Markup Language).HTML is an application of SGML(Standard Generalized Markup Language).

• Dynamic HTML provides authors with total creative control over all aspects Dynamic HTML provides authors with total creative control over all aspects of an HTML document. It extends traditional HTML and Cascading Style of an HTML document. It extends traditional HTML and Cascading Style Sheets to let you access and manipulate all elements of a document—tags, Sheets to let you access and manipulate all elements of a document—tags, attributes, styles, images, objects, and text—creating, moving, and attributes, styles, images, objects, and text—creating, moving, and modifying these elements when needed. modifying these elements when needed.

• In addition to two aspects of tradition HTML: structure and contents. In addition to two aspects of tradition HTML: structure and contents. Cascading Style sheets add the "style" aspect of your web pages. Cascading Style sheets add the "style" aspect of your web pages. Dynamic HTML now includes a fourth component: Dynamic HTML now includes a fourth component: behaviorbehavior, referring to , referring to the interaction between the HTML pages and the user implemented via the interaction between the HTML pages and the user implemented via client-side scripting languages.client-side scripting languages.

• Dynamic HTML is a set of innovative features in Microsoft Internet Explorer Dynamic HTML is a set of innovative features in Microsoft Internet Explorer 4.0 or Netscape Navigator 4.0. By enabling authors to dynamically change 4.0 or Netscape Navigator 4.0. By enabling authors to dynamically change the rendering and content of a document, to create visually outstanding the rendering and content of a document, to create visually outstanding HTML documents that interact with the user HTML documents that interact with the user withoutwithout the burden of relying the burden of relying on server-side programs or complicated sets of HTML pages to achieve on server-side programs or complicated sets of HTML pages to achieve special effects. special effects.


New Features in Dynamic HTML

• HTML 4.0 and CSS (Cascading Style Sheet) support – IE 4.0 support latest HTML 4.0 standard, CSS1 and many of the new

CSS enhancements. These HTML and CSS standards define what is exposed by Dynamic HTML object model

• Full access to the document structure (DOM: Document Object Model)– Through the Dynamic HTML object model, all elements in the

document are accessible and controllable by scripts. You can change colors, typefaces, spacing, indentation, position, and even the visibility of text.

• Dynamic Styles– Use the Dynamic HTML object model to modify the document’s

CSS in order to change the appearance of the document.


New Features

• Dynamic Positioning– Use the Dynamic HTML object model to access and manipulate the positions of

the elements and the layout of pages.

• Dynamic Content– Use the Dynamic HTML object model to change the content of the document

after loading.

• Instant user response (new attributes for events)– Used the Dynamic HTML new event model to exposes all user actions to the

page. Document’s contents or style can be dynamically changed based on use’s interaction.

• Client/server Web page (Data binding)– Tables, forms and reports are extended in IE 4.0. Data is asynchronously

downloaded and stored locally allowing client-side searching and sorting without assistance from server.

• Multimedia and animation effects– Multimedia and animation effects are tightly integrated in IE 4.0. These effects

include filters to simulate light sources, shadows and other effects that operate directly on text or controls. Transition effects between images and text or even pages can also be added.


Programming LanguageProgramming Language

• A programming language is used to manipulate A programming language is used to manipulate the Dynamic HTML Object Model. the Dynamic HTML Object Model.

• Dynamic HTML is designed to be platform Dynamic HTML is designed to be platform independent. Therefore, Java Script, Jscript, independent. Therefore, Java Script, Jscript, VBScript, C++, Java or any other programming VBScript, C++, Java or any other programming language can be used as the language of language can be used as the language of choice.choice.

• This course uses primarily JScript to access This course uses primarily JScript to access the document object model.the document object model.

• Extensions for the Dynamic HTML object model Extensions for the Dynamic HTML object model are compatible with that of past version.are compatible with that of past version.


2. Dynamic Styles


Structure and Style

• Structure provides contexts for the information Structure provides contexts for the information contained with a document. For example, elements H1 contained with a document. For example, elements H1 through H6 are meant to define various header and through H6 are meant to define various header and their relative levels.their relative levels.

• Stylistic tags (physical tags), like <B> and <I> were Stylistic tags (physical tags), like <B> and <I> were introduced mark bold and italic text, were invented to introduced mark bold and italic text, were invented to create an interesting page to attract more hit or visit of create an interesting page to attract more hit or visit of the web site.the web site.

• Confuse the use of Style tag and Structure tags does Confuse the use of Style tag and Structure tags does have consequence.have consequence.– Tools become less powerful. E.g. Indexing toolTools become less powerful. E.g. Indexing tool– Invalidates usefulness of (logical) tags, e.g. <STRONG> tag Invalidates usefulness of (logical) tags, e.g. <STRONG> tag – A properly structured page can improve accessibility to the A properly structured page can improve accessibility to the

underlying information.underlying information.


Structure and Style

• HTML defines a set of rules representing the proper HTML defines a set of rules representing the proper structure of the document. A DTD (Document Type structure of the document. A DTD (Document Type Definition) describes the relationship among elements. Definition) describes the relationship among elements. E.g. H1 can be followed by H1 or H2 but not H3.E.g. H1 can be followed by H1 or H2 but not H3.

• Until mid-1996, HTML fails to be a true SGML (Standard Until mid-1996, HTML fails to be a true SGML (Standard Generalized Markup Language), in which style and Generalized Markup Language), in which style and structure are defined separately. A document written in structure are defined separately. A document written in SGML can have an associated style sheet that defines SGML can have an associated style sheet that defines how the structural elements are rendered.how the structural elements are rendered.

• In mid-1996, a new language named Cascading Style In mid-1996, a new language named Cascading Style Sheets was introduced for specifying style in HTML. Sheets was introduced for specifying style in HTML. The CSS has been adopted by the major browser The CSS has been adopted by the major browser implementations. implementations.


Structure and Style• With CSS a Strong elements (and Bold elements) is no With CSS a Strong elements (and Bold elements) is no

longer presents boldface text. Instead a style sheet is used longer presents boldface text. Instead a style sheet is used to specify how to render text enclosed in the <strong> and to specify how to render text enclosed in the <strong> and </strong> tags. </strong> tags.

<STYLE> <STYLE>

STRONG {font-style:italic}</STYLE>

• CSS (Cascading Style Sheets) support gives web authors CSS (Cascading Style Sheets) support gives web authors word processor-like control over the text in HTML word processor-like control over the text in HTML documents so you can define complex styles for things like documents so you can define complex styles for things like paragraphs, documents, and collections of documents so paragraphs, documents, and collections of documents so you can create extensive and dramatic page layout settings. you can create extensive and dramatic page layout settings.

• To take full advantage of Dynamic HTML, document should To take full advantage of Dynamic HTML, document should separate the content structure from the presentation/style.separate the content structure from the presentation/style.


Sample Style Definition

• H1 { font-size: x-large; color: green }• H2 { font-size: large; color: blue }• .x { color: red }• P.note { font-size: small }• #footer { font-family: serif }

– H1 and H2 are selectors, which correspond to style names.

– The selector's properties and values are contained within the curly braces { }.

• font-size is a property, and x-large is the value of the font-size property.

• You can specify multiple properties for a selector by separating each with a semi-colon ( ; ).

– .x is a class selector – .note is a class selector, and #footer is an ID selector.


Defining and Using Styles<html><head><title>Style Sheet</title><style type="text/css"></style> </head> <body><h1>Heading 1</h1><p>This is a test</p><p class="class1">This is a test. </p><h2 style="font-weight: bold; font-style: italic; border: medium none">Heading

2 </h2><p style="font-weight: bold; font-style: italic; border: medium none">This is a

<span style="font-weight: bolder; font-style: normal; color: rgb(128,0,128)">span </span>example. </p>

<p class="class1" id="A1">Using id1 ...</p> </body> </html>


2.1 Cascading Style Sheets

All the styles will "cascade" into a new "virtual" Style Sheet by the following rules, where number four has the highest priority:

1.Browser default 2.External Style Sheet 3.Internal Style Sheet (inside the <head> tag) 4.Inline Style (inside HTML element)


Cascading Style Sheets (CSS)

• CSS is a language with a set of properties for defining CSS is a language with a set of properties for defining the appearance of a HTML document, and adding the appearance of a HTML document, and adding dynamic styledynamic style to a page through a script. to a page through a script.

• Style sheet contains only the definition of the style of a Style sheet contains only the definition of the style of a document, so as to separate the style from either the document, so as to separate the style from either the contents or structure.contents or structure.

• The term The term CascadingCascading in CSS refers to the ability to in CSS refers to the ability to merge multiple style sheets to form a single style merge multiple style sheets to form a single style definition for an element or for the entire document.definition for an element or for the entire document.

• There are three techniques for adding a style sheet to There are three techniques for adding a style sheet to document:document:– Inline style– Global style sheet– Linked style sheet


Defining Style Sheets in Web Pages

• Inline styles<P STYLE="color: olive; font-size: 18pt">

• Embedded style sheet<STYLE TYPE="text/css">BODY {background-color: white; margin-left: 1.0in}</STYLE>

• Linked and imported style sheets– Linked style sheets

<HEAD><TITLE>Test</TITLE><LINK REL=STYLESHEET TYPE="text/css" HREF="style1.css"></HEAD>

– Imported style sheet<STYLE TYPE="text/css">@import url(basic.css)</STYLE>


Inline Style

• An inline style is simple: the style is defined directly on the An inline style is simple: the style is defined directly on the element, using element, using STYLE STYLE attribute. For example, using STYLE attribute. For example, using STYLE attribute to create a centered paragraph with a large font.attribute to create a centered paragraph with a large font.

inline_style1.html

<html> <body> <P STYLE="font-size:120%; text-align:center"> This creates a centered paragraph with a large font. </p> <P STYLE="font-size:90%;text-align:right; background:red"> This creates a red, righted paragraph with a smaller font </p> </body></html>


Inline Styles

• An Inline style is basically an style sheet for a single An Inline style is basically an style sheet for a single instance of an element and is specified in element’s instance of an element and is specified in element’s begin tag. begin tag.

• Inline style can help you learn the style sheet language Inline style can help you learn the style sheet language or quickly change a single instance of an element. or quickly change a single instance of an element. However, Inline style does not reflect true spirit of a However, Inline style does not reflect true spirit of a structured document. So that it is not much different structured document. So that it is not much different from traditional HTML. With inline styles, the from traditional HTML. With inline styles, the appearance of the document can not be easily changed.appearance of the document can not be easily changed.

• Better approaches: Style sheet should be specified Better approaches: Style sheet should be specified either in the beginning of document or put it into either in the beginning of document or put it into another document to be linked when needed.another document to be linked when needed.


Global Style Sheet

• A Global Style Sheet is to define the style of a A Global Style Sheet is to define the style of a document at the beginning of the document.document at the beginning of the document.

• The <STYLE> tag in the document’s header is used to The <STYLE> tag in the document’s header is used to add a global style sheet to a document.add a global style sheet to a document.

• Centralizing all the document’s style in a single location Centralizing all the document’s style in a single location makes it easy to modify how the document is rendered.makes it easy to modify how the document is rendered.

• To change the rendering of all paragraphs, only this To change the rendering of all paragraphs, only this single entry in global style sheet needs to be modified. single entry in global style sheet needs to be modified. Every time a new rule is added or removed or a style is Every time a new rule is added or removed or a style is changed, the entire document is recalculated.changed, the entire document is recalculated.


Global Style Sheet

global_sheet1.html

<HTML><HEAD>

<STYLE TYPE=“text/css”>P {font-size:200%; text-align:center}

</STYLE></HEAD><BODY>

<P>All paragraphs are now larger and centered.</P>

<p>This paragraph is also larger and centered</p></BODY>

</HTML>


Defining A Style Sheet

• A style sheet is created by CSS language which A style sheet is created by CSS language which consists of consists of selectors selectors and and presentation rulespresentation rules. . – Selector specifies the elements that are associated with

particular presentation rule

– Presentation rules specify how elements are rendered.• There are two type of selectors There are two type of selectors

– Simple selector can be

• ELEMENTS,• CLASS attribute of elements, or • ID of specific style.

– Contextual selector is associated with particular element containership- e.g., all <EM> tags inside <P> tags.


Identifying Elements

• HTML exposes a set of attributes of elements objects, HTML exposes a set of attributes of elements objects, such as H1, P, that make them easy to identify in various such as H1, P, that make them easy to identify in various ways, including tag name, and the ID,CLASS and NAME ways, including tag name, and the ID,CLASS and NAME attributes:attributes:

Attribute Property Case-Sensitive? Applicable

Elements

(None) tagName Always Uppercase All, including comments

ID id Yes All, except comments

CLASS className Yes All, except comments

NAME name Yes Anchor,Applet, Button, Form, IMG,Input, Map, Meta,Object, Select

and Text Area.


Simple Selector and Its Presentation Rules

H1 {color:blue} /* Change all H1s to blue. */

.large {font-size:120%} /* display all elements with CLASS=“large” in large font. */

#navy {color:blue} /* Give the element with ID=“navy” a blue font. */

H1.wide {letter-spacing:2px} /* Give the H1 elements with CLASS=“wide” wider letter spacing. */


Contextual Selector and Its Presentation Rules

P EM {color:red} /* Change all <EM> elements contained within <P> to red. */

UL LI.large {font-size:120%} /* Make all elements with CLASS=“large” contained within the <LI> element in the <UL> have larger font. */


Global Style Sheets

global_sheet2.html

<HTML>

<HEAD>

<STYLE TYPE="text/css">

.large {font-size:200%}

#navy {color:blue}

</STYLE>

</HEAD>

<BODY>

<H1 CLASS="large"> Larger text. </H1>

<P ID="navy"> This text is blue and with normal size. </P>

</BODY>

</HTML>


Linked Style Sheet

• Linked Style Sheets is the most abstract and powerful Linked Style Sheets is the most abstract and powerful technique to define style separately in another technique to define style separately in another document/file.document/file.

• A linked style sheet is created by the same syntax of A linked style sheet is created by the same syntax of global style sheet.global style sheet.

• The advantage of using a linked style sheet is that all The advantage of using a linked style sheet is that all the rules and styles can be defined and encapsulated in the rules and styles can be defined and encapsulated in a single file that can be shared across multiple a single file that can be shared across multiple documents.documents.

• A linked style sheet can improve performance because A linked style sheet can improve performance because it is cached locally on the client, separate from the it is cached locally on the client, separate from the document, so each document is smaller and the style document, so each document is smaller and the style sheet is downloaded only once.sheet is downloaded only once.


Linked Style Sheet

linked_sheet1.html

<HTML><HEAD>

<LINK REL="stylesheet" TYPE="text/css" HREF="fancy.css">

</HEAD><BODY>

<p>This document uses the styles specified in fancy.css.</p>

<H1>This Header is blue. </H1>

<P> Based on the definition in fancy.css, <EM>these words are turned to red</EM></P>

</BODY></HTML>

fancy.cssP EM {color:red} /* Change all <EM> elements contained

within <P> to red. */H1 {color:blue}


Using FrontPage: Format / Stylesheet...


CSS Example<html><head><title>Sample Page with CSS </title><style TYPE="text/css"></style></head><body><h1>Heading 1 in Blue and 28 pt font </h1><p>This is a standard page with text indented by 0.5 in. </p><p class="extended">Using P.extended class </p><p STYLE="text-indent: 0in ">A paragraph without text indentation. </p></body></html>



More Samples of CSS Features

• These samples present some of the interesting feature These samples present some of the interesting feature of CSS supported by Internet Explorer 4.0of CSS supported by Internet Explorer 4.0

• Example 1 : Example 1 :

Using the Using the list-stylelist-style property, we can replace built-in property, we can replace built-in bullets in lists by custom bullets, such as a GIF. This bullets in lists by custom bullets, such as a GIF. This technique degrades well on down-level browser.technique degrades well on down-level browser.


Custom Bulleted Lists: bullet.html

<HTML><HEAD><TITLE>Custom Bulleted Lists</TITLE> <STYLE TYPE="text/css"> /*Display cool.gif instead of default symbol for the bullet */ UL { list-style-image: URL(cool.gif)} </STYLE> <LINK REL="stylesheet" HREF="samples.css" TYPE="text/css"> </HEAD> <BODY> <H1>Custom Bulleted List</H1> <UL> <LI>You can provide a custom bullet! <LI>The bullets are replaced with cool.gif</LI> <LI STYLE="list-style-image: none; list-style-type: square">Each bullet can be

different </UL> </BODY></HTML>

samples.cssH1 {color:navy} /* Change H1 elements to navy*/


DIV

• HTML elements can be grouped or positioned within HTML elements can be grouped or positioned within containers using <DIV> & </DIV> or <SPAN> & containers using <DIV> & </DIV> or <SPAN> & </SPAN>. </SPAN>.

• <DIV> and <SPAN> are neutral style tags that only <DIV> and <SPAN> are neutral style tags that only apply styles to an elements or groups of elements. apply styles to an elements or groups of elements.

• <DIV> is a block-level element that may contain <DIV> is a block-level element that may contain headings, paragraphs, tables, and other divisions. headings, paragraphs, tables, and other divisions.

• <SPAN> is a text-level element that may be used <SPAN> is a text-level element that may be used midstream in a sentence to apply a style. midstream in a sentence to apply a style.


<DIV>

• Represents different kinds of containers, for example, Represents different kinds of containers, for example, chapter, section, abstract, or appendix, when used with chapter, section, abstract, or appendix, when used with the CLASS attribute. DIV allows the enclosed group of the CLASS attribute. DIV allows the enclosed group of elements to be given a distinctive style. elements to be given a distinctive style.

<DIVALIGN=LEFT|CENTER|RIGHT|JUSTIFYCLASS=container type>

...

</DIV>

• ParametersParameters– ALIGN=LEFT|CENTER|RIGHT|JUSTIFY

Specifies the default horizontal alignment for the contents of the DIV element, when DIV is used with an ALIGN attribute. This is needed for compatibility with deployed browsers and may be overridden by style sheets.


DIV

• CLASS=container type Represents different kinds of containers, for example, chapter, section, abstract, or appendix. DIV allows the enclosed group of elements to be given a distinctive style.

• ExampleExample

<DIV>This text represents a section.</DIV>

<DIV ALIGN=CENTER>This text represents another section.</DIV>


Sample HTML

<html> <head> <title> HTML Sampler Web Page </title></head><body> <h1>HTML Sampler</h1><div><p>This is paragraph 1</p><p>We will show you how to use dynamic HTML. </p></div><p>This course is developed by <a href="http://www.erols.com/aitc/"> Advanced IT

Consulting</a> </p></body></html>


Element Containment with and without <DIV>

Document

<Head>

<BODY>

<H1> Heading

<P> Paragraph 1

<P> Paragraph 2

<P> Paragraph 3

Link

Document

<Head>

<BODY>

<H1> Heading

<P> Paragraph 1

<P> Paragraph 2

<P> Paragraph 3

Link

<DIV> Division 1


Inheritance Chains

HTML

HEAD BODY

Title H1 P P P

HTML

HEAD BODY

Title H1 DIV

P

PA

P A


2.2 Dynamic Style and CSS


Dynamic Styles and CSS

• Dynamic Style is the modification of the style Dynamic Style is the modification of the style sheet associated with the document through a sheet associated with the document through a script.script.

• Rather than define an alternative style sheet Rather than define an alternative style sheet language, Dynamic Styles in IE modify the language, Dynamic Styles in IE modify the document’s CSS-defined style sheet via document’s CSS-defined style sheet via stylestyle property in every element, enable and disable property in every element, enable and disable global and linked style sheets and add rules global and linked style sheets and add rules and change rules on an existing style sheet.and change rules on an existing style sheet.


2.3 Style Sheet Properties


Style Sheet Properties

• Style Sheet Properties control the appearance of an Style Sheet Properties control the appearance of an element’s contents and thereby control the style of a element’s contents and thereby control the style of a document.document.

• Some properties in CSS are defined to be compound Some properties in CSS are defined to be compound properties. For example, the CSS properties. For example, the CSS background background attribute attribute contains information about the background image, contains information about the background image, URL, position : URL, position :

body {background:red URL(cool.gif)}


Background Properties

linked_sheet2_background.html

<HTML> <HEAD>

<LINK REL="stylesheet" TYPE="text/css" HREF=”compound.css"> </HEAD> <BODY>

<p>This document uses the styles specified in fancy.css.</p><H1>This Header is blue. </H1><P> Based on the definition in fancy.css, <EM>these words are turned to red</EM></P>

</BODY></HTML>

compound.css

H1 {color:navy} /* Change H1 elements to navy*/body {background:red URL(cool.gif)}


Referencing Style Sheet Properties in Scripts

• Many CSS properties have a dash in their name (such as Many CSS properties have a dash in their name (such as background-colorbackground-color). The dash isn't a valid character for identifiers in ). The dash isn't a valid character for identifiers in most scripting languages. To get around this little problem, continue most scripting languages. To get around this little problem, continue to use the dashed name when specifying the CSS attribute in HTML to use the dashed name when specifying the CSS attribute in HTML or in a style sheet, but when accessing the attribute as aor in a style sheet, but when accessing the attribute as a script script propertyproperty, remove the dash, and capitalize the next letter. For , remove the dash, and capitalize the next letter. For example: example:

– background-color becomes backgroundColor

– border-left becomes borderLeft

– margin-bottom becomes marginBottom

• The naming rule can be applied generally with one exception. The The naming rule can be applied generally with one exception. The CSS CSS float float property is exposed as property is exposed as styleFloat.styleFloat.

HTML: { background-color: sColor }Scripting: object.style.backgroundColor [=sColor ]


Example

• The following examples use the background-color attribute and the backgroundColor property to specify the background color.

• This example uses an inline style sheet to set the background color to beige. – <SPAN STYLE="font-size:14; background-color:beige"> . . . </SPAN>

• This example uses inline scripting to set the background color to beige. – <SPAN onmouseover="this.style.backgroundColor='beige'"> . . . </SPAN>


Sample Code<html> <head> <title> HTML Sampler Web Page </title><style>.x { text-indent: 0.5in; font-family: Comic Sans MS; font-size: 24pt }</style></head><body > <h1>HTML Sampler</h1><div class="x" ><p>This is paragraph 1</p><p style="font-size: 44pt">We will <SPAN id="sp1" style="background-color:green"

onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='green'" onclick="this.innerText=' Hello World '">

show you how </SPAN> to use dynamic HTML. </p></div><input type="button" value="Hello there, there!"

onclick="document.all.sp1.innerText='Hello 1'"><p>This course is developed by <a href="http://www.erols.com/aitc/">

Advanced IT Consulting</a> </p></body></html>


cssTEXT PROPERTY

• cssTEXT contains an element’s style in the form of a cssTEXT contains an element’s style in the form of a string and you could retrieve the style or copy a style string and you could retrieve the style or copy a style from one element to another. from one element to another.

cssText.html<html> <head> <title>Sharing the cssText Property</title></head> <body> <P ID="p1" STYLE="text-indent:.5in; color:red">

This paragraph is red with a half-inch indent.</P><P ID="p2">This paragraph has a default appearance. Click <INPUT TYPE=BUTTON VALUE="here"

ONCLICK="document.all.p2.style.cssText= document.all.p1.style.cssText;">

to make this paragraph look like the first paragraph.</P> </body></html>

Document object could Document object could be used to retrieve be used to retrieve information about the information about the document, to examine document, to examine and modify the HTML and modify the HTML elements and text elements and text within the document, within the document, and to process events. and to process events.


2.4 Dynamic Styles


Dynamic Styles

• Dynamic styles uses combination of programming Dynamic styles uses combination of programming scripts( VBScript or Java Script) and scripts( VBScript or Java Script) and CSS(Cascading Style Sheets) CSS(Cascading Style Sheets) to modify the appearance of the document. to modify the appearance of the document.

• Dynamic styles are based on the W3C Recommendation for Dynamic styles are based on the W3C Recommendation for Cascading Style Sheets(CSS) specification for static style sheetsCascading Style Sheets(CSS) specification for static style sheets.

• Dynamic Styles are an integral components of interactive Web Dynamic Styles are an integral components of interactive Web pages.pages.

• The style of a document is defined using style sheet and HTML. The style of a document is defined using style sheet and HTML. Dynamic styles have been designed to require no new HTML. CSS Dynamic styles have been designed to require no new HTML. CSS attributes can be set from the style sub-object for each element, attributes can be set from the style sub-object for each element, while regular HTML attributes are accessed as properties on each while regular HTML attributes are accessed as properties on each elementelement

• You can dynamically change the style of any HTML element in a You can dynamically change the style of any HTML element in a document. You can change document. You can change colors, typefaces, spacing, indentation, position, , and even the and even the visibility of text. of text.


Mouse Events

• An An eventevent is a notification that occurs in response to an is a notification that occurs in response to an action, such as a change in state or as a result of the action, such as a change in state or as a result of the user clicking the mouse or pressing a key while viewing user clicking the mouse or pressing a key while viewing the document. the document.

• Dynamic HTML exposes a set of events that allows Web Dynamic HTML exposes a set of events that allows Web authors to respond to most interactions between the authors to respond to most interactions between the user and document.user and document.

• The different states of the mouse are captured by The different states of the mouse are captured by Dynamic HTML Object Model. Mouse events occur Dynamic HTML Object Model. Mouse events occur when the user moves the mouse or clicks the left when the user moves the mouse or clicks the left button. button.


Mouse Events

Event Description

onmousedown Mouse button was pressed

onmousemove Mouse was moved or is being moved

onmouseup Mouse button was released

onclick Left mouse button was clicked, or the default action of an element was invoked.

ondbclick Left mouse button was double-clicked

onmouseover Mouse pointer entered the scope of an element

onmouseout Mouse pointer exited the scope of an element

ondragstarts A drag-and-drop operation was initiated

onselectstart A new selection was initiated over an element using the mouse

onselect A selection is occurring


Use Mouse Events to Change Inline Styles

Inline_style2.html

<html><body>

<H1 ONMOUSEOVER = "this.style.backgroundColor = 'yellow';"

ONMOUSEOUT = "this.style.backgroundColor = '';">

This element turns yellow when the mouse moves over it.

</H1>

</body><html>


Example of Dynamic Styles

dstyle1.html

<html> <head><title>Make me red</title></head> <body> <H1 onmouseover="this.style.color = 'red';">

Make me red</H1> <IMG src="rating2.gif" onmouseover="this.src ='signup.gif';">

<body><html>


Use Script to Dynamically Change Styles

dstyle2.html:

<html><body>

<div style="cursor: hand"

onclick="toggle(document.all.HideShow);">

Click Here</div>

<span style="color: blue" id=HideShow>This will go away</span><br>

This is some text

<script>

function toggle(e) {

if (e.style.display == "none")

{e.style.display = ""; }

else {e.style.display = "none";}

}

</script></body></html>


display vs. visibility Attribute

• display – Indicates whether an element is rendered.

• If set to none, the element is not rendered.

e.style.display = “none”

• If set to one of the other values, the element is rendered. The default is to render the element.

e.style.display = “”;

• visibility– Indicates whether the content of a positioned element is

displayed.

– Acts similarly to that of display.


<SPAN>

• A script object to specify an inline text A script object to specify an inline text container. This element is especially useful container. This element is especially useful for applying CSS styles. for applying CSS styles.

<P>This paragraph contains a single <SPAN STYLE="color: blue">blue</SPAN> word.


Use Script to Dynamically Change Styles

dstyle3.html:

<html><body>

<div style="cursor: hand" onclick="toggle(document.all.HideShow);">

Click Here</div>

<span style="color: blue" id=HideShow>This will go away</span><br>

This is some text

<script>


if (e.style.visibility == "hidden")

{e.style.visibility = "visible";}

else {e.style.visibility = "hidden";}

}

</script> </body></html>


ExpandingList.htm<html><head><title>Expanding List Item</title></head><body bgcolor="#FFFFFF"><ul><div style="cursor: hand; " onClick="toggle(document.all.a1);"> <li><u>Item 1</u> </div><div style="color: blue; display: none" id=a1> <ul> <li>Item 1.1 <li>Item 1.2 </ul> </div></ul><ul><div style="cursor: hand; " onClick="toggle(document.all.a2);"> <li><u>Item 2</u> </div><div style="color: blue; display: none" id=a2> <ul> <li>Item 2.1 <li>Item 2.2 </ul> </div></ul>

<script>


if (e.style.display == "")

{e.style.display = "none";}

else {e.style.display = "";}

}

</script>

</body></html>


class Attribute

• Inline Style is simple and useful but clumsy if there are Inline Style is simple and useful but clumsy if there are more then one property needed to be manipulated. more then one property needed to be manipulated.

• A more effective way to change style for two or more A more effective way to change style for two or more classes in a global style sheet and dynamically change classes in a global style sheet and dynamically change the the classclass attribute of an element. attribute of an element.

• The The classclass attribute of an element is exposed through attribute of an element is exposed through the the className className property.property.


class ATTRIBUTE

changeClassAttribute.html

<HTML><HEAD><TITLE>Changing the class Attribute</TITLE></HEAD>

<STYLE TYPE="text/css">

.yellow {background:yellow; font-weight:bolder}

</STYLE> </HEAD>

<BODY>

<H1 ONMOUSEOVER="this.className = 'yellow';"

ONMOUSEOUT="this.className = '';">This H1 element changes its CLASS attribute when the mouse moves over it. There are two advantages:– Multiple parts of the style can be changed with a single line of code– Modify style by changing style sheet rather than using code

</H1>

</BODY></HTML>


class ATTRIBUTE: animatedButton.html

<HTML><HEAD><TITLE>Animated Buttons</TITLE><STYLE TYPE="text/css">

.over {color:yellow; background:navy}

.down {color:yellow; background:red}</STYLE></HEAD><BODY><H1>Animating Buttons</H1>

<INPUT TYPE=BUTTON VALUE="Demo Button"ONMOUSEOVER="this.className = 'over';" ONMOUSEOUT="this.className = '';" ONMOUSEDOWN="this.className = 'down';" ONMOUSEUP="this.className = 'over';">

</BODY></HTML>


AN EXAMPLE OF CHANGING THE class ATTRIBUTE

ONMOUSEOUT

ONMOUSEOVER

ONMOUSEDOWN


Multiple Style Sheets

• Global style sheets and linked style sheets provides Global style sheets and linked style sheets provides more flexibility of modifying style of a documents. Style more flexibility of modifying style of a documents. Style sheets could be turned on and off, rules could be sheets could be turned on and off, rules could be accessed and changed and new rules can be added,etc.accessed and changed and new rules can be added,etc.

• The Style element supports the DISABLED attribute, The Style element supports the DISABLED attribute, which can be used to control which style sheets are which can be used to control which style sheets are applied to the document.applied to the document.

• This technique is useful for switching between different This technique is useful for switching between different views of the same data. views of the same data.


<HTML><HEAD> <STYLE ID="ex" TYPE="text/css">

#headOnly {display:none} </STYLE> <STYLE ID="hd" TYPE="text/css" DISABLED>

#detail {display:none} DIV {display:none} </STYLE> </HEAD><BODY> <H1>Demonstration of Multiple Views</H1> <H2 ID="headOnly"

ONCLICK="document.styleSheets['hd'].disabled = true; document.styleSheets['ex'].disabled = false;"> Header view, click here for detail view.</H2>

<H2 ID="detail" ONCLICK="document.styleSheets['hd'].disabled = false; document.styleSheets['ex'].disabled = true;"> Detail view, click here for header view.</H2>

<DIV>This is the details</DIV> </BODY></HTML>

Multiple Style Sheets - multipleStyleSheet.html


Multiple Views of The Same Data


3. Dynamic Position


Dynamic Positioning

• Cascading Style Sheets (CSS2) specification provides the Cascading Style Sheets (CSS2) specification provides the syntax for specifying the precise positions of HTML syntax for specifying the precise positions of HTML elements. CSS2 includes CSS1 and elements. CSS2 includes CSS1 and CSS-PositioningCSS-Positioning. .

• There are three types of positioning: static, absolute, and There are three types of positioning: static, absolute, and relative. relative. – Static positioning is the default and corresponds to the traditional Static positioning is the default and corresponds to the traditional

way HTML document are layout. Item is not positionable. way HTML document are layout. Item is not positionable. – Dynamic positioning introduces two new positioning: absolute and Dynamic positioning introduces two new positioning: absolute and

relative.relative.• Absolute positioningAbsolute positioning, an element is taken out of normal flow of the

document and positioned according to the parent coordinate system.• Relative positioningRelative positioning, an element stays in the flow of the document

and is positioned relative to its normal position in the flow.

• To absolutely position text, you should use a SPAN and To absolutely position text, you should use a SPAN and DIV element and generally speaking, both of them can be DIV element and generally speaking, both of them can be used interchangeably.used interchangeably.


Using Layers

• A layer is a container for HTML content, usually delineated by the DIV or SPAN tags, that you can position anywhere on a page. Layers can contain text, images, forms, plug-in objects, and even other layers.

• CSS layers (i.e., CSS-P) position content on a page using the DIV and SPAN tags.

• Netscape layers position content on a page using the Netscape proprietary LAYER and ILAYER tags.

• Positioning properties of layers include left and top (x and y coordinates) and z-index (i.e., stacking order), and visibility.


Absolute Positioning Example

Absolute_position1.html

<HTML> <BODY>This example demonstrates

<SPAN STYLE="position:absolute; top:10px; left:10px"><B>Absolute Positioning.</B>

</SPAN>in a paragraph.

</BODY></HTML>


Relative Positioning Example

Relative_position1.html

<HTML> <BODY>This example demonstrates

<SPAN STYLE="position:relative; top:10px; left:10px"><B>Relative Positioning.</B>

</SPAN>in a paragraph.

</BODY></HTML>

With an relative-positioned element, the anchor point of its positioning context is the top left corner of the place (the box) where the normal flownormal flow of the content should go.


Absolute Positioning Example

Absolute_position2.html

<HTML>

<HEAD><TITLE>Positioning</TITLE>

<BODY>

<H3>Welcome to Dynamic HTML!</H3>

<P>With positioning, you can place images exactly where you want them, even behind text and other images.

<IMG STYLE="position:absolute;top:20; left:10; z-index:-1" SRC="rating2.gif">

</BODY>

</HTML>


Exercise: relative_position3.html

<HTML>


<BODY>


<P>With positioning, you can place images exactly where

<IMG STYLE="position:relative;top:40; left:20; z-index:-1" SRC="signup.gif">

you want them, even behind text and other images.

</BODY>

</HTML>


Block-Level Elements and Box Properties

Box top

Box left margin space

border space

padding space

content space

Box width

Bo

x heig

ht

element width

elemen

t h

eigh

t

• Margin properties• Padding properties• Border properties


CSS Length Units• Measurements and positions in cascading style sheet

(CSS) properties are made using length units. Internet Explorer supports two types of length units: relative and absolute.

• Relative length units– em * The height of the element's font.– ex * The height of the letter "x".– px Pixels.– % Percentage.

• Absolute length units– in Inches (1 inch = 2.54 centimeters).– cm Centimeters.– mm Millimeters.– pt Points (1 point = 1/72 inches).– pc Picas (1 pica = 12 points).


Define Box Properties<html><head><title>CSS1 - Border Properties</title><style TYPE="text/css">

BODY { margin: 50px 30px 50px 30px }P.extended { margin: 15% }

</style></head><body><h1>Margin properties </h1><p>Show the use of CSS1 to set the margins for the web page.</p><p class="extended">Set white space for various other elements </p></body></html>

<style TYPE="text/css">BODY {margin-top: 50px; margin-right: 30px; margin-bottom: 50px margin-left: 30px;}P.extended { margin: 15% }

</style>


100

15


CSS Positioning Properties

Property AllowableValues

Applies To Description

position static |absolute |relative

All elements Specifies type ofpositioning.

top, left auto |<length> |<percentage>

All elements withposition set toabsolute or relative

Defines the top and leftpositions of the elementrelative to its parent.

width, height auto |<length> |<percentage>

All blockelements, replacedelements, andelements withposition set toabsolute

Defines the size of theelement. Percentagesare relative to the parent.


CSS Positioning Properties

Property AllowableValues

Applies To Description

clip auto | rect All elements withposition set toabsolute

Defines the clippingregion for the element.

z-index auto |number

All elements withposition set toabsolute or relative

Specifies an element’sposition overlapping orbeing overlapped byother elements.

visibility inherit |visible |hidden

All elements Specifies whether theelement is visible. Ahidden element is notremoved from thedocument’s flow.

overflow visible |hidden | auto| scroll

All elements withposition set toabsolute and allblock elements.

Specifies whetherscrollbars are displayedif the contents do not fitin the element.


Absolute Positioning Elements in IE 4.0

• Applet• Button• DIV• Fieldset• Iframe• IMG

• Input• Object• Select• Span• Table• TextArea

• Since absolute positioned elements are positionedSince absolute positioned elements are positioned outside the flow/context, the order of the elements outside the flow/context, the order of the elements within the context becomes less important.within the context becomes less important.• In IE 4.0, all elements support relative and staticIn IE 4.0, all elements support relative and static positioning. However, only these following elementspositioning. However, only these following elements support absolute positioning.support absolute positioning.


Coordinate Systems

• Every element that is either absolutely or relatively Every element that is either absolutely or relatively positioned must be positioned relative to another positioned must be positioned relative to another element or position in the document. The location from element or position in the document. The location from which the element is offset is called the which the element is offset is called the rootroot of the of the element’s coordinate system.element’s coordinate system.

– Relatively positioned elements have their root based on their normal flow position in the document.

– Absolutely positioned elements have root to the upper left corner of the document defines the default coordinate system for all absolutely positioned elements.


Size and Position in Coordinate Systems• When an element is positioned either absolutely or relatively, its When an element is positioned either absolutely or relatively, its

toptop and and leftleft properties specify the offset of the element from the properties specify the offset of the element from the upper left corner of the coordinate system. The upper left corner of the coordinate system. The widthwidth and and heightheight properties define the physical width and height of the element. properties define the physical width and height of the element.

• Positioning contextPositioning context of the element: A point somewhere on the of the element: A point somewhere on the screen that has coordinate point (0, 0). screen that has coordinate point (0, 0).

• The The default positioning contextdefault positioning context is the upper left corner of the is the upper left corner of the window or frame. window or frame.

• Each time an element is positioned, it spawns Each time an element is positioned, it spawns a new positioning a new positioning contextcontext with the (0, 0) position located at the top left corner of that with the (0, 0) position located at the top left corner of that element. element.

• For relative sizes, the width and height properties are interpreted For relative sizes, the width and height properties are interpreted relative to the size of the element defining the coordinate system. relative to the size of the element defining the coordinate system.

• The top, left, width, and height properties can be specified as a The top, left, width, and height properties can be specified as a percentage or in any of the units (for example, points, pixels, and percentage or in any of the units (for example, points, pixels, and ems) defined by CSS.ems) defined by CSS.


coordinate_system.html<HTML> <BODY> <DIV STYLE="position:absolute; top:50px; left:50px;

height:200px; width:200px;">absolutely positioned DIV element, create a coordinate system. <DIV STYLE="position:absolute; top:100px;

left:100px; height:100px; width:100px;"> <b>absolutely positioned inside the DIV element.</b> </DIV></DIV>

</BODY></HTML>

Example of Nested Coordinate Systems


Example of Nested Coordinate Systems


Automatic Sizing

• If If top top and and left left properties both set to properties both set to autoauto, a relative , a relative positioned element is displayed the same as static positioned element is displayed the same as static positioned element, an absolutely positioned element is positioned element, an absolutely positioned element is positioned outside the flow but anchored at the positioned outside the flow but anchored at the position it would have as a static positioned element.position it would have as a static positioned element.

• If If widthwidth and and heightheight property is omitted, the element is property is omitted, the element is automatically sized based on its content.automatically sized based on its content.


Automatic Sizing

Coordinate_system_auto_size.html

<HTML>

<BODY>

<DIV STYLE="position:absolute; top:50px; left:50px;

height:200px; width:200px;">

absolutely positioned DIV element, create a coordinate system.

<DIV STYLE="position:absolute; top:auto;

left:auto; height:100px; width:100px;">

<b>absolutely positioned inside the DIV element with automatic sizing feature.</b>

</DIV>

</DIV>

</BODY>

</HTML>


The visibility and z-index Properties

• An element is visible based on whether its parent An element is visible based on whether its parent element is visible because by default the element is visible because by default the visibilityvisibility is is inheritedinherited. It can be overwritten with either . It can be overwritten with either hiddenhidden or or visiblevisible..

• z-index z-index property defines the graphical z-order or property defines the graphical z-order or overlapping, of elements in relation to the other overlapping, of elements in relation to the other elements. All elements that define a coordinate system, elements. All elements that define a coordinate system, including the <BODY> element are positioned with a z-including the <BODY> element are positioned with a z-index of 0 in default. To place an element behind them, index of 0 in default. To place an element behind them, specified a negative z-index.specified a negative z-index.


visibility Property in Coordinate System

coordinate_system_hidden.html

<HTML>

<BODY>

<DIV STYLE="position:absolute; top:50px; left:50px;

height:200px; width:200px;">

absolutely positioned DIV element, create a coordinate system.

<DIV STYLE="position:absolute; top:auto;

left:auto; height:100px; width:100px;

visibility = 'hidden'">

<b> absolutely positioned inside the DIV element.</b>

</DIV>

</DIV>

</BODY>

</HTML>


z_index

z_index.html

<HTML>


<BODY>


<P>With positioning, you can place images exactly where you want them, even behind text and other images.

<IMG STYLE="position:absolute; top:20; left:10; z-index:1" SRC="signup.gif">



<div id="title1"><h2><a href="http://www.yasd.com/services">Services</a></h2></div>

<div id="title2"><h2><a href="http://www.yasd.com/sites">Sites</a></h2></div>

<div id="title3"><h2><a href="http://www.yasd.com/scribbles">Scribbles</a></h2></div>

<div id="title4"><h2><a href="http://www.yasd.com/samples">Samples</a></h2></div>

<p>

<img src="yasd.gif" id="logo" width="104" height="152">

<a href="http://www.yasd.com/services"> <img src="menua.jpg" border="0" id="image1"

width="101" height="151"></a>

<a href="http://www.yasd.com/sites"><img src="menub.jpg"

border="0" id="image2" width="102" height="151"></a>

<a href="http://www.yasd.com/scribbles"> <img src="menuc.jpg" border="0" id="image3" width="101" height="151"></a>

<a href="http://www.yasd.com/samples"> <img src="menud.jpg"

border="0" id="image4" width="101" height="151"></a> </p>

</body></html>


clip Property

• Each absolutely positioned element has a Each absolutely positioned element has a clipping clipping regionregion associated with it. The purpose of this clipping associated with it. The purpose of this clipping region is to define the portion of the document region is to define the portion of the document

available for displayingavailable for displaying the element and its the element and its contents. Anything outside that portion is clipped, or contents. Anything outside that portion is clipped, or not displayed.not displayed.

• The default value of the The default value of the clipclip property is property is autoauto, which , which causes the contents not to be clipped. The clip causes the contents not to be clipped. The clip

property can be set to be a rectangleproperty can be set to be a rectangle:

clip:rect(top right bottom left )


Example on Clipping: clip.html

<HTML> <HEAD><TITLE>Clip the DIV</TITLE></HEAD> <BODY> <DIV STYLE = "position:absolute; top:50; left:50;

height:100; width:100; clip:rect(0 60 60 0);background-color:yellow">some content some content some content some content <br>some content some content some content some content <br>some content some content some content some content <br>some content some content some content some content <br></DIV>

</BODY></HTML>


The overflow Property

• The The overflowoverflow property controls how any contents that property controls how any contents that extend beyond the physical size of the element are extend beyond the physical size of the element are handled.handled.

• The The overflowoverflow property takes one of four values: property takes one of four values: visible, visible, hidden, autohidden, auto, and, and scroll scroll..– overflow = visible, all contents are displayed, even contents outside

the specified height and width of the element.– overflow = hidden, only the contents within the element’s height and

width are displayed; no contents flow beyond the specified boundaries.

– overflow = auto, scrollbars are added when the contents are larger than the height and width of the element.

– overflow = scroll, scrollbars are added regardless of the size of the contents.


Example of overflow set to scroll

<HTML> <HEAD> <TITLE>Scrolling Sidebar</TITLE> </HEAD> <BODY> <H1>Scrolling Sidebars</H1>

<DIV STYLE="overflow:scroll; float:left; width:120pt; height:120pt"> <H2>Scrolling Sidebar</H2> <P>This text appears in a scrolling window that is floating to the left of the main contents.</P> </DIV> <P>These contents appear to the right of the scrolling DIV element. </BODY></HTML>


Example of overflow = scroll


overflow = auto When Content Size Is Less Than Boundary

<DIV STYLE="overflow:auto; float:left; width:200pt; height:100pt">


Overflow Set to Auto When Content Size Is Bigger Than Boundary

<DIV STYLE="overflow:auto; float:left; width:100pt; height:100pt">


Creating Sidebars• Traditionally, sidebars are created using tables, but with Traditionally, sidebars are created using tables, but with

floatfloat property in CSS tables are no longer required. property in CSS tables are no longer required.• <DIV> in the example <DIV> in the example sidebar.html is to assign a class is to assign a class

to text contents and the to text contents and the floatfloat property can be set in a style property can be set in a style rule for that class. rule for that class.

• There are 2 types of sidebars created in There are 2 types of sidebars created in sidebar.html– Sidebars are surrounded by text, similar to images, aligned along the left

and right edge.– Sidebars are out of the margins of the flow of the document.


sidebar.html<HTML><HEAD><TITLE>Sidebar Example</TITLE><STYLE TYPE="text/css"> BODY {margin-left: 144pt; margin-right:0pt} .inflow {float: left; width:144pt; color: blue; font-weight: bold} .outflow {float: left; margin-left: -72pt; width: 144pt; color: brown; font-weight: bold} </STYLE> </HEAD> <BODY> <H1>Sidebar Example</H1> <DIV CLASS="inflow">Notice that the text is wrapping around this sidebar. </DIV> <P>This example demonstrates a sidebar that exists within the flow of the document.

The contents wrap around the sidebar and continue below it. </P><DIV CLASS="outflow"> <p align="left"> This sidebar appears in the left margin of the document. </DIV> <P> This example demonstrates how to manipulate a document's margins to force a sidebar to float in the margin. By adjusting the margins, the sidebar can also be made to overlay the flow of the contents. </P> </BODY></HTML>


4. Dynamic Contents


Dynamic Contents

• Dynamic content is all about changing the content of Dynamic content is all about changing the content of the HTML document—inserting and deleting elements the HTML document—inserting and deleting elements or the contents of an element before or or the contents of an element before or afterafter the the document has been loaded. document has been loaded.

• The contents of an elements within a document is The contents of an elements within a document is exposed through four properties and two methods. exposed through four properties and two methods. Properties are Properties are innerHTMLinnerHTML, , innerTextinnerText, , outerHTMLouterHTML, and , and outerTextouterText and methods are and methods are insertAdjacentHTMLinsertAdjacentHTML and and insertAdjacentTextinsertAdjacentText


Dynamic Contents Properties

• The basic difference between The basic difference between innerHTML innerHTML and and outerHTML outerHTML properties on one hand and properties on one hand and innerText and innerText and outerTextouterText on the other hand is that HTML properties on the other hand is that HTML properties expose the entire markup while TEXT properties expose expose the entire markup while TEXT properties expose contents without the markup.contents without the markup.

<H1 id=myH1>Dynamic Content is <I>Very Cool<I>!</H1>

• For the H1 element, the following table lists values of For the H1 element, the following table lists values of four properties:four properties:

Property Value

innerText Dynamic Content is very coolinnerHTML Dynamic Content is <I>very cool</I>outerText Dynamic Content is very coolouterHTML <H1 id=myH1>Dynamic Content is <I>Very

Cool<I>!</H1>


innerText vs. innerHTML

• innerTextinnerText and and innerHTML innerHTML properties represent the properties represent the contents of the element, including any elements contents of the element, including any elements contained by that element. contained by that element.

• InnerTextInnerText

document.all.myH1.innerText = “DHTML is Very Cool”

– The content of the H1 in previous example can be changed with the innerText property.

– The H1 element remains in the document, while the content of the H1 changes to contain the new string "DHTML is Very Cool".

– The string assigned to innerText renders any HTML tags as text, and does not process the HTML. To insert HTML code into the contents of another element, you must use the innerHTML


innerText vs. innerHTML

• innerHTMLinnerHTML

document.all.myH1.innerHTML = "DHTML is <I>Very</I> Cool!”

– The new string replaces the original content of the H1, and the word "Very" appears in italic.


outerText and outerHTML

• The ourtText The ourtText andand outterHTML properties represent the outterHTML properties represent the element itself, as well as the contents of the element. element itself, as well as the contents of the element.

• Assuming that the preceding example is contained by a Assuming that the preceding example is contained by a BODY elementBODY element

• outerTextouterText

document.all.myspan.outerText = "DHTML is VERY Cool!"

– replaces the entire element with the string attached and causes the H1 to go away entirely, and the text string appears where the element was in the flow of the BODY 's content.


outerText vs. outerHTML

• outerHTML

document.all.myH1.outerHTML = "<SPAN STYLE = 'height:0; width:200; FILTER:Shadow(color=#00FF00)’ >RICH HTML</SPAN>";

– replaces the element with rich HTML. Much like the example above where HTML was inserted in the H1, using the outerHTML property will do the same, except the H1 would also be removed.


Exercise: dyn_content1.html

<html><head><title>Dynamic Contents</title></head><body>

<h1 id="myH1">This is a test</h1>

<form method="POST" action="return false;">

<input type="button" value="Change innerHTML"

onClick="document.all.myH1.innerHTML='This is a <i>test</i>'" name="B1">

<p><input type="button" value="Change innerText"

onClick="document.all.myH1.innerText='This is a <i>test</i>'" name="B2">

<p><input type="button" value="Change outerHTML" onClick="document.all.myH1.outerHTML='<h2>This is a <i>test</i></h2>'" name="B3">

<p><input type="button" value="Change outerText" onClick="document.all.myH1.outerText='<h2>This is a <i>test</i></h2>'" name="B4">

</form></body></html>


insertAdjacentHTML and insertAdjacentText.

• insertAdjacentHTMLinsertAdjacentHTML and and insertAdjacentText insertAdjacentText insert insert contents before or after the begin or end tag. The contents before or after the begin or end tag. The methods can inset text at one of the four position: methods can inset text at one of the four position: beforeBegin, afterBegin, beforeEnd and and afterEnd. The . The following example shows the values of the four following example shows the values of the four properties and where these positions are for element properties and where these positions are for element H1.H1.


Dynamic Content Properties & Positions

<H1>Welcome to <EM>Dynamic HTML</EM> class.</H1>

beforeBegin

afterBegin beforeEnd

afterEnd

Property Value

innerText Welcome to Dynamic HTML class

innerHTML Welcome to <EM> Dynamic HTML </EM> class

outerText Welcome to Dynamic HTML class

outerHTML <H1>Welcome to <EM> Dynamic HTML </EM>class</H1>


Example on Replacing Content

hid_button.html

<HTML><HEAD><TITLE>Disappearing Button</TITLE> </HEAD> <BODY> <H1>Replacing an Element</H1> <INPUT TYPE=BUTTON VALUE=“Click me!" ONCLICK="this.outerHTML =

'<B>Welcome to Dynamic HTML class!</B>' "> </BODY></HTML>

** INPUT : A HTML form element


Example of insertAdjacentHTML

beforeBegin.html

<HTML><HEAD><TITLE>Disappearing Button</TITLE> </HEAD> <BODY> <P ONCLICK="this.insertAdjacentHTML(

'beforeBegin', '<B>Welcome! </B>');">Please click here.</P>

</BODY></HTML>


Example of insertAjacentHTML

beforeEnd.html

<HTML><HEAD><TITLE>Dynamic Content: Inserting Elements</TITLE>

<SCRIPT LANGUAGE="JScript">function insertPara(){ document.body.insertAdjacentHTML("BeforeEnd", "<P>But adding a

line makes it less so."); }</SCRIPT>

</HEAD><BODY onload="insertPara()"><P>This is a <B>very</B> short document.</P></BODY>

</HTML>


5. Data Binding


What is Data Binding

• IE 4.0 enables content providers to develop data-centric IE 4.0 enables content providers to develop data-centric Web applications that support retrieval and update Web applications that support retrieval and update through native data binding facilities. through native data binding facilities.

• Data binding technique makes data-driven pages easy Data binding technique makes data-driven pages easy to author with minimal scripting required. Once data is to author with minimal scripting required. Once data is downloaded to the client asynchronously the data can downloaded to the client asynchronously the data can be sorted and filtered without requiring additional trips be sorted and filtered without requiring additional trips to the server. So that pages render quickly and provide to the server. So that pages render quickly and provide immediate interactivity. Compare that to traditional Web immediate interactivity. Compare that to traditional Web pages and those generated by server-side scripts. Once pages and those generated by server-side scripts. Once the data reaches the client, it's static, and any the data reaches the client, it's static, and any manipulation of that data requires another server manipulation of that data requires another server request. request.


Data Binding Architecture

• Data binding is based on a component architecture Data binding is based on a component architecture consisting of four major pieces: consisting of four major pieces:

– Data source objects to provide the data to a page

– Data consumers, the data-consuming HTML elements display the data

– The binding agent ensure that both provider and consumer are synchronized

– The table repetition agent.


Data Binding Architecture


dept.htm

<object id="depttbl" width="0" height="0"classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="dept.txt"> <param name="FieldDelim" value=","> <param name="TextQualifier" value=""> <param name="UseHeader" value="True"> </object><table id="test" datasrc="#depttbl" border=1> <THEAD> <tr><td>ID</td><td>Name</td></td></tr> </THEAD><TBODY><tr><td><SPAN DATAFLD="ID"> </SPAN></td> <td align=right><SPAN DATAFLD="Name"></SPAN></td></tr> </TBODY></table></body></html>


dept.txt

ID,Name

BIOL,Biology

ANIM,Animation


repeat.html


repeat.html

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Repeated Table Data Binding</title>

</head>

<style>

.thd

{ color: "#0000FF";

font-weight: bold;

text-decoration: underline;

cursor: hand

}

</style>


repeat.html

<Body TOPMARGIN=0 LEFTMARGIN=40 BGCOLOR= "#FFFFFF"

LINK= "#000066" VLINK= "#666666" TEXT= "#000000">

<FONT FACE="verdana,arial,helvetica" SIZE=2>

<body>

<H2>Repeated Table</H2>

<object id="stocklist" width="0" height="0"

classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">

<param name="DataURL" value="smalldat.txt">

<param name="FieldDelim" value="|">

<param name="TextQualifier" value="">

<param name="UseHeader" value="True">

</object>


repeat.html <table id="stocktbl" datasrc="#stocklist" border=1>

<THEAD>

<tr onclick=sort()>

<td class=thd><DIV id=Symbol>Symbol</DIV></td>

<td class=thd><DIV id=Last>Last</DIV></td>

<td class=thd><DIV id=Change>Change</DIV></td>

<td class=thd><DIV id=Volume>Volume</DIV></td>

</tr>

</THEAD>

<TBODY>

<tr>

<td><A DATASRC="Website"><SPAN DATAFLD="Symbol"> </SPAN> </A> </td>

<td align=right><DIV DATAFLD="Last"></DIV></td> <td align=right><SPAN DATAFLD="ChangeF" DATAFORMATAS=HTML></SPAN></td>

<td align=right><DIV DATAFLD="Volume"></DIV></td>

</tr>

</TBODY></table>


repeat.html

<script language="JavaScript">

function sort()

{

if (event.srcElement.id != "")

{

stocklist.Sort=event.srcElement.id;

stocklist.Reset()

}

}

</script>

</body>

</html>


6. Dynamic HTML Object Model


What is Object Model

• The object model is the mechanism that makes Dynamic The object model is the mechanism that makes Dynamic HTML programmable. It doesn't require that authors HTML programmable. It doesn't require that authors learn new HTML tags, and it doesn't involve any new learn new HTML tags, and it doesn't involve any new authoring technologies. In fact, the object model builds authoring technologies. In fact, the object model builds on functionality that authors have used for creating on functionality that authors have used for creating content for previous browsers.content for previous browsers.

• Dynamic HTML's Document Object Model allows authors Dynamic HTML's Document Object Model allows authors direct, programmable access to the individual direct, programmable access to the individual components of their Web documents, from individual components of their Web documents, from individual elements to containers. Combined with the event model, elements to containers. Combined with the event model, object model allows the browser to react to user input object model allows the browser to react to user input ( such as move mouse over a particular element, press a ( such as move mouse over a particular element, press a key ), execute scripts on the fly, and display the new key ), execute scripts on the fly, and display the new content without downloading additional documents from content without downloading additional documents from a server. a server.


Accessing Elements with Script

• Every HTML element is a scriptable object in the Object Every HTML element is a scriptable object in the Object Model , with its own set of properties, methods and Model , with its own set of properties, methods and events. However, to write script for each element events. However, to write script for each element object, the author must know how to get to an element. object, the author must know how to get to an element.

• The object model is focused around collections of The object model is focused around collections of elements, a hierarchy of groupings that the elements elements, a hierarchy of groupings that the elements fall into. The most important of these collections are the fall into. The most important of these collections are the ""allall" collection and the "" collection and the "childrenchildren" collection. " collection.

• A Dynamic HTML document is a structured A Dynamic HTML document is a structured arrangement of elements—for instance, in the following arrangement of elements—for instance, in the following document, each element has a scope of influence document, each element has a scope of influence which depends on where in the document the tags which depends on where in the document the tags appear.appear.



<HTML><BODY>

<DIV><P>Some text in a <B>paragraph</B> </P><IMG id=image1 src="mygif.gif">

</DIV><IMG id=image2 src="mygif.gif">

</BODY></HTML>

• The DIV contains (and is the parent of) the P tag and the IMG called image1. Conversely, image1 and the P are children of the DIV. The IMG tag called image2, however, is a child of the BODY. And all elements are children of the HTML element.



• All and Children collection

– For each element object, there is an "all" collection which contains all of the elements that are beneath that element in the hierarchy, and a "children" collection which contains only the elements that are direct descendants of that element.

– In the example above, the B would be in the DIV's all collection, but would not appear in the DIV's children collection. Similarly, the DIV is a member of BODY's children collection, but the P is not.

• In addition to these collections for each element, the document itself (represented by the document object) has a number of element and non-element collections. The most important is an all collection that contains all of the elements on the Web page. This

all collection is the primary way to access elements through script.


Events

• Clicking a button, moving the mouse over part of the Clicking a button, moving the mouse over part of the Web page, selecting some text on the page—these Web page, selecting some text on the page—these actions all fire actions all fire eventsevents that a DHTML author can write that a DHTML author can write code to run in response to the event. This particular code to run in response to the event. This particular piece of code is generally known as an piece of code is generally known as an event handlerevent handler because that's what it does, handles events. because that's what it does, handles events.

• Here is a set of common events that every HTML Here is a set of common events that every HTML element generates in Internet Explorer 4.0: element generates in Internet Explorer 4.0:

– Mouse event

– Keyboard event


Keyboard Events

• Keyboard event:Keyboard event:

Keyboard event Generated when the user

onkeypress Presses and releases a key (full down-and-up cycle). However, if a key is held down, multiple onkeypress events will be fired.

Onkeydown Presses a key. Only a single event will be fired, even if the key is held down.

Onkeyup Releases a key.


window Object

• The The window window object is the root of the object hierarchy. All properties object is the root of the object hierarchy. All properties in the object model are either accessed as properties of the window in the object model are either accessed as properties of the window object or as properties of those properties. object or as properties of those properties.

• Because the current window object is implied, you do not need to Because the current window object is implied, you do not need to prefix the property with the window keyword. However, many people prefix the property with the window keyword. However, many people prefer to use the keyword to ensure that their scripts are as clear prefer to use the keyword to ensure that their scripts are as clear and readable as possible. For example: and readable as possible. For example:

status = "hello";is the same as saying: is the same as saying:

window.status = "hello"; and both will work when referring to the current window object. and both will work when referring to the current window object.

• Many of the properties of the window object can be used to carry Many of the properties of the window object can be used to carry out simple tasks, such as displaying messages, prompting for input, out simple tasks, such as displaying messages, prompting for input, and loading new documents into the window. and loading new documents into the window.

• For example, you can display a simple modal message box from the For example, you can display a simple modal message box from the current window by using the current window by using the alert alert method and change the text in method and change the text in Internet Explorer's status bar by using the Internet Explorer's status bar by using the status status property, as in the property, as in the following example.following example.


window Object

Window.html

<HTML> <HEAD><TITLE>A Simple Document</TITLE>

<SCRIPT LANGUAGE="JScript">function doAlert() { window.status = "Page is loaded!"; alert("Page is loaded!");}</SCRIPT>

</HEAD> <BODY onload="doAlert()">

<P>This is a very short document. </BODY></HTML>


Event Handling: bubbling Event.htm

<HTML><BODY onclick="wasClicked()"><H1>Welcome!</H1><P onclick="wasAlsoClicked()">This is a very <B>short</B> document.<SCRIPT LANGUAGE="JavaScript">function wasClicked() { alert("I was clicked " + window.event.srcElement.tagName);}function wasAlsoClicked() { alert("You clicked me " + window.event.srcElement.tagName);}</SCRIPT></BODY></HTML>


window Object

• There can be more than one window object at a time. There can be more than one window object at a time. For example, the browser creates one window object For example, the browser creates one window object for each frame defined within a document. From the for each frame defined within a document. From the scripting perspective, the current window object is scripting perspective, the current window object is always the one that contains the document which always the one that contains the document which contains the script. To access window objects other contains the script. To access window objects other than the current window object, you precede the than the current window object, you precede the property with a window reference. property with a window reference.

• The window.open method returns a reference to this The window.open method returns a reference to this new window that is then used in scripts to access new window that is then used in scripts to access properties and methods of the new window. properties and methods of the new window.


Document Object Model (DOM)

• The Dynamic HTML document object model allows authors direct, programmable access to the individual components of their Web documents, from individual elements to containers.

• This access, combined with the event model, allows the browser to – react to user input,

– execute scripts on the fly, and

– display the new content without downloading additional documents from a server.

• The document object model puts sophisticated interactivity within easy reach of the average HTML author.


Object Model Hierarchy• Window

– location– frames– history– navigator (navigation/client information) – event– screen– document

all forms anchors links body images frames selection styleSheets scripts applets

window.document.images(0).src="test.gif"document.images(0).src="test.gif"


Window Properties and Methods

• Properties– document– history– location– navigator– opener: Reference to the window that opened the current window– self– status

• Methods– alert – open: open a new browser window– settimeout– setInterval – confirm– close


Document Object

• Properties– cookie– bgColor– parentWindow– title

• Methods– close: close the document and displays contents– open: open document for write method – write: write HTML code to document– writeln– clear


Location, History, and Navigator

• navigator.userAgent

• navigator.appVersion

• history.back

• history.forward

• history.go(URL)

• location.reload


Object.htm


Object.htm<HTML><HEAD><SCRIPT language="javascript"> </SCRIPT> </HEAD><BODY onload="defaultStatus='my default'"><a href="" onclick="javescript: history.back();">Back to previous page. </a><br><input type="button" value="Update status" onclick="update_status()"><br><img src="rating2.gif"><br><input type="button" value="Change image" onclick="change_image()"></BODY></HTML>


window Object

new_window.html

<HTML><HEAD><TITLE>Creating a Window</TITLE></HEAD><BODY><P><BUTTON onclick="window.open('sample.htm')">Open Sample</BUTTON>

</BODY></HTML>


Open a New Browser Window: openwindow.htm<html><head><script language="javascript">



</script>

<title>Open Windows</title></head>

<body onLoad="status='Window is closed'">

<form><input type="button" value="open" onClick="makeNewWindow()">

</form></body></html>


Keeping Multiple Windows In Focus• When working with multiple windows, it's important to keep track of which windows are

open, and which are in view, so that visitors to your site are able to see the windows that you intend them to see. Creating a reference to each of the windows that you open will allow you to refer to any of those windows from the current page. Then you can use the closed Window property and the focus Window method to keep track of each of your new windows. The closed property returns true if the window object reference is closed, and false if it's not. This is an important property to question, since if you create a reference to a window and then close the window, the reference to the window still exists, and trying to use it will result in an error. The focus method brings the referenced window to the front of all of the windows.

if (!myWindow || myWindow.closed)

myWindow = open ("newpage.htm");

else

myWindow.focus();• In the code, we first check to make sure that a window with the reference myWindow

doesn't already exist (!myWindow) or if it has been opened, but is now closed (myWindow.closed). If either of these is true, we open a new window with the reference myWindow. If the window already exists, we use the focus method to bring the window into focus so that the user can see it.


Interaction between Two Windows


Openwindow2.htm

<html><head><script language="javascript"></script><title>Open Windows</title></head><body onLoad="status='Window is closed'"><form name="myForm"> <p>Enter your name: <input type="text" name="MyName"> <input

type="button" value="Get Guest Name" onClick="makeNewWindow()"> </p></form></body></html>


getname.htm

<HTML><HEAD><TITLE>Get Name</TITLE><script language="javascript"></script></HEAD><BODY><form name="getForm">Enter your name: <input type=text

name="GuestName"> <br><input type=button onClick="send()" value="return name"> </BODY></HTML>

Date post:	12-Jan-2016
Category:	Documents
Upload:	dorthy-hall
View:	217 times
Download:	0 times

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 1 Dynamic HTML Minder Chen [email protected]

Documents