JavaScript 在浏览器中的相关概念：执行环境、引入脚本、安全策略等

The Window as Global Execution Context
窗口作为全局执行环境

[quote]document property for the Document object
two self-referential properties, window and self

a location property that refers to the Location object associated with the window. When a web browser displays a framed document

the frames[] array of the top-level Window object contains references to the Window objects that represent the frames

The Window object represents a web browser window (or a frame within a window; in client-side JavaScript, top-level windows and frames are essentially equivalent).
[/quote]

document属性引用Document对象

location属性引用与该window相关的Location对象

frames[]数组保存了文档中表单元素的引用

The Client-Side Object Hierarchy and the DOM
DOM文档树

[img]/upload/attachment/126729/26f9bbde-577b-3c1f-b694-c700e2d0c1a9.png[/img]


The Role of JavaScript on the Web
JS在浏览器中的角色

[quote]Web browsers display HTML-structured text styled with CSS stylesheets. HTML defines the content, and CSS supplies the presentation. Properly used, JavaScript adds behavior to the content and its presentation. The user's experience should not be dependent on JavaScript, but JavaScript can serve to facilitate that experience. [/quote]

为内容和表现进一步添加行为

Unobtrusive JavaScript
不唐突的JS

[quote]
As its name implies, this paradigm holds that JavaScript should not draw attention to itself; it should not obtrude.

The first goal of unobtrusive JavaScript is to keep JavaScript code separate from HTML markup. As a corollary to this goal, you should strive to make your external files of JavaScript code as modular as possible.

The second goal of unobtrusive JavaScript is that it must degrade gracefully.

A third goal of unobtrusive JavaScript is that it must not degrade the accessibility of an HTML page (and ideally it should enhance accessibility).[/quote]

尽量不凸显JS的存在

首先，与HTML代码分离
其次，平稳退化
再次，增强可用性；也就是稳步增强

Embedding Scripts in HTML
在HTML中嵌入代码
[quote]Between a pair of <script> and </script> tags
From an external file specified by the src attribute of a <script> tag
In an event handler, specified as the value of an HTML attribute such as onclick or onmouseover
In a URL that uses the special javascript: protocol[/quote]

<script>标签之间
<scirpt>引入的单独JS文件
HTML的事件属性中的代码
javascirpt伪协议所引用的代码


注意CDATA标记

<script><![CDATA[// Your JavaScript code goes here
]]></script>

The defer Attribute
defer属性

[quote]As mentioned earlier, a script may call the document.write( ) method to dynamically add content to a document. Because of this, when the HTML parser encounters a script, it must normally stop parsing the document and wait for the script to execute. [/quote]


改变<script>代码块的执行顺序
可以延迟该块的执行，继续HTML解析

Event Handlers in HTML
事件句柄
[quote]
onclick
This handler is supported by all button-like form elements, as well as <a> and <area> tags.

onmousedown, onmouseup
These two event handlers are a lot like onclick, but they are triggered separately when the user presses and releases a mouse button, respectively. Most document elements support these handlers.

onmouseover, onmouseout

onchange
This event handler is supported by the <input>, <select>, and <textarea> elements. It is triggered when the user changes the value displayed by the element and then tabs or otherwise moves focus out of the element.

onload
This event handler may appear on the <body> tag and is triggered when the document and its external content (such as images) are fully loaded. [/quote]

在执行js伪协议的语句是，确保返回值为空，否则会刷新当前页面来显示

The onload Event Handler
onload事件句柄

这个是在文档完全解析完并且所有资源都下载后执行的，这里不再允许执行document.write()。很显然这里文档已经渲染完毕，如果再有document.write()，那么浏览器就会新建一个空白文档来写入内容。用户就没有机会看到之前文档的内容了。

Client-Side Compatibility
客户端兼容性

目前保证兼容性最好的方法不是判断浏览器再为他们编写各自的代码，而是进行功能性判断。

Feature Testing
功能测试
[quote]
Feature testing (sometimes called capability testing) is a powerful technique for coping with incompatibilities.[/quote]
简单来说也就是判断某一个函数或方法在特定的环境下是否存在，并根据结果进行对应操作。而不是盲目地根据不可靠的方法判断浏览器种类和版本。

例如下面对事件模型的判断：

if (element.addEventListener) { // Test for this W3C method before using it
    element.addEventListener("keydown", handler, false);
    element.addEventListener("keypress", handler, false);
}
else if (element.attachEvent) { // Test for this IE method before using it
    element.attachEvent("onkeydown", handler);
    element.attachEvent("onkeypress", handler);
}
else {  // Otherwise, fall back on a universally supported technique
    element.onkeydown = element.onkeypress = handler;
}

还有一种方法就是尝试所有可能的函数，直到有一种得出了正确的结果；往往这个是由于不同浏览器实现同一种操作的函数名称不一样。

例如下面这个新建XHR对象的例子：

// This is a list of XMLHttpRequest creation functions to try
HTTP._factories = [
    function( ) { return new XMLHttpRequest( ); },
    function( ) { return new ActiveXObject("Msxml2.XMLHTTP"); },
    function( ) { return new ActiveXObject("Microsoft.XMLHTTP"); }
];

// When we find a factory that works, store it here
HTTP._factory = null;

// Create and return a new XMLHttpRequest object.
//
// The first time we're called, try the list of factory functions until
// we find one that returns a nonnull value and does not throw an
// exception. Once we find a working factory, remember it for later use.
HTTP.newRequest = function( ) { /* fuction body omitted */ }

JavaScript Security
JS的安全策略

[quote]A JavaScript program can open new browser windows, but, to prevent pop-up abuse by advertisers, many browsers restrict this feature so that it can happen only in response to a user-initiated event such as a mouse click.

A JavaScript program can close browser windows that it opened itself, but it is not allowed to close other windows without user confirmation. This prevents malicious scripts from calling self.close( ) to close the user's browsing window, thereby causing the program to exit.

A JavaScript program cannot obscure the destination of a link by setting the status line text when the mouse moves over the link.

A script cannot open a window that is too small (typically smaller than 100 pixels on a side) or shrink a window too small.

The value property of HTML FileUpload elements cannot be set.

A script cannot read the content of documents loaded from different servers than the document that contains the script. Similarly, a script cannot register event listeners on documents from different servers.
[/quote]

JS可以打开浏览器窗口，但是大多数浏览器都会限制这个功能。由于广告代码的干扰，浏览器通常只让用户点击行为中的打开窗口代码生效。

JS也不允许未经用户允许关闭浏览器窗口。

JS也不允许在鼠标滑过链接的时候通过改变状态栏的提示文字来混淆浏览者。大多数浏览器都禁止更改状态栏文本了。

JS也不允许把窗口调节至某一个边长小于100像素。

FileUpload组件的value值不能够被更改。

对于不同服务器上的页面，脚本既不能读取其内容，也不能注册事件。

The Same-Origin Policy
同源策略

[quote]Specifically, a script can read only the properties of windows and documents that have the same origin as the document that contains the script

To support large web sites of this sort, you can use the domain property of the Document object. By default, the domain property contains the hostname of the server from which the document was loaded. You can set this property, but only to a string that is a valid domain suffix of itself.[/quote]

这个可以看做是上面最后一条的详细解释。
尽管脚本会限制不同服务器的文档，但是现在的大型站点往往有许多子域名。在JS的安全特性限制下，这些子域名下的脚本也是无法通讯的。好在有一个document.domain属性。

将需要互相通讯的文档的document.domain设置为同一个顶级域名就可以突破这个限制。

例如：
img.aaa.com的页面中document.domain设置为aaa.com；
serach.aaa.com的页面中document.domain同样设置为aaa.com；