JavaScript Guidelines and Best Practice
- Introduction
- JavaScript
- Problems unique to client side processing
- JavaScript Standards
- Online JavaScript Documentation
- JavaScript Books
- Browsers with JavaScript Support
- Browsers without JavaScript Support
- JavaScript Versions
- Disabling and Enabling JavaScript
- Portability
- JavaScript Tools
- The Future
- JavaScript Guidelines
- Objects
- Object Properties
- Object Methods
- Events and Event Handlers
- JavaScript Best Practice
- Inline JavaScript source code
- The JavaScript language version
- Hiding JavaScript source code from the browser
- Commenting JavaScript and HTML code
- Semi-colons
- Double and Single Quotes
- Scripting HTML tags
- The NOSCRIPT tag
- Image Swapping
- JavaScript within Tables
- Frame Detection
- JavaScript Links
- Avoid using void()
- JavaScript Performance
- Select Form Fields
- Changing location
- Opening Windows
- JavaScript Entities
- JavaScript Source Files
- References and Bibliography
Introduction
REF [1] Netscape JavaScript, also called client side JavaScript (CSJS) allows a client browser to display HTML and execute JavaScript code resulting in a page that the user sees. JavaScript statements embedded in an HTML page can respond to user events such as mouse-clicks, form input, and page navigation.
LiveWire JavaScript, also called server side JavaScript (SSJS) is an application development environment that uses JavaScript for creating server based applications similar to CGI (Common Gateway Interface) programs.
JScript is Microsoft's implementation of JavaScript.
Dynamic HTML (DHTML) is the combination of HTML, JavaScript, the Document Object Model (DOM) and Cascading Style Sheets (CSS).
This document is primarily concerned with client side JavaScript or JScript. The general term JavaScript will be used through the remainder of this document to refer to both Netscape's JavaScript and Microsoft's JScript.
JavaScript is not Java! JavaScript was developed independently of Java. It was originally being developed as a product called LiveScript, but was renamed when Netscape announced support for Java in Navigator 2.0. This marketing decision has been a bane on JavaScript ever since.
Introduction
Problems unique to client side processing
In most programming languages, source code is compiled on one machine and then executed on the same machine or possibly on another. In either case, the resultant program will run on a known and stable environment.
JavaScript source code is interpreted (or compiled) at the time it is used, by the computer it is being used on. When writing the JavaScript source code, it is difficult to predict exactly what hardware, operating system or browser will be used.
This means that you cannot write JavaScript code expecting to use the latest methods and event handlers in JavaScript code and then expect it to run on all browsers currently in use, as some people will still be using browsers that only support JavaScript 1.0. Therefore it is necessary to either restrict ourselves to only those aspects of JavaScript available in JavaScript 1.0, or write code that degrades safely in browsers with a lower version of JavaScript code than that which is required.
This problem does exist with other programming languages, but not to the extent to which JavaScript code is used on many web pages, on many web sites, all around the world, which can be viewed and processed on the client machine by anyone, anywhere in the world, using many different combinations of hardware platforms, operating systems and web browsers. Web pages are supposed to be truly universal. JavaScript code should aim to be as well.
JavaScript Standards
The European standards body, ECMA, released the 2nd edition of ECMA-262, the language specification derived from Netscape JavaScript 1.1, in June 1998. The ECMAScript language specification is available as a Microsoft Word document or as an Acrobat PDF file from the ECMA Web site - REF [2]. ECMA-262 has been adopted by the ISO/IEC JTC 1 as ISO/IEC 16262.
Microsoft fully supports the specification through JScript 3.0, the scripting engine built into Microsoft Internet Explorer version 4.0 -REF [13].
Netscape fully supports the specification in JavaScript 1.3, supported in Netscape Navigator 4.06 and 4.5 - REF [14].
Netscape partially supports the specification in JavaScript 1.2, supported in Netscape Navigator 4.01 through to 4.05, with the exception of support for Unicode and the use of platform specific Date object handling - REF [19].
The ECMAScript is a language specification, and so in itself does not define the object model (beyond a small set of 'native objects'.)
A Web browsers object model, or the Document Object Model (DOM), which is used by scripting languages is being standardised by the W3C - World Wide Web Consortium REF [12].
"The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents." - W3C
There are three DOM levels:
- Level 0 DOM is the current object model provided in Netscape Navigator 3.x and Internet Explorer 3.x.
- Level 1 DOM is a W3C Recommendation REF [22].
- Level 2 DOM covering CSS integration is a W3C Draft REF [23].
Online JavaScript Documentation
For online documentation for the core JavaScript language then the recommended documentation is the browser vendors own documentation.
- Netscape JavaScript documentation - REF [3].
- Microsoft JScript documentation - REF [4].
For cross-vendor documentation other independent online documentation is recommended, for example irt.org - REF [5].
JavaScript Books
There are two main books on JavaScript that developers should have access to:
- JavaScript the Definitive Guide Edition 3 - REF [6].
- Definitive DHTML - REF [7].
Also if possible the second edition of JavaScript the Definitive Guide - REF [8] - should be used as, due to its publication date, it covers mainly JavaScript 1.0 and 1.1, and doesn't cover JavaScript 1.2 used in Netscape Navigator 4 and Internet Explorer 4.
Browsers with JavaScript Support
JavaScript support is present in:
- Internet Explorer 3.x, 4.x, 5.x
- Netscape Navigator 3.x, 4.x
- Opera 3.x
Browsers without JavaScript Support
There are several browsers that do not have support for JavaScript, and are likely to remain so indefinitely:
- Lynx Text Browser
- Charlotte Web Browser
and others.
JavaScript Versions
There are probably at least two dozen versions of JavaScript in use today. The following table details the main JavaScript versions used by the two major browser vendors:
| Vendor | Browser | Browser Version | JavaScript Version |
|---|---|---|---|
| Netscape | Navigator | 2.x | JavaScript 1.0 |
| Netscape | Navigator | 3.x | JavaScript 1.1 |
| Netscape | Navigator | 4.0x | JavaScript 1.2 |
| Netscape | Navigator | 4.5x | JavaScript 1.3 |
| Microsoft | Internet Explorer | 3.x | JScript 1.x, 3.x or 5.x * |
| Microsoft | Internet Explorer | 4.x | JScript 3.x or 5.x * |
| Microsoft | Internet Explorer | 5.x | JScript 5.x * |
* The JavaScript engine within Microsoft's Internet Explorer can be updated independently of the browser version - REF [15].
JScript 2.x is the version used in Microsoft Internet Information Server 1.0. JScript 4.x is the version used in Microsoft Visual Studio 6.0.
There are also differences in the versions depending on the platform the browser is used on. The Mac, for example, suffers many incomplete or buggy versions of JavaScript on Microsoft Internet Explorer.
Disabling and Enabling JavaScript
It is possible for JavaScript to be disabled on the client browser:
Netscape Navigator 3:
Options -> Network Preferences -> Languages -> Enable JavaScript
Netscape Navigator 4:
Edit -> Preferences -> Advanced -> Enable JavaScript
Microsoft Internet Explorer 3:
Edit -> Options -> Security -> Custom -> Active Scripting -> Disable
Microsoft Internet Explorer 4:
View -> Options -> Security -> Custom -> Active Scripting -> Disable
Microsoft Internet Explorer 5:
Tools -> Options -> Security -> Custom -> Active Scripting -> Disable
When using JavaScript, it is important to test your site with JavaScript disabled to ensure that your site is still accessible without JavaScript.
Portability
When developing client side processing using JavaScript, even when writing code for a specific browser used inside an Intranet it is important to consider the portability of the JavaScript code, in the event that the company moves to a different browser vendor in the future.
JavaScript Tools
There are several third party vendor JavaScript tools - some of which are listed on Netscape's Technical JavaScript site - REF [9].
There are also the following JavaScript tool's available from Netscape:
- JavaScript Debugger 1.1 - REF [10].
- Visual JavaScript Trial - REF [11].
There are also JavaScript tool's available from Microsoft:
- Script Debugger 1.0 - REF [24].
- Microsoft Script Control Download - REF [25].
The use of JavaScript Tools is subject to the approval of the ITVoice product approval process - REF [16].
The Future
The near future will see embedded web client software within Internet Screen Phones, Multimedia Kiosks and Personal Digital Assistant's. These technologies may or may not provide JavaScript support. It is essential that Web sites and pages can be accessed by client software that is not JavaScript enabled - REF [17] and REF [18].
JavaScript Guidelines
Objects
JavaScript can control a hierarchy of objects within the Document Object Model:
The above diagram details the hierarchy of objects available in JavaScript 1.0, 1.1 and 1.2.
There are several points to be aware of when accessing the objects:
- The Anchor object provides little functionality in JavaScript 1.0, the Link object should be used in preference.
- The Image object is not fully supported in all versions of Microsoft Internet Explorer.
- The Layer, Plugin and MimeType objects are not supported in Microsoft Internet Explorer.
- The All object is not supported in Netscape Navigator.
- The Arguments, Applet and Embed objects are only available in JavaScript 1.1 and higher.
Browser support for all these objects should be detected for, before attempting to access their properties.
To detect for browser support of an object, the following generic approach should be taken:
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.object) {
// object supported
}
else {
// object not supported
}
//-->
</SCRIPT>
|
This allows a small amount of future proofing for when later browser versions provide additional object support.
Most objects within the Document Object Model are attached to a hierarchy of objects, with the top most object being the current window.
For example, the frames object can be accessed as window.frames[ ], whereas the forms object can be accessed asdocument.forms[ ]. The documents object is also accessed as window.document, so in the previous example the full hierarchy is actually window.document.forms[ ], however it is perfectly acceptable to omit the reference to the window object.
Object Properties
Object properties do not always require the complete object hierarchy to be stated, for example, window.location.href is equivalent to location.href, as most objects come under the window object the use of the window reference is optional.
Not all object properties are available in all versions of JavaScript. Check the documentation before making use of an object property.
If you cannot restrict yourself to the object properties available in JavaScript 1.0, then ensure that your code does not get executed by a browser without support for the object property you are using.
Browser vendors are constantly improving their implementations of JavaScript, following customer feedback, the introduction of the ECMAScript standard, the release of recommendation documents from the W3C and the need to keep ahead of/up with the competition.
Object Methods
As with properties, not all methods are supported by all browsers. Check the documentation before making use of an object method.
If you cannot restrict yourself to the object methods available in JavaScript 1.0, then ensure that your code does not get executed by a browser without support for the object method you are using.
Beware, that although the method may be supported by certain versions of JavaScript, that support may not be universal across all platforms.
As before, it is possible to omit the window reference when using window methods, e.g. alert('Hello world'). However, there are certain occasions where omitting the window reference should be avoided, for example, when using the open() method, as both the document and window objects have a window method. it is important to specify in detail the correct object hierarchy in these circumstances, e.g. window.open() or document.open().
Events and Event Handlers
There are an increasing number of events and event handlers being introduced in each browser release, fortunately due to the way that HTML attributes are ignored if not recognised it is possible to include event handlers that are not supported by all browsers, for example, the following although syntactically correct, will not cause a JavaScript error message, and will never actually cause the enclosed JavaScript code to be executed (unless of course kettles start to have embedded JavaScript code):
<A HREF="page.htm" onKettleBoiled="alert('Hello World')">Click Here</A>
|
It is however important to realise that JavaScript code is case sensitive, despite the case insensitive implementation of Microsoft Internet Explorer 3. Therefore the case of event handlers must be correct, or there is a danger that browsers will not recognise them, for example, onMouseover is incorrect, whereas onMouseOver is correct.
It is also important to note that JavaScript event handlers form part of the HTML tag attributes, and as such, should be valid event handlers as defined within the HTML 4.0 Specification REF [26] and the associated HTML 4.0 Document Type Definition (DTD) REF [27]. Invalid event handlers might cause problems with a future browser release.
JavaScript Best Practice
The following demonstrate the practices that should be followed when writing JavaScript code. It is based on the authors use and knowledge of JavaScript over several years practical experience.
Inline JavaScript source code
Any JavaScript code that does not write out to the document should be placed within the head of the document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function functionName() {
alert(text);
}
var text = 'Hello World';
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write('<FORM>' +
'<INPUT TYPE="BUTTON" VALUE="Click Here" ' +
'onClick="functionName()"></FORM>');
//-->
</SCRIPT>
</BODY>
</HTML>
|
This ensures that the JavaScript function definitions have been loaded by the browser before it is required. It also makes it slightly easier to maintain the JavaScript code if it can always be found in the head of the document.
Other potential locations for JavaScript code include:
Event Handlers:
<A HREF="page.htm" onClick="alert('Hello World')">text link</A>
|
Links (however see the guideline on the usage of JavaScript Links):
<A HREF="javascript:alert('Hello world')">text link</A>
|
Source files (however see the guideline on the usage of JavaScript Source Files):
<SCRIPT SRC="library.js"></SCRIPT> |
JavaScript Entities (however see the guideline on the usage of JavaScript Entities):
<HR WIDTH="&{barWidth};%" ALIGN="LEFT">
|
The JavaScript language version
If you require a certain version of JavaScript then specify the version as part of the language attribute:
<SCRIPT LANGUAGE="JavaScript"> <!-- // JavaScript 1.0 and above //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript1.1"> <!-- // JavaScript 1.1 and above //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2"> <!-- // JavaScript 1.2 and above //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript1.3"> <!-- // JavaScript 1.3 and above //--> </SCRIPT> |
If you require access to object properties and methods of core JavaScript not available in all versions of JavaScript, provide different function definitions for the relevant JavaScript versions:
<SCRIPT LANGUAGE="JavaScript">
<!--
function test() {
alert('This browser does not support JavaScript 1.3');
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.3">
<!--
function test() {
// only invoked by browsers that support JavaScript 1.3
// this function replaces the earlier function
}
/--></SCRIPT>
|
As a minimum specify the LANGUAGE="JavaScript" attribute to avoid any possible conflict with any other client side processing language, e.g. VBScript.
Hiding JavaScript source code from the browser
Always wrap inline JavaScript code within comment tags to hide the JavaScript from older non JavaScript aware browsers:
<SCRIPT LANGUAGE="JavaScript"> <!-- Start hiding JavaScript // Stop hiding JavaScript --> </SCRIPT> |
or:
<SCRIPT LANGUAGE="JavaScript"><!-- //--></SCRIPT> |
or:
<SCRIPT LANGUAGE="JavaScript"> <!-- //--> </SCRIPT> |
This does not stop the JavaScript source code from being displayed from the user if they view the document source, but it does stop the JavaScript code from being displayed on the page in old browser versions released before JavaScript was developed.
Actually hiding JavaScript code from the user is impossible - you can make it harder by hiding the code in other frames or in JavaScript Source files.
In Internet Explorer 5, there is an encryption facility that allows JavaScript source code and HTML to be encrypted prior to being paced on a publicly accessible web server - REF [20].
In order for Internet Explorer to be able to parse the encrypted JavaScript code, it must be able to decrypt it, so another program could be written to decrypt it and display it, instead of decrypt it and run it. It should therefore not be regarded as a secure means of protecting JavaScript source code.
The resultant encrypted code is not supported by Netscape and should therefore be avoided.
Commenting JavaScript and HTML code
Add comments to your code to aid maintenance.
The characters <!-- signify the start of a comment in HTML. The characters -- followed by > signify the end of an HTML comment.
It is therefore important not to use the characters -- within either HTML or JavaScript unless used as part of an HTML comment, as browsers may not always interpret and render the HTML as you might expect.
It is important that the double forward slashes appear before the --> characters, as on their own the --> characters are not JavaScript comment characters.
Comments in JavaScript can be started with either the characters // which signifies a comment up to the end of the current line (or until terminated by a HTML end comment -->), or with the use of a starting /* and an ending */ which marks everything between these two sets of characters as a JavaScript comment.
The following is incorrect:
<SCRIPT LANGUAGE="JavaScript"> <!-- --> </SCRIPT> |
as on its own --> is not a valid JavaScript comment tag. The following is correct:
<SCRIPT LANGUAGE="JavaScript"> <!-- //--> </SCRIPT> |
Semi-colons
To avoid confusion always end single JavaScript statements with a semi-colon.
The following demonstrates confusion that might arise is semi-colons are missed off:
<SCRIPT LANGUAGE="JavaScript">
<!--
function functionName(A,B) {
if (A == B)
return 'equal';
}
alert(functionName(2,2));
//-->
</SCRIPT>
|
Returns equal if A equals B.
<SCRIPT LANGUAGE="JavaScript">
function functionName(A,B) {
if (A == B);
return 'equal';
}
alert(functionName(2,2));
//-->
</SCRIPT>
|
Always returns equal, even if A does not equal B.
<SCRIPT LANGUAGE="JavaScript">
function functionName(A,B) {
if (A == B) return
'equal';
}
alert(functionName(2,2));
//-->
</SCRIPT>
|
Returns nothing if A equals B, as the return statement does not extend onto the next line. This will actually result in an error.
Although there is no need to end a block statement with a semicolon, it is recommended that one is included:
<SCRIPT LANGUAGE="JavaScript">
<!--
{ var number = 123; var text = 'this is acceptable'; }
//-->
</SCRIPT>
|
Double and Single Quotes
Use double quotes (") for HTML attributes and single quotes (') for JavaScript string literals.
When writing HTML it is general practice to use double quotes for tag attributes, e.g.:
<IMG SRC="picture.gif" WIDTH="400" HEIGHT="400"> |
When writing JavaScript it is general practice to use single quotes for string literals:
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write('<P>');
//-->
</SCRIPT>
|
In general these quoting styles then complement one another when outputting HTML using JavaScript:
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write('<IMG SRC="picture.gif" WIDTH="400" HEIGHT="400">');
//-->
</SCRIPT>
|
Where nested quotes are required then use the escape key ("\") to escape the quotes:
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write('Don\'t forget to escape apostrophes');
//-->
</SCRIPT>
|
Scripting HTML tags
When outputting HTML using JavaScript always escape the forward slash ('/') by placing a backward slash ('\') in front of it.
Do not use:
document.write('</P>');
|
Use:
document.write('<\/P>');
|
Some browsers can mistakenly identify the forward slash as the end of the JavaScript source code. Placing the backward slash in front of each forward slash 'escapes' the forward slash character and avoids this problem.
The NOSCRIPT tag
Use the NOSCRIPT tag to provide alternative text for JavaScript disabled browsers:
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write('<P>Last modified: ' + document.lastModified + '<\/P>);
//-->
</SCRIPT>
<NOSCRIPT>
<P>Last modified: February 1999</P>
</NOSCRIPT>
|
The HTML within the NOSCRIPT tags is only rendered if the browser recognises the NOSCRIPT tag but does not support JavaScript. Older browser versions will not recognise either, but will only render the output in between the NOSCRIPT tags, as any JavaScript code will have been placed within a HTML comment.
Image Swapping
Always check for the existence of the image object before attempting to access any image properties:
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.images) {
// image object supported
}
else {
// image object not supported
}
//-->
</SCRIPT>
|
Use this technique rather then attempting to test for the browser type and version.
Always use the name of the image rather than its index number.
Image swapping within tables using the index number is unreliable. Images currently outside of tables may not always remain so.
JavaScript within Tables
Always output the entire table row using JavaScript.
Some browsers display a corrupt segment of your JavaScript code in front of the table, and then do not execute the JavaScript code.
Do not use:
<TABLE>
<TR>
<TD>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write(document.title);
//-->
</SCRIPT>
</TD>
</TR>
</TABLE>
|
Instead use:
<TABLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write('<TR><TD>');
document.write(document.title);
document.write('<\/TD><\/TR>');
//-->
</SCRIPT>
</TABLE>
|
Frame Detection
Do not rely on the document being loaded within a Frameset, check first before executing JavaScript code held in a parent or sibling frame:
<SCRIPT LANGUAGE="JavaScript">
<!--
if (parent == self) {
// not loaded within a Frameset
}
else {
// loaded within a Frameset
}
//-->
</SCRIPT>
|
JavaScript Links
Avoid using the javascript: protocol as a default URL within a link.
If JavaScript is disabled then the link will not work. Do not use:
<SCRIPT LANGUAGE="JavaScript">
<!--
function functionName() {
alert('Hello world');
}
//--></SCRIPT>
<A HREF="javascript:functionName()">text link</A>
|
Instead use JavaScript itself to override the href property of the link:
<SCRIPT LANGUAGE="JavaScript">
<!--
function functionName() {
alert('Hello world');
}
//-->
</SCRIPT>
<A HREF="default.htm" onClick="this.href='javascript:functionName()'">text link</A>
|
This approach then allows graceful degradation to a default page, and can be used to hide JavaScript intensive pages:
<A HREF="default.htm" onClick="this.href='javascript.htm'">text link</A> |
The javascript: protocol although not part of any URI (Uniform Resource Identifiers) RFC (Request For Comments), is supported in JavaScript enabled browsers REF [28].
Avoid using void()
The void() function is not supported by all browsers. Create your own void function.
The in built void() function is supported since JavaScript 1.1, therefore it is best to create your own void function rather than rely on JavaScript 1.1 being available:
<SCRIPT LANGUAGE="JavaScript">
<!--
function myVoid() { } // create a void function
//-->
</SCRIPT>
<A HREF="#" onClick="this.href='javascript:myVoid()'">non functional text link</A>
|
JavaScript Performance
Avoid writing output multiple times to the document, concatenate the data and then write all in one go.
With the introduction of Netscape Navigator 4, the rendering of JavaScript generated HTML slowed down considerably. The following writes the HTML output to the document in one go:
<SCRIPT LANGUAGE="JavaScript"> <!-- var output = '<P>'; output += 'Last modified: '; output += document.lastModified; output += '<\/P>' document.write(output); //--> </SCRIPT> |
Select Form Fields
Correctly navigate select field properties - use the Netscape method.
The following technique works in Microsoft Internet Explorer, but should be avoided:
<SCRIPT LANGUAGE="JavaScript"> <!-- var property = document.formName.selectName.propertyName //--> </SCRIPT> |
Whereas the following will work correctly in all browsers:
<SCRIPT LANGUAGE="JavaScript"> <!-- var property = document.formName.selectName.options[document.formName.selectName.options.selectedIndex].propertyName //--> </SCRIPT> |
Changing location
Do not use:
<SCRIPT LANGUAGE="JavaScript"> <!-- location = 'page.htm'; //--> </SCRIPT> |
The later approach is confusing as it is not clear whether you are changing the location property of the window or the document object, changing the location using the document is deprecated and causes problems on later browsers. Use:
<SCRIPT LANGUAGE="JavaScript"> <!-- window.location.href = 'page.htm'; //--> </SCRIPT> |
Opening Windows
When opening a new popup window using JavaScript there are several points to bare in mind.
To be able to control the popup window from the opener window, always retain the returned reference from the window's open method:
<SCRIPT LANGUAGE="JavaScript">
<!--
var windowHandle = window.open('page.htm','windowName','width=600,height=320');
//-->
</SCRIPT>
|
To avoid errors when referring to the opener window from the popup window, always check for the in-built browser support for the opener property, and if necessary provide your own:
<SCRIPT LANGUAGE="JavaScript">
<!--
var windowHandle = window.open('page.htm','windowName','width=600,height=320');
if (!windowHandle.opener)
windowHandle.opener = self;
//-->
</SCRIPT>
|
When updating the contents of a newly opened window, give the browser time to open the window and to load the initial contents:
<SCRIPT LANGUAGE="JavaScript">
<!--
function update() {
windowHandle.document.open();
windowHandle.document.write('<H1>Hello World<\/H1>');
windowHandle.document.close();
}
var windowHandle = window.open('page.htm','windowName','width=600,height=320');
if (!windowHandle.opener)
windowHandle.opener = self;
setTimeout('update()',2000);
//-->
</SCRIPT>
|
JavaScript Entities
JavaScript Entities are only supported by Netscape Navigator - they use should be avoided.
The following will cause errors in other browsers:
<HR WIDTH="&{barWidth};%">
|
Instead the following can be used:
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write('<HR WIDTH="' + barWidth + '%">');
//-->
</SCRIPT>
|
JavaScript Source Files
Care must be taken when using JavaScript Source files in Microsoft Internet Explorer 3.0x as using document.write() from within an external source file does not write to the document, and in some instances can cause the browser to crash REF [21].
JavaScript source files an be used in Netscape Navigator 3+ and Microsoft Internet Explorer 3.01+ to hold JavaScript code in an external JavaScript file, that can be embedded in one or many HTML files - the benefit being that once downloaded into the browsers cache it is instantly available for other HTML pages.
Before using code within a source file from within the HTML file it is recommended that a test is made to ensure that the source file has actually loaded:
<SCRIPT LANGUAGE="JavaScript"> <!-- var loaded = false; //--> </SCRIPT> <SCRIPT SRC="library.js"></SCRIPT> <BODY onLoad="if (loaded) hello()"> |
And within library.js:
function hello() {
alert('Hello World');
}
loaded = true;
|
References and Bibliography
[1] All About JavaScript
http://developer.netscape.com/viewsource/index_frame.html?content=husted_js/husted_js.html
[2] ECMA-262, ECMAScript language specification
http://www.ecma.ch/stand/ECMA-262.htm
[3] Netscape JavaScript documentation
http://developer.netscape.com/docs/manuals/javascript.html
[4] Microsoft JScript documentation
http://msdn.microsoft.com/scripting/default.htm?/scripting/jscript/techinfo/jsdocs.htm
[5] irt.org JavaScript documentation
http://www.irt.org/articles/script.htm
http://www.irt.org.script/faq.htm
[6] JavaScript the Definitive Guide 3rd Edition by David Flanagan, published by O'Reilly - ISBN 1-56592-392-8
http://www.amazon.com/exec/obidos/ISBN=1565923928/irtorgcoversinte/
[7] Dynamic HTML The Definitive Reference by Danny Goodman, published by O'Reilly - ISBN 1-56592-494-0
http://www.amazon.com/exec/obidos/ISBN=1565924940/irtorgcoversinte/
[8] JavaScript the Definitive Guide 2nd Edition by David Flanagan, published by O'Reilly - ISBN 1-56592-234-4
http://www.amazon.com/exec/obidos/ISBN=1565922344/irtorgcoversinte/
[9] Third party vendor JavaScript tools
http://developer.netscape.com/tech/javascript/index.html?content=/software/tools/listing/application/javascript/javascript.html
[10] Netscape's JavaScript Debugger 1.1
http://developer.netscape.com/software/jsdebug.html
[11] Netscape's Visual JavaScript Trial
http://home.netscape.com/download/selectplatform_12_28.html
[12] The World Wide Web Consortium
http://www.w3.org
[13] ECMAScript and JScript: Two of a Kind
http://msdn.microsoft.com/library/welcome/dsmsdn/msdn_jswenecmascript.htm
[14] What's New in JavaScript 1.3
http://developer1.netscape.com:80/docs/manuals/communicator/jsref/js13.html
[15] JScript - Upgrading Scripting Engines
http://msdn.microsoft.com/scripting/default.htm?/scripting/logo/Upgrade.htm
[16] IT Product Evaluations Process
http://www.info.bt.co.uk:8900/itvoice/1_icu/14_icu/14s04.htm
[17] W3C Working Draft Web Content Accessibility Guidelines
http://www.w3.org/TR/WD-WAI-PAGEAUTH/
[18] W3C Working Draft Web Content Accessibility Guidelines - Scripts
http://www.w3.org/TR/WD-WAI-PAGEAUTH/wai-pageauth-tech.html#scripts
[19] JavaScript and the ECMA Specification
http://developer.netscape.com/docs/manuals/js/client/jsguide/intro.htm#1013654
[20] Microsoft Script Encoder Beta 1 for X86
http://msdn.microsoft.com/scripting/encoder/x86/se10en.exe
[21] Internet Explorer 3.02 and SRC files
http://www.irt.org/articles/js011/index.htm
[22] W3C Recommendation Document Object Model Level 1
http://www.w3.org/TR/REC-DOM-Level-1
[23] W3C Working Draft Document Object Model Level 2
http://www.w3.org/TR/WD-DOM-Level-2
[24] Microsoft Script Debugger 1.0
http://msdn.microsoft.com/scripting/debugger/dbdown.htm
[25] Microsoft Script Control Download
http://msdn.microsoft.com/scripting/scriptcontrol/scdown.htm
[26] W3C Recommendation HTML 4.0 Specification
http://www.w3.org/TR/REC-html40/
[27] W3C Recommendation HTML 4.0 Strict Document Type Definition
http://www.w3.org/TR/REC-html40/sgml/dtd.html
[28] Netscape Client Side JavaScript Reference V1.3, javascript: URL syntax
http://developer.netscape.com/docs/manuals/js/client/jsref/location.htm#1193181
Feedback on 'JavaScript Guidelines and Best Practice'
- JavaScript Guidelines and Best Practice - Fred Harthoorn October 09, 2001 at 17:40:50
- JavaScript Guidelines and Best Practice - Jonathan Scott 14:57:35 4/06/01
- JavaScript Guidelines and Best Practice - Moacyr 22:04:35 7/07/99
- JavaScript Guidelines and Best Practice - David 09:18:35 6/27/99
- JavaScript Guidelines and Best Practice - Cyril Roiron 05:46:15 5/17/99
- JavaScript Guidelines and Best Practice - Pankaj Kamthan 23:25:45 4/30/99