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

Copyright:

Available Formats

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