HTML and CSS Reference
In-Depth Information
When you use this Web page, you have complete and fast interactivity. You can zoom in,
zoom out, move around the map, get directions from one point to another, view the loca-
tion's terrain, see traffic, view a satellite picture, and so on. In Chapter 18 we discuss how
this technique works, but for now think of it as JavaScript on steroids.
Example 1.1 demonstrates a small JavaScript program. The Web page contains a simple
HTML table cell with a scrolling message (see Figure 1.4). Without JavaScript the mes-
sage would be static, but with JavaScript, the message will continue to scroll across the
screen, giving life to an otherwise dead page. This example will be explained in detail
later, but for now it is here to show you what a JavaScript program looks like. Notice
that the <
script
><
/script
> tags have been highlighted. Between those tags you will see
JavaScript code that produces the scrolling effect in the table cell. Within a short time,
you will be able to read and write this type of script.
EXAMPLE
1.1
<html>
<head><title>Dynamic Page</title>
<script type="text/javascript">
//
This is JavaScript. Be patient. You will be writing
//
better programs than this in no time.
var message="Learning JavaScript will give your Web
page life!";
message += " Are you ready to learn? ";
var space="...";
var position=0;
function scroller(){
var newtext = message.substring(position,message.length)+
space + message.substring(0,position);
var td = document.getElementById("tabledata");
td.firstChild.nodeValue = newtext;
position++;
if (position > message.length){position=0;}
window.setTimeout(scroller,200);
}
</script>
</head>
<body bgColor="darkgreen" onload="scroller();">
<table border="1">
<tr>
<td id="tabledata" bgcolor="white">message goes here</td>
</tr>
</table>
</body>
</html>
