| JavaScript | | Home | Cheat Sheet | |
JavaScript is a powerfull tool when used properly. Good Javascripts can take average web pages and make them into award winning web sites. However, not all borwsers have JavaScript enabled, and therefore would miss out on what ever you are trying to do. In general, it is the browser versions 4 and above that can handle todays JavaScripts (JavaScript 1.1 and above).
Scripts can be found almost anywhere in an HTML document, however, most scripts usually appear in the HEAD of the document. A script is started with the tag <SCRIPT> and closed with the tag </SCRIPT> and usually contains function(s) that perform particular tasks. These functions are then called in one or more other tags within the BODY tag. This will become more clear as soon as you see the example below!
Note: everything between the SCRIPT tags needs to be commented out to prevent older browsers from displaying it as text.
The following example has a couple of functions which are called when the links are clicked. (Click Here to see the Example)
<HTML>
<HEAD>
<TITLE>This is the title</TITLE>
<SCRIPT>
<!-- comment this out
function functionOne() { alert('You clicked the top text'); }
function functionTwo() { alert('You clicked the bottom text'); }
// hide end comment -->
</SCRIPT>
</HEAD>
<BODY>
<A NAME="this"></A>
<A HREF="#this" ONCLICK="functionOne();">Some Text</A>
<P><A HREF="#this" ONCLICK="functionTwo();">Some More Text</A>
</BODY>
</HTML>
There are litteraly millions of javascripts, the best place to go would be http://www.javascripts.com/ The Largest JavaScript repository online, or so they claim.
Here is a very usefull JavaScript example. It is the image-swap JavaScript as used in the navigation frame of this site. The source code may be copied. Click Here to open the example in a new window.
<HTML>
<HEAD>
<TITLE>This is the title</TITLE>
<SCRIPT>
<!-- comment this out
if(navigator.appVersion.substring(0,1) >= 4) { jsrollover = 'true'; }
else { jsrollover = 'false'; }
if (jsrollover == 'true') {
eg1pic1 = new Image(130,30); eg1pic1.src = "eg1pic1.jpg";
eg1pic2 = new Image(130,30); eg1pic2.src = "eg1pic2.jpg"; }
function rollover(img) { if (jsrollover=='true') { document[img].src=eval(img + "2.src"); } }
function rollout(img) { if (jsrollover=='true') { document[img].src=eval(img + "1.src"); } }
// hide end comment -->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<A HREF="mailto:rhduncan@hotmail.com" ONMOUSEOVER="rollover('eg1pic');" ONMOUSEOUT="rollout('eg1pic');"><IMG SRC="eg1pic.jpg" ALT="The Image" BORDER="0" WIDTH="130" HEIGHT="30" name="eg1pic"></A>
</CENTER>
</BODY>
</HTML>
Note: This works best as a link (ie. withing the <A> tag), however, it will work as a plain image in Internet Explorer (ie. place the ONMOUSEOVER and ONMOUSEOUT attributes within thin IMG tag.)
| http://www.htmlguide.findhere.com | Copyright © 1999 Robert Duncan |
