JavaScript in Web Pages
The total collection of code making up the special effect is found in different categories. You will be copying scripts from one page to another. It is important to know where to look for the complete code. Those categories are as follows:
1) Script that is totally contained in the Head section (between <HEAD> and </HEAD>)
2) Script that is totally contained in the Body section (between <BODY> and </BODY>)
3) Script that in both the Head and Body sections
4) Script that uses a file or document external to the web page containing the script.
5) Script that uses the Body tag itself <BODY xxxx>
In order to better understand these categories, a couple of examples might be helpful. You can quickly scroll down to see the location of the scripts in each example. Don't try to decipher the code itself, but focus on where it is located - i.e. between which tags.
An example of a script that is totally found inside the Head tags:
Circle-Solver (Math) to see the script in action
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function circle(form,changed) {
with (Math) {
var area = form.area.value;
var diameter = form.diameter.value;
var circumference = form.circumference.value;
if (changed == "area") {
var radius = sqrt(area / PI);
diameter = 2 * radius;
circumference = PI * diameter;
}
if (changed == "diameter") {
area = PI * (diameter / 2) * (diameter / 2);
circumference = PI * diameter;
}
if (changed == "circumference") {
diameter = circumference / PI;
area = PI * (diameter / 2) * (diameter / 2);
}
form.area.value = area;
form.diameter.value = diameter;
form.circumference.value = circumference;
}
}
var toDegrees = 360 / (Math.PI * 2);
var toRadians = (Math.PI * 2) / 360;
// End -->
</script></HEAD>
An example of a script that is found totally inside the Body section:
See the page at Corner in Time
<BODY>
<center><BR><BR><BR>
<span id="liveclock" style="position:absolute;left:0;top:0;"> </span>
<script language="JavaScript">
<!--
function show5(){
if (!document.layers&&!document.all&&!document.getElementById)
returnvar Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()var dn="PM"
if (hours<12)
dn="AM"
if (hours>12)
hours=hours-12
if (hours==0)
hours=12if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
//change font size here to your desire
myclock="<font size='5' face='Arial' ><b><font size='1'>Current Time:</font></br>"+hours+":"+minutes+":"
+seconds+" "+dn+"</b></font>"
if (document.layers){
document.layers.liveclock.document.write(myclock)
document.layers.liveclock.document.close()
}
else if (document.all)
liveclock.innerHTML=myclock
else if (document.getElementById)
document.getElementById("liveclock").innerHTML=myclock
setTimeout("show5()",1000)
}
window.onload=show5
//-->
</script></center>
</BODY>
An example of a special effect using the Head Section, the Body Section, and the Body Tag itself.
See the page at text - line-scroller
<HTML>
<HEAD>
<META NAME="Generator" CONTENT="TextPad 4.4">
<LINK href="general.css" rel="stylesheet" type="text/css">
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Begin
var l1 = 0; // left of ticker in pixel, or 0 to position relative
var t1 = 0; // top of ticker in pixel, or 0 to position relative
var w1 = 400; // width of ticker in pixel
var ie = document.all ? true : false;
var first = true;
var l2 = l1 + w1;
var l3 = l1 - l2;
var l = l2;
function tickinit() {
if (ie) {
if (l1 == 0 && t1 == 0) {
pos = document.all['tickpos'];
l1 = getLeft(pos);
t1 = getTop(pos);
}
ticktext.style.posTop = t1;
}
else {
if (l1 == 0 && t1 == 0) {
pos = document.anchors['tickpos'];
l1 = pos.x;
t1 = pos.y;
}
document.ticktext.pageY = t1;
}
l2 = l1 + w1;
l3 = l1 - l2;
l = l2;
setInterval('tick()', 10);
}
function getLeft(ll) {
if (ll.offsetParent)
return (ll.offsetLeft + getLeft(ll.offsetParent));
else
return (ll.offsetLeft);
}
function getTop(ll) {
if (ll.offsetParent)
return (ll.offsetTop + getTop(ll.offsetParent));
else
return (ll.offsetTop);
}
function tick() {
l = l - 0.5;
if (l < l3) l = l2;
cl = l1 - l;
cr = l2 - l;
if (ie) {
ticktext.style.posLeft = l;
ticktext.style.posTop = t1;
ticktext.style.clip = "rect(auto "+cr+"px auto "+cl+"px)";
if (first) ticktext.style.visibility = "visible";
}
else {
document.ticktext.pageX = l;
document.ticktext.clip.left = cl;
document.ticktext.clip.right = cr;
if (first) document.ticktext.visibility = "show";
}
first = false;
}
// End -->
</script></HEAD>
<BODY bgcolor=white OnLoad="tickinit()">
<center><BR><BR><BR>
<a name="tickpos"> </a>
<div id="ticktext" style="position:absolute;font-family:arial;font-size:14pt;visibility:hidden;">
<nobr>Doesn't this message scroller look great? You can even insert links like this: <a href="http://www.yahoo.com" target="_blank">yahoo.com</a> Now it repeats.</nobr>
</div></center>
</BODY>
</HTML>
Now you should be ready to actually begin the copy process. We have just a few more tips if you are interested.