The Script
Script, the dynamic, power sludge engine behind DHTML.
Script basically comes in two flavors, JavaScript and VBScript. JavaScript is
a language similar to the Java language while VBScript is similar to the Visual Basic
language. For the purpose of this article, we are going to use JavaScript to help
illustrate the use of script in DHTML. For information about JavaScript goto to
our JavaScript tutorial.
Just like HTML gave us the raw materials for DHTML,
and CSS gave us the nails and paint, script gives us the power tools needed to
bring everything together. Each HTML element can be accessed through script by
what is called a document object model or (DOM).
Now lets say we wanted the text to move up or down
as a result of a mouse click over one of the up or down sword images. Script is
how we make this happen. Below is a diagram of how the script would relate to
our DHTML page.
Each DHTML block is accessible through script. The various attributes of each DHTML
element can be edited on the fly through script.
For the page to do what we want it to do, we must
assign some events in the up and down control's <div> tags such
as an onClick. For information about JavaScript
events go to the JavaScript Tutorial Event Listing.
Below is what the code would look like with the parts pertaining to script in red.
- <!-- -------------CONTROL BLOCK------------- -->
-
- <div id="controls"
- style="position: absolute;
- top: 100;
- left: 700;
- width: 50;
- height: 300;
- Z-Index: 1;
- Visible: true">
-
- <div id="scrollup"
- onClick="scrollUp()"
- style="position: relative;
- top: 0;
- left: 0">
- <img src="up.gif" alt="Scroll Up">
- </div>
-
- <div id="scrolldown"
- onclick="scrollUp()"
- style="position: relative;
- top: 200;
- left: 0">
- <img src="down.gif" alt="Scroll Down">
- </div>
-
- </div>
First look at the id attribute. These are the names
we use to refer to the <div> groups in the script. It's the element's
identification basically. We then assigned a function to be called upon result of an onClick
event to each sword element. The scrollUp() and scrollDown()
functions then increment or decrement the text element's top value. But how do we access
the DHTML element's attributes? Easily, through the use of the DOM. Every <div>
tag with a style attribute can be access using the structure,
ID.style.attribute. Below is an example of the scrollup() function
<script language="javascript">
<!--
function scrollUp()
{
var ptr = story.style.top;
var top = new Number(ptr.substring(0,ptr.indexOf("px",0)));
story.style.top = top - 100;
}
//-->
</script>
In the scrollUp() function we get the current
value of the text block's top attribute and decrement it by 100 pixels. We can access
any CSS attribute through the style object of each DHTML element (<div> block).
By controlling the CSS attributes (top, left, background-color, etc)
of each <div> tag, we make our web pages dynamic and controllable through
scripting.
There is a ton of things you can do with DHTML in IE.
Only through actual hands-on experimentation will you fully understand and appreciate
DHTML. So get out your editors and browsers, log on to HTMLStuff and learn the ways of
DHTML.
Upload
