“从前，有一个……国王！” 我的小读者会马上说。不，孩子们，你错了。从前有一块木头……”
— 皮诺奇历险记
没有JavaScript，您可以做很多事情。 使用超文本标记语言（HTML-在本文全文中，我们将HTML和XHTML简称为HTML。您可以选择哪种方法取决于您，而与JavaScript无关）。 （我们将在本文中介绍的HTML代码将是有效的XHTML 1.0 Strict），您可以生成复杂的文档，这些文档以最少的细节详细描述页面的内容以及该内容的含义。 在本章中，来自新的Simply Javascript （您也可以将本文章和其他两篇文章一起以PDF格式下载），向您展示，通过使用层叠样式表（CSS），您可以采用多种方式呈现该内容，像单色一样细微的变化，就像用图像替换文本一样引人注目。
但是，无论您如何装扮，HTML和CSS都只能实现动画怪异，当附近有物体移动时，它会摇摇欲坠。 当您开始使用JavaScript时，您真的可以为Pinocchio注入生命，将您的创作者从卑鄙的店员提升为精通网页设计！
但是，无论您的新作品具有跑道模型的优美步伐，还是弗兰肯斯坦博士的怪物步履蹒跚的步态，都取决于其HTML和CSS起源的质量，以及它使之栩栩如生的JavaScript代码。
之前我们学会创造奇迹，因此，我们需要一点时间来检讨如何建立网站是很好看的内部和外部，并了解JavaScript的装配到的图片。
保持分隔
不久之前，专业的Web设计人员会很乐意将HTML，CSS和JavaScript代码堆积到一个文件中，将其命名为index.html （如果被Microsoft洗脑，则将其命名为default.htm ），然后将其称为网页。 我将其概念化为类似于图1的内容。您仍然可以在今天进行此操作，但请准备好让您的同行称其为不太礼貌。
在此过程中的某个地方，Web设计人员意识到他们将Web页面放在一起时编写的代码具有三项基本功能：
- 它描述了页面的内容 。
- 它指定内容的呈现 。
- 它控制该内容的行为 。
他们还意识到，将这三种类型的代码分开，如图2“关注点分离”所示，使他们的工作更加轻松，并帮助他们使网页在不利条件下（例如，当用户禁用JavaScript时）更好地工作。在他们的浏览器中。
多年来，计算机极客已经知道了这一点，甚至给这个原理起了个怪异的名字： 关注点分离 。
现在，实现这一是一回事，但实际做起来是另一种-特别是如果你不是一个电脑怪胎。 我是计算机极客，我总是想做错事。
我会很高兴地编辑描述网页内容的HTML代码，突然间我发现自己在想如果文本稍有不同的灰色阴影（如果向左微移一点），文本看起来会多么好，如果有我那张令人眼花he乱的影印本，那是我在后台的上一个SitePoint办公室聚会上拍的。 我很容易分心，我想立即进行这些更改。 现在更容易了：打开一个单独的CSS文件来修改页面的样式表，还是只将那些样式属性输入到我已经在编辑的HTML代码中？
就像在工作功能中表现自己一样，将编写的代码类型彼此分开也需要纪律。 但是一旦您了解了收益，您也将能够召集保持直截了当和狭窄的意志力。
三层
在任何类型的编程中，使不同种类的代码尽可能分开是一个好主意。 它使在将来的项目中重用部分代码变得更加容易，减少了最终编写的重复代码的数量，并使得数月和数年后发现和修复问题变得更加容易。
当涉及到Web时，还有一个理由将您的代码分开：它使您能够满足人们访问网页的多种不同方式。
根据访问者的不同，大多数访问者可能会使用功能强大的桌面浏览器，并具有尖端的CSS和JavaScript支持，但是许多访问者可能会受到公司IT政策的强制，迫使他们使用较旧的浏览器或使用某些功能进行浏览（例如JavaScript）已禁用。
视力障碍的用户经常使用屏幕阅读器或屏幕放大镜软件进行浏览，对于这些用户而言，流畅的视觉设计可能更多的是障碍而不是帮助。
有些用户甚至不会访问您的网站，如果您愿意，他们更喜欢阅读RSS或类似格式的内容供稿。 当需要构建这些提要时，您将希望能够将HTML内容发送给这些用户而无需任何JavaScript或CSS垃圾。
容纳尽可能多的网站访问者的关键是从三个层次来思考Web，这三层方便地对应于我前面提到的三种代码。 在图3“ Web的三层”中说明了这些层。
建立网站时，我们会自下而上浏览以下各层：
- 我们首先以HTML格式生成内容 。 这是基础层，使用任何类型的浏览器的任何访问者都应能够查看该基础层。
- 完成此操作后，我们可以通过使用CSS添加一层演示信息来专注于使网站看起来更好。 现在，该网站对于能够显示CSS样式的用户来说看起来不错。
- 最后，我们可以使用JavaScript引入交互性和动态行为的附加层，这将使该站点更易于在配备JavaScript的浏览器中使用。
如果我们将HTML，CSS和JavaScript代码分开，则会发现在表示层和/或行为层无法操作的浏览环境中确保内容层保持可读性要容易得多。 Web设计的这种“从底部开始”方法在业界被称为渐进增强 。
让我们单独查看这些层中的每一层，以了解如何最好地保持这种代码分离。
内容HTML
阅读和理解网页内容所需的所有内容都属于该页面的HTML代码-仅此而已。 就这么简单。 当Web设计人员忘记了KISS原理（保持简单，愚蠢）并将非内容信息塞入HTML代码或将页面的某些内容移动到页面的CSS或JavaScript代码中时，就会遇到麻烦。
呈现在页面中的非内容信息的一个常见示例是表示性HTML ，HTML代码描述了内容在浏览器中显示时的外观 。 这可以包括老式的HTML标签，例如<b> ， <i> ， <u> ， <tt>和<font> ：
<p>Whatever you do, <a href="666.html"> <font color="red" >don't
click this link </font> </a>!</p>它可以采用内联CSS的形式，其中应用了style属性：
<p>Whatever you do, <a href="666.html" style="color: red;" >don't
click this link</a>!</p>它还可能包括许多意图良好的Web设计师的秘密耻辱：带有表示性类名称的CSS样式：
<p>Whatever you do, <a href="666.html" class="red" >don't click
this link</a>!</p>演讲班名称？ 如果最后一个示例对您来说还不错，那么您并不孤单，但这绝对是糟糕的魔咒。 如果您以后决定要这个链接是黄色的，你要么卡住更新这两个类的名称和适用于它，或者用一个名为“红色”类，实际上是风格黄色的尴尬生活在CSS样式。 这“马上把你的脸色发黄-呃，红了！
与其将演示文稿信息嵌入HTML代码中，不如将重点放在执行该操作的原因上 ，例如，您希望链接以其他颜色显示。 链接特别重要吗？ 考虑在标签周围加上描述您要强调的重点的标签：
<p>Whatever you do, < em ><a href="evil.html">don't click this
link</a></ em >!</p>链接是警告吗？ HTML没有标记来描述警告，但是您可以选择一个CSS类名称来传达此信息：
<p>Whatever you do, <a href="evil.html" class="warning" >don't
click this link</a>!</p>当然，您可以将这种方法放得太远。 一些设计师将<h1>之类的标签误认为是表示性的，并试图从其HTML中删除此表示性代码：
<p class="heading">A heading with an identity crisis</p>确实，应从文档中排除的显示信息是要显示标题的字体，大小和颜色。 一段文字是标题这一事实是内容的一部分，因此应反映在HTML代码中。 所以这段代码非常好：
<h1>A heading at peace with itself</h1>简而言之，您的HTML应该尽其所能传达页面中内容的含义或语义 ，同时避免描述其外观。 Web标准怪胎将调用执行此语义标记的 HTML代码。
编写语义标记允许您的HTML文件作为有意义的文档独立存在。 不论出于何种原因而无法通过在典型的桌面Web浏览器中查看这些文档的人，都将能够以这种方式更好地理解它们。 例如，有视力障碍的用户将能够使用屏幕阅读器之类的辅助软件来朗读页面时聆听该页面，并且您的HTML代码越清晰地描述了内容的含义，类似的感知工具就能够使它们变得更有意义。它的。
最重要的是，语义标记使您可以应用新样式（表示形式）和交互式功能（行为），而不必对HTML代码进行很多（或在某些情况下，任何更改！）更改。
用于演示的CSS
显然，如果页面的内容应完全包含在其HTML代码中，则应在应用于该页面的CSS代码中完整描述其样式（或表示形式）。
在您所做的所有工作中，为了使HTML不受表示性代码的影响，并保留了丰富的语义，将CSS片段填充到该文件中弄乱了该文件是可耻的。
您可能知道，CSS样式可以通过三种方式应用于您的页面：
内联样式：
<a href="evil.html" style="color: red;" >
内联样式之所以具有诱惑力，是因为我前面已经解释了以下原因：您可以在创建内容时将样式应用于内容，而无需切换齿轮和编辑单独的样式表。 但是，正如我们在上一节中看到的那样，如果要使HTML代码对那些看不见样式的人有意义，则要避免使用瘟疫之类的内联样式。
嵌入式样式：
<style type="text/css">
.warning {
color: red;
}
</style>
⋮
<a href="evil.html" class="warning" >
嵌入式样式可以使您的标记保持整洁，但可以将样式绑定到单个文档。 在大多数情况下，您将希望在网站上的多个页面上共享样式，因此最好也避免这种方法。
外部风格：
<link rel="stylesheet" href="styles.css" />
⋮
<a href="evil.html" class="warning" >
Example 1.1. styles.css
.warning {
color: red;
}
External styles are really the way to go, because they let you share your styles between multiple documents, they reduce the amount of code browsers need to download, and they also let you modify the look of your site without having to get your hands dirty editing HTML.But you knew all that, right? We're dealing with a JavaScript book, after all, so let's talk about the JavaScript that goes into your pages.
JavaScript for Behavior
As with CSS, you can add JavaScript to your web pages in a number of ways.
You can embed JavaScript code directly in your HTML content:
<a href="evil.html" onclick="JavaScript code here" >
您可以在HTML文档顶部的<script>标签中包含JavaScript代码：
<script type="text/javascript"><!--//--><![CDATA[//><!--
JavaScript code here
//--><!]]></script>
⋮
<a href="evil.html" class="warning">
CDATA？ 如果您想知道所有在gobbledygook之后是<script>标记之后还是</script>标记之前的东西，那就是将JavaScript合法地嵌入XHTML文档中而又不会混淆不了解XHTML的Web浏览器（例如Internet）所需要的资源管理器）。
如果使用HTML而不是XHTML编写页面，则可以使用以下简单得多的语法：
<script type="text/javascript">
JavaScript code here
</script>
您可以将JavaScript代码放在一个单独的文件中，然后根据需要从多个HTML文档中链接到该文件：
<script type="text/javascript" src="script.js"></script>
⋮
<a href="evil.html" class="warning" >
Example 1.2. script.js (excerpt)
JavaScript code here
猜猜应该使用哪种方法。
编写可增强可用性而又不会弄乱所应用的HTML文档，不会锁定浏览器中禁用了JavaScript的用户，并且不会干扰可能应用于同一页面的其他 JavaScript代码的JavaScript，这被称为不引人注目的脚本 。
不幸的是，尽管许多专业的Web开发人员已经意识到将CSS代码保存在单独文件中的好处，但是仍然有很多JavaScript代码混入HTML中。 通过向您展示使用JavaScript的正确方法，我们希望能帮助您解决这一问题。
正确的方式
那么，所有这些东西到底有多重要？ 毕竟，人们多年来一直在用HTML，CSS和JavaScript混合在一起来构建网站，对于大多数浏览Web的人来说，这些网站已经奏效。
好吧，当您开始学习JavaScript时，将其正确地比以往任何时候都重要地重要。 到目前为止，JavaScript是您用来设计网站的三种语言中功能最强大的，因此，它为您提供了前所未有的自由来完全弄乱事物。
例如，如果您确实非常喜欢JavaScript，则可以将所有内容（内容，表示形式和行为）放入JavaScript代码。 实际上，我已经看到了这一点，而且效果并不理想-尤其是当禁用JavaScript的浏览器出现时。
更能说明问题的是，JavaScript是这三种语言中唯一能够挂起浏览器的功能，从而使它对用户无响应。
因此，我们将竭尽全力向您展示使用JavaScript的正确方法，不仅因为它可使您的代码保持整洁，还因为它有助于使Web保持其预期的工作方式-通过使尽可能多的人可以访问内容无论他们选择使用哪种Web浏览器，都应尽可能。
JavaScript库
正如我提到的，将不同类型的代码分开的好处之一是，它可以更轻松地将您为一个站点编写的代码用于另一个站点。 某些JavaScript狂人（此后称为“人”）已经花了一些时间来组装大量有用的，无干扰的JavaScript代码库 ，您可以在自己的网站上免费下载和使用这些代码。
在整个Simply Javascript中 ，我们从头开始构建每个示例-您可以在此处找到所需的所有JavaScript代码。 但是，由于在现实世界中并非总是有时间这样做，而且由于库正迅速成为JavaScript领域的重要组成部分，因此我们还将研究在机会出现时流行的JavaScript库如何做事。
这是我们在书中使用的库：
并非所有图书馆都是一样的创建当心的网站要提防JavaScript代码段供您复制和粘贴到网页中，以达到特定效果。 那里有很多免费的代码，但是并不是所有的代码都是好的。 通常，好的库以JavaScript（ .js ）文件的形式出现，您可以将它们无障碍地链接到页面中，而不是将JavaScript直接粘贴到HTML代码中。 如果您不确定判断某个JavaScript库的优劣，请在SitePoint论坛中寻求建议，或者坚持使用我刚才提到的库-它们都是非常好的。
让我们开始吧！
足够的讲道—您已阅读本文以学习JavaScript，对吗？ 干净的HTML和CSS都很不错，但是现在该是进入Web第三层的时候了：行为。 摘自本文的那一部分之后的《 Simply Javascript 》各章对本主题进行了更深入的讨论，并且由于我们感到很慷慨，我们决定将它们投入您的奉献！ 因此，请不要忘记以PDF格式下载本章 ，以及第2章：使用JavaScript编程和第3章：文档访问。
在第二章中，您将学习到JavaScript是一种编程语言，因此您必须掌握计算机程序的工作方式（在某种程度上意味着要学会像计算机一样思考）才能最有效地使用它。 本章介绍的简单概念（语句，变量，表达式，循环，函数和对象）是您将要编写的每个JavaScript程序的构造块。
第三章呢？ 尽管某些人喜欢为自己编写JavaScript代码，但您不希望在晚上进入黑暗的小巷。 作为一个经过良好调整的Web开发人员，您可能希望使用JavaScript通过文档对象模型（DOM）来更改网页的内容。 幸运的是，我们写了一整章向您展示如何！
然后，当然还有更多……
准备好开始使用一些很酷（且不引人注目的）的JavaScript！
994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
