Jump to main content or area navigation.

Contact Us

EPAFiles: Web Design

Writing JavaScript

Note: EPA no longer updates this information, but it may be useful as a reference or resource.

EPA builds all web content in the Drupal WebCMS as of January 2013. All new microsites and resource directories will be created using Drupal WebCMS. There is still content on EPA's legacy servers and this content will be maintained there until it is transformed and moved into the Drupal WebCMS. This information on styles and look and feel only applies to the existing content using Template 4 or older versions of EPA's template. Information for building new content is found in the EPA Web Guide.

A primary goal of the EPA Web Design is to stop mixing presentation with structure, making it easier to rebrand and change the look-and-feel throughout the site simply by changing the style sheet. Further separation is possible by avoiding inline styles and classes, and using inheritance and contextual selectors.

We're also applying the same thinking to JavaScript.

An advantage of JavaScript is that it comes in a separate file. Much like CSS, this means you can apply one collection of functions to every page of the site. If you need to change or add to its functionality, you can do that in one document rather than going through each page.

This means—unless there are special circumstances—all we ever need to see in EPA's Web template:

<script type="text/javascript" src="http://www.epa.gov/epafiles/js/third-party/jquery.js"></script>
<script type="text/javascript" src="http://www.epa.gov/epafiles/js/epa-core.js"></script>

(Note, all JS should be linked at the bottom of the HTML, just before the closing </body> tag. Placing scripts here will speed up epa.gov for our readers. If your scripts are linked at the top, it would be good practice to adjust your templates.)

The first file is jQuery, a JavaScript framework that Exit EPA Disclaimer ... "simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript." More information on using jQuery at EPA.

The second script is a set of core EPA functions, described below.

Unobtrusive JavaScript

Good, unobtrusive JavaScript has the following characteristics:

  • web pages aren't dependent on it to work: it is an enhancement
  • functions first check to see if an object is available. If not, then it fails silently.
  • the HTML code isn't riddled with inline event handlers and JavaScript
  • if someone has JavaScript off, nothing happens: <noscript> is unneccessary
  • does not rely on browser specific extensions
  • is loaded last, so the content is available for reading, while the script downloads

Unobtrustive JavaScript is used to apply events to desired elements from an external JavaScript file, usually when the page has loaded. For instance, to apply a certain event to some links (a elements), loop through all of the links in the page and apply the events accordingly, e.g. if the element has a specific class name.

Core EPA Functions

EPA has a core JavaScript file that runs multiple functions on page load, including:

  • Inserting the "Page last updated" date and the page URL into the footer
  • Providing a simpler way of creating a "New!" icon, using the <ins> (insert) element
  • Targeting site-wide announcements to specific pages:
    • EPA, AA/RA and Program Office home pages
    • All pages
  • Providing alternate colors for data tables rows.
  • Suggesting search terms when you use the search box
  • Rendering the Share links in the upper right of every page (What is this?)

Top of Page

For help with your epa.gov web design, contact the Web Template Workgroup.

Jump to main content.