JavaScript Standard v1.1

1. Introduction and overriding aims

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 Standards and HTML Integrity Standards.

1.2. Our users may have browsers which can deliver them the following experiences:

• Disabled JavaScript - their browser will not display any JavaScript content
• Poor JavaScript - their browser only supports minimal JavaScript features (e.g. not AJAX)
• Rich JavaScript - their browser supports rich JavaScript interactions and features

We need to ensure that users in each of these cases get the best user experience that we can reasonably deliver.

Top of page

2. Ensuring availability of JavaScript content for all users

2.1. Our users MUST be able to get the core editorial proposition irrespective of the level of JavaScript support in their browser.

2.1.1. Similarly our users SHOULD be able to get all content, irrespective of the level of JavaScript support in their browser.

For clarity, this means:

2.2. You MUST initially provide all of the core editorial proposition for users in the Disabled JavaScript case.

2.3. You MUST ensure that users in the Poor JavaScript case gain a similar, if not better, experience than those in the Disabled JavaScript case.

For example, if your richest experience uses AJAX, ensure that browsers with JavaScript turned on, but which cannot support AJAX, are also catered for - by default this can be by providing the same functionality as the Disabled JavaScript case.

Top of page

3. JavaScript coding strategies

3.1. JavaScript SHOULD be built using progressive enhancement.

This could be described by:

<div>{core content}</div>
<script>if (test), {embellish above}</script>
... 

3.2. If not using progressive enhancement, you SHOULD use defensive coding, according to the following requirement:

3.2.1. In defensive coding statements based on the pattern:

if (test), {the script} else {backup-script}
<noscript> {non-JavaScript backup}</noscript> 

you MUST include an else statement (which invokes backup-script – a script which only uses functionality in a basic level of JavaScript) to cover those browsers which do not have the test functionality, but still have JavaScript enabled (because these will not get picked up by the <noscript>).

3.3. In both progressive enhancement and defensive coding cases, test MUST be a detect of functionality rather than user-agent string - you should detect the functionalities that you desire to use, rather than trying to detect what browser is being used and making functionality availability assumptions on that basis (because browsers pretend to be other browsers, and also some firewalls block user-agent strings). If you do need to use a browser-detect, you MUST seek approval from the Editor, NM Standards & Guidelines.

Top of page

4. Good user experience

To ensure a smooth, functional presentation of web content to all viewers:

4.1. You MUST produce error-free JavaScript for both supported and partially supported browsers.

4.2. You SHOULD produce warning-free JavaScript for both supported and partially supported browsers.

4.3. JavaScript on bbc.co.uk websites MUST be coded to be compatible with version 1.3.

Top of page

5. Legal requirements

5.1. Any JavaScript that deals with personal information MUST comply with the requirements of the Data Protection Act (DPA).

Top of page

6. Implementation and optimisation

In order to develop reusable, maintainable and secure JavaScript:

6.1. JavaScript MUST be held in a .js file and embedded using the <script src="..."></script> notation UNLESS there is a technical need not to do so.

6.2. You MUST NOT server-side include .js files - JavaScript code that is required to be server-parsed should be placed in a .sssi file or as an embedded script tag.

6.3. You MUST NOT link to JavaScript on non bbc.co.uk servers, unless you have ensured your compliance with Third Party Hosting Requirements, and then cleared this with the Editor, NM Standards & Guidelines.

6.3.1. If the JavaScript is available from another site, rather than link to it, you MUST copy that JavaScript into a .js file on your site and link to it from the page, unless when using global BBC code libraries. NB: You MUST ensure that all copyright is respected when using 3rd party JavaScript code.

6.3.2. You MUST NOT have any comments in your JavaScript code which endorses any company or individual.

6.4. Internal and third party developers MUST provide and store any JavaScript code in a maintainable format, regardless of the format which is published to BBC servers.

6.5. JavaScript files SHOULD be optimised by stripping unnecessary white space and comments.

6.6. All <script> tags SHOULD be placed in the head of the html document, except where the functionality needs to be in the body.

6.7. All script tags SHOULD have the type attribute (text/javascript) UNLESS this causes partially supported browsers to parse unsupported code.

6.8. If JavaScript code with the required functionality is already available in a bbc.co.uk server-live library, you SHOULD use it, rather than duplicate the functionality.

6.9. When outputting HTML from within JavaScript, you SHOULD use an alternative to storing HTML in JavaScript files.

Top of page

7. XML/HTTP Requests

To ensure a smooth and uninterrupted user experience:

7.1. Synchronous requests MUST NOT be used.

7.2. Requests MUST include error checking for failed requests.

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

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

7.5. Any request to server-side applications MUST adhere to the Applications Development Standard (insert link to WG).

Top of page

8. Miscellaneous code prohibitions

To ensure safe and functional integration of JavaScript and HTML:

8.1. <a href> tags MUST NOT return a hash ('#') value if used with JavaScript.

i.e. do not use:

<a href="#" onclick ="eventhandler('URL in here only')">link somewhere</a>

instead use:

 <a href="URL in here also" onclick ="eventhandler('URL in here also')">link somewhere</a>

8.2. "javascript:" URLs MUST NOT be used – use the onclick handler instead.

i.e. do not use:

 <a href="javascript:eventhandler('URL in here only');">link somewhere</a>

instead use:

 <a href="URL in here also" onclick ="eventhandler('URL in here also')">link somewhere</a>

Top of page

9. Document history

Date	Version	Change	Author
12/12/2007	v1.1	Clarifications on progressive enhancement.	Jonathan Hassell, Nick Holmes
26/03/2006	v1.0	Initial Version	Stephen Calcott

Top of page