客户端 JavaScript 概述


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

Window 对象定义了一些属性,比如,指代 Location 对象的 location 属性,Location 对象指定当前显示在窗口地址栏中的 URL,并允许脚本往地址栏载入新的 URL:

// 设置 location 属性,从而跳转到新的 Web 页面
window.location = "http://laravelacademy.org";

Window 对象还定义了一些方法,比如 alert(),可以弹出一个对话框来显示一些信息,还有 setTimeout(),用于注册一个函数在指定时间后触发回调:

// 2 秒后弹窗
setTimeout(function () {
    alert("Hello JavaScript!");
}, 2000);

在客户端中,Window 对象也是全局对象,这意味着 Window 对象出于作用域链的顶部,它的属性和方法实际上是全局变量和函数,所以在引用其方法或属性时,可以省略 window 前缀。

Window 对象还定义了很多其他主要的属性、方法和构造函数,我们会在下一章用一整章篇幅来详细介绍。

Window 对象中一个最重要的属性是 document,它引用 Docuemnt 对象,表示现在在窗口中的文档。Document 对象有一些重要方法,如 getElementById(),用于通过 id 属性值返回对应文档元素:

var timestamp = document.getElementById("timestamp");

getElementById() 返回的是一个 Element 对象,我们可以在其基础上对文档元素的内容、属性进行设置。

Window、Document、Element 对象上另一个重要的属性集合是事件处理程序相关的属性,这些程序会在某个事件发生时以异步方式调用绑定函数,对应的属性名以单词「on」开头:

timestamp.onclick = function() { this.innerHTML = new Date().toString(); }

Window 对象的 onload 处理程序是最重要的事件处理程序之一,当显示在窗口中的文档内容装载完成并可以操作时会触发它,因此,JavaScript 代码通常封装在 onload 事件处理程序里。

Web 文档里的 JavaScript

JavaScript 程序可以通过 Document 对象和它包含的 Element 对象遍历和管理文档内容,它可以通过操纵 CSS 样式和类,修改文档里内容的呈现,并且可以通过注册适当的事件处理程序来定义文档元素的行为。内容、呈现和行为的组合,叫做动态 HTML 或 DHTML。

Web 文档应少量使用 JavaScript,因为 JavaScript 真正的角色是增强用户的浏览体验,使信息的获取和传递更容易。

Web 应用里的 JavaScript

对于 Web 应用来说,除了内容、呈现和行为 API 之外,还依赖 Web 浏览器环境提供的更基础的服务。

要真正理解 Web 应用,需要先认识到 Web 浏览器现在已经不仅仅是显示 Web 文档的工具了,而是渐渐变成了一个简易的操作系统,我们可以把 Web 应用定义为用 JavaScript 访问更多浏览器提供的高级服务(网络、图像和数据存储)的 Web 页面,这些高级服务里最有名的就是 XMLHttpRequest 对象,Web 应用通过使用这个服务从服务器获取新信息,而不用重新载入页面,这样的应用通常叫做 Ajax 应用,Ajax 是构成 「Web 2.0」的脊梁。

HTML5 标准为 Web 应用定义了很多重要的 API,例如地理位置信息、历史管理和后台线程等。


点赞 取消点赞 收藏 取消收藏

<< 上一篇: 用 Node.js 实现异步 I/O

>> 下一篇: 在 HTML 中嵌入 JavaScript