JavaScript 客户端JavaScript之 Web浏览器的环境

Web浏览器实现的Javascript，通过Web浏览器实现的JavaScript引入了大量可脚本化的对象（1、Web浏览器 2、HTML 3、HTML中的内容）

 Web浏览器中的Javascript

Web浏览器的环境

1、作为全局对象的Window对象和客户端JavaScript代码的全局执行环境

2、客户端对象的层次和构成它的一部分的文档对象模型（DOM）

3、事件驱动的编程模型

 

全局对象位于作用域链的头部

Window对象位于作用链的头部

Window对象代表显示文档的窗口（或帧）

Document对象代表HTML文档

 

客户端对象层次（BOM）和0级DOM

 

客户端对象层次

             self,window,
         --- parent,top各种
        |    Window对象
        |
        |--- navigator
        |    Navigator对象
        |
        |--- frames[]                          --- forms[]  --------elements[]
        |    Frames对象数组                 |    Form对象数组     HTML表单元素
        |                                          |                            objects:
当前- |--- location                          |--- anchors[]              Button
窗口- |    Location对象                     |    Anchor对象数组       Checkbox
        |                                          |                                 FileUpload
        |--- history                           |--- links[]                   Hidden
        |    History对象                      |    Link对象数组             Password
        |                                          |                                 Reset
        |----document  ------|---- images[]              Select  -------options[]
        |    Document对象                  |     Images对象数组       Submit          Option对象数组 
        |                                          |                                 Text
         --- screen                            |---- applets[]              Textarea 
             Screen对象                       |     applets对象数组
                                                   |
                                                    ---- embeds[]
                                                           嵌入对象数组

浏览器对象模型BOM
    以window为根节点的树叫做浏览器对象模型。

文档对象模型DOM以及0级DOM
    文档对象模型（Document Object Model,DOM）是表示文档和访问、操作构成文档的各种元素的应用程序接口（API）。
    在上面的BOM中以document为根节点的树叫做0级DOM。它是标准DOM(1级DOM、2级DOM)中已经定义了的一系列的HTML专有API，并得到了大多数浏览器的支持。
    
Window对象
    重要的window属性有：
        closed                        一个布尔值，只有当窗口被关闭时才为true。
        defaultStatus,status    在浏览器状态栏中显示的文本。
        document                   表在窗口中显示的html文档。
        frames[]                     代表窗口中的各个框架（如果存在）。
        navigator                    代表包含浏览器总体信息的navigator对象。
        history                       代表用户浏览窗口的历史。
        location                      代表在窗口中显示的文档的url。设置这个属性会引发浏览器装载一个新的文档。
        name                         窗口的名称。可被html标记的<a>的target性质使用。
        opener                       对打开当前窗口的window对象的引用。如果当前窗口被用户打开则它的值为null。
        parent                        如果当前窗口是框架，它就是对窗口中包含这个框架的引用。
        self                            自引用属性，是对当前window对象的引用，与window属性同义。
        top                            如果当前窗口是框架，它就是对包含这个框架的顶级窗口的window对象的引用。
        window                      自引用属性，是对当前window对象的引用，和self同义。
    重要的window方法有：
        alert（），confirm（），prompt（） 
                                         向用户显示简单的对话框，confirm（）和prompt（）用于获取用户的响应。
        close（）                    关闭窗口。
        focus（），blur（）      请求或放弃窗口的键盘焦点。focus（）方法还通过把窗口提到堆栈顺序的最前面，从而确保窗口可见。
        moveBy()，moveTo()   移动窗口。
        open（）                    打开新的顶级窗口，用指定的特性显示指定的url。

        print（）                    打印窗口或框架中内容，就像用户点击了窗口工具栏中的打印按钮一样（只有netscape4和其后的版本以及ie5和其后的版本支持

                                        该方法）。

        resizeBy(),resizeTo()   调整窗口大小。
        scrollBy(),scrollTo()     滚动窗口中的文档。
        setInterval(),clearInterval()
                                        设置或取消重复调用的函数，该函数在两次调用之间有指定的延迟。
        setTimeout(),clearTimeout()
                                        设置或者取消在指定的延迟后要调用一次的函数。 

 

 

 

在HTML中嵌入脚本

1、放置在标记对<script> </script>之间

2、放置在由<script>标记的src属性指定 的外部文件中

3、放在事件句柄中，该事件句柄由onclick等这样的属性值指定

4、在一个url之中，使用特殊的"javascript: "协议

 

注：尽管在装载和解析一个HTML文件的过程中，各个脚本在不同时刻执行，但是这些脚本却是同一个Javascript程序的组成部分，

因为在一个脚本中定义的函数和变量适用于随后出现的同一个文件中的所有脚本，

JavaScript代码可以和它所嵌入的文档交互，即使代码和文档具有不同的来源，当使用src指定载入一个脚本时，就给了这段脚本

的作者，完全控制web页面的权力

 

 <script> defer属性，可用来延迟加载脚本 

<noscript></noscript>标记，当浏览器Javascript功能被关闭时执行。

 

 

事件句柄和事件句柄函数

如：onclick  onchange等为事件句柄，事件句柄的属性值，为事件句柄函数（如果为普通语句，会自动生成匿名函数）

 

URL中的JavaScript

如：javascript:window.open("about:black");void 0;

放在HTML中元素的onclick等属性上，运行代码，并返回值（最后一个语句返回）。

 

JavaScript程序的执行

1、当一个文件有多个脚本文件(src)的时候，脚本按照它们出现的顺序来执行

2、script标记中JavaScript代码作为文档载入和解析过程的一部分来执行

 

 

客户端Javascript线程模型是单线程

 

当脚本载入和执行的时候，文档解析就停止下来，并且当事件句柄执行的时候，Web浏览器停止对用户输入的响应，以及UI线程的执行。

 

注：如果一个事件句柄进行计算密集的任务，浏览器可能变得无法响应，可能会导致用户认为浏览器崩溃了。

 

[!ECDATA[

 

]]>

 

功能测试 使用条件注释

@if @else @end

 

JavaScript 的安全性

1、JavaScript不能做什么

a、客户端的Javascript不提供任何方式来读取、写入和删除客户端计算机上的文件/目录

b、不提供通用的网络原语，无法为任何主机打开一个socked或接受一个来自其他主机的连接

 

注：HTML的FileUpload的value属性无法手动设置，只能让用户自己手动选择。

 

2、同源策略

同源策略是对JavaScript代码能够和哪些web内容交互的一条完整的完全限制。

一个脚本只能读取与包含这一脚本的文档具有相同来源的窗口和文档的属性。

 

当使用XmlHttpRequest对象脚本化HTTP时，同源策略也发挥作用（针对的web服务器载入包含文档的Web服务器）

 

文档的来源定义：协议 主机  端口

有一个不同，来源就不同。

 

可通过Document.domain来实现不受同源策略的约束，将两个文档的domain改成一样（如：example.com,域名格式必须至少为两级，不可设为顶级域名）

 

跨站脚本(XSS) 以及如何防止XSS攻击

 

其他的Web相关JavaScript嵌入

1、用户脚本，如Greasemonkey 

2、SVG

3、XUL

4、ActionScript