HTML5 and CSS3 All-in-One For Dummies
Book image
Explore Book Buy On Amazon

Many users are wary of enabling JavaScript support for sites because they don’t want to download a virus or have other bad things happen to their systems. In addition, people have become less receptive to using scripts because they sometimes do things the user doesn’t want, such as grab the user’s identity. When a user enables JavaScript for your application, it represents a trust relationship between the user and you.

Of course, the user needs to know that your site requires JavaScript in order to enable it. Consider these two options:

Use the

The

However, some people have complained that the

<!DOCTYPE html>
<html>
<head>
  <title>Using the NoScript Tag</title>
</head>
<body>
  <h1>Using the NoScript Tag</h1>
  <noscript>
    <p>Please enable JavaScript to use this page!</p>
  </noscript>
  <script language="JavaScript">
    document.write(
      "<p>You have JavaScript enabled!</p>");
  </script>
</body>
</html>

This approach is quite simple. When you try the example, you see one of two messages. If you have JavaScript enabled, you see “You have JavaScript enabled!” Otherwise, you see “Please enable JavaScript to use this page!” Try disabling JavaScript support in your browser and refreshing this page to see the alternative message.

Use styles for JavaScript alert

The styles approach relies on the use of Cascading Style Sheets (CSS) to create a condition where a message is displayed when scripting is disabled. The problem with this approach is that not every browser supports it. Yes, newer browsers do support this technique just fine, but if you encounter users with older browsers, your application could experience problems. The following example shows how to use this technique.

<!DOCTYPE html>
<html>
<head>
  <title>Using Styles</title>
  <script language="JavaScript">
    document.write(
      '<style>#NoJS { display: none; }</style>');
  </script>
</head>
<body>
  <h1>Using Styles</h1>
  <p id="NoJS">
    Please enable JavaScript to use this page!
  </p>
  <script language="JavaScript">
    document.write(
      "<p>You have JavaScript enabled!</p>");
  </script>
</body>
</html>

This technique relies on a simple trick. When scripting is enabled, the first script creates a style for the first

tag that hides the information in that paragraph by adding the display: none style. The presence of scripting support also lets the second script run, which displays the “You have JavaScript enabled!” message.

When scripting is disabled, the first script can’t run, so there’s no special style for the

tag with an id of NoJS. This means that the “Please enable JavaScript to use this page!” message is displayed. However, because there’s no scripting support, the second script also fails, which means you won’t see the JavaScript-enabled message. Try this example by enabling, then disabling, JavaScript support on your browser.

About This Article

This article can be found in the category: