Section B. Technical overview


B. Technical overview

The purpose of this book is to give an overview of all facets of JavaScript that are important in creating modern Web sites. I split JavaScript into six areas, each of which have their own purpose and problems, and each of which will be treated in its own chapter. The table below summarizes these six areas.

 

Jobs

Treated in

Example scripts

Core

Making JavaScript a programming language. Allowing control structures, variables, functions, and objects.

Chapter 5

All

BOM (Browser Object Model)

Giving commands to the browser window, reading cookies, and communicating with other windows.

Chapter 6

Site Survey

Events

Note: browser incompatibilities!

Finding out which actions the user takes, and defining functions that should react to these actions.

Chapter 7

All, but especially Dropdown Menu

DOM (Document Object Model)

Studying and changing the HTML document's structure.

Chapter 8

All, but especially Usable Forms, Sandwich Picker, Textarea Maxlength, Form Validation

CSS modification

Studying and changing the CSS presentation of the HTML document.

Chapter 9

Especially XMLHTTP Speed Meter and Edit Style Sheet

Data retrieval (XMLHttpRequest)

Downloading new data from the server without refreshing the page.

Chapter 10

XMLHTTP Speed Meter


All scripts use the Core language, Events, and the DOM, because all scripts must be a program (Core), must wait for the user to do something (Events), and must update the page somehow to give feedback (DOM).

Standardization

Standards-wise, JavaScript is a bit of a patchwork, and in order to understand the reasons for this you need a quick historical summary. (JavaScript's full story will be told in 1C.)

De facto Netscape 3 standard

JavaScript was invented and first implemented by Netscape, which back in 1996 was the leading browser. Then other browsers, such as Explorer, entered the market. In order to ensure that all existing Web sites functioned correctly, they were forced to copy Netscape's JavaScript implementation exactly.

Therefore, even today all JavaScript browsers support the de facto Netscape 3 standard. It consists of Core 1.1, BOM, the traditional event model, and the Level 0 DOM. Back in those days CSS modification and data retrieval weren't invented yet, so they're not part of this standard. Nowadays the standard is distinctly antiquated, but since millions of Web pages still use old-fashioned Netscape 3 scripts, no browser can afford to relinquish this standard.

Then followed the Browser Wars, during which Microsoft and Netscape struggled for pre-eminence in the browser market and made a distinct point of being as incompatible as possible. It took JavaScript many years to recover from this ordeal, and we're still suffering the consequences, especially in event handling.

Modern standards

In order to understand the modern standards we first have to discuss a fundamental distinction between Core and the DOM (which includes event handling and CSS modification).

Although JavaScript is best known for its function as a client-side scripting language in Web browsers, it can be implemented in a variety of other environments. Adobe's ActionScript, for instance, implements JavaScript Core in Flash movies, and Netscape once had its own brand of Web servers that used JavaScript as their primary server-side language.

Flash movies and Web servers are fundamentally different environments than Web pages. Nonetheless, they all use the JavaScript Core language in order to create a programming environment.

DOM, on the other hand, is specific to XML documents (including HTML pages). Its view of a document as a hierarchical collection of nodes (see 8A) is excellently suited to Web pages, but largely useless in a Flash or server-side environment.

That's why there are separate standards for Core and the DOM.

The European Computer Manufacturers Association (ECMA) has standardized JavaScript Core, and this standard is (supposed to be) used in any JavaScript implementation, be it Flash, Web browsers, Web servers, or one that is yet to be invented.

On the other hand, XML and its numerous offshoots are the domain of the World Wide Web Consortium (W3C). W3C created the DOM specification, which includes event handling and CSS modification.

The BOM and data retrieval have not yet been specified officially. The Web Hypertext Application Technology Working Group (WHAT-WG) is working on the BOM, while at the time of writing W3C has created a first draft of an XMLHttpRequest specification for data retrieval. The BOM still follows the old de facto Netscape 3 standard, while XMLHttpRequest is being used as originally specified by Microsoft.

Two tiers

JavaScript standards are therefore a two-tiered construct. The older, lower tier consists of the de facto Netscape 3 standard which is universally supported but rather restricted, while the newer, upper tier consists of standards coming from ECMA, W3C, Microsoft, and WHAT-WG, most of which are supported by most browsers.

The table below summarizes these two tiers:

 

Netscape 3 standard

Modern standards

Core

Yes (1.1)

ECMA (1.5)

BOM

Yes

None (WHAT-WG)

Events

Yes (traditional)

W3C DOM and Microsoft

DOM

Yes (Level 0)

W3C DOM

CSS modification

No (not supported)

W3C DOM

Data retrieval

No (not supported)

De facto Microsoft, W3C draft


Standards

Unfortunately there's no single documentation for the Netscape 3 standard any more, since the demise of Netscape's JavaScript guide.

At the time of writing you can find the various modern JavaScript standards here:

ECMA's JavaScript Core Specification: http://www.ecma-international.org/publications/standards/Ecma-262.htm.

W3C DOM Specification: http://www.w3.org/DOM/, (includes Events and CSS modification).

Web Hypertext Application Technology Working Group: http://www.whatwg.org/ (currently no direct link to the BOM specification).

http://msdn.microsoft.com/workshop/author/om/event_model.asp: Microsoft event model.

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/7924f6be-c035-411f-acd2-79de7a711b38.asp: Microsoft XMLHttpRequest.


Although nowadays all browsers are serious about following all standards, we're still suffering from a few holdovers of the Browser Wars. Microsoft has not yet implemented W3C's Events specification, but instead uses its own proprietary event model. In order to write cross-browser event handling scripts you must therefore understand both the W3C and the Microsoft models, as well as the older Netscape 3 standard. We'll discuss all this in Chapter 7.

Versions

There are several JavaScript versions, ranging from the obsolete 1.0 to the 2.0 that's under development at the time of writing. It's important to note that these version numbers only apply to Core; other areas of JavaScript (notably the DOM) have their own version numbers.

Core version

Implemented in

ECMA specifications

1.0

Netscape 2

earlier Explorer 3 versions

 

1.1

Netscape 3

later Explorer 3 versions

 

1.2

Netscape 4 4.5

 

1.3

Netscape 4.5+

Explorer 4 (slight upgrade in 5.0)

v1 (v2 contained some clarifications)

1.4

No browser, only Netscape servers

 

1.5

Mozilla

Explorer 5.5+

v3

1.6-2.0

Under construction

v4


Originally, the idea behind these version numbers was to allow Web developers to specify what level of JavaScript they were using. It was supposed to work something like this:

<script language="JavaScript1.2"> // scripts that use 1.2 features </script> 


Browsers that did not support JavaScript 1.2 were supposed to ignore the entire <script> tag, so that the scripts would only be executed in browsers that could handle 1.2.

The advent of Netscape and Explorer 4 relegated this well-intentioned idea to the dustbin. Both browsers claimed to support JavaScript 1.2, but not even the most powerful fantasy can imagine them supporting the same JavaScript 1.2. Besides, this idea was only truly implemented in Netscape 2 and 3, though specifying "JavaScript1.2" triggers special and exciting incompatibilities in Netscape 4.

Therefore these version numbers play no role in modern JavaScript development, and I advise you not to specify any version in the language attribute (in fact, you shouldn't use that attribute at all).

Towards JavaScript 2.0

As I write, JavaScript's inventor Brendan Eich is working on JavaScript 2.0. The purpose is to add new features to the Core language, including a better variable typing system, support for Java-like classes and interfaces, block scope for variables, and other innovations aimed at improving JavaScript as a programming language.

Brendan's Roadmap

http://weblogs.mozillazine.org/roadmap/ contains Brendan Eich's roadmap update for the deployment of Core 2.0.


Mozilla and Opera are expected to start supporting some of these features in 2007, and other browsers are expected to follow later. Adobe participates in this effort, so ActionScript is also likely to implement Core 2.0.

Security

The purpose of JavaScript is adding usability to a Web site, not breaching the user's privacy and security.

First of all, picture what happens when an innocent end user finds a Web page that contains JavaScript. He essentially downloads an unknown program written by an unknown person that's going to run on his computer. In general, executing unknown programs that do unspecified things on and to your computer is the fastest way to get infected with viruses, Trojan horses, and other malign entities.

In order to keep Web users secure from these hazards, as well as from breaches of privacy, JavaScript has strict security regulations. Its most important line of defense against malicious scripters is that it simply does not support certain actions.

No access to host computer

JavaScript cannot read from or write to the file system of your user's computer (with the exception of cookies; see 6G). Thus JavaScript cannot read password files from or write viruses to the user's hard disk.

Same-source policy

As we'll see in Chapter 6, JavaScript allows you to access and run scripts that are located in another frame or window. Nonetheless, without any restrictions this would be a serious security hazard, since it might allow, for example, malicious site owners to read out the password the user types in his online banking tool, and then submit this password to their own servers.

Exception: Top.Location.Href

There's one exception to the same-source rule. If your site is caught in someone else's frameset, you are allowed to set (but not get!) top.location.href, or the location of the topmost frameset page. See http://www.quirksmode.org/js/framebust.html for more information.


Therefore JavaScript has a strict same-source policy: Cross-window communication is allowed only when the pages in both windows come from the same Web domain. If that's not the case, the browser gives a security error.

This policy is very strict. Suppose I have two sub-domains, www.quirksmode.org and search.quirksmode.org. A page on the www domain opens a popup with a page on the search domain. Now the same-source policy kicks in and forbids any communication between the two windows, since they come from different (sub)domains.

document.domain

There is one way in which I'm allowed to mitigate the same-source policy somewhat. I can set the document.domain property in both windows to 'quirksmode.org':

document.domain = 'quirksmode.org'; 


Now both pages consider themselves to come from quirksmode.org without any subdomain, and the www page and the search page are allowed to communicate with each other.

Obviously, you may only set document.domain to a value that's part of the real domain. This doesn't work:

   document.domain = 'microsoft.com'; 


The browser sees that my pages do not come from microsoft.com, but from quirksmode.org. Therefore the value is ignored and I cannot communicate with any page from microsoft.com.

Other restrictions

Apart from having no access to the host computer and the same-source policy, JavaScript has the following restrictions:

  • JavaScript cannot read properties of the History object (which we'll discuss in 6C). Although you're allowed to send your users back in their browser history, you're not allowed to see to which page they'll return.

  • JavaScript cannot set the value of a file upload field. Thus, malicious site owners cannot set the value to the location of a password file and then automatically submit the form in order to get a copy of the user's password file.

  • If you try to close a browser window that has been opened by the user, the user is asked to allow this action. You may close windows opened by JavaScript without this restriction.

  • Most browsers don't allow you to open new windows that are smaller than 100x100 pixels and/or that are located outside the visible computer screen. In addition, you may not produce new windows without title bars.



ppk on JavaScript. Modern, Accessible, Unobtrusive JavaScript Explained by Means of Eight Real-World Example Scripts2006
ppk on JavaScript. Modern, Accessible, Unobtrusive JavaScript Explained by Means of Eight Real-World Example Scripts2006
ISBN: N/A
EAN: N/A
Year: 2005
Pages: 116

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net