您的位置：首页 > Web前端 > JavaScript

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

2017-08-24 20:09 274 查看

客户端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代码）应该尽量地保持分离。因此，最推荐的做法是第二种。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航