DES 3006 - Web Design II

  DES 3006 - Web Design II

  
image

HTML VALIDATOR

CSS VALIDATOR

 

 

Valid HTML 4.01!

Valid CSS!

 

Week Twelve | Part Two: More Client-side Scripting

Why Learn DOM Scripting?

In Week Eleven we began to explore JavaScript and some of the things a designer can do with it. The examples allowed for a little fun, but there were some valuable lessons to learn. The most important lesson was your ability as a designer to allow the user more control over the content they wished to see.

The point of DOM Scripting is to be dynamic --- not static. Once you code in HTML your design is stuck, and the user has no way to influence how it looks or how it works. This ability for the visitor to have greater control over their experience harkens back to an earlier lecture on Web usability. If you keep your visitor at the center of your design efforts you will automatically create a Web site that will surprise and impress your users.

More Advanced Scripts

We aren't quite done with experimenting with JavaScript. What I've done is grab some easy but still higher level scripts to play with. These bits of code come to us courtesy of http://www.jsworkshop.com/dhtmlexamples.html.

What I'd like you to do is simply copy and paste this code into your code editor, preview is in your browser, and watch what each script does. Be sure to check your spelling with these samples and experiment with how you could change them.

JavaScript One: Dynamic Text in JavaScript

<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>

JavaScript Two: Modifying Attributes with DHTML

<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>

JavaScript Three: Adding and Removing DOM Nodes

<html>
<head>
	<title>Adding and Removing DOM Nodes</title>
<script language="JavaScript">
function AddNode(tag) {
   if (!document.getElementById) return;
   element = document.createElement(tag);
   if (tag != "HR") {
      txt = document.form1.newtext.value;
      element.innerHTML=txt;
   }
   s=document.getElementById("addhere");
   s.appendChild(element);
}
function DeleteNode() {
   if (!document.getElementById) return;
   s=document.getElementById("addhere");
   s.removeChild(s.lastChild);
}
</script>
</head>
<body>
<h1>Adding and Removing Nodes</h1>
<p ID="intro">Enter some text and use the buttons below to add
or remove nodes from this page's DOM hierarchy.</p>
<span ID="addhere">
</span>
<form name="form1" ID="form1">
<input type="text" name="newtext" size="70"><br>

<input type="button" value="Add Paragraph"
   onClick="AddNode('P');">
<input type="button" value="Add Heading"
   onClick="AddNode('H3');">
<input type="button" value="Add Line"
   onClick="AddNode('HR');">
<input type="button" value="Delete a Node"
   onClick="DeleteNode();">
</form>
</body>
</html>

JavaScript Four: Dynamic Colors

<html>
<head>
<title>Dynamic Colors</title>
<script language="JavaScript">
function HColor(c) {
   h=document.getElementById("head1");
   h.style.color=c;
}
function PColor(c) {
   paras=document.getElementsByTagName("P");
   for (i=0;i<paras.length;i++) {
      if (paras[i].className=="para")
        paras[i].style.color=c;
   }
}
</script>
</head>
<body>
<h1 ID="head1">Dynamic Colors</h1>
<p CLASS="para">This document inclues a short script that
uses DHTML to change the colors of objects
by manipulating style properties.</p>
<p CLASS="para">You can change this page's heading to
<a href="javascript:HColor('red');">red</a>,
<a href="javascript:HColor('blue');">blue</a>,
or <a href="javascript:HColor('black');">black</a>.
You can also change the color of these two paragraphs 
of text to <a href="javascript:PColor('red')">red</a>,

<a href="javascript:PColor('blue')">blue</a>, or
<a href="javascript:PColor('green')">green</a>.
</p>
<p>The paragraphs can all change color at once because
they are in the same class. This particular paragraph doesn't
change color since it doesn't have a CLASS attribute.</p>
</body>
</html>

JavaScript Five: Scrolling Messages in DHTML

<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>
</body>
</html>

JavaScript Six: Follow that Dog!

<html>
<head>
<title>Follow that Dog!</title>
<script language="JavaScript">
var Netscape=(navigator.appName.indexOf("Netscape") != -1);
function Move(e) {
  if (!document.getElementById) return;
  obj=document.getElementById("mouse");
  if (Netscape)
    event=e;
  if (event.pageX) { // Netscape...
    xpointer=event.pageX;
    ypointer=event.pageY;
  }
  else if (event.x) { // Internet Explorer...
    xpointer=event.x;
	ypointer=event.y;
  }
  obj.style.left=xpointer - 50;
  obj.style.top=ypointer - 50;
}
function Setup() {
  if (!document.getElementById) return;
  if (Netscape) 
    document.captureEvents(Event.MOUSEMOVE);
  document.onmousemove=Move;
}
</script>
</head>
<body onLoad="Setup();">
<h1>Animation in DHTML</h1>
<div ID="mouse" style="position:absolute; left:150; top:150;">
<img src="http://www.bigplum.com/DES306/images/snuffy.jpg" width="150" height="150" alt="">
</div>
</body>
</html>

 

Go to Week Twelve - Part III