Scribd
Upload
33 views

DHTMLexercises

The document contains 9 exercises demonstrating various dynamic HTML (DHTML) techniques. The exercises include: 1) adding descriptive text on mouseover links, 2) hiding/showing headings with checkboxes, 3) positioning layers, 4) moving layers with buttons, 5) modifying attributes, 6) logging events, 7) fading text, 8) moving text, and 9) scrolling messages. The exercises provide scripts and HTML to experiment with different DHTML behaviors.

Uploaded by

shantanu das
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
33 views

DHTMLexercises

The document contains 9 exercises demonstrating various dynamic HTML (DHTML) techniques. The exercises include: 1) adding descriptive text on mouseover links, 2) hiding/showing headings with checkboxes, 3) positioning layers, 4) moving layers with buttons, 5) modifying attributes, 6) logging events, 7) fading text, 8) moving text, and 9) scrolling messages. The exercises provide scripts and HTML to experiment with different DHTML behaviors.

Uploaded by

shantanu das
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 8

Some DHTML exercises

Type the following scripts into an editor. I suggest you use PFE rather than Notepad.
Save them as htm files. View them. Understand what they do.

Exercise 1

<html> <head> <title>My Industries, Inc.</title>


<script language="JavaScript">
function describe(text) {
if (!document.getElementById) return;
box=document.getElementById("desc")
box.innerHTML=text;
}
</script> </head>
<body>
<p> <h1>Welcome to My Industries! </h1>
<p> Welcome! This is the home page of My Industries imaginary products. Follow the
links below to learn. </p>
<table border="1" align="center">
<tr>
<td width="20%"><a href="products.html" onMouseOut="describe('...');"
onMouseOver="describe('Information about our exciting products');">
<b>Products</b></a></td>
<td width="20%"><a href="sales.html" onMouseOut="describe('...');"
onMouseOver="describe('Contact our Sales Department');">
<b>Sales</b></a></td>
<td width="20%"><a href="service.html" onMouseOut="describe('...');"
onMouseOver="describe('Find service and support information');">
<b>Service</b></a></td>
<td width="20%"><a href="staff.html" onMouseOut="describe('...');"
onMouseOver="describe('Learn about or contact our staff');">
<b>Staff</b></a></td>
<td width="20%"><a href="jobs.html" onMouseOut="describe('...');"
onMouseOver="describe('Employment opportunities available');">
<b>Employment</b></a></td>
</tr>
<tr><td ID="desc" align='center' colspan="5">...</td></tr>
</table>
<p>Any truly legitimate company would have much more text in this
part of the page than we have.</p>
</body> </html>
Exercise 2
<html> <head> <title>Dynamic Text in JavaScript</title>
<script language="Javascript">
function ShowHide() {
if (!document.getElementById) return;
var head1 = document.getElementById("head1");
var head2 = document.getElementById("head2");
var showhead1 = document.form1.head1.checked;
var showhead2 = document.form1.head2.checked;
head1.style.visibility=(showhead1) ? "visible" : "hidden";
head2.style.visibility=(showhead2) ? "visible" : "hidden";
}
</script> </head>
<body>
<h1 ID="head1">Now You See It</h1>
<h1 ID="head2">Now You Don't</h1>
<p>The W3C DOM and DHTML allow you to
hide or show the two headings on this page.</p>
<form name="form1">
<input type="checkbox" name="head1" checked onClick="ShowHide();">
<b> Show first heading </b> <br>
<input type="checkbox" name="head2" checked onClick="ShowHide();">
<b> Show second heading</b><br>
</form> </body> </html>

Exercise 3

<html> <head> <title>Layers Example</title> </head>


<body>
<h1>Example Layered Document</h1>
<div ID="layer1"
STYLE="position: absolute; left: 280; top: 100; width:250; height:150;
background-color:yellow">
<h1>First Layer</h1>
This is the first layer. It appears on the right side of the page, although it was defined
first. </div>
<div ID="layer2"
STYLE="position: absolute; left: 20; top: 100; width:250; height:150;
background-color:Aqua">
<h1>Second Layer</h1>
This is the second layer. It appears on the left side, although it was defined second.
</div>
</body> </html>
Exercise 4

<html> <head><title>Layers in DHTML</title>


<script language="JavaScript">
function move(x,y,z) {
if (!document.getElementById) return;
for(i=0;i<4;i++) {
if (document.form1.what[i].checked)
tomove=document.form1.what[i].value;
}
obj=document.getElementById(tomove);
obj.style.left = parseInt(obj.style.left) + x;
obj.style.top = parseInt(obj.style.top) + y;
obj.style.zIndex=parseInt(obj.style.zIndex) + z;
}
</script> </head>
<body>
<h1 ID="heading" style="position: absolute; left: 20; top: 5">
Controlling Layers with DHTML</h1>
<div ID="layer1"
STYLE="position: absolute; left: 20; top: 50; width:250; height:150;
background-color:yellow">
<h1>First Layer</h1>
This is the first layer. It started out on the left side of the page. </div>
<div ID="layer2"
STYLE="position: absolute; left: 280; top: 50; width:250; height:150;
background-color:Aqua">
<h1>Second Layer</h1>
This is the second layer. It started out on the right side of the page. </div>
<div ID="control"
STYLE="position: absolute; left: 20; top: 210; width:350; height:255;
background-color:lightblue">
<h1>Control Panel</h1>
<form name="form1">
Use these controls to move the layers and other elements on the page. <br>
<input type="radio" name="what" value="layer1" checked> Layer 1
<input type="radio" name="what" value="layer2"> Layer 2
<input type="radio" name="what" value="heading"> Heading
<input type="radio" name="what" value="control">This Panel<br>
<table align="center">
<tr>
<td colspan="2" align="center">
<input type="button" name="up" value="Up" onClick="move(0,-30,0);">
</td></tr>
<tr>
<td align="left">
<input type="button" name="left" value=" Left " onClick="move(-30,0,0);">
</td>
<td align="right">
<input type="button" name="right" value="Right" onClick="move(30,0,0);">
</td> </tr>
<tr>
<td colspan="2" align="center">
<input type="button" name="down" value="Down" onClick="move(0,30,0);">
<br>
<input type="button" name="zminus" value="Z minus" onClick="move(0,0,-1);">
<input type="button" name="zplus" value="Z plus" onClick="move(0,0,1);">
</td> </tr>
</table> </form> </div>
</body> </html>

Exercise 5

<html> <head> <title>Modifying Attributes with DHTML</title>

<script language="JavaScript">
function AlignMe(a) {
if (!document.getElementById) return;
h=document.getElementById("head1");
h.setAttribute("align",a);
}
</script> </head>

<body>

<h1 ID="head1" align="left">Modifying Attributes</h1>

<p>This is a demonstration of changing HTML attributes using DHTML. You can


change the alignment of the heading above to
<a href="javascript:AlignMe('left');">left</a>,
<a href="javascript:AlignMe('right');">right</a>,
or <a href="javascript:AlignMe('center');">centered</a> using the links in this paragraph.
</p>

</body> </html>
Exercise 6

<html> <head> <title>Event Handlers Example</title>

<script language="JavaScript">
function DisplayEvent(e) {
span=document.getElementById("addhere");
logentry= e.type;
if (e.type=="keypress") {
if (e.keyCode) keycode=e.keyCode;
else keycode=e.which;
key=String.fromCharCode(keycode);
logentry += " key=" + key;
}
if (e.type=="mousedown"||e.type=="mouseup"||e.type=="click") {
if (e.button) button=e.button;
else button=e.which;
logentry += " button=" + button;
}
txt=document.createTextNode(logentry);
span.appendChild(txt);
span.appendChild(document.createElement("BR"));
}
</script> </head>

<body onKeyPress="DisplayEvent(event);">

<h1>Event Handlers Example</h1>


<p>Move the mouse in and out of the box below, or click on it. The events that occur
will be listed below.</p>

<h1 style="color:blue" align="center" onMouseOver="DisplayEvent(event);"


onMouseOut="DisplayEvent(event);" onClick="DisplayEvent(event);"
onMouseUp="DisplayEvent(event);" onMouseDown="DisplayEvent(event);">
Generate Events Here
</h1>

<b>Event Log:</b><hr>
<span ID="addhere"></span>

</body> </html>
Exercise 7

<html> <head> <title>Fading Text Example</title>


<script language="javascript">
var hcolor=255;
function Fade(direction) {
obj=document.getElementById("head1");
hcolor += direction;
if (hcolor >= 0 && hcolor < 256) {
hex=hcolor.toString(16);
if (hex.length==1) hex="0" + hex;
obj.style.color="#" + hex + hex + hex;
window.setTimeout("Fade(" + direction + ");",1);
}
}
</script> </head>
<body onLoad="Fade(-1);">

<h1 ID="head1" style="color:#FFFFFF;">


Fading Text Example</h1>
<p>The heading of this page fades in gradually when you load the page, and you can <a
href="javascript:Fade(1);">fade it out</a> or
<a href="javascript:Fade(-1);">back in</a> using these links. This is accomplished by
changing the color of the heading using DHTML.</p>
</body> </html>

Exercise 8

<html> <head> <title>Moving Text Example</title>

<script language="javascript">
var pos=0;
var direction=1;
function Move() {
obj=document.getElementById("head1");
pos += direction;
if (pos >= 100 || pos <= -100) direction = 0 - direction;
obj.style.left=pos;
window.setTimeout("Move();",25);
}
</script> </head>
<body onLoad="Move();">

<h1 align="center" style="position: relative;" ID="head1"> Moving Text


Example</h1>
<p>The heading of this page moves back and forth across the page. This is done using
DHTML and the style attributes that control positioning.</p>
</body> </html>

Exercise 9

<html> <head> <title>Scrolling Messages in DHTML</title>

<script language="javascript">
msg = "This is an example of a scrolling message. ";
msg += "Notice that the actual message is larger ";
msg += "and only a portion is displayed at once. ";
pos = 0;
function ScrollMessage() {
newtext = msg.substring(pos, msg.length) + "... ..." + msg.substring(0, pos);
newtext=newtext.substring(0,80);
obj = document.getElementById("scroll");
obj.firstChild.nodeValue = newtext;
pos++;
if (pos > msg.length) pos = 0;
window.setTimeout("ScrollMessage()",100);
}
</script> </head>

<body onLoad="ScrollMessage();">

<h1>A DHTML Scrolling Message</h1>

<p>The text below is scrolled across the screen using DHTML. This allows text to be
scrolled directly in the body of the page rather than within a form or the status line.</p>

<hr>
<pre ID="scroll">This text is required, but will be replaced.</pre>
<hr>

</body> </html>
Template

<html> <head> <title> </title>


<script language="Javascript">

function (){

}
</script> </head>
<body>
<h1> </h1>
<p>

</p>
</body> </html>

You might also like