客户端JavaScript

Window对象是所有客户端JavaScript特性和API的主要接入点。它表示Web浏览器的一个窗口或者窗体,并且可以用标识符window来引用它。

在客户端JavaScript中,Window对象也是全局对象,这意味着Window对象处于作用域链的顶部,它的属性和方法实际上是全局变量和全局函数。Window对象有一个引用自身的属性,叫做window。如果需要引用窗口对象本身,可以使用这个属性,但是如果只是想要引用全局窗口对象的属性,通常并不需要用到window。

Web文档里的JavaScript

内容、呈现和行为的组合,叫做动态HTML或者DHTML。

 Web应用里的JavaScript

JavaScript增强了Web文档,但是设计良好的文档需要在禁用JavaScript后还能继续工作,Web应用本质上就是JavaScript程序,后者使用由Web浏览器提供的操作系统类型的服务,并且不用期望它们在禁用浏览器脚本后还能正常工作。

  在HTML里嵌入JavaScript

4种方法

  • 内联,放置在<script>和</script>标签对之间。
  • 放置在由<script>标签的src属性指定的外部文件中。
  • 放置在HTML事件处理程序中,该事件处理程序有onclick或者onmouseover这样的HTML属性指定。
  • 放在一个URL里,这个URL使用特殊的“javascript:”协议。

 <script>元素

JavaScript代码可以以内联的形式出现在HTML文件里的<script>和</script>标签之间:

<script>

//你的JavaScript代码

</script>

在XHTML中,<script>标签中的内容被当作其他内容一样对待。如果JavaScript代码中包含了“<”或“&”字符,那么这些字符就被解释成XML标记。因此,如果要使用XHTML,最好把所有的JavaScript代码放到一个CDATA部分里:

<script><![CDATA[

//这是是你的JavaScript代码

]]></script>

外部文件中的脚本

<script>标签支持src属性,这个属性指定包含JavaScript代码的文件的URL。它的用法如下:

<script src=””></script>

具有src属性的<script>标签的行为就像指定的JavaScript文件的内容直接出现在标签<script>和</script>之间一样。注意,即便指定了src属性并且<script>和</script>之间没有JavaScript代码,结束</script>标签也是不能丢的。在XHTML中,在此处可以使用简短的<script/>标签。

使用src属性时,<script>和</script>标签之间的任何内容都会忽略。如果需要,可以在<script>标签之间添加代码的补充署名文档或版权信息。但是要注意,如果有任何非空格或JavaScript注释的文本出现在<script src=””>和</script>之间,HTML5校验器将会报错。

src属性方式的一些优点:

  • 可以把大块JavaScript代码从HTML文件中删除,这有助于保持内容和行为的分离,从而简化HTML文件。
  • 如果多个Web页面共用相同的JavaScript代码,用src属性可以让你只管理一份代码,而不用再代码改变时编辑每个HTML文件。
  • 如果一个JavaScript代码文件由多个页面共享,就只需要下载它一次,通过使用它的第一个页面——随后的页面剋从浏览器缓存质检索它。
  • 由于src属性的值剋是任意的URL因此来一个Web服务器的JavaScript程序或Web页面可以使用由另一个Web服务器输出的代码。很多互联网广告依赖与此。
  • 从其他网站载入脚本的能力,可以让我们更好的利用缓存。Google正在为通用的客户端类库推广标准且好标记的URL,可以让浏览器只缓存一分副本,并且网络上的任意站点都可以使用。

 脚本类型

JavaScript是Web的原始脚本语言,而在默认情况下,假定<script>元素包含或引用JavaScript代码。如果要使用不标准的脚本语言,如Microsoft的VBScript,就必须用type属性制定脚本的MIME类型。

<script type=”text/vbscript”>

‘这里是VBScript代码

</script>

language属性已经废弃,不应该再试用了。

 HTML中的事件处理程序

当脚本所在的HTML文件被载入浏览器时,这个脚本里的JavaScript代码只会执行一次。为了可交互,JavaScript程序必须定义事件处理程序——Web浏览器先注册JavaScript函数,并在之后调用它作为事件的响应。

HTML中定义的事件处理程序的属性可以包含任意条JavaScript语句,相互之前用逗号分隔。这些语句组成一个函数体

 URL中的JavaScript

在URL后面跟一个javascript:协议限定符,是另一种嵌入JavaScript代码到客户端的方式。这种特殊的协议类型指定URL内容为任意字符串,这个字符串是会被JavaScript解释器运行的JavaScript代码。它被当作单独的一行代码对待,这意味着语句之间必须用分毫隔开,而注释必须用/**/注释代替。

 JavaScript程序的执行

JavaScript程序的执行有力那个歌阶段。第一阶段,载入文档内容,并执行<script>元素的代码(包括内联脚本和外部脚本)。脚本通常会按照他们在文档里的出现顺序执行。所有脚本里的JavaScript代码都是从上往下,按照它在条件、循环以及其他控制语句中的出现顺序执行。

当文档载入完成,并且所有脚本执行完成后,JavaScript执行就进入踏的第二阶段。这个阶段是异步的,而且由事件驱动的。在事件驱动阶段,Web浏览器调用事件处理程序函数(由第一阶段里执行的脚本制定的HTML事件处理程序,或之前调用的事件处理程序来定义),来响应异步发生的事件。

 同步、异步和延迟的脚本

脚本的执行只在默认情况下是同步和阻塞的,<script>标签可以都defer和async属性,这(在支持他们的浏览器里),可以改变脚本的执行方式,这些都是布尔属性,没有值,只需要出现在<script>标签里即可。

defer和async属性都像在高速浏览器接进来的脚本不会使用的ocument.write(),也不会生成文档的内容,因此浏览器可以在下载脚本的时候继续解析和渲染文档。defer属性使得浏览器延迟脚本的执行,直到文档的载入和解析完成,并可以操作。async属性使得浏览器可以尽快的执行脚本,而不用再下载脚本时阻塞文档解析。如果<script>标签同时又两个属性,同时支持两个的浏览器会遵从async属性并忽略defer属性。

事件驱动的JavaScript

按照约定,事件处理程序的属性的名字是以“on”开始,后面跟着事件的名字。对于大部分浏览器中的大部分时间来说,会把一个对象传递给事件处理程序作为参数,那个对象的属性提供了事件的详细信息。

 客户端JavaScript线程模型

JavaScript语言核心并不包含任何线程机制,并且客户端JavaScript传统上也没有定义任何线程机制。HTML5定义了一种作为后台线程的“WebWorker”,但是客户端JavaScript还想严格的单线程一样工作。甚至当可能并发执行的时候,客户端JavaScript也不会知晓是否真的有并行逻辑的执行。

客户端JavaScript时间线

  • Web浏览器创建Document对象,并且开始解析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对象上触发DOMContentLoader事件。这标志着程序执行从同步脚本执行阶段转换到了异步事件驱动阶段。但要注意,这时可能还有异步脚本没有执行完成。
  • 这时,文档已经完全解析完成,但是浏览器可能还在等待其他内容输入。当所有内容载入完成时,并且所有异步脚步完成载入和执行,document.readyState属性改为“complete”,Web浏览器触发Window对象上的load事件。
  • 此刻起,会调用异步事件,以异步相应用户输入事件、网络事件、计时器过期等。

发表评论