《JavaScript入门经典（第6版）》——1.7　与用户交互

本节书摘来自异步社区《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所示。

提示：图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所示。

《jQuery与JavaScript入门经典》——导读 实际上，在您阅读本书期间，互联网上将新增数百万个网页。这些网页大多是使用HTML 编写的，它们使用 CSS 设置元素的样式，并使用 JavaScript 实现用户和后端服务之间的交互。
《jQuery与JavaScript入门经典》——2.8 作业 本节书摘来自异步社区《jQuery与JavaScript入门经典》一书中的第2章，第2.8节，作者：【美】Brad Dayley著，更多章节内容可以访问云栖社区“异步社区”公众号查看
《jQuery与JavaScript入门经典》——2.7 问与答 就Cookie调试而言，您只需知道是否启用了Cookie、浏览器设置了哪些Cookie、这些Cookie的值是什么以及它们什么时候到期。这些信息都可在Firebug的Cookies选项卡中找到。Chrome和Internet Explorer在开发人员控制台中提供了类似的功能。
《jQuery与JavaScript入门经典》——2.6 小结 您还完成了多个调试HTML、CSS和JavaScript问题的示例。您在本章学到的调试方法对阅读本书以及开发项目很有帮助，因为这些方法有助于消除常见的简单语法错误，为您节省大量时间，避免令人沮丧的情况发生。
《jQuery与JavaScript入门经典》——2.5 分析网络流量 如果单击“网络”标签上的下拉箭头，将看到一个禁用浏览器缓存的选项。为调试并修复问题而更新了Web服务器上的文件时，这个选项很有用。选择该选项后，浏览器总是从Web浏览器获取最新的内容。
《jQuery与JavaScript入门经典》——2.4 调试jQuery和JavaScript 前面介绍了如何在JavaScript控制台中查找JavaScript和其他脚本的错误。如果脚本并未导致浏览器错误，只是运行方式不符合预期，该如何办呢？Firebug集成了一个优秀的调试器，可助一臂之力。
《jQuery与JavaScript入门经典》——2.3 调试CSS 如果JavaScript或jQuery脚本修改了DOM元素的CSS布局，查看Web浏览器中的代码不会有任何帮助，而需要查看浏览器应用于元素的CSS。为此，需要结合使用CSS检查器以及HTML检查器中的布局检查器和样式检查器。
《jQuery与JavaScript入门经典》——2.2 调试HTML元素 启用该选项后，树视图将切换到文本编辑器视图，让您能够直接在浏览器中编辑HTML代码。浏览器将根据您所做的修改调整渲染结果。虽然这不会修改项目中的代码，但使用这项功能尝试不同的修改要容易得多。将问题修复后，您可复制编辑器中的代码，再将其粘贴到项目文件中。
《jQuery与JavaScript入门经典》——第 2 章 调试jQuery和JavaScript网页 2.1JavaScript控制台 编写JavaScript和jQuery应用程序时，面临的一项重大挑战是找出并修复脚本中的问题。简单的语法错误和无效值可能令您万般沮丧，浪费您大量时间。有鉴于此，出现了一些卓越的工具，可帮助您快速而轻松地找出脚本中的问题。
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。