Upload
eswin-angel
View
229
Download
0
Embed Size (px)
Citation preview
7/27/2019 Dynamic Hyper Text Markup Language
1/24
7/27/2019 Dynamic Hyper Text Markup Language
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
7/27/2019 Dynamic Hyper Text Markup Language
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!
7/27/2019 Dynamic Hyper Text Markup Language
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.php7/27/2019 Dynamic Hyper Text Markup Language
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.asp7/27/2019 Dynamic Hyper Text Markup Language
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/27/2019 Dynamic Hyper Text Markup Language
7/24
}
Click anywhere on this document to toggle the background
color to yellow back to its original color!
7/27/2019 Dynamic Hyper Text Markup Language
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/7/27/2019 Dynamic Hyper Text Markup Language
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
7/27/2019 Dynamic Hyper Text Markup Language
10/24
checkbox
healthcareTypePayer
radio
healthcareType
Provider
radio
healthcareType
Wholesaler/distributor
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
7/27/2019 Dynamic Hyper Text Markup Language
11/24
7/27/2019 Dynamic Hyper Text Markup Language
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
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.
7/27/2019 Dynamic Hyper Text Markup Language
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
7/27/2019 Dynamic Hyper Text Markup Language
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.php7/27/2019 Dynamic Hyper Text Markup Language
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.
7/27/2019 Dynamic Hyper Text Markup Language
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.
7/27/2019 Dynamic Hyper Text Markup Language
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.
7/27/2019 Dynamic Hyper Text Markup Language
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.
7/27/2019 Dynamic Hyper Text Markup Language
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:
7/27/2019 Dynamic Hyper Text Markup Language
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.
7/27/2019 Dynamic Hyper Text Markup Language
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.
The code to produce this effect:
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.
7/27/2019 Dynamic Hyper Text Markup Language
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
The code to produce this effect:
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.
7/27/2019 Dynamic Hyper Text Markup Language
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; }
7/27/2019 Dynamic Hyper Text Markup Language
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.