| I'm sorry that I keep
bring the subject of reuse up again, and again, but I cannot
stress the importance of it. Obviously WWW pages can be
designed using PHP or ASP, so that content can be repeated
across several pages, but this makes the pages dependent
on the WWW server software. It also makes it dependent on
the server being present, which sometimes make proper testing
difficult. Thus good old JavaScript is one the best ways
to create reusable content which server independent. For
example you'll notice that many of the pages on this site
have forms which can be filled-in with a response, such
as:
For this I designed the form, and copied the HTML from
the form to Microsoft Word. I then used Microsoft Word to
find and replace every new line (or paragraph marker) with
nothing (well I know it's bad grammar, but it's better than
saying not anything). This gets rid of the new lines. Next
I crunched the white-spaces by replacing two whitespaces
with one, and then repeated this until all the multiple
whitespaces were gone. This leaves a crunched version of
the HTML code:
| <table
width="600" border="0" cellspacing="0"
cellpadding="0" vspace="1" align="center"><tr
valign="top" bgcolor="#003300">
<td height="40" colspan="3">
<h2><b><font color="#FFFFFF">Design
files, and help </font></b></h2>
</td> </tr> <tr valign="middle"
bgcolor="#99FF66"> <td height="50"
colspan="3"> <p>If you would like
the design files, or further help on this topic, or
perhaps you've got a certain viewpoint on this area,
please submit the following form:</p> </td>
</tr> <tr valign="top" bgcolor="#99FF66">
<td height="40" width="80">
<div align="right"><font color="#000000"
face="Verdana, Arial, Helvetica, sans-serif"
size="2"><b>Name:</b></font></div>
</td> <td height="40" width="150">
<input name="realname" size="25">
</td> <td height="120" rowspan="3"
valign="bottom"><font face="Verdana,
Arial, Helvetica, sans-serif" size="2"><b>Comments:</b></font><font
face="Arial" size="2"> <br>
<textarea name="comment" rows="6"
cols="30" wrap="VIRTUAL"></textarea>
</font></td> </tr> <tr valign="top"
bgcolor="#99FF66"> <td height="40"
width="80"> <div align="right"><font
color="#000000" face="Verdana, Arial,
Helvetica, sans-serif" size="2"><b>E-mail:</b></font></div>
</td> <td height="40" width="150">
<input type=text name="email" size="25">
<br> </td> </tr> <tr valign="top"
bgcolor="#99FF66"> <td colspan="2">
<div align="center"><font face="Arial"
size="2"> <input type="submit"
value="Send Request" name="submit">
</font> </div> </td> </tr>
<tr valign="middle" bgcolor="#99FF66">
<td height="50" colspan="3">
<div align="right"><font face="Arial"
size="2"> </font></div> </td>
</tr> </table>
|
Next Word is used to replace the instances of a double
quote (") with a single quote to give:
| <table
width='600' border='0' cellspacing='0' cellpadding='0'
vspace='1' align='center'><tr valign='top' bgcolor='#003300'>
<td height='40' colspan='3'> <h2><b><font
color='#FFFFFF'>Design files, and help </font></b></h2>
</td> </tr> <tr valign='middle' bgcolor='#99FF66'>
<td height='50' colspan='3'> <p>If you
would like the design files, or further help on this
topic, or perhaps you've got a certain viewpoint on
this area, please submit the following form:</p>
</td> </tr> <tr valign='top' bgcolor='#99FF66'>
<td height='40' width='80'> <div align='right'><font
color='#000000' face='Verdana, Arial, Helvetica, sans-serif'
size='2'><b>Name:</b></font></div>
</td> <td height='40' width='150'> <input
name='realname' size='25'> </td> <td height='120'
rowspan='3' valign='bottom'><font face='Verdana,
Arial, Helvetica, sans-serif' size='2'><b>Comments:</b></font><font
face='Arial' size='2'> <br> <textarea
name='comment' rows='6' cols='30' wrap='VIRTUAL'></textarea>
</font></td> </tr> <tr valign='top'
bgcolor='#99FF66'> <td height='40' width='80'>
<div align='right'><font color='#000000'
face='Verdana, Arial, Helvetica, sans-serif' size='2'><b>E-mail:</b></font></div>
</td> <td height='40' width='150'> <input
type=text name='email' size='25'> <br> </td>
</tr> <tr valign='top' bgcolor='#99FF66'>
<td colspan='2'> <div align='center'><font
face='Arial' size='2'> <input type='submit'
value='Send Request' name='submit'> </font>
</div> </td> </tr> <tr valign='middle'
bgcolor='#99FF66'> <td height='50' colspan='3'>
<div align='right'><font face='Arial' size='2'>
</font></div> </td> </tr>
</table>
|
Next we can paste this into Dreamweaver (or FrontPage,
or even a text editor), and we can add the JavaScript code
with:
| document.write("<table
width='600' border='0' cellspacing='0' cellpadding='0'
vspace='1' align='center'><tr valign='top' bgcolor='#003300'>
<td height='40' colspan='3'> <h2><b><font
color='#FFFFFF'>Design files, and help </font></b></h2>
</td> </tr> <tr valign='middle' bgcolor='#99FF66'>
<td height='50' colspan='3'> <p>If you
would like the design files, or further help on this
topic, or perhaps you've got a certain viewpoint on
this area, please submit the following form:</p>
</td> </tr> <tr valign='top' bgcolor='#99FF66'>
<td height='40' width='80'> <div align='right'><font
color='#000000' face='Verdana, Arial, Helvetica, sans-serif'
size='2'><b>Name:</b></font></div>
</td> <td height='40' width='150'> <input
name='realname' size='25'> </td> <td height='120'
rowspan='3' valign='bottom'><font face='Verdana,
Arial, Helvetica, sans-serif' size='2'><b>Comments:</b></font><font
face='Arial' size='2'> <br> <textarea
name='comment' rows='6' cols='30' wrap='VIRTUAL'></textarea>
</font></td> </tr> <tr valign='top'
bgcolor='#99FF66'> <td height='40' width='80'>
<div align='right'><font color='#000000'
face='Verdana, Arial, Helvetica, sans-serif' size='2'><b>E-mail:</b></font></div>
</td> <td height='40' width='150'> <input
type=text name='email' size='25'> <br> </td>
</tr> <tr valign='top' bgcolor='#99FF66'>
<td colspan='2'> <div align='center'><font
face='Arial' size='2'> <input type='submit'
value='Send Request' name='submit'> </font>
</div> </td> </tr> <tr valign='middle'
bgcolor='#99FF66'> <td height='50' colspan='3'>
<div align='right'><font face='Arial' size='2'>
</font></div> </td> </tr>
</table>");
|
and the file is saved with a .js extension (such as form.js).
This can then be included in any WWW page with:
| <script
language=JavaScript src="form.js"></script> |
With just a few changes in the text file we can setup a
new form with:
There you go. Magic! It's reusable, and any changes is
reflected in every file, automatically.
|