HTML for Technophobes.
©David Knopfler/Willa Cline July 1998

Chapter Five: JavaScript

Things I don't know : I don't know what the Common Gateway Interface means ... but I know that it's initials are CGI and that I have a cgi-bin ...so that's something. With my CGI bin I can extend the possibilities of what can be done with HTML by using automated UNIX scripts (lots of big words there) - but who wants to know that? One has, I suppose, to resist the feeling that these grand sounding things were designed to make us poor non techie creative types feel insignificant. CGI truth told, is basically a pain in the butt and so is Java... but JavaScript like cgi scripting is kind of too important not to at least mention in passing. So, erm, sorry about that. If you want to see an example of CGI scripting in action - the Tealeaves site uses a hidden CGI script written in UNIX to randomly generate your reading from the CGI bin. It looks completely horrendous and I've no intention scaring you off at this point by showing the source to you, so if you are suddenly overtaken by an intense rumbly feeling in the tummy that it's definitely time to stop listening to go have a little something, I only ask that you please invite me along, because I too share the same feeling.

Java is not without it's problems either. It is a programming language. Don't you just HATE the sound of that? It's as impossible to learn as C++ so don't get your hopes up too high. JavaScript on the other hand is a scripting language and is as impossible to learn as C++, so that's a lot more comforting isn't it? However it's quite easy to nick large chunks of it at a time, so all is not lost. Applets are little bitty Java applications that can be embedded into your HTML as can JavaScript but JavaScript is long stringy mess - whereas Java Applets are tidy little suckers, because the long stringy mess is hidden from even the source HTML page. Confusing isn't it? And if you want to create Java Applets (little mini applications that work right there on your web page regardless of which platform the viewer is looking at your page with, UNIX, Mac, Windows, Swimblesnoot ... okay I made this last one up just to see if you were still listening ) you might even have to know how to compile them. Eek!! Icky stuff isn't it and I'm way out of my depth. HOWEVER lets at least try to make some muddy, muddled progress... in the kingdom of the blind...

At this stage, most books on the subject usually bottle the issue, by providing you with an URL which is three years out of date like http;//java.sun.com and wish you bon voyage... wouldn't that be tempting.

I guess now that you already know what a tag is... you do know, honest, trust me on this ... remember that stuff you've seen inside the funny shaped <> brackets? <tag></tag> ? Remember <P><BR> etc. ... those were tags and the first attribute (isn't there a less pompous word than attribute?) ... the first thing you might as well learn is that your HTML page will not know you have any JavaScript in it unless you tell it to look for it ... and the way you do that is by writing a script tag ...<SCRIPT language = "JavaScript"> You have to pop it fairly early on in your page for it to work optimally and then when you've finished writing out the script (yes, we're coming to that) you need to add the tag </SCRIPT>. Some folk just put <SCRIPT></SCRIPT> and don't bother to mention that it's JavaScript but the browser seems to know anyway - so if they can get away with this shortcut maybe you can too. I make no promises.

Now here is another piece of the jigsaw which can be helpful, especially to any of you who have thoughtfully nicked a web page with a script in it only to find it wouldn't export to your ... "This is a picture of Fido eating my husband isn't he cute?"... homepage. You can, if you like, simply write your JavaScript in a text file somewhere else and tell your page to look for that page. You missed that didn't you? Let me say it again: You can, if you like, simply write your JavaScript in a text file somewhere else and tell your page to look for that page. Finally, your first useful piece of information. To do this you need to know the following:

<SCRIPT src = "URL to your script file"></SCRIPT> .. job done. Of course if you simply slavishly copy "URL to your script file" then you'll find the effect somewhat unhelpful - if however you are bright and discerning you'll realize that it should look more like this:

<SCRIPT src = "http://www.mysite.co.uk/javabollox.txt"></SCRIPT>

More commonly you'll see a .js suffix rather than a text one and I'd recommend using the former, i.e.

<SCRIPT src = "http://www.mysite.co.uk/javabollox.js"></SCRIPT>

Although if you are a lost cause and you've also copied that slavishly, I suggest you go back to making money and pay us to design your web page instead.

The TWO BIG advantages in popping your JavaScript elsewhere as a text file are:

1. Your HTML file remains reasonably well ordered and fast to load. If you use this system Java loads first. If you load it on the page it loads last.

2. You can easily use this script with any other pages without needing to add the code to each individual page.

So lets sum it up quickly

If you want to put your JavaScript into your page - expect it to look something like this

<HTML><HEAD>

<TITLE>I Know Less Than Nothing About JavaScript ... and I'm proud of it </TITLE>

</HEAD>

<BODY>

<H1>Alora .. this is some vacuous text invented by the author simply to use as pointless padding</H1>

<SCRIPT language= "JavaScript">

JavaScript program code goes here

</SCRIPT>

</BODY>

<!--this hidden message is completely pointless unless of course you are using the lavish Swimblesnoot OS --!>

</HTML>

If you want to put it elsewhere and call it up from your web page then it would look more like this

<HTML><HEAD>

<TITLE>I Know Less Than Nothing About JavaScript (And I'm sort of Embarrassed)</TITLE>

</HEAD>

<BODY>

<H1>Alora .. this is some vacuous text invented by the author simply to use as pointless padding</H1>

<SCRIPT src = "http://www.mysite.co.uk/javabollox.txt">

</SCRIPT>

</BODY>

<!--this hidden message is completely pointless ... unless of course you are using the lavish Swimblesnoot OS --!>

</HTML>

Comments Tags:

And if you've followed that closely, you'll have also learned that if you want to add hidden comments into your HTML you only need to put them inside...
<!-- gloop --!> <!-- Shh. You know who has not shown you any of their javascripts yet but they will--!> explanation marks and dashes and they'll not show up on your final page. If you want to add them actually inside your JavaScript you can skip the second exclamation as long as you add the dashes i.e. <!--- This script is a pile of poop isn't it ... but it looks loads better than it did when I first deleted the credits and rearranged it -->. Some folk put their JavaScript inside comments tags because it prevents problems of the java script itself showing up on the web pages of browsers without Java... not too many of those around these days but it explains why some source pages look like this

<SCRIPT language= "JavaScript">
<!--
Javascript program code goes here
-->
</SCRIPT>


If you want to use several javascript codes within your page simply put each one within their own set of <SCRIPT></SCRIPT> tags.

I expect by now you'd like to see an example of a javascript - or even to try and embed one into one of your web pages. Well, here's an example of a javascript used to prevent people from downloading your images. We make no guarantees as to it's functionality.

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function protect(e) {
alert("Sorry, you don't have permission to right-click.");
return false;
}

function trap() {
if(document.images)
for(i=0;i<document.images.length;i++)
document.images[i].onmousedown = protect;
}
// End -->
</SCRIPT>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->

<BODY OnLoad="trap()">

<!-- Script Size:  0.81 KB -->

Anyone interested in locating other javascripts to have a go, could do worse than to start their search at The Java Boutique or at www.webcoder.com or the javascript repository

----------------------------------------------


Back to index