How to test for JavaScript

If your site needs JavaScript, there is a right way and several wrong ways to go about it. Note the spelling of JavaScript with the capitalization is correct, but I'll typically use lowercase, javascript, as it is also acceptable to browsers and I habitually code html in lowercase. (HTML is also correct, but note the lowercase there as well.)

Do not:

  • Do not use proprietary javascript to test
  • Do not lump your test in with other tests
  • Do not depend on browser identification
  • Do not require javascript unless absolutely necessary

Do:

  • Test for javascript with javascript
  • Use standard script instructions
  • Default to displaying the warning

Here is an example of the best way to test for javascript: 

<div id="javascripttest" style="display:"><b>Warning:</b> You do not
seem to have JavaScript enabled. It is best to enable it for the
full functionality of this site, see 
<a href="http://kayak.about.com/help/enabling-javascript.html">
http://kayak.about.com/help/enabling-javascript.html</a>
for further instructions.</div>
<script language="JavaScript" type="text/javascript">
<!--
 document.getElementById('javascripttest').style.display='none';
//-->
</script>

You may copy and paste this code in your html.
I officially release this code to the public domain.

Line by line examination

<div id="javascripttest" style="display:"><b>Warning:</b> You do not
seem to have JavaScript enabled. It is best to enable it for the
full functionality of this site, see
<a href="http://kayak.about.com/help/enabling-javascript.html">
http://kayak.about.com/help/enabling-javascript.html</a>
for further instructions.</div>

This line will insert the warning you want into your document. It will be visible by default and includes a style tag to indicate that its display is the default, that is block and visible. The id element will ensure that it is accessible with standard javascript using the DOM which is cross-browser complaint. I recommend a div container because it is visually separated from other content unless you've set your style in an unusual way.

<script language="JavaScript" type="text/javascript">
This begins the section which will be used to test for javascript, and in its presence, remove the warning. The language="JavaScript" element is not necessary in modern browsers, but old browsers needed it. Anyone visiting your site with an old enough browser to require this tag might not have the ability to run the test, but still have enough compliance to use other portions of the site. You may choose to include or discard that element at your discretion. The following element, type="text/javascript" is the current and recommended way to specify that you are using javascript. An alternative is to use "text/script" if you wish to use EMCA script instead of javascript, but for most purposes they are the same.

<!--
This line is unnecessary in modern browsers, but very old browsers which didn't recognize the script tags would display the content inside of them so javascript allows for this as the first line and will ignore it. If someone is using such an old browser, this will keep them from seeing the raw javascript code.

document.getElementById('javascripttest').style.display='none';
This is cross-browser compliant and uses the DOM to access the style of the element. All modern browsers, and even most old ones, recognize this type of referencing. The effect is to hide your warning if the browser is able to execute the javascript.

//-->
This line terminates the comment tag initiated as the first command of the script, but precedes it with a comment double slash to prevent the system from trying to process it as script.

</script>
The last step is to end the script instructions.

Note that there are three types of people who are likely to visit your site without javascript enabled:

  1. The security conscious user who uses something like NoScript to prevent malicious web sites from being able to cause any problems. Every major browser has a history of vulnerabilities to scripting attacks and NoScript disables javascript except for white listed sites to prevent accidental malicious code execution. The author of this site uses NoScript.
  2. The user of an old computer who doesn't have the expertise or resources to upgrade. These people have enough problems without being unable to view your site. Please be considerate of these individuals and issue only a warning, do NOT block them. Some of them have been using the old system long enough that they simply navigate away if a site doesn't seem to work, but they obviously have patience if you extend a moderate amount of effort to let them get to what they can.
  3. The accidental tinker. These people were advised by someone to make their experience safer by disabling javascript, or simply were tying to make their browser do something they wanted, but didn't realize the implications of disabling javascript. Allmost all javascript requirement warnings are targeting these people since they have or are able to have a current browser and able to enable javascript within it.

This type of coding is what prompted the Warning you see at the bottom of every page on this site. You might also visit the SiteBuilding page for further advice on coding good web pages.