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

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 2 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

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 3 TABLE OF CONTENTS 1. Introduction to Dynamic HTML 2. Dynamic Styles 2.1 Cascading Style Sheets 2.2 Dynamic Style and CSS 2.3 Style Sheet Properties 2.4 Dynamic Styles 3. Dynamic Position 4. Dynamic Contents 5. Data Binding 6. Dynamic HTML Object Model

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 4 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

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 6 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 of an HTML document. It extends traditional HTML and Cascading Style Sheets to let you access and manipulate all elements of a document—tags, attributes, styles, images, objects, and text— creating, moving, and modifying these elements when needed.Dynamic HTML provides authors with total creative control over all aspects of an HTML document. It extends traditional HTML and Cascading Style Sheets to let you access and manipulate all elements of a document—tags, attributes, styles, images, objects, and text— creating, moving, and modifying these elements when needed. In addition to two aspects of tradition HTML: structure and contents. Cascading Style sheets add the "style" aspect of your web pages. Dynamic HTML now includes a fourth component: behavior, referring to the interaction between the HTML pages and the user implemented via client-side scripting languages.In addition to two aspects of tradition HTML: structure and contents. Cascading Style sheets add the "style" aspect of your web pages. Dynamic HTML now includes a fourth component: behavior, referring to the interaction between the HTML pages and the user implemented via client-side scripting languages. 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 the rendering and content of a document, to create visually outstanding HTML documents that interact with the user without the burden of relying on server-side programs or complicated sets of HTML pages to achieve special effects.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 the rendering and content of a document, to create visually outstanding HTML documents that interact with the user without the burden of relying on server-side programs or complicated sets of HTML pages to achieve special effects.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 7 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.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 8 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.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 9 Programming Language A programming language is used to manipulate the Dynamic HTML Object Model.A programming language is used to manipulate the Dynamic HTML Object Model. Dynamic HTML is designed to be platform independent. Therefore, Java Script, Jscript, VBScript, C++, Java or any other programming language can be used as the language of choice.Dynamic HTML is designed to be platform independent. Therefore, Java Script, Jscript, VBScript, C++, Java or any other programming language can be used as the language of choice. This course uses primarily JScript to access the document object model.This course uses primarily JScript to access the document object model. Extensions for the Dynamic HTML object model are compatible with that of past version.Extensions for the Dynamic HTML object model are compatible with that of past version.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 11 Structure and Style Structure provides contexts for the information contained with a document. For example, elements H1 through H6 are meant to define various header and their relative levels.Structure provides contexts for the information contained with a document. For example, elements H1 through H6 are meant to define various header and their relative levels. Stylistic tags (physical tags), like and were introduced mark bold and italic text, were invented to create an interesting page to attract more hit or visit of the web site.Stylistic tags (physical tags), like and were introduced mark bold and italic text, were invented to create an interesting page to attract more hit or visit of the web site. Confuse the use of Style tag and Structure tags does have consequence.Confuse the use of Style tag and Structure tags does have consequence. –Tools become less powerful. E.g. Indexing tool –Invalidates usefulness of (logical) tags, e.g. tag –A properly structured page can improve accessibility to the underlying information.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 12 Structure and Style HTML defines a set of rules representing the proper structure of the document. A DTD (Document Type Definition) describes the relationship among elements. E.g. H1 can be followed by H1 or H2 but not H3.HTML defines a set of rules representing the proper structure of the document. A DTD (Document Type Definition) describes the relationship among elements. E.g. H1 can be followed by H1 or H2 but not H3. Until mid-1996, HTML fails to be a true SGML (Standard Generalized Markup Language), in which style and structure are defined separately. A document written in SGML can have an associated style sheet that defines how the structural elements are rendered.Until mid-1996, HTML fails to be a true SGML (Standard Generalized Markup Language), in which style and structure are defined separately. A document written in SGML can have an associated style sheet that defines how the structural elements are rendered. In mid-1996, a new language named Cascading Style Sheets was introduced for specifying style in HTML. The CSS has been adopted by the major browser implementations.In mid-1996, a new language named Cascading Style Sheets was introduced for specifying style in HTML. The CSS has been adopted by the major browser implementations.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 13 Structure and Style With CSS a Strong elements (and Bold elements) is no longer presents boldface text. Instead a style sheet is used to specify how to render text enclosed in the and tags.With CSS a Strong elements (and Bold elements) is no longer presents boldface text. Instead a style sheet is used to specify how to render text enclosed in the and tags.<STYLE> STRONG {font-style:italic} CSS (Cascading Style Sheets) support gives web authors word processor-like control over the text in HTML documents so you can define complex styles for things like paragraphs, documents, and collections of documents so you can create extensive and dramatic page layout settings.CSS (Cascading Style Sheets) support gives web authors word processor-like control over the text in HTML documents so you can define complex styles for things like paragraphs, documents, and collections of documents so you can create extensive and dramatic page layout settings. To take full advantage of Dynamic HTML, document should separate the content structure from the presentation/style.To take full advantage of Dynamic HTML, document should separate the content structure from the presentation/style.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 14 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.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 15 Defining and Using Styles Style Sheet  Heading 1 This is a test This is a test. Heading 2 This is a span example. Using id1...

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 16 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 tag) 4.Inline Style (inside HTML element)

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 17 Cascading Style Sheets (CSS) CSS is a language with a set of properties for defining the appearance of a HTML document, and adding dynamic style to a page through a script.CSS is a language with a set of properties for defining the appearance of a HTML document, and adding dynamic style to a page through a script. Style sheet contains only the definition of the style of a document, so as to separate the style from either the contents or structure.Style sheet contains only the definition of the style of a document, so as to separate the style from either the contents or structure. The term Cascading in CSS refers to the ability to merge multiple style sheets to form a single style definition for an element or for the entire document.The term Cascading in CSS refers to the ability to merge multiple style sheets to form a single style definition for an element or for the entire document. There are three techniques for adding a style sheet to document:There are three techniques for adding a style sheet to document: –Inline style –Global style sheet –Linked style sheet

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 18 Defining Style Sheets in Web Pages Inline styles Embedded style sheet BODY {background-color: white; margin-left: 1.0in} Linked and imported style sheets –Linked style sheets Test –Imported style sheet @import url(basic.css)

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 19 Inline Style An inline style is simple: the style is defined directly on the element, using STYLE attribute. For example, using STYLE attribute to create a centered paragraph with a large font.An inline style is simple: the style is defined directly on the element, using STYLE attribute. For example, using STYLE attribute to create a centered paragraph with a large font. inline_style1.html This creates a centered paragraph with a large font. This creates a red, righted paragraph with a smaller font

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 20 Inline Styles An Inline style is basically an style sheet for a single instance of an element and is specified in element’s begin tag.An Inline style is basically an style sheet for a single instance of an element and is specified in element’s begin tag. Inline style can help you learn the style sheet language or quickly change a single instance of an element. However, Inline style does not reflect true spirit of a structured document. So that it is not much different from traditional HTML. With inline styles, the appearance of the document can not be easily changed.Inline style can help you learn the style sheet language or quickly change a single instance of an element. However, Inline style does not reflect true spirit of a structured document. So that it is not much different from traditional HTML. With inline styles, the appearance of the document can not be easily changed. Better approaches: Style sheet should be specified either in the beginning of document or put it into another document to be linked when needed.Better approaches: Style sheet should be specified either in the beginning of document or put it into another document to be linked when needed.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 21 Global Style Sheet A Global Style Sheet is to define the style of a document at the beginning of the document.A Global Style Sheet is to define the style of a document at the beginning of the document. The tag in the document’s header is used to add a global style sheet to a document.The tag in the document’s header is used to add a global style sheet to a document. Centralizing all the document’s style in a single location makes it easy to modify how the document is rendered.Centralizing all the document’s style in a single location makes it easy to modify how the document is rendered. To change the rendering of all paragraphs, only this single entry in global style sheet needs to be modified. Every time a new rule is added or removed or a style is changed, the entire document is recalculated.To change the rendering of all paragraphs, only this single entry in global style sheet needs to be modified. Every time a new rule is added or removed or a style is changed, the entire document is recalculated.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 22 Global Style Sheet global_sheet1.html P {font-size:200%; text-align:center} All paragraphs are now larger and centered. This paragraph is also larger and centered

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 23 Defining A Style Sheet A style sheet is created by CSS language which consists of selectors and presentation rules.A style sheet is created by CSS language which consists of selectors and presentation rules. –Selector specifies the elements that are associated with particular presentation rule –Presentation rules specify how elements are rendered. There are two type of selectorsThere 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 tags inside tags.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 24 Identifying Elements HTML exposes a set of attributes of elements objects, such as H1, P, that make them easy to identify in various ways, including tag name, and the ID,CLASS and NAME attributes:HTML exposes a set of attributes of elements objects, such as H1, P, that make them easy to identify in various ways, including tag name, and the ID,CLASS and NAME attributes: AttributePropertyCase-Sensitive?Applicable Elements (None)tagNameAlways UppercaseAll, including comments IDidYesAll, except comments CLASSclassNameYesAll, except comments NAMEnameYesAnchor,Applet, Button, Form, IMG,Input, Map, Meta,Object, Select and Text Area.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 25 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. */

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 26 Contextual Selector and Its Presentation Rules P EM {color:red} /* Change all elements contained within to red. */ UL LI.large {font-size:120%} /* Make all elements with CLASS=“large” contained within the element in the have larger font. */

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 28 Linked Style Sheet Linked Style Sheets is the most abstract and powerful technique to define style separately in another document/file.Linked Style Sheets is the most abstract and powerful technique to define style separately in another document/file. A linked style sheet is created by the same syntax of global style sheet.A linked style sheet is created by the same syntax of global style sheet. The advantage of using a linked style sheet is that all the rules and styles can be defined and encapsulated in a single file that can be shared across multiple documents.The advantage of using a linked style sheet is that all the rules and styles can be defined and encapsulated in a single file that can be shared across multiple documents. A linked style sheet can improve performance because it is cached locally on the client, separate from the document, so each document is smaller and the style sheet is downloaded only once.A linked style sheet can improve performance because it is cached locally on the client, separate from the document, so each document is smaller and the style sheet is downloaded only once.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 29 Linked Style Sheet linked_sheet1.html This document uses the styles specified in fancy.css. This Header is blue. Based on the definition in fancy.css, these words are turned to red fancy.css P EM {color:red} /* Change all elements contained within to red. */ H1 {color:blue}

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 31 CSS Example Sample Page with CSS  Heading 1 in Blue and 28 pt font This is a standard page with text indented by 0.5 in. Using P.extended class A paragraph without text indentation.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 33 More Samples of CSS Features These samples present some of the interesting feature of CSS supported by Internet Explorer 4.0These samples present some of the interesting feature of CSS supported by Internet Explorer 4.0 Example 1 :Example 1 : Using the list-style property, we can replace built-in bullets in lists by custom bullets, such as a GIF. This technique degrades well on down-level browser. Using the list-style property, we can replace built-in bullets in lists by custom bullets, such as a GIF. This technique degrades well on down-level browser.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 34 Custom Bulleted Lists: bullet.html Custom Bulleted Lists /*Display cool.gif instead of default symbol for the bullet */ UL { list-style-image: URL(cool.gif)} Custom Bulleted List You can provide a custom bullet! The bullets are replaced with cool.gif Each bullet can be different samples.css H1 {color:navy} /* Change H1 elements to navy*/

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 35 DIV HTML elements can be grouped or positioned within containers using & or &.HTML elements can be grouped or positioned within containers using & or &. and are neutral style tags that only apply styles to an elements or groups of elements. and are neutral style tags that only apply styles to an elements or groups of elements. is a block-level element that may contain headings, paragraphs, tables, and other divisions. is a block-level element that may contain headings, paragraphs, tables, and other divisions. is a text-level element that may be used midstream in a sentence to apply a style. is a text-level element that may be used midstream in a sentence to apply a style.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 36 Represents different kinds of containers, for example, chapter, section, abstract, or appendix, when used with the CLASS attribute. DIV allows the enclosed group of elements to be given a distinctive style.Represents different kinds of containers, for example, chapter, section, abstract, or appendix, when used with the CLASS attribute. DIV allows the enclosed group of elements to be given a distinctive style.... 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.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 37 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 This text represents a section. This text represents another section.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 38 Sample HTML HTML Sampler Web Page HTML Sampler This is paragraph 1 We will show you how to use dynamic HTML. This course is developed by Advanced IT Consulting

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 39 Element Containment with and without Document Heading Paragraph 1 Paragraph 2 Paragraph 3 Link Document Heading Paragraph 1 Paragraph 2 Paragraph 3 Link Division 1

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 42 Dynamic Styles and CSS Dynamic Style is the modification of the style sheet associated with the document through a script.Dynamic Style is the modification of the style sheet associated with the document through a script. Rather than define an alternative style sheet language, Dynamic Styles in IE modify the document’s CSS-defined style sheet via style property in every element, enable and disable global and linked style sheets and add rules and change rules on an existing style sheet.Rather than define an alternative style sheet language, Dynamic Styles in IE modify the document’s CSS-defined style sheet via style property in every element, enable and disable global and linked style sheets and add rules and change rules on an existing style sheet.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 44 Style Sheet Properties Style Sheet Properties control the appearance of an element’s contents and thereby control the style of a document.Style Sheet Properties control the appearance of an element’s contents and thereby control the style of a document. Some properties in CSS are defined to be compound properties. For example, the CSS background attribute contains information about the background image, URL, position :Some properties in CSS are defined to be compound properties. For example, the CSS background attribute contains information about the background image, URL, position : body {background:red URL(cool.gif)}

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 45 Background Properties linked_sheet2_background.html This document uses the styles specified in fancy.css. This Header is blue. Based on the definition in fancy.css, these words are turned to red compound.css H1 {color:navy} /* Change H1 elements to navy*/ body {background:red URL(cool.gif)}

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 46 Referencing Style Sheet Properties in Scripts Many CSS properties have a dash in their name (such as background-color). The dash isn't a valid character for identifiers in most scripting languages. To get around this little problem, continue to use the dashed name when specifying the CSS attribute in HTML or in a style sheet, but when accessing the attribute as a script property, remove the dash, and capitalize the next letter. For example:Many CSS properties have a dash in their name (such as background-color). The dash isn't a valid character for identifiers in most scripting languages. To get around this little problem, continue to use the dashed name when specifying the CSS attribute in HTML or in a style sheet, but when accessing the attribute as a script property, remove the dash, and capitalize the next letter. For example: –background-color becomes backgroundColor –border-left becomes borderLeft –margin-bottom becomes marginBottom The naming rule can be applied generally with one exception. The CSS float property is exposed as styleFloat.The naming rule can be applied generally with one exception. The CSS float property is exposed as styleFloat. HTML: { background-color: sColor } Scripting: object.style.backgroundColor [=sColor ]

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 47 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. –... This example uses inline scripting to set the background color to beige. –...

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 48 Sample Code HTML Sampler Web Page.x { text-indent: 0.5in; font-family: Comic Sans MS; font-size: 24pt } HTML Sampler This is paragraph 1 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 to use dynamic HTML. <input type="button" value="Hello there, there!" onclick="document.all.sp1.innerText='Hello 1'"> This course is developed by Advanced IT Consulting

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 49 cssTEXT PROPERTY cssTEXT contains an element’s style in the form of a string and you could retrieve the style or copy a style from one element to another.cssTEXT contains an element’s style in the form of a string and you could retrieve the style or copy a style from one element to another. cssText.html Sharing the cssText Property This paragraph is red with a half-inch indent. 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. Document object could be used to retrieve information about the document, to examine and modify the HTML elements and text within the document, and to process events.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 51 Dynamic Styles Dynamic styles uses combination of programming scripts( VBScript or Java Script) and CSS(Cascading Style Sheets) to modify the appearance of the document.Dynamic styles uses combination of programming scripts( VBScript or Java Script) and CSS(Cascading Style Sheets) to modify the appearance of the document. Dynamic styles are based on the W3C Recommendation for Cascading Style Sheets(CSS) specification for static style sheetsDynamic styles are based on the W3C Recommendation for Cascading Style Sheets(CSS) specification for static style sheets. Dynamic Styles are an integral components of interactive Web pages.Dynamic Styles are an integral components of interactive Web pages. The style of a document is defined using style sheet and HTML. Dynamic styles have been designed to require no new HTML. CSS attributes can be set from the style sub-object for each element, while regular HTML attributes are accessed as properties on each elementThe style of a document is defined using style sheet and HTML. Dynamic styles have been designed to require no new HTML. CSS attributes can be set from the style sub-object for each element, while regular HTML attributes are accessed as properties on each element You can dynamically change the style of any HTML element in a document. You can change, and even the of text.You can dynamically change the style of any HTML element in a document. You can change colors, typefaces, spacing, indentation, position, and even the visibility of text.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 52 Mouse Events An event is a notification that occurs in response to an action, such as a change in state or as a result of the user clicking the mouse or pressing a key while viewing the document.An event is a notification that occurs in response to an action, such as a change in state or as a result of the user clicking the mouse or pressing a key while viewing the document. Dynamic HTML exposes a set of events that allows Web authors to respond to most interactions between the user and document.Dynamic HTML exposes a set of events that allows Web authors to respond to most interactions between the user and document. The different states of the mouse are captured by Dynamic HTML Object Model. Mouse events occur when the user moves the mouse or clicks the left button.The different states of the mouse are captured by Dynamic HTML Object Model. Mouse events occur when the user moves the mouse or clicks the left button.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 53 Mouse Events EventDescription onmousedownMouse button was pressed onmousemoveMouse was moved or is being moved onmouseupMouse button was released onclickLeft mouse button was clicked, or the default action of an element was invoked. ondbclickLeft mouse button was double-clicked onmouseoverMouse pointer entered the scope of an element onmouseoutMouse pointer exited the scope of an element ondragstartsA drag-and-drop operation was initiated onselectstartA new selection was initiated over an element using the mouse onselectA selection is occurring

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 54 Use Mouse Events to Change Inline Styles Inline_style2.html <H1 ONMOUSEOVER = "this.style.backgroundColor = 'yellow';" ONMOUSEOUT = "this.style.backgroundColor = '';"> This element turns yellow when the mouse moves over it.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 56 Use Script to Dynamically Change Styles dstyle2.html: Click Here This will go away This is some text function toggle(e) { if (e.style.display == "none") {e.style.display = ""; } else {e.style.display = "none";} }

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 57 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.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 58 A script object to specify an inline text container. This element is especially useful for applying CSS styles.A script object to specify an inline text container. This element is especially useful for applying CSS styles. This paragraph contains a single blue word.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 59 Use Script to Dynamically Change Styles dstyle3.html: Click Here This will go away This is some text function toggle(e) { if (e.style.visibility == "hidden") {e.style.visibility = "visible";} else {e.style.visibility = "hidden";} }

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 60 ExpandingList.htm Expanding List Item Item 1 Item 1.1 Item 1.2 Item 2 Item 2.1 Item 2.2 function toggle(e) { if (e.style.display == "") {e.style.display = "none";} else {e.style.display = "";} }

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 61 class Attribute Inline Style is simple and useful but clumsy if there are more then one property needed to be manipulated.Inline Style is simple and useful but clumsy if there are more then one property needed to be manipulated. A more effective way to change style for two or more classes in a global style sheet and dynamically change the class attribute of an element.A more effective way to change style for two or more classes in a global style sheet and dynamically change the class attribute of an element. The class attribute of an element is exposed through the className property.The class attribute of an element is exposed through the className property.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 62 class ATTRIBUTE changeClassAttribute.html Changing the class Attribute.yellow {background:yellow; font-weight:bolder} <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

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 63 class ATTRIBUTE: animatedButton.html Animated Buttons.over {color:yellow; background:navy}.down {color:yellow; background:red} Animating Buttons <INPUT TYPE=BUTTON VALUE="Demo Button" ONMOUSEOVER="this.className = 'over';" ONMOUSEOUT="this.className = '';" ONMOUSEDOWN="this.className = 'down';" ONMOUSEUP="this.className = 'over';">

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 65 Multiple Style Sheets Global style sheets and linked style sheets provides more flexibility of modifying style of a documents. Style sheets could be turned on and off, rules could be accessed and changed and new rules can be added,etc.Global style sheets and linked style sheets provides more flexibility of modifying style of a documents. Style sheets could be turned on and off, rules could be accessed and changed and new rules can be added,etc. The Style element supports the DISABLED attribute, which can be used to control which style sheets are applied to the document.The Style element supports the DISABLED attribute, which can be used to control which style sheets are applied to the document. This technique is useful for switching between different views of the same data.This technique is useful for switching between different views of the same data.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 66 #headOnly {display:none} #detail {display:none} DIV {display:none} Demonstration of Multiple Views <H2 ID="headOnly" ONCLICK="document.styleSheets['hd'].disabled = true; document.styleSheets['ex'].disabled = false;"> Header view, click here for detail view. <H2 ID="detail" ONCLICK="document.styleSheets['hd'].disabled = false; document.styleSheets['ex'].disabled = true;"> Detail view, click here for header view. This is the details Multiple Style Sheets - multipleStyleSheet.html

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 69 Dynamic Positioning Cascading Style Sheets (CSS2) specification provides the syntax for specifying the precise positions of HTML elements. CSS2 includes CSS1 and CSS-Positioning.Cascading Style Sheets (CSS2) specification provides the syntax for specifying the precise positions of HTML elements. CSS2 includes CSS1 and CSS-Positioning. There are three types of positioning: static, absolute, and relative.There are three types of positioning: static, absolute, and relative. –Static positioning is the default and corresponds to the traditional way HTML document are layout. Item is not positionable. –Dynamic positioning introduces two new positioning: absolute and 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 DIV element and generally speaking, both of them can be used interchangeably.To absolutely position text, you should use a SPAN and DIV element and generally speaking, both of them can be used interchangeably.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 70 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.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 72 Relative Positioning Example Relative_position1.html This example demonstrates Relative Positioning. in a paragraph. normal flow 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 flow of the content should go.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 73 Absolute Positioning Example Absolute_position2.html Positioning Welcome to Dynamic HTML! With positioning, you can place images exactly where you want them, even behind text and other images.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 74 Exercise: relative_position3.html Positioning Welcome to Dynamic HTML! With positioning, you can place images exactly where you want them, even behind text and other images.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 75 Block-Level Elements and Box Properties Box top Box left margin space border space padding space content space Box width Box height element width element height Margin properties Padding properties Border properties

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 76 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". –pxPixels. –%Percentage. Absolute length units –inInches (1 inch = 2.54 centimeters). –cmCentimeters. –mmMillimeters. –ptPoints (1 point = 1/72 inches). –pcPicas (1 pica = 12 points).

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 77 Define Box Properties CSS1 - Border Properties BODY { margin: 50px 30px 50px 30px } P.extended { margin: 15% } Margin properties Show the use of CSS1 to set the margins for the web page. Set white space for various other elements BODY {margin-top: 50px; margin-right: 30px; margin-bottom: 50px margin- left: 30px;} P.extended { margin: 15% }

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 81 Absolute Positioning Elements in IE 4.0 Applet Button DIV Fieldset Iframe IMG Input Object Select Span Table TextArea Since absolute positioned elements are positioned Since 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 static In IE 4.0, all elements support relative and static positioning. However, only these following elements positioning. However, only these following elements support absolute positioning. support absolute positioning.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 82 Coordinate Systems Every element that is either absolutely or relatively positioned must be positioned relative to another element or position in the document. The location from which the element is offset is called the root of the element’s coordinate system.Every element that is either absolutely or relatively positioned must be positioned relative to another element or position in the document. The location from which the element is offset is called the root of the 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.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 83 Size and Position in Coordinate Systems When an element is positioned either absolutely or relatively, its top and left properties specify the offset of the element from the upper left corner of the coordinate system. The width and height properties define the physical width and height of the element.When an element is positioned either absolutely or relatively, its top and left properties specify the offset of the element from the upper left corner of the coordinate system. The width and height properties define the physical width and height of the element. Positioning context of the element: A point somewhere on the screen that has coordinate point (0, 0).Positioning context of the element: A point somewhere on the screen that has coordinate point (0, 0). The default positioning context is the upper left corner of the window or frame.The default positioning context is the upper left corner of the window or frame. Each time an element is positioned, it spawns a new positioning context with the (0, 0) position located at the top left corner of that element.Each time an element is positioned, it spawns a new positioning context with the (0, 0) position located at the top left corner of that element. For relative sizes, the width and height properties are interpreted relative to the size of the element defining the coordinate system.For relative sizes, the width and height properties are interpreted relative to the size of the element defining the coordinate system. The top, left, width, and height properties can be specified as a percentage or in any of the units (for example, points, pixels, and ems) defined by CSS.The top, left, width, and height properties can be specified as a percentage or in any of the units (for example, points, pixels, and ems) defined by CSS.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 84 coordinate_system.html <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;"> absolutely positioned inside the DIV element. Example of Nested Coordinate Systems

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 86 Automatic Sizing If top and left properties both set to auto, a relative positioned element is displayed the same as static positioned element, an absolutely positioned element is positioned outside the flow but anchored at the position it would have as a static positioned element.If top and left properties both set to auto, a relative positioned element is displayed the same as static positioned element, an absolutely positioned element is positioned outside the flow but anchored at the position it would have as a static positioned element. If width and height property is omitted, the element is automatically sized based on its content.If width and height property is omitted, the element is automatically sized based on its content.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 87 Automatic Sizing Coordinate_system_auto_size.html <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;"> absolutely positioned inside the DIV element with automatic sizing feature.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 88 The visibility and z-index Properties An element is visible based on whether its parent element is visible because by default the visibility is inherited. It can be overwritten with either hidden or visible.An element is visible based on whether its parent element is visible because by default the visibility is inherited. It can be overwritten with either hidden or visible. z-index property defines the graphical z-order or overlapping, of elements in relation to the other elements. All elements that define a coordinate system, including the element are positioned with a z- index of 0 in default. To place an element behind them, specified a negative z-index.z-index property defines the graphical z-order or overlapping, of elements in relation to the other elements. All elements that define a coordinate system, including the element are positioned with a z- index of 0 in default. To place an element behind them, specified a negative z-index.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 89 visibility Property in Coordinate System coordinate_system_hidden.html <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'"> absolutely positioned inside the DIV element.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 90 z_index z_index.html Positioning Welcome to Dynamic HTML! With positioning, you can place images exactly where you want them, even behind text and other images.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 92 main.css BODY { background-image: url(snow.jpg) } image { width: 100; height: 150 } h2 { font-family: Cursive; font-size: 12pt; font-weight: 400; color: white } h2 A { text-decoration: none; color: white } h2 A:link { color-white } h2 A:visited { color: white } #logo { position: absolute; top: 20px; left: 50px; width: 102px } z-index: 1 #image1 { position: absolute; top: 20px; left: 180px; z-index: 1 } #image2 { position: absolute; top: 20px; left: 290px; z-index: 1 } #image3 { position: absolute; top: 20px; left: 400px; z-index: 1 } #image4 { position: absolute; top: 20px; left: 510px; z-index: 1 } z-index: 2 #title1 { position: absolute; top: 20px; left: 185px; z-index: 2 ; height: 1px; width: 1px} #title2 { position: absolute; top: 20px; left: 295px; z-index: 2; height: 1px; width: 1px } #title3 { position: absolute; top: 20px; left: 405px; z-index: 2; height: 1px; width: 1px } #title4 { position: absolute; top: 20px; left: 515px; z-index: 2; height: 1px; width: 1px }

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 93 main.htm Services Sites Scribbles Samples <img src="menua.jpg" border="0" id="image1" width="101" height="151"> <img src="menub.jpg" border="0" id="image2" width="102" height="151"> <img src="menud.jpg" border="0" id="image4" width="101" height="151">

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 94 clip Property Each absolutely positioned element has a clipping region associated with it. The purpose of this clipping region is to define the portion of the document available for displaying the element and its contents. Anything outside that portion is clipped, or not displayed.Each absolutely positioned element has a clipping region associated with it. The purpose of this clipping region is to define the portion of the document available for displaying the element and its contents. Anything outside that portion is clipped, or not displayed. The default value of the clip property is auto, which causes the contents not to be clipped. The clip property can be set to be a rectangleThe default value of the clip property is auto, which causes the contents not to be clipped. The clip property can be set to be a rectangle : clip:rect(top right bottom left )

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 96 The overflow Property The overflow property controls how any contents that extend beyond the physical size of the element are handled.The overflow property controls how any contents that extend beyond the physical size of the element are handled. The overflow property takes one of four values: visible, hidden, auto, and scroll.The overflow property takes one of four values: visible, hidden, auto, and 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.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 97 Example of overflow set to scroll Scrolling Sidebar Scrolling Sidebars <DIV STYLE=" overflow:scroll ; float:left; width:120pt; height:120pt"> Scrolling Sidebar This text appears in a scrolling window that is floating to the left of the main contents. These contents appear to the right of the scrolling DIV element.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 101 Creating Sidebars Traditionally, sidebars are created using tables, but with float property in CSS tables are no longer required.Traditionally, sidebars are created using tables, but with float property in CSS tables are no longer required. in the example is to assign a class to text contents and the float property can be set in a style rule for that class. in the example sidebar.html is to assign a class to text contents and the float property can be set in a style rule for that class. There are 2 types of sidebars created inThere 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.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 102 sidebar.html Sidebar Example 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} Sidebar Example Notice that the text is wrapping around this sidebar. This example demonstrates a sidebar that exists within the flow of the document. The contents wrap around the sidebar and continue below it. This sidebar appears in the left margin of the document. 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.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 104 Dynamic Contents Dynamic content is all about changing the content of the HTML document—inserting and deleting elements or the contents of an element before or after the document has been loaded.Dynamic content is all about changing the content of the HTML document—inserting and deleting elements or the contents of an element before or after the document has been loaded. The contents of an elements within a document is exposed through four properties and two methods. Properties are innerHTML, innerText, outerHTML, and outerText and methods are insertAdjacentHTML and insertAdjacentTextThe contents of an elements within a document is exposed through four properties and two methods. Properties are innerHTML, innerText, outerHTML, and outerText and methods are insertAdjacentHTML and insertAdjacentText

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 105 Dynamic Contents Properties The basic difference between innerHTML and outerHTML properties on one hand and innerText and outerText on the other hand is that HTML properties expose the entire markup while TEXT properties expose contents without the markup.The basic difference between innerHTML and outerHTML properties on one hand and innerText and outerText on the other hand is that HTML properties expose the entire markup while TEXT properties expose contents without the markup. Dynamic Content is Very Cool ! For the H1 element, the following table lists values of four properties:For the H1 element, the following table lists values of four properties: PropertyValue innerText Dynamic Content is very cool innerHTML Dynamic Content is very cool outerText Dynamic Content is very cool outerHTML Dynamic Content is Very Cool !

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 106 innerText vs. innerHTML innerText and innerHTML properties represent the contents of the element, including any elements contained by that element.innerText and innerHTML properties represent the contents of the element, including any elements 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

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 107 innerText vs. innerHTML innerHTMLinnerHTML document.all.myH1.innerHTML = "DHTML is Very Cool!” –The new string replaces the original content of the H1, and the word "Very" appears in italic.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 108 outerText and outerHTML The ourtText and outterHTML properties represent the element itself, as well as the contents of the element.The ourtText and outterHTML properties represent the element itself, as well as the contents of the element. Assuming that the preceding example is contained by a BODY elementAssuming that the preceding example is contained by a BODY 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.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 109 outerText vs. outerHTML outerHTML document.all.myH1.outerHTML = " RICH HTML "; –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.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 110 Exercise: dyn_content1.html Dynamic Contents This is a test <input type="button" value="Change innerHTML" onClick="document.all.myH1.innerHTML='This is a test '" name="B1"> <input type="button" value="Change innerText" onClick="document.all.myH1.innerText='This is a test '" name="B2"> <input type="button" value="Change outerHTML" onClick="document.all.myH1.outerHTML=' This is a test '" name="B3"> <input type="button" value="Change outerText" onClick="document.all.myH1.outerText=' This is a test '" name="B4">

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 111 insertAdjacentHTML and insertAdjacentText. insertAdjacentHTML and insertAdjacentText insert contents before or after the begin or end tag. The methods can inset text at one of the four position: and. The following example shows the values of the four properties and where these positions are for element H1.insertAdjacentHTML and insertAdjacentText insert contents before or after the begin or end tag. The methods can inset text at one of the four position: beforeBegin, afterBegin, beforeEnd and afterEnd. The following example shows the values of the four properties and where these positions are for element H1.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 113 Example on Replacing Content hid_button.html Disappearing Button Replacing an Element <INPUT TYPE=BUTTON VALUE=“Click me!" ONCLICK="this.outerHTML = ' Welcome to Dynamic HTML class! ' "> ** INPUT : A HTML form element

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 114 Example of insertAdjacentHTML beforeBegin.html Disappearing Button <P ONCLICK="this.insertAdjacentHTML( 'beforeBegin', ' Welcome! ');"> Please click here.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 115 Example of insertAjacentHTML beforeEnd.html Dynamic Content: Inserting Elements function insertPara() { document.body.insertAdjacentHTML("BeforeEnd", " But adding a line makes it less so."); } This is a very short document.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 117 What is Data Binding IE 4.0 enables content providers to develop data-centric Web applications that support retrieval and update through native data binding facilities.IE 4.0 enables content providers to develop data-centric Web applications that support retrieval and update through native data binding facilities. Data binding technique makes data-driven pages easy to author with minimal scripting required. Once data is downloaded to the client asynchronously the data can be sorted and filtered without requiring additional trips to the server. So that pages render quickly and provide immediate interactivity. Compare that to traditional Web pages and those generated by server-side scripts. Once the data reaches the client, it's static, and any manipulation of that data requires another server request.Data binding technique makes data-driven pages easy to author with minimal scripting required. Once data is downloaded to the client asynchronously the data can be sorted and filtered without requiring additional trips to the server. So that pages render quickly and provide immediate interactivity. Compare that to traditional Web pages and those generated by server-side scripts. Once the data reaches the client, it's static, and any manipulation of that data requires another server request.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 118 Data Binding Architecture Data binding is based on a component architecture consisting of four major pieces:Data binding is based on a component architecture 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.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 124 repeat.html <Body TOPMARGIN=0 LEFTMARGIN=40 BGCOLOR= "#FFFFFF" LINK= "#000066" VLINK= "#666666" TEXT= "#000000"> Repeated Table <object id="stocklist" width="0" height="0" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 128 What is Object Model The object model is the mechanism that makes Dynamic HTML programmable. It doesn't require that authors learn new HTML tags, and it doesn't involve any new authoring technologies. In fact, the object model builds on functionality that authors have used for creating content for previous browsers.The object model is the mechanism that makes Dynamic HTML programmable. It doesn't require that authors learn new HTML tags, and it doesn't involve any new authoring technologies. In fact, the object model builds on functionality that authors have used for creating content for previous browsers. Dynamic HTML's Document Object Model allows authors direct, programmable access to the individual components of their Web documents, from individual elements to containers. Combined with the event model, object model allows the browser to react to user input ( such as move mouse over a particular element, press a key ), execute scripts on the fly, and display the new content without downloading additional documents from a server.Dynamic HTML's Document Object Model allows authors direct, programmable access to the individual components of their Web documents, from individual elements to containers. Combined with the event model, object model allows the browser to react to user input ( such as move mouse over a particular element, press a key ), execute scripts on the fly, and display the new content without downloading additional documents from a server.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 129 Accessing Elements with Script Every HTML element is a scriptable object in the Object Model, with its own set of properties, methods and events. However, to write script for each element object, the author must know how to get to an element.Every HTML element is a scriptable object in the Object Model, with its own set of properties, methods and events. However, to write script for each element object, the author must know how to get to an element. The object model is focused around collections of elements, a hierarchy of groupings that the elements fall into. The most important of these collections are the "all" collection and the "children" collection.The object model is focused around collections of elements, a hierarchy of groupings that the elements fall into. The most important of these collections are the "all" collection and the "children" collection. A Dynamic HTML document is a structured arrangement of elements—for instance, in the following document, each element has a scope of influence which depends on where in the document the tags appear.A Dynamic HTML document is a structured arrangement of elements—for instance, in the following document, each element has a scope of influence which depends on where in the document the tags appear.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 130 Accessing Elements with Script Some text in a paragraph 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.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 131 Accessing Elements with Script 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.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 132 Events Clicking a button, moving the mouse over part of the Web page, selecting some text on the page—these actions all fire events that a DHTML author can write code to run in response to the event. This particular piece of code is generally known as an event handler because that's what it does, handles events.Clicking a button, moving the mouse over part of the Web page, selecting some text on the page—these actions all fire events that a DHTML author can write code to run in response to the event. This particular piece of code is generally known as an event handler because that's what it does, handles events. Here is a set of common events that every HTML element generates in Internet Explorer 4.0:Here is a set of common events that every HTML element generates in Internet Explorer 4.0: –Mouse event –Keyboard event

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 133 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. O nkeydown Presses a key. Only a single event will be fired, even if the key is held down. O nkeyup Releases a key.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 134 window Object The window object is the root of the object hierarchy. All properties in the object model are either accessed as properties of the window object or as properties of those properties.The window object is the root of the object hierarchy. All properties in the object model are either accessed as properties of the window object or as properties of those properties. Because the current window object is implied, you do not need to prefix the property with the window keyword. However, many people prefer to use the keyword to ensure that their scripts are as clear and readable as possible. For example:Because the current window object is implied, you do not need to prefix the property with the window keyword. However, many people prefer to use the keyword to ensure that their scripts are as clear and readable as possible. For example: status = "hello"; 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 out simple tasks, such as displaying messages, prompting for input, and loading new documents into the window.Many of the properties of the window object can be used to carry out simple tasks, such as displaying messages, prompting for input, and loading new documents into the window. For example, you can display a simple modal message box from the current window by using the alert method and change the text in Internet Explorer's status bar by using the status property, as in the following example.For example, you can display a simple modal message box from the current window by using the alert method and change the text in Internet Explorer's status bar by using the status property, as in the following example.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 135 window Object Window.html A Simple Document function doAlert() { window.status = "Page is loaded!"; alert("Page is loaded!");} This is a very short document.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 136 Event Handling: bubbling Event.htm Welcome! This is a very short document. function wasClicked() { alert("I was clicked " + window.event.srcElement.tagName); } function wasAlsoClicked() { alert("You clicked me " + window.event.srcElement.tagName); }

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 137 window Object There can be more than one window object at a time. For example, the browser creates one window object for each frame defined within a document. From the scripting perspective, the current window object is always the one that contains the document which contains the script. To access window objects other than the current window object, you precede the property with a window reference.There can be more than one window object at a time. For example, the browser creates one window object for each frame defined within a document. From the scripting perspective, the current window object is always the one that contains the document which contains the script. To access window objects other than the current window object, you precede the property with a window reference. The window.open method returns a reference to this new window that is then used in scripts to access properties and methods of the new window.The window.open method returns a reference to this new window that is then used in scripts to access properties and methods of the new window.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 138 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.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 139 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"

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 140 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

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 141 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

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 144 Object.htm  Back to previous page.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 146 Open a New Browser Window: openwindow.htm  Open Windows

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 147 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.

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 149 Openwindow2.htm  Open Windows Enter your name: <input type="button" value="Get Guest Name" onClick="makeNewWindow()">

© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 150 getname.htm Get Name  Enter your name:

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

Similar presentations

Presentation on theme: "© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 1 Dynamic HTML Minder Chen"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

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

Similar presentations

Presentation on theme: "© Minder Chen & Lihui Zhang, 1998-2001 Dynamic HTML- 1 Dynamic HTML Minder Chen"— Presentation transcript:

Similar presentations

About project

Feedback