Dynamic Hyper Text Markup Language

Dynamic HTML (DHTML) is not a standard defined by the World Wide Web Consortium (W3C), it is a term that was
initially used by Netscape and Microsoft to describe the new technologies the 4.x generation browsers would support. DHTML is a combination of technologies which make Web pages dynamic. To most people Dynamic HTML means a combination of HTML 4.0, Style Sheets and JavaScript. W3C once said: "Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated."
DHTML Technologies
With DHTML, a Web developer can control how to display and position HTML elements in a browser window. The following technologies are used to this end:

XHTMLXHTML, as it pertains to DHTML, includes two important things: Cascading Style Sheets (CSS) and the Document Object Model (DOM). Cascading Style SheetsWith CSS we have a style/layout model for HTML documents. Document Object ModelWith the DOM we have a document content model for HTML documents. JavaScriptAllows you to write scripting code to control HTML elements.
CGS 3066: Event Handlers
With an event handler, you can do something with an element when an event occurs, i.e., when the user clicks an element, when the page loads, when a form is submitted, etc. An event handler may be included within any XHTML tag; however, not all tags support all event handlers. In general, you can determine if an event handler is supported within a given tag by considering to what the event handler reacts and the nature of the tag. I.e., a radio button is not submitted. Therefore, it does not support the onsubmit event handler. However, you can click on a radio button. Therefore, it does support the onclick event handler. The example below defines a header that turns red when a user clicks on it.
<h1 onclick="this.style.color='red'">Click on this text</h1>
click on this text

You can also add a script in the head section of the page and then call the function from the event handler:
<html> <head> <script type="text/javascript"> function changecolor() { document.getElementById('header').style.color="red" } </script> </head> <body> <h1 id="header" onclick="changecolor()"> Click on this text</h1> </body> </html>
HTML Event Handlers

Note: this is a partial list. A more complete list may be found in the textbook pg. 470.
Event onabort onblur onchange onclick Occurs when... a user aborts page loading a user leaves an object a user changes the value of an object a user clicks on an object
ondblclick onfocus onkeydown onkeypress onkeyup onload onmousedown onmousemove onmouseover onmouseout onmouseup onreset onselect onsubmit onunload
a user double-clicks on an object a user makes an object active a keyboard key is on its way down a keyboard key is pressed a keyboard key is released a page is finished loading. Note: In Netscape, this event occurs during the loading of a page. a user presses a mouse-button a cursor moves on an object a cursor moves over an object a cursor moves off an object a user releases a mouse-button a user resets a form a user selects content on a page a user submits a form a user closes a page
CGS 3066: Document Object Model Click anywhere on this document to toggle the background color to yellow back to its original color!
The Document Object Model provides access to every element in a document. Because of that access, any element may be modified by a snippet of JavaScript. Elements are easily accessed by use of an id attribute and the getElementById method of the document object. Note that the value of the id attribute must be unique within a given document. I.e., You cannot have two elements with the same id within the same document. View the Document Object Model for this page (developed by BrainJar)
<html> <body> <h1 id="header">My header</h1> <script type="text/javascript"> document.getElementById('header').style.color = "red" </script> </body> </html>
The script changes the color of the header element, and produces the output below. Note the single line of the script: document.getElementById('header').style.color = "red" Focus on the beginning portion of the statement: document.getElementById('header'). Any element, which contains an id attribute, may be referenced by the getElementById() method. Simply pass it the value of the id attribute and you may then reference any properties, methods, or collections of the element. I.e., the text color of the element, whose id is 'header', is referenced by document.getElementById('header').style.color There are several other methods to reference an element within a document, most notably use of the name attribute. Although the name attribute is still supported in XHTML 1.1, it is supported to a lesser extent than in prior DTDs; XHTML 1.1 intends for you to use the id attribute rather than the name attribute. The other reference methods are discussed within the DOM: Forms lecture. Use of the document.getElementByID() method is the simplest means to access a single element within a document.
My header
The DHTML Document Object Model

Object Description
window
The top level object in the DHTML DOM. It contains information about the window and the frames. The objects listed below are the children of the window object. Represents the HTML document, and is used to access the HTML elements inside the document Represents the frameset Keeps track of the sites vissited by the browser object. Contains information about the user's browser Contains the URL of the rendered document Contains information about events that occurs Contains information about the computer screen for the computer on which the browser is running.
document
frames history navigator location event screen
Document Objects

The DOM defines HTML documents as a collection of objects. The document object is the parent of all the other objects in an HTML document. The document.body object represents the <body> element of the HTML document. The document object is the parent of the body object, and the body object is a child of the document object. You can see a list of all the HTML document objects in the HTML DOM Reference.
Object Properties

HTML document objects can have properties (also called attributes). The document.body.bgColor property defines the background color of the body object. The statement document.body.bgColor="yellow" in the example below, sets the background color of the HTML document to yellow. You can see a list of all the HTML document object properties in the HTML DOM Reference.
Object Events

HTML document objects can respond to events. The onclick="ChangeColor()" attribute of the <body> element in the example below, defines an action to take place when the user clicks on the document.
Functions
The ChangeColor() function, in the example below, is called when a user clicks on the HTML document.
<html> <head> <script type="text/javascript"> function ChangeColor() { document.body.bgColor="yellow" } </script> </head> <body onclick="ChangeColor()"> Click on this document! </body> </html>
Changing Style

The HTML DOM also defines a model for changing the styles of HTML objects. The coding example below shows how to obtain a similar effect, as the example above, by changing the style of the body object:
<html> <head> <script type="text/javascript"> function ChangeColor() { curBgColor = document.body.style.background; if (curBgColor == "#ffffcc" || curBgColor == "") { document.body.style.background="yellow"; } else { document.body.style.background="#ffffcc"; }
} </script> </head> <body onclick="ChangeColor()"> <p>Click anywhere on this document to toggle the background color to yellow back to its original color! </p> </body> </html>
CGS 3066: DOM: Forms There are many different means to access the elements within a form. The most generic methods are listed below; syntax to reference each different form element also is available. Each syntax is equivalent to the next; each accesses the value of the checked property of the form element named "contact", within the form named "form1".
1. document.forms[0].elements[0].checked : a reference to the checked property of the 0th element of the elements array of the 0th form of the forms array of the object model 2. document.forms['form1'].elements[0].checked : a reference to the checked property of the 0th element of the elements array of the form named 'form1' of the forms array of the object model 3. document.form1.elements[0].checked : a reference to the checked property of the 0th element of the elements array of item named 'form1' of the object model 4. document.forms['form1'].elements['contact'].checked : a reference to the checked property of the element named 'contact' of the elements array of the form named 'form1' of the forms array of the object model 5. document.form1.contact.checked : a reference to the checked property of the item named contact within the item named form1 within the document object
View the Document Object Model for this page (developed by BrainJar)
I would prefer not to be contacted by a representative at this time.
1. *What type of entity is your healthcare business? Payer Provider Wholesaler/distributor Device manufacturer 2. *What is your current hosting situation? New site still under development Unknown
3. *What type of site/application is your company running? Complex, mission-critical Simple, non-transactional 4. *What platform does your site/application operate on? Windows NT Windows 2000 Windows XP Microsoft .Net Unix 5. Additional Comments:
Submit Form
document.forms[i].elements[i]
The script below loops through the form and outputs the name, value, and type of each form element. Note that the name property is referenced with the first syntax style and the value property is accessed with the second syntax style. Also note that the document object is generated in a top-down manner. Therefore, the first form loaded into a page will have an index of zero within the document.forms array. Also, any script which aims to manipulate a particular element must execute after that element has been loaded into the document.
<script type="text/javascript"> for (i=0; i < document.forms[0].elements.length;i++) { document.write(document.forms[0].elements[i].name + "<br />"); //syntax below uses the name attribute of the form to access the form's elements document.write(document.form1.elements[i].value + "<br />"); document.write(document.forms[0].elements[i].type + "<br /><br />"); } </script>
contact Yes
checkbox healthcareType Payer radio healthcareType Provider radio healthcareType Wholesaler/distributor radio healthcareType Device manufacturer radio Opportunity A partnership/stragetic opportunity radio Opportunity Both internal and client managed hosting radio siteType Complex, mission-critical radio siteType Simple, non-transactional radio platform Windows NT checkbox platform Windows 2000 checkbox platform Windows XP checkbox
platform Microsoft .Net checkbox platform Unix checkbox comments textarea submit Submit Form submit
CGS 3066: DOM: Forms (continued)
Syntax to access oft-used properties of various form elements

Input Box / Textarea
formName.inputName.value : returns the value as a string Name:

Enter name here
Submit Form
Reset Form
Radio Buttons and Checkboxes
formName.radioButtonName[i].checked : returns true/false, depending of whether ith button is checked. Note that all radio buttons, with the same name, are stored as an array. The same is true for checkboxes. formName.radioButtonName[i].value : returns the value of the ith radio button as a string. The same is true for checkboxes. What type of entity is your healthcare business? Payer Provider Wholesaler/distributor Device manufacturer
Submit Form Reset Form
Select Menus
formName.selectMenuName[i].value : returns the value, as a string, of the ith option within the select menu. Note that all options, within a select menu, are stored as an array.
formName.selectMenuName.selectedIndex : returns the index, as a number, of the selected option. formName.selectMenuName[formName.selectMenuName.selectedIndex].value : a combination of the above two statements. This syntax returns the value of the selected option. State:
Submit Form Reset Form
The Style object represents an individual style statement. You can think of an individual style statement as an inline style declaration. The Style object can be accessed from the document or from the elements to which that style is applied. For example, given a form whose id = "form1", its styles may be accessed via: document.getElementById('form1').style.property where property is one of the many style properties available to a given element. Some common style properties that you may wish to manipulate are listed below. Note that is a partial listing. See examples of manipulating an object's style:

font color, background color of a form font color, background color of table cells change any style property of any element (with an id)
style.background Sets or retrieves the background picture tiled behind the text and graphics in the object. style.backgroundAttachment Sets or retrieves how the background image is attached to the object within the document. style.backgroundColor Sets or retrieves the color behind the content of the object. style.backgroundImage Sets or retrieves the background image of the object. style.border Sets or retrieves the width of the border to draw around the object. style.borderBottom Sets or retrieves the properties of the bottom border of the object. style.borderBottomColor Sets or retrieves the color of the bottom border of the object. style.borderBottomStyle Sets or retrieves the style of the bottom border of the object.
style.borderBottomWidth Sets or retrieves the width of the bottom border of the object. style.borderCollapse Sets or retrieves a value that indicates whether the row and cell borders of a table are joined in a single border or detached as in standard HTML. style.borderColor Sets or retrieves the border color of the object. style.borderLeft Sets or retrieves the properties of the left border of the object. style.borderLeftColor Sets or retrieves the color of the left border of the object. style.borderLeftStyle Sets or retrieves the style of the left border of the object. style.borderLeftWidth Sets or retrieves the width of the left border of the object. style.borderRight Sets or retrieves the properties of the right border of the object. style.borderRightColor Sets or retrieves the color of the right border of the object. style.borderRightStyle Sets or retrieves the style of the right border of the object. style.borderRightWidth Sets or retrieves the width of the right border of the object. style.borderStyle Sets or retrieves the style of the left, right, top, and bottom borders of the object. style.borderTop Sets or retrieves the properties of the top border of the object. style.borderTopColor Sets or retrieves the color of the top border of the object. style.borderTopStyle Sets or retrieves the style of the top border of the object.
style.borderTopWidth Sets or retrieves the width of the top border of the object. style.borderWidth Sets or retrieves the width of the left, right, top, and bottom borders of the object. style.bottomMargin Sets or retrieves the bottom margin of the entire body of the page. style.color Sets or retrieves the color of the text of the object. style.font Sets or retrieves a combination of separate font properties of the object. Alternatively, sets or retrieves one or more of six user-preference fonts. style.fontFamily Sets or retrieves the name of the font used for text in the object. style.fontSize Sets or retrieves a value that indicates the font size used for text in the object. style.fontStyle Sets or retrieves the font style of the object as italic, normal, or oblique. style.fontVariant Sets or retrieves whether the text of the object is in small capital letters. style.fontWeight Sets or retrieves the weight of the font of the object. style.margin Sets or retrieves the width of the top, right, bottom, and left margins of the object. style.marginBottom Sets or retrieves the height of the bottom margin of the object. style.marginHeight Sets or retrieves the top and bottom margin heights before displaying the text in a frame. style.marginLeft Sets or retrieves the width of the left margin of the object. style.marginRight Sets or retrieves the width of the right margin of the object.
style.marginTop Sets or retrieves the height of the top margin of the object. style.marginWidth Sets or retrieves the left and right margin widths before displaying the text in a frame. style.padding Sets or retrieves the amount of space to insert between the object and its margin or, if there is a border, between the object and its border. style.paddingBottom Sets or retrieves the amount of space to insert between the bottom border of the object and the content. style.paddingLeft Sets or retrieves the amount of space to insert between the left border of the object and the content. style.paddingRight Sets or retrieves the amount of space to insert between the right border of the object and the content. style.paddingTop Sets or retrieves the amount of space to insert between the top border of the object and the content. style.position Sets or retrieves the type of positioning used for the object. style.textAlign Sets or retrieves whether the text in the object is left-aligned, right-aligned, centered, or justified. style.textDecoration Sets or retrieves a value that indicates whether the text in the object has blink, line-through, overline, or underline decorations. style.textIndent Sets or retrieves the indentation of the first line of text in the object. style.topMargin Sets or retrieves the margin for the top of the page. style.vAlign Sets or retrieves how text and other content are vertically aligned within the object that contains them.
style.visibility Sets or retrieves whether the content of the object is displayed. style.zIndex Sets or retrieves the stacking order of positioned objects.
CGS 3066: DOM: Style Object (continued) Consider the form below. Click on the various radio buttons to see the effect. A viewing of the code, followed by a discussion of the code, is included on this page. 1. Change the background color of the form to what color? green red yellow tan 2. Change the font-family of the form to what? verdana times new roman georgia arial The code to produce this effect:
<script type="text/javascript"> function ChangeColor(theColor) { document.getElementById('form1').style.background = theColor; } function ChangeFont(theFont, theID) { document.getElementById(theID).style.fontFamily = theFont; } </script> <form action="" method="" name="form1" id="form1"> <ol> <li><b>Change the background of the form to what color? </b><br /> <input type="radio" value="green" name="color" onclick="ChangeColor(this.value);"/> green<br /></li> <li><b>Change the font-family of the form to what?</b><br /> <input type="radio" value="verdana" name="font" onclick="ChangeFont(this.value, this.form.id);"/>verdana<br /> </li></ol> </form>
The code explained:
Two JavaScript functions have been written. One function which changes the background color of the form [named ChangeColor() ] and one which changes the font of the text within the form [named ChangeFont() ]. To change the background color of an element, the "background" property of the style object, for the element, must be accessed. Because the form has an id attribute, id = "form1", the form can be referenced by the document.getElementById() method. Putting these last two thoughts together, the background color of the form can be accessed via document.getElementById('form1').style.background. In order to invoke either function, the onclick event handler can be used so that, whenever a radio button is clicked, the appropriate function is invoked. For example, onclick="ChangeColor(this.value); is contained within the radio buttons to change the background color. When one of those radio buttons is clicked, the ChangeColor() function is invoked and this.value is passed to the function.
Recall that this is a keyword in JavaScript and contains the information of the current object. In this instance, the current object is the radio button. this.value, therefore, refers to the value property of the radio button. The value of the value property is the new color (green, yellow, etc.). Putting it all together: when the radio button is clicked, the value of the new color is passed to the ChangeColor() function. The document.getElementId() method is used to assign the background color, of the form, to the passed value. The same principles apply to the second functionChangeFont(), which changes the text font of the form. Effectively, the only difference is that the id of the form is passed to the function rather than hardcoding it into the function itself. To accomplish that, a second parameter"theID"is passed to the function. To access the id of the form, the this keyword is used again. From the radio button, the id of the form may be accessed by this.form.id.
CGS 3066: DOM: Image and Style Rollovers
Image Rollovers
An image rollover is basically two different images. One is displayed after the page loaded up, the other one is displayed only when the user moves the mouse over the first one. Notice when you rollover either the Home or Contact image, it changes to a second image. Rolloff and it reverts to the orginal image. Image rollovers are often used for a site's interface such that the image is linked as part of the site's navigation. For simplicity, this aspect is not featured in this discussion.
The code to produce this effect:

<script type="text/javascript"> function swap(img_name,img_src) { document[img_name].src = img_src; } </script> <img src="home.gif" width="100" height="20" onmouseover="swap('image1','home_over.gif')" onmouseout="swap('image1','home.gif')" name="image1"/> <img src="contact.gif" width="100" height="20" onmouseover="swap('image2','contact_over.gif')" onmouseout="swap('image2','contact.gif')" name="image2"/>
The code explained:

The JavaScript function, swap() is invoked both by the onmouseover and onmouseout event handlers within the image tag. The swap() function causes the rollover effect. swap() explained:
o
the swap() function has two argumentsimg_name and img_src. They, respectively, provide the name of the image to be swapped and the new source file for the image.
document[img_name].src = img_src; is the entire body of the swap() function. It sets the source (.src), of the image within the document array whose name is image1 ( document[img_name] ), to img_src.
Style Rollovers
A similar effect can be done using text and then altering the style of that text. Rollover the table cells, below, and note what happens Home Contact The code to produce this effect:
<script type="text/javascript"> function swapStyle(s, bgColor, fgColor) { s.style.background = bgColor; s.style.color = fgColor; } </script> <table width="100" border="0" cellspacing="0" cellpadding="3"> <tr> <td class="tdOff" onmouseover="swapStyle(this, 'red', 'white');" onmouseout="swapStyle(this, 'white', 'red');"> Home </td> </tr> <tr> <td class="tdOff" onmouseover="swapStyle(this, 'red', 'white');" onmouseout="swapStyle(this, 'white', 'red');"> Contact </td> </tr> </table>
The code explained:
The JavaScript function, swapStyle() is invoked both by the onmouseover and onmouseout event handlers within the td tag. The swapStyle() function causes the rollover effect. swapStyle() explained:
o
the swapStyle() function has three argumentss, bgColor, fgColor. They, respectively, provide a reference to the element to be modified; the new background color; and the new text color.
Notice that the function call, within the event handlers, passes the keyword this and the colors red and white. Notice in particular that this, as a keyword, does not require quote marks. The colors, as string literals, do need the quote marks. The function body has 2 statements; one which modifies the background color of the element and one which modifies the text color of the element.
CGS 3066: DOM: InnerText and InnerHTML Two very interesting properties of any object are innerText and innerHTML. They allow you to access the contentsthe codecontained in an object. For example, given a paragraph whose id = "sample", its innerText and innerHTML may be accessed via: document.getElementById('sample').innerHTML document.getElementById('sample').innerText By manipulating the innerText and innerHTML properties, you can change, dynamically, the text on a page (without reloading the page). The difference between innerText and innerHTML is, as the names imply, innerText is interpreted as text where as innerHTML is interpreted as HTML. Therefore, innerText = "<b>inner text</b>" would display as <b>inner text</b> while innerHTML = <b>inner text</b>" would display as inner text. Note how the two links, below, produce different output. Change the innerHTML of the paragraph whose id ="sample". Change the innerText of the paragraph whose id ="sample". This is a paragraph whose id = "sample".
<script type="text/javascript"> function ChangeInnerHTML(theID, theHTML) { //the if conditional acts as a check //if theHTML is undefined, then it asks the user what it should be. //Reminder that undefined is different than the empty string (""). if (typeof theHTML == "undefined") { theHTML = window.prompt("Please specify innerHTML", "<b>hello world</b>"); } document.getElementById(theID).innerHTML = theHTML; } function ChangeInnerText(theID, theText) { document.getElementById(theID).innerText = theText; } </script>
<p><a href="javascript: ChangeInnerHTML('sample', 'This is a paragraph whose id = "sample" and the text has changed!');"> Change the innerHTML of the paragraph</a>.<br /> <a href="javascript: ChangeInnerText('sample', 'This is a paragraph whose id = "sample" and the text has changed!');">Change the innerText of the paragraph whose id ="sample"</a>. </p>
Recall that the <div></div> tag is often used to define a region within a page so that it can encompass several page elements, such as several paragraphs or a paragraph and a table. The innerHTML, style properites, etc. of the entire div can be changed. I.e., change the div (id="d1") to red; to purple; to white; change the innerHTML of the div.

Dynamic Hyper Text Markup Language

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Dynamic Hyper Text Markup Language

Hochgeladen von

Copyright:

Verfügbare Formate

Dynamic HTML (DHTML) is not a standard defined by the World Wide Web Consortium (W3C), it is a term that was

CGS 3066: Event Handlers

click on this text

HTML Event Handlers

The DHTML Document Object Model

frames history navigator location event screen

CGS 3066: DOM: Forms (continued)

Syntax to access oft-used properties of various form elements

formName.inputName.value : returns the value as a string Name:

Radio Buttons and Checkboxes

The code explained:

CGS 3066: DOM: Image and Style Rollovers

The code to produce this effect:

The code explained:

The code explained:

Das könnte Ihnen auch gefallen