• 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:

* 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>

<!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>

<A HREF="page.htm" onClick="alert('Hello World')">text link</A>

<A HREF="javascript:alert('Hello world')">text link</A>

<SCRIPT SRC="library.js"></SCRIPT>

<HR WIDTH="&amp;{barWidth};%" ALIGN="LEFT">

<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>

<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>

<SCRIPT LANGUAGE="JavaScript">
<!-- Start hiding JavaScript

// Stop hiding JavaScript -->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript"><!--
//--></SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
function functionName(A,B) {
    if (A == B) 
        return 'equal';
}

alert(functionName(2,2));
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
function functionName(A,B) {
    if (A == B); 
        return 'equal';
}

alert(functionName(2,2));
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
function functionName(A,B) {
    if (A == B) return
        'equal';
}

alert(functionName(2,2));
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
{ var number = 123; var text = 'this is acceptable'; }
//-->
</SCRIPT>

<IMG SRC="picture.gif" WIDTH="400" HEIGHT="400">

<SCRIPT LANGUAGE="JavaScript">
<!--
document.write('<P>');
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
document.write('<IMG SRC="picture.gif" WIDTH="400" HEIGHT="400">');
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
document.write('Don\'t forget to escape apostrophes');
//-->
</SCRIPT>

document.write('</P>');

document.write('<\/P>');

<SCRIPT LANGUAGE="JavaScript">
<!--
    document.write('<P>Last modified: ' + document.lastModified + '<\/P>);
//-->
</SCRIPT>

<NOSCRIPT>     
<P>Last modified: February 1999</P> 
</NOSCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.images) {
    // image object supported
}
else {
    // image object not supported
}
//-->
</SCRIPT>

<TABLE>
    <TR>
        <TD>

        <SCRIPT LANGUAGE="JavaScript">
        <!--
        document.write(document.title);
        //-->
        </SCRIPT>

        </TD>
    </TR>
</TABLE>

<TABLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    document.write('<TR><TD>');
    document.write(document.title);
    document.write('<\/TD><\/TR>');
    //-->
    </SCRIPT>
</TABLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
if (parent == self) {
    // not loaded within a Frameset
}
else {
    // loaded within a Frameset
}
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
function functionName() {
    alert('Hello world');
}
//--></SCRIPT>
<A HREF="javascript:functionName()">text link</A>

<SCRIPT LANGUAGE="JavaScript">
<!--
function functionName() {
    alert('Hello world');
}
//-->
</SCRIPT>

<A HREF="default.htm" onClick="this.href='javascript:functionName()'">text link</A>

<A HREF="default.htm" onClick="this.href='javascript.htm'">text link</A>

<SCRIPT LANGUAGE="JavaScript">
<!--
function myVoid() { } // create a void function
//-->
</SCRIPT>

<A HREF="#" onClick="this.href='javascript:myVoid()'">non functional text link</A>

<SCRIPT LANGUAGE="JavaScript">
<!--
var output = '<P>';
output += 'Last modified: ';
output += document.lastModified;
output += '<\/P>'
document.write(output);
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
var property = document.formName.selectName.propertyName
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
var property = document.formName.selectName.options[document.formName.selectName.options.selectedIndex].propertyName
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
location = 'page.htm';
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
window.location.href = 'page.htm';
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
var windowHandle = window.open('page.htm','windowName','width=600,height=320');
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
var windowHandle = window.open('page.htm','windowName','width=600,height=320');
if (!windowHandle.opener)
    windowHandle.opener = self;
//-->
</SCRIPT>

<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>

<HR WIDTH="&{barWidth};%">

<SCRIPT LANGUAGE="JavaScript">
<!--
document.write('<HR WIDTH="' + barWidth + '%">');
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
var loaded = false;
//-->
</SCRIPT>

<SCRIPT SRC="library.js"></SCRIPT>

<BODY onLoad="if (loaded) hello()">

function hello() {
    alert('Hello World');
}

loaded = true;

发表评论

IT瘾于2010年1月26日 上午11时22分43秒发布 #