Web浏览器中的JavaScript---客户端JavaScript

来源：互联网发布：英特尔人工智能大会编辑：程序博客网时间：2024/05/17 07:49

客户端JavaScript

在Web浏览器中，一些呈现静态信息的页面叫做文档。相对于文档来说，其他Web页面则可以成为Web应用。这些页面可以动态载入新的信息，因此看起来更加图形化；并且他们能进行离线操作，以及保存数据库到本地。还有一些Web页面处于文档和应用之间，他们结合了两者的特性。这就是在Web浏览器中如何呈现Web页面的。

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

Window对象定义了一些属性，如：指代Location对象的location属性，引用Document对象的document属性，弹出对话框的alert()方法，以及setTimeout()方法。

一个例子：显示内容的简单程序

<!DOCTYPE html><html><head><title>reveal</title><style>/*本页的css样式表*//*class="reveal"的元素的子元素都不显示*/.reveal * {display: none;}/*除了class="handle"的元素*/.reveal *.handle {display: block;}</style><script>// 所有的页面逻辑都在onload事件之后启动window.onload = function() {    // 找到所有class名为reveal的容器元素    var elements = document.getElementsByClassName("reveal");    // 对每个元素进行遍历    for (var i = 0; i < elements.length; i++) {        var elt = elements[i];        // 找到容器中的handle元素        var title = elt.getElementsByClassName("handle")[0];        // 当单击这个元素时，呈现剩下的内容        title.onclick = function() {            if (elt.className == "reveal") {                elt.className = "revealed";            } else if (elt.className == "revealed") {                elt.className = "reveal";            }        }    }}</script></head><body><div class="reveal"><h1 class="handle">Click here to reveal hidden text</h1><p>This paragraph is hidden. It appears when you click on the title.</p></div></body></html>

Web文档里的JavaScript

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

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

Web应用里的JavaScript

在Web文档里使用的JavaScript DHTML特性在Web应用中都会用到，对于Web应用来说，除了内容、呈现和操作API之外，还依赖了Web浏览器环境提供的更基础的服务。

可以把Web浏览器理解为一个简单的操作系统，这样就可以把Web应用定义为用JavaScript访问更多浏览器提供的高级服务（比如网络、图像和数据存储）的Web页面。

高级服务里最有名的是XMLHttpRequest对象，它可以对HTTP请求编程来启用网络。Web应用使用这个服务从服务器端获取新信息，而不用重新载入页面。类似这样的Web应用通常叫做Ajax应用。

在HTML里嵌入JavaScript

在HTML文档里嵌入客户端JavaScript代码有四种方法：

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

目前有个主张叫“unobtrusive JavaScript”，主张内容（HTML）和行为（JavaScript代码）应该尽量地保持分离。因此，最推荐的做法是第二种。

阅读全文

0 0