DHTMLexercises

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() {
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"
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>

function move(x,y,z) {
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"
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"
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"
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>
function AlignMe(a) {
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>
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>
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>
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>

DHTMLexercises

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

DHTMLexercises

Uploaded by

Copyright:

Available Formats

Some DHTML exercises

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

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

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

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

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

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

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

<h1>Event Handlers Example</h1>

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

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

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

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

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

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

<h1>A DHTML Scrolling Message</h1>

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

You might also like