Alternative to JavaScript

HTML noscript tag

Most browsers allow users to disable JavaScript. Some browsers for simple devices or older computers do not support JavaScript. Site owners can use the noscript tag to provide content to all visitors.

Everything that is surrounded by the noscript tags will only be displayed if JavaScript is disabled or not supported by the browser.

This tutorial uses the HTML noscript tag. The noscript tag can be used to provide alternate content for users without JavaScript.

    Tools are required:

  • Text editor.
  • HTML.
  • JavaScript.
  • Browser to view output.

Optional Download and install suitable text editor

Any text editor with regular expression support will work. To select a reviewed lightweight programming editor read the Ojambo.com Lightweight Programming Editors.

No Script Usage

JavaScript Noscript
<script type=”text/Javascript”>
document.write(“JavaScript is supported!”);
</script>
<noscript>
JavaScript is not supported!
</noscript>

JavaScript will output the statement “JavaScript is supported!”. If JavaScript is disabled or not supported, the noscript tag will output “JavaScript is not supported!.”

Noscript.html file

<!--
	Noscript.html

	Copyright 2011 Edward <http://ojambo.com>

	This program is free software; you can redistribute it and/or modify
	it under the terms of the GNU General Public License as published by
	the Free Software Foundation; either version 2 of the License, or
	(at your option) any later version.

	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU General Public License for more details.

	You should have received a copy of the GNU General Public License
	along with this program; if not, write to the Free Software
	Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
	MA 02110-1301, USA.
        
        
-->

<!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" xml:lang="en" lang="en">

<head>
	<title>Ojambo.com Noscript Tutorial</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>

<body>
	<h1>Ojambo.com Noscript Tutorial</h1>
		
	<script type="text/javascript">
		// Content to display if Javascript is enabled
		document.write("JavaScript is supported!");
	</script>
	
	<noscript>
		<!-- Content to display if JavaScript is disabled -->
		JavaScript is not supported!
	</noscript>
</body>

</html>

The noscript tag can be above the script tag since it will only be displayed if JavaScript is not working.

How to Use:

Run the Noscript.html file in your favourite browser.
Disable JavaScript in your browser and refresh the page.
Enable JavaScript in your browser and refresh the page.

Demonstration:

Ojambo.com Noscript Tutorial


Conclusion:

HTML noscript tags can be used to display alternate content when JavaScript is not available. Instead of displaying content in a different way, most programmers prefer to warn visitors that JavaScript is disabled.

    Recommendations:

  1. Do not assume that users simple disabled JavaScript.
  2. If the website is JavaScript-heavy, a “noscript” warning is appropriate.
  3. As great as JavaScript is, do not assume users want to load several scripts.
  4. Reuse as much JavaScript as possible to keep optimal loading times.

Tags: , , , , ,

This entry was posted on Wednesday, July 27th, 2011 at 12:00 am and is filed under Tips & Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

Your email address will not be published. Required fields are marked *