《JavaScript入门经典（第6版）》——1.7　与用户交互-优快云博客

本文介绍了JavaScript编程中的基本交互方法，包括使用window.alert()显示消息和document.write()向页面输出内容。此外，还演示了如何通过JavaScript读取document对象的属性。

本节书摘来自异步社区《JavaScript入门经典（第6版）》一书中的第1章，第1.7节，作者：【美】 Phil Ballard 译者：李军陈冀康，更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.7　与用户交互

现在来介绍window和document对象的一些方法。首先介绍的这两个方法都能提供与用户交互的手段。

1.7.1　window.alert()

即使不知道window.alert()，我们实际上在很多场合已经看到过它了。window对象位于DOM层级的最顶端，代表了显示页面的浏览器窗口。当我们调用alert()方法时，浏览器会弹出一个对话框显示设置的信息，还有一个“确定”按钮。范例如下：

这是第一个使用句点表示法的范例，其中调用了window对象的alert()方法，所以按照object.metho

TIPd表示方法就写为window.alert。

提示：在实际编码过程中，可以不明确书写window.这部分。因为它是DOM层级结构的最顶层（有时也被称为“全局对象”），任何没有明确指明对象的方法调用都会被指向window，所以

alert("Here is my message");

也能实现同样功能。
请注意要显示的文本位于引号之中。引号可以是双引号，也可以是单引号，但必须有引号，否则会产生错误。

这行代码在浏览器执行时，产生的弹出对话框如图1.2所示。

screenshot

提示：图1.2显示的弹出对话框由运行在Ubuntu Linux下的Chrome浏览器产生。不同操作系统、不同浏览器、不同显示设置都会影响这个对话框的最终显示情况，但它总是会包含要显示的信息和一个“OK”按钮。

提示：在用户单击“OK”按钮之前，页面上是不能进行其他任何操作的。具有这种行为模式的对话框称为“模态”对话框。
1.7.2　document.write()
从这个方法名称就可以猜到它的功能。显然它不是弹出对话框，而是直接向HTML文档写入字符，如图1.3所示。

..16-0288图1-3.tif

图1.3　使用document.write()

说明：实际上，无论从功能来说，还是从编码风格与可维护性来说，document.write都是一种向页面输出内容的笨拙方式，它有很多的局限性。大多数正规的JavaScript程序员都不会使用这种方式，更好的方式是使用JavaScript和DOM。但在本书第一部分介绍JavaScript语言的基本知识时，我们还会使用这个方法。
实践

{JavaScript编写的“Hello World!” !} 在介绍一种编程语言时，如果不使用传统的“Hello World!”范例似乎说不过去。这个简单的HTML文档如程序清单1.1所示。

程序清单1.1　一个alert()对话框中的“Hello World!”

<!DOCTYPE html>
<html>
<head>
　　 <title>Hello from JavaScript!</title>
</head>
<body>
　　 <script>
　　　　alert("Hello World!");
　　 </script>
</body>
</html>

在文本编辑器里创建一个文档，命名为hello.html，输入上述代码，保存到计算机，然后在浏览器中打开它。

注意：有些文本编辑器会尝试给我们指定的文件名添加.txt后缀，因此在保存文件时要确保使用了.html后缀，否则浏览器可能不会正常打开它。
几乎全部操作系统都允许我们用鼠标右键单击HTML文件图标，从弹出菜单里选择“打开方式…”（或类似的字眼）。另外一种打开方式是先运行喜欢的浏览器，然后从菜单栏里选择“文件”>“打开”，找到相应的文件，加载到浏览器。

注意：有些浏览器的默认安全设置会在打开本地内容（比如本地计算机上的文件）时显示警告内容，如果看到这样的提示，只要选择允许继续操作即可。
这时会看到如图1.2所示的对话框，但其中的内容是“Hello World!”。如果计算机里安装了多个浏览器，可以尝试用它们都来打开这个文件，比较得到的结果。对话框外观可能有细微差别，但信息和“OK”按钮都是一样的。
1.7.3　读取document对象的属性
正如前文所述，DOM树包含着方法和属性。前面的范例展示了如何使用document对象的write方法向页面输出文本，现在我们来读取document对象的属性。以document.title属性为例，它包含了HTML页面的

标签中所定义的标题。

在文本编辑器里修改hello.html，修改对window.alert()方法的调用：

 alert(document.title);

注意到document.title并没有包含在引号里，这时如果使用引号，JavaScript会认为我们要输出文本“document.title”。在不使用引号的情况下，JavaScript会把document.title属性的值传递给alert()方法，得到的结果如图1.4所示。
screenshot