43
Introduction to DHTML
| Date post: | 20-Jan-2016 |
| Category: |
Documents |
| Upload: | ronald-curtis |
| View: | 237 times |
| Download: | 1 times |
Introduction to DHTML
What is DHTML?
Dynamic HTML Just as Access is Dynamic Database
environment Can have controls that respond to events Can have centralized code modules Can be written in VB(script)
What is DHTML?
Dynamic Hypertext Markup Language is comprised of:– CSS (cascading style sheets)– DOM (document object module)– Scripting (Javascript and VBscript)
Allows for more interactivity and special effects on web pages.
Document Object Model (DOM)
Document Object Model (DOM)
DOM is an interface that permits scripts to access and update the content, structure and style of the document.
Every element of the web page can be dynamically updated in response to input from the user or other programs
HTML elements are treated as objects, their attributes are treated as properties of the objects
The DOM has a hierarchy of elements with the window as the top level object
Dynamic HTML:Object Model and Collections
The object model allows Web authors to control
the presentation of their pages and gives them
access to all the elements on their Web pages
Object Referencing
Simplest way to reference an element is by using element’s id attributes
Example:
function start()
{
alert(pText.innerText);
pText.innerText=“Thanks for coming”;
}
<body onload=“start()”>
<p id=“pText”>Welcome to our Web page!</p>
</body>
Collections all and children
Collections are arrays of related objects on a page. The all collection is collection (or array) of all the XHTML elements
in a document, in the order in which they appear.
function start()
{
for ( var loop = 0; loop < document.all.length; ++loop )
elements += "<br />" + document.all[ loop ].tagName;
pText.innerHTML += elements;
alert( elements );
}
<body onload = "start()">
<p id = "pText">Elements on this Web page:</p> </body>
Collections all and childrenvar elements = "<ul>";
function child( object ) { var loop = 0; elements += "<li>" + object.tagName + "<ul>"; for ( loop = 0; loop < object.children.length; loop++ ) { if ( object.children[ loo<p ].children.length ) child( object.children[ loop ] ); else elements += "<li>" + object.children[ loop ].tagName + "</li>"; } elements += "</ul>" + "</li>"; }
<body onload = "child( document.all[ 4 ] ); myDisplay.outerHTML += elements; myDisplay.outerHTML += '</ul>';">
<p>Welcome to our <strong>Web</strong> page!</p>
<p id = "myDisplay"> Elements on this Web page: </p>
</body>
Dynamic Styles
An element’s style can be changed dynamically. Often such a change is made in response to user events.
function start()
{
var inputColor = prompt("Enter a color name for the " +
"background of this page", "" );
document.body.style.backgroundColor = inputColor;
}
<body onload = "start()">
<p>Welcome to our Web site!</p>
</body>
Dynamic Styles
function start()
{
var inputClass = prompt(
"Enter a className for the text “ + , "" );
pText.className = inputClass;
}
<body onload = "start()">
<p id = "pText">Welcome to our Web site!</p>
</body>
Dynamic Positioning
Dynamic Positioning enables XHTML elements to be positioned with scripting.
This is done by declaring an element’s CSS position property to be either absolute or relative.
Moving the element by manipulating any of the top, left, right or bottom CSS properties.
We use scripting to vary the color, fontFamily or fontSize attributes.
Dynamic Positioning:Example
function start()
{
window.setInterval( "run()", 100 );
}
<body onload = "start()">
<p id = "pText" style = "position: absolute; left: 0;
font-family: serif; color: blue">
Welcome!</p>
</body>
A similar function to setInterval is setTimeout, which takes same
parameters but instead waits the specified amount of time before
calling the named function only once
Dynamic Positioning:Example
The clearTimeout and clearInterval functions are used to stop setTimeout and setInterval respectively
For example, if you started a setTimeout timer with
timer1=window.setInterval(‘run()”,200);
you could then stop the timer by calling
window.clearTimeout(timer1);
Which would stop the timer before it fired
frames collection
frames collection is useful to access those elements and objects are in different frames
<frameset rows = "100, *">
<frame src = "top.html" name = "upper" />
<frame src = "" name = "lower" />
</frameset>
function start()
{
var text = prompt( "What is your name?", "" );
parent.frames( "lower" ).document.write(
"<h1>Hello, " + text + "</h1>" );
}
navigator Object
navigator object contains information about the Web browser that is viewing the page
This is useful to redirecting from one browser to another browser
function start()
{ if ( navigator.appName == "Microsoft Internet Explorer" )
{ if ( navigator.appVersion.substring( 0, 1 ) >= "4" )
document.location = "newIEversion.html";
else
document.location = "oldIEversion.html";
}
else
document.location = "NSversion.html“; }
Dynamic HTML: Event model
Clicking a button, moving the mouse pointer over part of the Web page, selecting some text on the page—these actions all fire events, and a DHTML author can write code to run in response to the event.
Event onclick and onload
Event onclick
<body>
<!-- The id attribute gives a unique identifier -->
<p id = "para">Click on this text!</p>
<!-- You can specify event handlers inline -->
<input type = "button" value = "Click Me!"
onclick = "alert( 'Hi again' )" />
</body>
Event onclick and onload
Event onload
function start ()
{
alert(“Welcome to Nirma University”);
}
<body onload = "start()">
</body>
Error Handling with onerror
onerror event is used to execute specialized error-handling code
window.onerror = handleError;
function doThis() {
alrrt( "hi" ); // alert misspelled, creates an error
}
function handleError( errType, errURL, errLineNum )
{
window.status = "Error: " + errType + " on line " + errLineNum;
return true;
}
<body> <input id = "mybutton" type = "button" value = "Click Me!"
onclick = "doThis()" /></body>
This program works correctly only if “Script debugging” is disabled in IE.
Tools menu->Internet Option dialog->Advanced tab->Disabled script debugging
Tracking the Mouse with Event onmousemove
Event onmousemove fires repeatedly whenever the user moves the mouse over the web page.
The following program uses this event to updates a coordinate display that gives the position of the mouse in the coordinate system of the object containing the mouse cursor
Tracking the Mouse with Event onmousemove
function updateMouseCoordinates()
{
coordinates.innerText = event.srcElement.tagName +
" (" + event.clientX + ", " + event.clientY + ")";
}
<body style = "background-color: wheat" onmousemove = "updateMouseCoordinates()">
<span id = "coordinates">(0, 0)</span><br />
<img src = "deitel.gif" style = "position: absolute;
top: 100; left: 100" alt = "Deitel" />
</body>
Rollovers with onmouseover and onmouseout
When the mouse cursor move over an element, an onmouseover event occurs for that element
When the mouse cursor leaves the element, an onmouseout event occurs for that element
<html>
<body>
<a href="http://www.cit.cornell.edu"
onmouseover="document.logo.src='malaram.jpg' "
onmouseout ="document.logo.src='harry.gif ' " >
<img name="logo" src="harry.gif " border=0></a>
</body>
</html>
Form Processing with onfocus and onblur
The onfocus event fires when an element gains focus. The onblur event fires when an element loses focus.
var helpArray = [ "Enter your name in this input box.“, "Enter your email address in this input
box, “];
function helpText( messageNum )
{
myForm.helpBox.value = helpArray[ messageNum ];
}
<form id = "myForm" action = "">
Name: <input type = "text" name = "name"
onfocus = "helpText(0)" onblur = "helpText(6)" /><br />
Email: <input type = "text" name = "email"
onfocus = "helpText(1)" onblur = "helpText(6)" />
</form
<textarea name = "helpBox">
</textarea>
More Form Processing with onsubmit and onreset
These two events fire when a form is submitted or reset, respectively.
function formSubmit() {
window.event.returnValue = false;
if ( confirm ( "Are you sure you want to submit?" ) )
window.event.returnValue = true;
}
function formReset() {
window.event.returnValue = false;
if ( confirm( "Are you sure you want to reset?" ) )
window.event.returnValue = true;
}
<form id = "myForm" onsubmit = "formSubmit()"
onreset = "formReset()" action = "">
</form>
Event Bubbling
Event bubbling is the process whereby events fired in child elements “bubble” up to their parent element.
function documentClick() {
alert( "You clicked in the document" );
}
function paragraphClick( value ) {
alert( "You clicked the text" );
if ( value )
event.cancelBubble = true;
}
document.onclick = documentClick;
<body>
<p onclick = "paragraphClick( false )">Click here!</p>
<p onclick = "paragraphClick( true )">Click here, too!</p>
</body>
Dynamic HTML: Filters and Transitions
Filters and transitions are specified with the CSS filter property. Applying filters to text and images causes changes that are
persistent. Transitions are temporary; applying a transition allow to transfer
from one page to another with pleasant visual effect, such as a random dissolve.
Filters and transitions do not add content to your pages-rather, they present existing content in an engaging manner to capture the user’s attention.
Filters and transitions are Microsoft technologies available only in Windows-based versions of IE6. Do not use these capabilities if you are writing other browsers
Flip Filters: flipv and fliph
The flipv and fliph filters mirror text or images vertically and horizontally.
<body>
<table>
<tr>
<td style = "filter: fliph">Text</td>
<td>Text</td></tr>
<tr>
<td style = "filter: flipv fliph">Text</td>
<td style = "filter: flipv">Text</td></tr>
</table>
</body>
Flip Filters: flipv and fliph
Transparency with the chroma filter
The chroma filter applies transparency effects dynamically, without using a graphics editor to hard-code transparency into the image.
function changecolor( theColor )
{
if ( theColor ) {
chromaImg.filters( "chroma" ).color = theColor;
chromaImg.filters( "chroma" ).enabled = true;
}
else
chromaImg.filters( "chroma" ).enabled = false;
}
<img id = "chromaImg" src = "trans.gif" style ="position: absolute; filter: chroma" alt =
"Transparent Image" />
Transparency with the chroma filter
<select onchange = "changecolor( this.value )">
<option value = "">None</option>
<option value = "#00FFFF">Cyan</option>
<option value = "#FFFF00">Yellow</option>
<option value = "#FF00FF">Magenta</option>
<option value = "#000000" selected = "selected“> Black</option>
</select>
Transparency with the chroma filter
Creating Image masks
Applying the mask filter to an image allows you to create an effect in which an element’s background is a solid color and its foreground is transparent, so the image or color behind it show through.
<body>
<h1>Mask Filter</h1>
<div style = "position: absolute; top: 125; left: 20; filter: mask( color =#CCFFFF)">
<h1 style = "font-family: Courier, monospace">
AaBbCcDdEeFfGgHhIiJj<br />
KkLlMmNnOoPpQqRrSsTt
</h1></div>
<img src = "gradient.gif" width = "400" height = "200"
alt = "Image with Gradient Effect" />
</body>
Creating Image masks
Image Filters: invert, gray and xray
<tr>
<td><img src = "hc.jpg" alt = "normal scenic view" /></td>
<td><img src = "hc.jpg" style = "filter: gray“ alt = "gray scenic view"/>
</td>
</tr>
<tr>
<td><img src = "hc.jpg" style = "filter: xray“ alt = "xray scenic view"/>
</td>
<td><img src = "hc.jpg" style = "filter: invert“ alt = "inverted scenic view"/>
</td>
</tr>
Image Filters: invert, gray and xray
Adding shadows to Text
A simple filter that adds depth to your text is the shadow filter. This filter creates a shadowing effect that gives your text a three-
dimensional appearance.var shadowDirection = 0;
function start()
{
window.setInterval( "runDemo()", 500 );
}
function runDemo()
{
shadowText.innerText = "Shadow Direction: " + shadowDirection % 360;
shadowText.filters( "shadow" ).direction = ( shadowDirection % 360 );
shadowDirection += 45; }
Adding shadows to Text
<body onload = "start()">
<h1 id = "shadowText" style = "position: absolute; top: 25;
left: 25; padding: 10; filter: shadow( direction = 0,
color = red )">Shadow Direction: 0</h1>
</body>
Creating Gradient with alpha
This filter is used to achieve gradient effectfunction run()
{
pic.filters( "alpha" ).opacity = opacityButton.value;
pic.filters( "alpha" ).finishopacity =
opacityButton2.value;
pic.filters( "alpha" ).style = styleSelect.value;
}
<div id = "pic“ style = "position: absolute; left:0; top: 0;filter: alpha( style = 2, opacity = 100,
finishopacity = 0 )">
<img src = "flag.gif" alt = "Flag" />
</div>
Opacity: Color saturation of an image.
Creating Gradient with alpha
Making Text glow
This filter is used to make text glow.var colorArray = [ "FF0000", "FFFF00", "00FF00“,"00FFFF", "0000FF", "FF00FF" ];
function apply()
{
glowSpan.filters( "glow" ).color = parseInt( glowColor.value, 16 );
glowSpan.filters( "glow" ).strength = glowStrength.value;
}
function startdemo()
{
window.setInterval( "rundemo()", 150 );
}
<span id = "glowSpan" style = "position: absolute;left: 200;top: 100; padding: 5; filter: glow(
color = red, strength = 5 ); font-size: 2em“>Glowing Text
</span>
Making Text glow
Creating Motion with blur
The blur filter creates an illusion of motion by blurring text or image in a certain direction.
