JavaScript and DHTML Pages
Basic Uses For JavaScript
JavaScript is a versatile client side scripting language making many things possible. It is one of the most accessible programming enviroments on any PC and somewhere for the budding programmer to learn the basics.
JavaScript + CSS = DHTML
Like many programming languages there are good ways and bad ways to use JS, we will try to show the good ways and point out the bad ways whilst avoiding them!...
The simplest application for JS is to output repetitive sections of HTML. A script can be inserted within the HTML code, and when rendered the script runs and adds its content to the HTML stream. This is the guise in which most people meet JS for the first time, a very useful coding language.
document.write('<big>Hello World!</big>');//</script>
Inserting the above lines of JS into the page HTML will give the following
result when the page loads...
This basic method can be improved upon by writing the JS code within a
function which is located anywhere within the page, but ideally in the
<head> section. A simple call to the function can be placed at the required
location within the HTML. This also allows the function to be used more than
once within the page.
<script type="text/javascript">
function sayHelloWorld() {
document.write('<big>Hello World!</big>');
}
</script>
...
</head>
<body>
...
<script type="text/javascript">sayHelloWorld();//</script>
<br />and it can be called again if required...
<br /><script type="text/javascript">sayHelloWorld();//</script>
...
Adding the above code into the page gives the following result
and it can be called again if required...
This method can be taken further still, the JS code can be written to an
external file which is loaded or 'sourced' from within the page <head>. Not
only does it reduce the volume of the code but it also makes file sharing
possible, the same file can be loaded into every page on the site making
the enclosed JS functions available to all pages. In practice this is
not just 'a' way to do it but 'the' way to do it!
Take the code from the page <head> in the previous
example and write it into an external text file (without the
<script> tags). Store it within the website filesystem
as: /jscripts/shared.js or equivalent.
Then add the following code to the <head> of each
page that you wish to access these functions.
It makes sense to add all of your JS functions into one or more specific
files, this makes code sharing and maintenance so very much easier.
...
<script type="text/javascript" src="/jscripts/sharedjs.js">//</script>
...
</head>
JS can also interact with any web forms. In its simplest case it can be used to clear fields before entry and to check that all required fields are filled in when the form is submitted. This methodology has been around for a while, and is the beginning of the interaction between JS and the 'objects' within the page.
<script type="text/javascript">
function demoCheckForm() {
var fieldValue = getObjectByAnyMeans('demo1').value;
if(fieldValue) {alert('You entered: '+fieldValue+'\nNow clear the form');}
else {alert('You didn\'t enter any value into the field...');}
}
</script>
...
</head>
<body>
...
<input type="text" size="10" id="demo1" value="" />
<input type="button" onclick="demoCheckForm();"
value="Click me..." class="button" />
<input type="button" onclick="getObjectByAnyMeans('demo1').value = '';"
value="Clear form..." class="button" />
...
JS can interact with any page object, this includes the CSS. Modifications here enable JS to change any aspect of the webpage after it has loaded depending on the user's input or interaction. This gives us DHTML.
JS can be invoked by any of the page event triggers such as moving the
mouse-pointer on or off an object, clicking on it, loading the page and so
on... (onmouseover onmouseout onclick onload etc)
Here we have a simple demonstration of the mouseover/out which works for any element and here is used to invoke a JS function which modifies the displayed content. This DHTML method can be extended to modify anything from single characters to the entire page, and it can even change the metadata and CSS.
onmouseover="switchText('demo2','Help! You\'re squashing me!!!');"
onmouseout="switchText('demo2','Move the mouse over me!');"
>Move the mouse over me!</span>
Other effects can be achieved by switching the CSS for an element, if we have two classes whose sole effect is to make an object red or green then we can:
.demogreen {color:#00ff00;}
.demored {color:#ff0000;}
</style>
<span id="demo3" class="demogreen"
onmouseover="switchClass('demo3','demored');"
onmouseout="switchClass('demo3','demogreen');"
>Move the mouse over me to make me red!</span>
For more on the getObjectByAnyMeans(), switchText() and switchClass() functions see the 'related reading page' about shared code and handy functions...
Using variations on the simple ideas described above all manner of webpage applications can be put together from the trivial to the complex.