This page is a serves as both a record of the things I've figured out how to do in DHTML, a choppy tutorial for those interested, and a reference about DHTML. To that end, I'll briefly explain what I know about DHTML, then recap/reference stuff, then list 'scratchpad' works.
Firstly, the Microsoft DHTML (which, as I understand it, has been mostly incorporated into HTML4.0)(in no small part because Netscape apparantly was too busy shipping Communicator 4.0 -- they didn't even show up to one meeting)(enough ranting) appears to mostly be existing syntax, with the change that scripts may now change elements on a page. Previously, JavaScript could be used to dynamically generate the page, but once you called document.write( "whatever" ), the "whatever" stayed on the page, never to be changed again. The main change that DHTML makes is that you can now change elements, change properties, change text, etc, without having to regenerate the entire page. There are other features (e.g., scriplets), but the ability to change HTML is the most noticable
To better understand what you can do with DHTML, then, you need to know what existing technologies comprise it, and how DHTML changes their behavior. Firstly, DHTML is composed of:
I also have a Questions/scratchpad region on this page
Style sheets consist of a syntax for specifying how text is to be formated/arranged/positioned. I believe that there is some provision for absolute placement on a page, but haven't learned about it yet, and honestly wouldn't use it anyways. The CSS standard allows one to place these style definitions in a variety of locations:
There has been a new tag created, called LINK, which specifies what
file to use for styles. It can be used like so:
<LINK REL=STYLE TYPE="text/css"
HREF="http://www.mycompany.com/mystyles.css">
Note that all three properties are required
<HEAD>
<STYLE TYPE="text/css">
<!--
TAG { text-indent: 24pt;
margin-top: 0pt;
margin-bottom: 0pt }
-->
</STYLE>
</HEAD>
Tag is replaced by whatever tag you wish to specify, such as P, for the <P> tag. Note that the style specification is applied to all elements within the page.
Within the an arbitrary tag, you can add the STYLE attribute, and follow it with any style formatting you want to apply to just this text, like so:
<P STYLE="text-indent:24pt; margin-top:0pt: margin-bottom:6pt"> Text Here</P>
All the same rules apply as for the header case: begin/end curly braces, semicolons, etc. If you want to apply a style to an arbitrary run of characters, you can use the <SPAN> tag, which does nothing except apply (any) style information to the text it encloses
Classes differentiate a given style, so that you can create say, a
paragraph style that will be used throughout the page, and then an
indented paragraph for quoting a book. They are created like so:
TAG.classname { <stuff> }
Note that classname is the name of the class, and thereafter, if you want
an instance of a TAG to be that class, you use:<TAG class="classname">text here </TAG>
Note that we can also name the style of specific elements, using their IDs. We'll cover IDs later, but for now simply note that it can be done with the following syntax:
P.newClass { <stuff> }
#IDToFurtherSpecify { <MoreStuff> }
There are provisions for having style sheets influence each other, and thus creating multiple sheets that cascade their styles from one to the other (thus the name Cascading Style Sheets ), but I'm not going to cover that here
The next major component of DHTML is a form of embedded logic, called a script. Scripts are essentially programs, though the lack of debugging support for them seems to limit their usefulness to smaller projects. Netscape has a product out for debugging JavaScript, though I haven't seen it.
Within this tutorial, I'm going to use JavaScript, because then syntax is similar enough to Java/C so as to be easily used by me. I'm not going to say much about it, except that most of being able to use JavaScipt seems to be knowing how to refer to things in the Web browser. In contrast to traditional languages, wherein you try and compute something like the square root of X, or quicksort an array, most of JavaScript involves getting the browser to jump through hoops.Some interesting sites that contain info about JavaScript are:
Once you've built a couple of scripts, you may think "Gee, this is great,
but I don't want to copy-and-paste between pages, and I certainly
don't want to copy-and-paste, then update one page, and forget to update
another page." The way to get around this is to use a scriptlet,
which is simply an html page that you can embed (as an object)
into your html page, and
then access global variables and functions as if they were methods of
the embeded page (object).
Don't forget to make the embeded html page world-readable!!
There are two parts to scriptlets: making them and using them
Making a scriptlet
To make a scriptlet, simply make a regular .html (or .asp) page, and put
it somewhere world-readable (this is easy to forget). The only provision
for exporting variables and functions is that the name should be
prefixed with "public_", like so:
<SCRIPT Language="JavaScript">
var public_MyVariable = "Yupper!";
function public_MyExposedMethod( param1, param2 )
{ Blah blah blah }</SCRIPT>
If you want a UI for your scriptlet, write out some regular HTML into the
body of the page. There an an example I've written for this site
Using a scriptlet
Using a scriptlet is a bit trickier, but not by much. Essentially,
we create a (COM) scriptlet object in the page, and tell the object that
the url it should load is <whatever>. For ease of use, we can name
the object with the ID property, and thereafter, we can call functions
from the scriplet, or get at it's variables, by using name.method, like so:
<OBJECT ID="Scriptlet" width=0 height=0
TYPE="text/x-scriptlet"
DATA="http://your.scriptlet.url/goes/here.html"></OBJECT>
Note that
<SPAN onClick="Scriptlet.MyExposedMethod( param1, param2 );>
......
That's about it. The other thing to note is that because there's a COM object that actually loads the scriptlet and exposes it's methods, programs written in C, C++, VB, J++, etc, can use scriptlets both for code and UI purposes