Future Media Standards & Guidelines

JavaScript Standard v1.2

Navigate on this page:

  1. Introduction
  2. Ensuring availability of JavaScript content for all users
  3. JavaScript coding strategies
  4. Legal requirements
  5. Implementation and optimisation
  6. XML HTTP Requests (AJAX)
  7. Appendix A: Why
  8. Appendix B: How
  9. Document history

1. Introduction

1.1 This document describes the standards for use of JavaScript on bbc.co.uk. It is intended to be read in conjunction with the Browser Support Standard and XHTML Integrity Standards. Please also see the Accessibility Guidelines.

1.2 The BBC has a JavaScript library, Glow, specifically designed to meet BBC standards and guidelines and aid cross-browser development.

Top of page

2. Ensuring availability of JavaScript content for all users

2.1 Scripts MUST NOT cause errors or warnings in level 1 and 2 browsers (see Browser Support Standard).

2.2 The core editorial proposition of the page and core navigation MUST be available to users with JavaScript disabled.

2.3 Users with JavaScript disabled MUST NOT be presented with elements which are non-functioning or appear broken, due to the lack of JavaScript. For example, the user MUST NOT be presented with links that do nothing when clicked. To avoid this, elements which require JavaScript SHOULD always be added to the page via JavaScript.

2.4 Level 2 browser users MAY be given an experience equivalent to JavaScript being disabled. For example, if your richest experience uses 'AJAX', ensure that browsers without 'AJAX' support are catered for, e.g. by providing the same functionality as with JavaScript disabled.

2.5 Scripted content MUST adhere to the Accessibility Guidelines.

Top of page

3. JavaScript coding strategies

3.1. JavaScript MUST be built using progressive enhancement. A basic example of this:

HTML:

<a href=”fullimage.jpg” id=”fullImageLink”>Full size image</a>

JavaScript:

document.getElementById(‘fullImageLink’).onclick = function() {
// show image in lightbox
return false;
}

In the above code the link points to the full image, so if JavaScript is disabled the link still works.

3.2 Sometimes the same functionality needs to be coded in multiple ways to support all browsers. Detecting the browser via the user-agent string MUST be avoided. Instead, feature detection SHOULD be used. For example:

if (document.querySelectorAll) {
// get element(s) via querySelectorAll
}
else {
// get the elements using older more supported methods
}

3.3 If you do need to use a browser-detect, you MUST seek approval from the Editor, Standards & Guidelines.

Top of page

4.1 Any JavaScript that deals with personal information MUST comply with the requirements of the Data Protection Act (DPA). See the Information Security and Privacy Standard.

Top of page

5. Implementation and optimisation

5.1 JavaScript MUST be held in a .js file and embedded using the <script src="..."></script> notation UNLESS the script is only used on a single page.

5.2 If parts of a script requires server parsing, you SHOULD separate it from the rest of the script. For example:

<script type=”text/javascript”>
var myApplicationConfig = {
userId: <?php echo $userId ?>
};
</script>
<script type=”text/javascript” src=”myapplication.js></script>

5.3 All <script> tags SHOULD be placed in the end of the HTML document.A1

5.4 If the required functionality is already available in site-wide frameworks/tools such as Glow or EMP, you MUST use it, rather than duplicate the functionality.

5.5 You MUST NOT link to JavaScript on non bbc.co.uk servers, UNLESS you have ensured your compliance with Third Party Hosting Requirements AND cleared this with the Editor, Standards & Guidelines. This includes analytics and survey scripts.A2

5.5.1 You MUST NOT link to scripts on other BBC sites unless that script is part of a site-wide framework/library (eg EMP, Glow).A3

5.5.2 If you include scripts developed outside the BBC, you MUST adhere to the script’s licence and ensure that it complies with BBC standards and guidelines.

5.5.3 If a copyrighted script is used you MUST include an aknowledgement to the author and copyright holder of code.

5.6 JavaScript files SHOULD be compressed to reduce file size and download time.B1

5.7 If code is compressed, an uncompressed version MUST be stored somewhere easily discoverable.

Top of page

6. XML/ HTTP Requests (AJAX)

6.1 Synchronous requests MUST NOT be used.A4

6.2. Requests MUST include error checking for failed requests.

6.3 When making a request you MUST indicate to the user that there is a server call taking place, UNLESS this call is not the result of user interaction.

6.4 To ensure security, data from non-BBC servers MUST NOT be loaded from within JavaScript code.

Top of page

7.1 The following links might be useful:

Top of page

Appendix A: Why

  • A1. Scripts block the rendering of subsequent HTML elements while they load. Placing scripts at the end of the document prevents this.
    • ~
  • A2. Even if you believe the other host to be trustworthy, their domain may be taken over and their scripts changed to deface sites and steal sensitive user data.
  • A3. Another site may contain a script you need, but that script may be altered or deleted without warning. Instead, take a copy of the script.
  • A4. Synchronous requests freeze the browser until the request is complete. This makes the page feel slow and unresponsive.

Top of page

Appendix B: How

Appendix C: Document history

Date Version Change Author
12/05/2010 v1.2 Complete review and rewrite. Jake Archibald, Ed Lee
12/12/2007 v1.1 Clarifications on progressive enhancement. Jonathan Hassell, Nick Holmes
26/03/2006 v1.0 Initial Version Stephen Calcott

Document editor: Editor, Standards & Guidelines. If you have any comments, questions or requests relating to this document, please contact the Editor, Standards & Guidelines.

Like all other Future Media Standards & Guidelines, this page is updated on a regular basis, through the process described on About Standards & Guidelines.

Top of page

bbc.co.uk navigation

BBC © 2013 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.