BeeBen's Web Programming PagesBee

Please note that these pages date from 2003 and are near prehistoric in internet terms. It was good stuff when it was written, but old hat now.

These pages not maintained and I no longer deal with queries about them. They remain here for historical interest.

JavaScript

Badly written JavaScript is a scourge on the Web second only to Shockwave Flash. There have been countless occasions when I've been completely unable to navigate around a website because their broken JavaScript menus fail to run in whatever browser I happen using. Do I "upgrade my browser"? Do I, heck. I just go elsewhere.

The main problem with JavaScript is that, because it is executed client-side, you have no idea whether it ran correctly or not. Unlike HTML and CSS, JavaScript has no robust mechanism for graceful degradation, so if it doesn't work, it doesn't work. Therefore the author has to take especial care that either it's completely bug free on all browsers, or there is some kind of fallback mechanism in case it doesn't run. Sadly, nobody bothers to do this.

 

Email Address Hiding

Having said all that, JavaScript does sometimes find its way onto my pages. For example, I use it on my pages to hide my email address from spam-address harvesting robots on the contact me page. (Thanks to Hivelogic for the technique.)

When a JavaScript aware browser processes the following junk, out pops my email address, but email harvesting robots apparently can't yet decode it.

<script language="JavaScript" type="text/javascript">
<!--
// Email address obfustication from www.hivelogic.com
var a = 'ma'; var b = 'il'; var c = 'to:';
var addr = '&#119;&#101;&#98;';
var dom = '&#101;&#100;&#103;&#105;&#110;&#101;&#116;&#46;&#111;&#114;&#103;';
document.write('<a href="'+a+b+c+addr+'&#64;'+dom+'">'+addr+'&#64;'+dom+'<\/a>. ');
// -->
</script>

Of course, I also provide a <noscript> section with a message for people who do not have JavaScript running in their browsers for whatever reason.

 

Select boxes

Perhaps the smallest possible amount of useful JavaScript is illustrated by the "Skin" select box on this page. It uses the "onChange" JavaScript property to submit the form automatically on a selection without having to press a submit button.

<select name="skin" onchange="submit();">
...
</select>

Naturally we supply a button for those who don't have JavaScript enabled,

<noscript>
<p><input type="submit" name="Go" value="Go" /></p>
</noscript>
 

Popups

Just occasionally JavaScript can be useful to make a link generate a popup window.

Put this function definition in the <head> section of the page.

<script type="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
   href=mylink;
else
   href=mylink.href;
window.open(href, windowname, 'width=300,height=100,scrollbars=yes');
return false;
}
//-->
</script>

Now you can use links like this to generate popups, where popup.php is the target page,

<a href="popup.php" onclick="return popup(this, 'Title')">link text</a>

This has the nice feature that it doesn't break if JavaScript is turned off. In that case the link target is just a new page in the normal way. As a bonus, it validates as XHTML 1.0 Strict, but only if the JavaScript properties such as "onlick" are specified in lowercase.

 

XHTML 1.0 Strict

If you want to ensure your pages validate as XHTML 1.0 Strict then there are a few tricks you need to employ when writing or converting your JavaScript. Here are some I've encountered so far.

Attribute names must be lower-case. This means that the typical JavaScript practice of capitalising parts of attribute names in HTML tags must go. So within tags onLoad becomes onload, onClick becomes onclick and so on. This change should not break anything.

Some elements are not allowed a name= attribute. For example, a form element may not have a name= attribute, which makes it difficult to refer to by normal means. The workaround is to give elements you want to refer to an id= attribute and then use the JavaScript getElementByID() function to refer to them. The form itself does not need an id attribute, only the element you want to refer to.

The <script> element must have a type= attribute. The language= attribute is not allowed. The proper way to do this is to declare your JavaScript with <script type="text/javascript">.

The following small but perfectly formed script illustrates all of these, and validates at XHTML 1.0 Strict. Interesting bits are highlighted

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

<title>XHTML 1.0 Strict and JavaScript</title>

<style type="text/css">
body {
    background-color: #eee;
    color: #000;
    text-align: center;
}
</style>

<script type="text/javascript">
<!--
function setfocus(){document.getElementById('input1').focus();}
// -->
</script>

</head>

<body onload="setfocus()">

<form method="post" action="foo.php">
<p>Name: <input name="name" id="input1" type="text" size="10" maxlength="10" /></p>
</form>
</body>
</html>

Skin

Valid XHTML 1.0!
Valid CSS2!

Copyright © 2003 Ben Edgington.