权威指南学习心得-浏览器中的js

window对象：表示web了浏览器的一个窗口或窗体（winow属性引用自身）

含有如下属性：location包含Location对象，指定当前显示在窗口中URL，容许脚本往窗口里载入新的URL

含有如下方法：

alert（），setTimeout（）；

document属性 引用Document对象，后者表示显示在窗口中的文档，它包含有一些重要方法，好比getElementById()，返回Element对象，这个对象有其它重要的属性和方法。每一个Element对象都有style和className属性。容许脚本指定文档元素的css样式，或者修改应用到元素上的css类名。设置这些css相关的属性会改变文档元素的呈现

Window、Document和Element对象上另外一个重要的属性集合是事件处理程序相关的属性，能够在脚本中为之绑定一个函数，事件处理程序的属性名是以单词“on”开始的

Window对象的onlaod处理程序：当显示在窗口中的文档内容稳定并能够操做是会触发它

javaScript程序能够经过Document对象和它包含的Element对象遍历和管理文档内容。它能够经过操纵css样式和类，修改文档内容的呈现，而且能够经过注册适当的事件处理程序来定义文档元素的行为。内容 呈现 和行为的组合，叫作动态HTML

嵌入方式：

1.内联 放置在<script>和</script>标签之间。

二、放置在有<script>标签的src属性指定的外部文件中

三、放置在HTML事件处理程序中，该事件处理程序由onclick或者onmouseover这样的HTML属性指定

四、放在一个URL里，这个url使用特殊的“javascript:”协议

注册时间处理程序：web浏览器先注册javascript函数，并在以后调用它做为事件的响应，javascript代码能够经过把函数赋值给Element对象的属性来注册事件处理程序。Element对象表示文档里的一个HTML元素。

<a href="javascript:new Date().toLocalTimeString;">what time is ite</a>

部分浏览器（firefox）会执行URL里的代码，并使用返回的字符串做为待显示新文档的内容，浏览器会擦除当前文档并显示新文档。

<a href="javascript:alert(new Date().toLocaleTimeString());">时间</a>

当浏览器载入这种类型的URL时，它会执行javascript代码，可是因为没有返回值（alert（）方法返回undefined）做为新文档的显示内容，相似firefox的浏览器并不会体会当前显示的文档

javascript：url能识别的“资源”是转换成字符串的执行代码的返回值.若是代码返回undefined，那么这个资源是没有内容的，能够用在可使用常规URL的任意地方：好比<a>标记的href属性，<form>的action属性，甚至window.open方法的参数

若是要确保javascript：url不会覆盖当前文档，能够用void操做符强制函数调用或给表达式赋予undefined值：

<a href='javascript:void window.open('about:blank');'></a>

若是这个url里没有void操做符，调用window.open()方法返回的值会被转化为字符串并显示，而当前文档也会被覆盖为包含该字符串的文档

javascript程序是由web页面中全部包含的全部javascript代码（内联脚本 html事件处理程序和javascript：URL）和经过《script》标签的src属性引用的外部javascript代码组成。全部这些单独的代码共用同一个全局Window对象。这意味着它们均可以看到相同的Document对象，能够共享相同的全局函数和变量的集合：若是一个脚本定义了新的全局变量或者函数，那么这个变量或者函数会在脚本执行以后对任意javascript代码可见。

若是web页面包含一个嵌入的窗体（一般使用《iframe》元素），嵌入文档中的javascript代码和被嵌入文档里的javascript代码会有不一样的全局对象，它能够看成一个独立的javascript程序。可是要记住，没有严格的关于javascript程序范围的定义。若是外面和里面的文档来自于同一个服务器，那么两个文档中的代码就能够进行交互。而且若是你愿意，就能够把它们看成是同一程序的两个互相做用的部分

javascript程序的执行有两个阶段.在第一个阶段，载入文档内容，并执行《script》元素里的代码（包括内联脚本和外部脚本）。脚本一般（但不老是）会按它们在文档里的出现顺序执行。全部脚本里的javascript代码都是从上往下，按照他在条件、循环以及其余控制语句中的出现顺序执行

当文档载入完成，而且全部脚本执行完成后，javascript执行就进入他的第二阶段。这个阶段是异步的，并且由事件驱动的，在事件驱动阶段，web浏览器调用事件处理程序函数（由第一阶段里执行的脚本指定的html事件处理程序，或者以前 调用的事件处理程序来定义），来响应异步发生的事件。调用事件处理程序一般是响应用户输入（鼠标单击或者键盘按下等）。可是还能够有网络活动，运行时间或者javas代码中的错误来触发，注意 ，嵌入web页面里的javascript：url也能够看成是一种事件处理程序，由于直到用户经过单击连接或者提交表单以后它们才有有效果

事件驱动阶段发生的第一事件是laod事件，指示文档已经彻底载入，并能够操做，javascript程序常常用这个时间来触发或发生消息。正是这个onlaod事件会对文档进行操做，并作程序想作的任何事。javascript程序的载入阶段是相对短暂的，一般只持续1~2秒。在文档载入完成以后，只有web浏览器显示文档。事件驱动阶段就会一直持续下去

核心javascript和客户端javascript有一个单线程执行模型，脚本和事件处理程序在同一个时间只能执行一个，没有并发性

javascript第一次添加到web浏览器时，还么有api能够用来遍历和操做文档的结构和内容。当文档还在载入时，javascript影响文档内容的惟一方式是快速生成内容。当HTML解析器遇到《script》元素时，它默认必须先执行脚本，而后再恢复文档的解析和渲染，这对于内联脚本没什么问题。但若是脚本源代码是一个有Src属性指定的外部文件，这意味着脚本后面的文档部分在下载和执行脚本以前，都不会出如今浏览器中

脚本的执行只在默认状况下是同步和阻塞的。《script》标签能够有defer和async属性，这能够改变脚本的执行方式，这些都是布尔属性，没有值。只须要出如今《script》标签里便可

defer和async属性都想在告诉浏览器连接进来的脚本不会使用document。write，也不会生成热火文档内容，所以浏览器能够在下载脚本是继续解析和渲染文档，defer属性使得浏览器延迟脚本的执行，知道文档的载入和解析完成，并能够操做。async属性使得浏览器能够尽快的执行脚本，而不用在下载脚本时阻塞文档解析，若是《script》标签同时又两个属性，同时支持二者的浏览器会听从async属性并忽略defer属性。

注意，延迟的脚本会按它们在文档里的出现顺序执行，而异步脚本在他们载入后执行，这意味着他们可能会无序执行

甚至能够在不支持async属性的浏览器里，经过动态建立《script》元素并把它插入到文档中

来实现脚本的异步加载和执行。

function loadasync(url){
var head=document.getElementsByTagName("head")[0];
var s=document.createElement("script");
s.src=url;
head.appendChild(s);


}

 

 

 

 

事件都有名字，好比click  change load mouseover keypress或者readystatechange，指示发生的事件的通用类型。事件还有目标，它是一个对象，而且事件就是在它上面发生的。当咱们谈论事件的时候，必须同时指定事件类型(名字)和目标，好比一个单击事件发生在HTMLButtonElement对象上，或者一个readystatechange事件发生在XMLHttpRequest对象上

若是想要程序响应一个事“件，写一个函数，叫作“事件处理程序”、“事件监听器”或者“回调”，而后注册这个函数，这样他就会在事件发生时调用它，正如前面提到的，这个能够经过HTML属性来完成，可是咱们不鼓励奖javascript代码和HTML内容混淆在一块儿，反之，注册事件处理程序最简单的方法是把javascript函数赋值给目标对象的属性

好比

window.onload=function (){};

document.getElementById().onclick=function(){}

function handleResponse(){}

request.onreadystatechange=handleResponse;

事件处理程序的属性的名字是以“on”开始，后面跟着事件的名字

对于大部分浏览器中的大部分事件来讲，会把一个对象传递给事件处理程序做为参数，那个对象的属性提供了事件的详细信息。好比，传递给单击事件的对象，会有一个属性说明鼠标的哪一个按钮被单击（在IE里，这些事件信息被存储在全局event对象里，而不是传递给处理程序函数）。事件处理程序的返回值有时用来指示函数是否充分处理了事件，以及阻止浏览器执行它默认会进行的各类操做。

有些事件的目标是文档元素，它们会常常往上传递给文档树，这个过程叫作“冒泡”。若是注册在按钮上的函数没有处理该事件，事件会冒泡到按钮嵌套的容器元素。

大部分能够成为事件目标的对象都有一个叫作addEventListener的方法，容许注册多个监听器：

window.addEventListener("load",function(){},false);

request.addEventListener("readystatechange",function(){},false)；

微软目前只有在IE9中实现了它，在IE8以及以前的浏览器中，必须使用一个类似的方法：

window.attchEvent("onloac",function(){});

客户端javascript程序仍是使用异步通知类型，这些类型每每不是事件。若是设置window对象的onerror属性为一个函数，会在发生javascript错误时调用函数。传递给setTimeout和setInterval的函数和真实事件处理程序的注册不一样，它们一般叫作“回调逻辑”而不是“处理程序”，但它们和事件处理程序同样，也是异步的

function onLoad(f){
  if(onload.loaded){
    window.setTimeout(f,0);
  }
  else if(window.addEventListener){
    window.addEventListener("load",f,false);
  }
  else if(window.attchEvent){
    window.attchEvent("onload",f);
  }
}
onLoad.loaded=false;
onLoad(function(){
  onLoad.loaded=true;
                 });

客户端javascript时间线

一、web浏览器建立Dcoment对象，而且开始解析Web页面，解析HTML元素和它们的文本内容后添加Element对象和Text节点到文档中。在这个阶段document.readystate属性的值是"loading"。

二、当HTML解析器遇到没有async和defer属性的<script>元素时，它把这些元素添加到文档中，而后执行行内或者外部脚本，这些脚本会同步执行，而且咋脚本下载（若是须要）和执行时解析器会暂停。这样脚本就能够用document.write（）来吧文本插入到输入流中，解析器恢复时这些文本会成为文档的一部分。同步脚本将从简单定义函数和注册后面使用的注册事件处理程序。但它们能够遍历和操做文档树，由于在它们执行时已经存在了。这样，同步脚本能够看到它本身的</script>元素和它们以前的文档内容。

三、当解析器遇到设置了async属性的<script>元素时，它开始下载脚本文本，并继续解析文档。脚本会在它下载完成后尽快执行。可是解析器没有停下来等它下载，异步脚本禁止使用document.write方法，它们能够看到本身的《script》元素和它以前的全部文档元素，而且可能或者干脆不可能访问其余的文档内容

四、当文档完成解析，document.readyState属性变成 "interactive"

五、全部defer属性的脚本，会按它们在文档里的出现顺序执行。异步脚本可能也会在这个时间执行。延迟脚本能访问完整的文档树，禁止使用document。write方法

六、浏览器在Document对象上触发DOMContentLoaded事件。这标志这程序执行从同步脚本阶段转换到异步事件驱动阶段。但要注意，这时可能还有异步脚本没有执行完成。

七、这时，文档已经彻底解析完成，可是浏览器可能还在等待其余内容载入，如图片，当全部这些内容完成载入时，而且全部异步脚本完成完成载入和执行，document。readyState属性改变为“complete”,web浏览器出发Window对象上的load事件。

八、今后刻起，会调用异步事件，以异步响应用户输入事件、网络事件、计时器过时等

全部浏览器广泛都支持load事件，都会触发它，它是决定文档彻底载入并能够操做最通用的技术。

DOMContentLoaded事件在load事件以前触发，当前全部浏览器都支持这个事件，除了IE以外，document.readyState属性在写本书是已被大部分浏览器实现，可是属性的值在浏览器之间有细微的差异。defer属性被全部当前版本的IE支持，可是如今还未被其余浏览器实现。async属性的支持在写本书时还不通用，可是13-4里展现的异步脚本执行技术会被当前全部浏览器支持

标准模式和怪异模式

要进行这种渲染模式的特性检测，一般检查document.compatMode属性。若是其值为“CSS1Compat”,则说明

浏览器工做在标准模式，若是值为“BackCompat”(或者undefined，说明属性根本不存在)，则说明浏览器工做在怪异模式。全部现代浏览器都实现了compatMode属性，而且HTML5规范对它进行了标准化

同源策略

是对javascript代码可以操做哪些web内容的一条完整的的安全机制。当web页面使用多个《iframe》元素或者打开其余浏览器窗口的时候，这一策略一般就会发挥做用。

在这种状况下，同源策略负责管理窗口或者窗体中的javascript代码以及和其余窗口或帧的交互，具体的说，脚本只能读取和所属文档来源相同的窗口和文档的属性

文档的来源包含协议、主机，以及载入文档的url端口。从不一样web服务器载入的文档具备不一样的来源。经过赞成主机的不一样端口载入的文档具备不一样的来源。使用http协议载入的文档和使用https协议载入的文档具备不一样的来源，即便它们来自同一服务器。

脚本自己的来源和同源策略并不相关，相关的是脚本所嵌入的文档的来源

为了支持多个子域的多域名站点，可使用Document对象的domain属性属性，在默认状况下，属性domain存放的是载入文档的服务器的主机名。能够设置这一属性，不过使用的字符串必须具备有效的域前缀或它自己。

另外，domain值中必须有一个点号，不能把它设置为“com”或者其余顶级域名。

若是两个窗口（或者窗体）包含的脚本把domain设置成了相同的值，那么这个两个窗口就再也不受同源策略的约束，它们能够互相读取对方的属性。

不严格的同源策略的第二项技术已经标准化为：跨域资源共享，这个标准草案用新“Origin”:请求头和新的Access-control-allow-origin响应头来扩展http，一些浏览器可使用这种新的头信息来容许跨域http请求，这样XMLHttpRequest就不会被同源策略所限制了。

另外一种新技术，叫作跨文档消息，容许来自一个文档的脚本能够传递文本消息到另外一个文档里的脚本，而无论脚本的来源是否不一样。调用Window对象上的postMessage方法，能够异步传递消息事件（能够用onmessage事件句处理程序函数来处理它）到窗口的文档里。一个文档里的脚本仍是不能调用在其余文档里的方法和读取属性，但她们能够用这种消息传递技术来实现安全的通讯。

跨站脚本XSS

攻击者像目标web站点注入html标签或者脚本

var name=decodeURLComponent(window.location.search.substring(1))||"";
document.write("hello"+name);

防止xss攻击的方式是，在使用任何不可信的数据来动态的建立文档内容以前，从中移除html标签

name=name.replace(/</g,"&lt;").reaplce(/>/,"&gt;");