英语原文共 32 页，剩余内容已隐藏，支付完成后下载完整资料

---

HTML和JavaScript

在本章中，你将亲自体验真正的JavaScript代码。你将了解JavaScript如何与HTML中定义的页面结构交互，以及如何接收数据并将信息反馈给访问者。我首先解释HTML文档是什么以及它是如何构成的，然后我解释了几种通过JavaScript创建页面内容的方法。你将听到关于JavaScript开发者的Swiss Army knife——文档对象模型（DOM）和如何将独立的JavaScript和HTML创建出无缝的效果，用于创建一个突兀的方式与DHTML开发。

一个HTML文档的分析

用户代理中显示的文档通常是HTML文档。即使你使用一个服务器端的语言，像ASP.NET、PHP、ColdFusion、或Perl，如果你想使用的浏览器，以充分发挥其潜力那么结果都是HTML。像Firefox或Safari这样的现代浏览器也支持XML、SVG和其他格式，但对于你日常工作的99%，你将使用HTML路由。

一个HTML文件是一个文本文件开始于一个DOCTYPE，告诉用户代理文件是什么，应如何处理。HTML已经随着时间的演变，以及当前的DOCTYPE告诉浏览器正在传递页面应该被渲染为HTML5标准模式。文档中的下一个元素是HTML标记。此元素包含构成文档的所有其他元素。文档中的所有元素都有可选的。lang属性定义页面使用的语言（认为人类可读的语言，而不是计算机语言）-在下面的例子中，“EN”代表英语。在HTML元素的头和标题元素。与头部和标题相同级别的可选元素是META元素。里面的元字符集属性描述的字符编码方式，或文本应显示在屏幕上。这可以在服务器上设置，但是由于大多数人没有访问Web服务器，它可以被定义在这里。与头部元素在同一水平，但在关闭lt;头gt;标签后，主体是包含所有页面内容的元素。

lt;!doctype htmlgt;

lt;html lang='en'gt;

lt;headgt;

lt;meta charset='UTF-8'gt;

lt;titlegt;Our HTML Pagelt;/titlegt;

lt;/headgt;

lt;bodygt;

lt;/bodygt;

lt;/htmlgt;

像这样的标记文档由标签（包含在标签括号中的单词或字母，如lt;pgt;）和文本内容组成。文档应该是良好格式的（意思是，每一个打开的标签如lt;pgt;都必须与一个类似的结束标签lt;/pgt;匹配）。

HTML元素是括号中的所有内容，具有一个起始标记，类似于lt;h1gt;后面的内容，以及一个同名的关闭标签，如lt;/h1gt;。每个元素可以在打开和关闭标签之间有内容。每个元素可能有几个属性。下面的示例是一个具有名称为类的属性的p元素。属性有值介绍。P包含文本乱数假文。

lt;p class=“intro”gt;乱数假文lt;/P gt;

浏览器检查它遇到的元素，并且知道P是一个段落，类属性对于这个元素是有效的。它还实现了类属性应该检查链接层叠样式表（CSS）样式表，得到该类的p的定义，并相应地呈现。

有几个原因，为什么你应该争取标准的遵守，即使在HTML通过JavaScript生成：

bull; 当你知道HTML是有效的，它更容易跟踪错误。

bull; 更容易维护，坚持规则文件，因为你可以使用验证器来测量其质量。

bull; 当你针对某个约定的标准进行开发时，用户代理会更容易呈现或转换你的页面。

bull; 最后的文件可以很容易地转换成其他格式，如果它们是有效的HTML。

现在，如果你在HTML中添加一些元素并在浏览器中打开，你会得到渲染输出，如图4-1所示：

lt;!doctype htmlgt;

lt;html lang='en'gt;

lt;headgt;

lt;meta charset='utf-8'gt;

lt;titlegt;DOM Examplelt;/titlegt;

lt;/headgt;

lt;bodygt;

lt;h1gt;Headinglt;/h1gt;

lt;pgt;Paragraphlt;/pgt;

lt;h2gt;Subheadinglt;/h2gt;

lt;ul id='eventsList'gt;

lt;ligt;List 1lt;/ligt;

lt;ligt;List 2lt;/ligt;

lt;ligt;lt;a href='http://www.google.com'gt;Linked List Itemlt;/agt;lt;/ligt;

lt;ligt;List 4lt;/ligt;

lt;/ulgt;

lt;pgt;Paragraphlt;/pgt;

lt;pgt;Paragraphlt;/pgt;

lt;/bodygt;

lt;/htmlgt;

图4-1 浏览器渲染的HTML文档

关于XHTML的快速词汇

浏览器使用DOCTYPE来决定如何渲染文件。HTML（XHTML 4.01以前的版本）有一个较长的DOCTYPE。它描述的事情之一是它是否应该呈现在怪异模式或 标准模式。顾名思义，怪异模式的建立是为了适应HTML在早期浏览器中呈现的方式，以保持向后兼容性，基本上保持所有的怪异，使页面将显示正确。标准模式保持严格遵守万维网联盟（W3C）制定的标准。

用户代理“看到”文档有点不同。DOM将文档建模为一组节点，包括元素节点、文本节点和属性节点。这两个元素和它们的文本内容是单独的节点。属性节点是元素的属性。DOM包括标记文档的其他部分的其他节点，但如果您保持JavaScript和HTML的帽子，那么这三个元素节点、文本节点和属性节点都是重要的节点。如果你想通过浏览器的眼睛看到文档，右键单击（控制在Mac上点击），选择检查元素。这将打开浏览器的下半部分显示文档树结构，它可以访问内置的调试工具，如图4-2所描绘的。

提示 你可以在Chrome、Safari、Opera和Internet Explorer中访问类似的工具。你不仅可以看到文档是如何表示的，还可以编辑代码并在浏览器中直接查看结果。在附录中，我将介绍验证和调试。

笔记 注意所有的#文本节点之间的元素？这不是我添加到文档中的文本，而是在每行结束时添加的换行符。一些浏览器看到这些文本节点，而其他人却不——这可能是非常恼人的，当你试图在稍后的文件中通过JavaScript访问元素。

图4-2 在Mozilla DOM检查器中说明的文档的DOM表示形式

图4-3所示的另一种方式，你可以形成文档树的思维图像。

图4-3 HTML文档的结构

这是非常重要的，识别HTML是什么：HTML是结构化的内容，而不是一个视觉结构，如同图像放置在不同的坐标元素。当你有一个适当的，有效的HTML文档，天空是限制，你可以通过JavaScript访问和改变它。一个无效的HTML文档可能会绊倒你的脚本，不管你做了多少测试。一个典型的错误是在同一文档中使用同一id属性值两次，这就否定了具有唯一标识符（ID）的目的。

通过JavaScript提供网页反馈：老派方法

你看过这样的文件。write() -写出来的内容反馈在HTML文档的用户。我们还讨论了这个方法的问题，即混合的结构和表现层，并失去维护的好处，保持所有的JavaScript代码在一个单独的文件。

使用窗口方法：prompt()，alert()，和confirm()

一种不同的方式给予反馈和获取用户—输入的数据使用浏览器通过窗口对象提供给你的方法——prompt()，alert()，和confirm()。

最常用的方法是alert()，其中的一个例子出现在图4-4。它的作用是在对话框中显示一个值（如果用户的硬件支持的话，可能播放一个声音）。用户必须单击“确定”或按“Enter键”来删除消息。

图4-4 JavaScript警报（Mac操作系统上的Firefox）

警报看起来不同于浏览器到浏览器，从操作系统到操作系统。

警报看起作为一个用户反馈机制，alert()已被大多数用户代理支持这一优点，但它也能让你从别的网页上你的Windows模态相互作用。警报通常是坏消息，或警告危险的人，这不一定是你的意图。来不同于浏览器到浏览器，从操作系统到操作系统。

假设您希望在提交表单之前告诉访问者在搜索字段中输入某些内容。你可以使用警报：

lt;!doctype htmlgt;

lt;html lang='en'gt;

lt;headgt;

lt;meta charset='utf-8'gt;

lt;titlegt;Search examplelt;/titlegt;

lt;script type='text/javascript'gt;

function checkSearch(){

if(!document.getElementById('search')){return;}

var searchValue=document.getElementById('search').value;

if(searchValue==){

alert('Please enter a search term');

return false;}

else{

return true;}}

lt;/scriptgt;

lt;/headgt;

lt;bodygt;

lt;form action='sitesearch.php' method='post' onsubmit='return checkSearch();'gt;

lt;pgt;

lt;label for='search'gt;Search the site:lt;/labelgt;

lt;input type='text' id='search' name='search' /gt;

lt;input type='submit' value='Search' /gt;

lt;/pgt;

lt;/formgt;

lt;/bodygt;

lt;/htmlgt;

如果访问者试图通过提交按钮提交表单，他将得到警报，浏览器在激活OK按钮后不会将表单发送到服务器。Chrome在Mac OS看起来像你看到的图4-5。

警告不返回脚本的任何信息，只需给用户一个消息，并停止任何进一步的代码执行，直到OK按钮被激活。

这是prompt()和confirm()不同。前者允许访问者输入东西，而后者要求用户确认动作。

提示 为调试措施，alert()简直太方便。所有你要做的就是添加一个警报（变量名）在你的代码，你想知道变量值是什么时候。您将得到的信息，并停止其余的代码执行，直到OK按钮被激活，这是伟大的追溯到哪里，以及为何你的脚本失败。在循环中小心使用它，虽然没有办法停止循环，你可能不得不按回车一百次，然后再回到你的编辑。还有其他调试工具，如Opera和Safari的JavaScript控制台，以及Mozilla。我会在附录里更多的说这些。

图4-5 通过警报给予表单错误的反馈

您可以扩展前面的示例，如下面代码示例所示，请访问者确认对常用术语JavaScript的搜索（结果如图4-6所示）：

function checkSearch()

{

if(!document.getElementById('search'){return;}

var searchValue=document.getElementById('search').value;

if(searchValue==)

{

alert('Please enter a search term before sending the form');

return false;

}

else if(searchValue=='JavaScript')

{

var really=confirm('JavaScript' is a very common term. Do you really want to search for this?);

return really;}

else{

return true;}}

图4-6 要求用户确认通过confirm()的例子

注意，confirm()是一个方法，返回一个布尔值（true或false）取决于游客激活“确定”或“取消”。确认对话框是一个简单的方法来阻止

剩余内容已隐藏，支付完成后下载完整资料

---

资料编号：[139805]，资料为PDF文档或Word文档，PDF文档可免费转换为Word