Dynamic Hyper Text Markup Language

7/27/2019 Dynamic Hyper Text Markup Language

1/24


2/24

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. Ingeneral, 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 radiobutton. Therefore, it does support the onclick event handler.

The example below defines a header that turns red when a user clicks on it.

Clickon this text

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:

function changecolor(){ document.getElementById('header').style.color="red" }

Click on this text

HTML Event Handlers

Note: this is a partial list. A more complete list may be found in the textbook pg. 470.

Event Occurs when...

onabort a user aborts page loading

onblur a user leaves an object

onchange a user changes the value of an object

onclick a user clicks on an object


3/24

ondblclick a user double-clicks on an object

onfocus a user makes an object active

onkeydown a keyboard key is on its way down

onkeypress a keyboard key is pressed

onkeyup a keyboard key is released

onloada page is finished loading. Note: In Netscape, this event

occurs during the loading of a page.

onmousedown a user presses a mouse-button

onmousemove a cursor moves on an object

onmouseover a cursor moves over an object

onmouseout a cursor moves off an object

onmouseup a user releases a mouse-button

onreset a user resets a form

onselect a user selects content on a page

onsubmit a user submits a form

onunload 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 originalcolor!


4/24

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 valueof 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)

My headerdocument.getElementById('header').style.color = "red"

The script changes the color of the header element, and produces the output below. Note thesingle 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 ofthe name attribute. Although the name attribute is still supported in XHTML 1.1, it is supportedto 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
http://ww2.cs.fsu.edu/~searles/cgs3066/lectures/lecture07/domviewer.htmlhttp://www.brainjar.com/dhtml/domviewer/http://ww2.cs.fsu.edu/~searles/cgs3066/lectures/lecture07/domForm.phphttp://ww2.cs.fsu.edu/~searles/cgs3066/lectures/lecture07/domviewer.htmlhttp://www.brainjar.com/dhtml/domviewer/http://ww2.cs.fsu.edu/~searles/cgs3066/lectures/lecture07/domForm.php


5/24

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.

document Represents the HTML document, and is used to accessthe HTML elements inside the document

frames Represents the frameset

history Keeps track of the sites vissited by the browser object.

navigator Contains information about the user's browser

location Contains the URL of the rendered document

event Contains information about events that occurs

screen Contains information about the computer screen for

the computer on which the browser is running.

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 element of the HTMLdocument.

The document object is the parent of the body object, and the body object isa child of the document object.

You can see a list of all the HTML document objects in the HTML DOMReference.

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, setsthe background color of the HTML document to yellow.

You can see a list of all the HTML document object properties in the HTMLDOM Reference.
http://www.w3schools.com/htmldom/dom_reference.asphttp://www.w3schools.com/htmldom/dom_reference.asphttp://www.w3schools.com/htmldom/dom_reference.asphttp://www.w3schools.com/htmldom/dom_reference.asphttp://www.w3schools.com/htmldom/dom_reference.asphttp://www.w3schools.com/htmldom/dom_reference.asphttp://www.w3schools.com/htmldom/dom_reference.asphttp://www.w3schools.com/htmldom/dom_reference.asp


6/24

Object Events

HTML document objects can respond to events. The onclick="ChangeColor()" attribute of the 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 userclicks on the HTML document.

function ChangeColor(){document.body.bgColor="yellow"}

Click on this document!

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:

function ChangeColor(){

curBgColor = document.body.style.background;if (curBgColor == "#ffffcc" || curBgColor == ""){

document.body.style.background="yellow";}else{

document.body.style.background="#ffffcc";}


7/24

}

Click anywhere on this document to toggle the background

color to yellow back to its original color!


8/24

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 isequivalent 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 checkedproperty of the 0th element of the elements array of the 0th form of theforms array of the object model

2. document.forms['form1'].elements[0].checked : a reference to the checkedproperty 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 objectmodel

4. document.forms['form1'].elements['contact'].checked : a reference to thechecked property of the element named 'contact' of the elements array ofthe form named 'form1' of the forms array of the object model

5. document.form1.contact.checked : a reference to the checked property ofthe item named contact within the item named form1 within the documentobject

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
http://ww2.cs.fsu.edu/~searles/cgs3066/lectures/lecture07/domFormElements.phphttp://ww2.cs.fsu.edu/~searles/cgs3066/lectures/lecture07/domviewer.htmlhttp://www.brainjar.com/dhtml/domviewer/http://ww2.cs.fsu.edu/~searles/cgs3066/lectures/lecture07/domFormElements.phphttp://ww2.cs.fsu.edu/~searles/cgs3066/lectures/lecture07/domviewer.htmlhttp://www.brainjar.com/dhtml/domviewer/


9/24

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 isgenerated 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 afterthat element has been loaded into the document.

for (i=0; i < document.forms[0].elements.length;i++){document.write(document.forms[0].elements[i].name +

"
");//syntax below uses the name attribute of the form to

access the form's elementsdocument.write(document.form1.elements[i].value +

"
");document.write(document.forms[0].elements[i].type + "
");}

contact

Yes


10/24

checkbox

healthcareTypePayer

radio

healthcareType

Provider

radio

healthcareType


radio

healthcareType

Device manufacturer

radio

OpportunityA partnership/stragetic opportunity

radio

Opportunity

Both internal and client managed hosting

radio

siteType

Complex, mission-critical

radio

siteType

Simple, non-transactionalradio

platform

Windows NTcheckbox

platformWindows 2000

checkbox

platform

Windows XP

checkbox


11/24


12/24

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 truefor 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


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.


13/24

formName.selectMenuName.selectedIndex : returns the index, as a number, of the selected

option.

formName.selectMenuName[formName.selectMenuName.selectedIndex].value : a combinationof the above two statements. This syntax returns the value of the selected option.

State:

Submit Form

Reset Form


14/24

The Style object represents an individual style statement. You can think of an individual stylestatement 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 commonstyle 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.backgroundImageSets or retrieves the background image of the object.

style.border

Sets or retrieves the width of the border to draw around the object.

style.borderBottomSets 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.
http://ww2.cs.fsu.edu/~searles/cgs3066/lectures/lecture07/domStylesExamples.phphttp://ww2.cs.fsu.edu/~searles/cgs3066/lectures/lecture07/domRollovers.php#stylehttp://ww2.cs.fsu.edu/~searles/cgs3066/lectures/lecture07/domStylesExamples2.phphttp://ww2.cs.fsu.edu/~searles/cgs3066/lectures/lecture07/domStylesExamples.phphttp://ww2.cs.fsu.edu/~searles/cgs3066/lectures/lecture07/domRollovers.php#stylehttp://ww2.cs.fsu.edu/~searles/cgs3066/lectures/lecture07/domStylesExamples2.php


15/24

style.borderBottomWidth

Sets or retrieves the width of the bottom border of the object.

style.borderCollapseSets 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.borderLeftSets 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.borderLeftStyleSets 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.borderTopStyleSets or retrieves the style of the top border of the object.


16/24

style.borderTopWidth

Sets or retrieves the width of the top border of the object.

style.borderWidthSets 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.fontFamilySets 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.marginRightSets or retrieves the width of the right margin of the object.


17/24

style.marginTop

Sets or retrieves the height of the top margin of the object.

style.marginWidthSets 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.paddingBottomSets 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 thecontent.

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.textDecorationSets 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.topMarginSets 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 containsthem.


18/24

style.visibility

Sets or retrieves whether the content of the object is displayed.

style.zIndexSets or retrieves the stacking order of positioned objects.


19/24

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:

function ChangeColor(theColor){ document.getElementById('form1').style.background = theColor;}

function ChangeFont(theFont, theID){ document.getElementById(theID).style.fontFamily = theFont; }

Change the background of the form to what color?
green

Change the font-family of the form to what?
verdana

The code explained:


20/24

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 thoseradio 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 secondparameter"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.


21/24

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 itreverts 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.


function swap(img_name,img_src){document[img_name].src = img_src;

}

The code explained:

The JavaScript function, swap() is invoked both by the onmouseover and onmouseoutevent 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 sourcefile for the image.


22/24

o 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


function swapStyle(s, bgColor, fgColor){s.style.background = bgColor;s.style.color = fgColor;}

Home

Contact

The code explained:

The JavaScript function, swapStyle() is invoked both by the onmouseover andonmouseout 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.


23/24

o 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.

o 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 innerHTMLis, as the names imply, innerText is interpreted as text where as innerHTML is interpreted as

HTML. Therefore, innerText = "inner text" would display as inner text while

innerHTML = inner text" 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".

function ChangeInnerHTML(theID, theHTML){//the if conditional acts as a check//if theHTML is undefined, then it asks the user what itshould be.//Reminder that undefined is different than the empty string("").

if (typeof theHTML == "undefined"){ theHTML = window.prompt("Please specify innerHTML","hello world"); }document.getElementById(theID).innerHTML = theHTML;}

function ChangeInnerText(theID, theText){ document.getElementById(theID).innerText = theText; }


24/24

Change the innerHTML of the paragraph.
Change the innerText of theparagraph whose id ="sample".

Recall that the tag is often used to define a region within a page so that it canencompass 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; topurple; to white; change the innerHTML of the div.

Date post:	02-Apr-2018
Category:	Documents
Upload:	eswin-angel
View:	225 times
Download:	0 times

Dynamic Hyper Text Markup Language

Documents