51. 平稳退化对渐进增强
Posted 03/10/2009 - 23:13 by yuanc
51:功能衰减 VS 渐进增强
作者 Christian Heilmann · 2009年2月3日
引言
在本篇教程中，我们将讨论两种开发方法之间的差别：功能衰减和渐进增强。下面是其简单定义：
- 功能衰减
- 作为一种确保某种产品的可用性的安全措施，功能衰减可以为你的功能提供一种替换版本，或让用户意识到该产品的缺点。
- 渐进增强
- 渐进增强是从一个功能可用的基本版本出发，然后逐步增加用户体验的丰富程度，并在应用增强功能之前先测试对该功能的支持性。
你可能会觉得这两种方法听起来非常相似，而且它们的效果也应该是几乎一样的，但这两种方法之间的确有需要加以注意的差别，下面我们就会对这个问题进行讨论。
我们首先会说明为什么需要这两种技术。然后我们会关注一下更深层次的定义，本文还展示了一些实际案例，再接下来是这两个概念之间的对比，以及讨论在什么时候该使用哪一种方法。我们先来说明为什么 Web 开发需要着两种开发方法。
本文结构如下：
“Mobilis in mobile”——迁入一个不断变化的环境中
就像“海底两万里”中的尼莫船长一样， Web 开发者们也发现他们自己处在一个不断变化的环境中，这个环境可能对我们想要实现的东西不太友好。
Web 在发明和定义之初，就是要能在任何显示设备中使用，而且可以使用任何语言，及在你想要的任何地方使用。终端用户只期望一件事，那就是他们所使用的浏览设备可以触及网络，并能理解用来传递信息的协议——http，https，ftp，等等。
这就意味着我们不能对我们的终端用户的设置和设备能力存有任何假设。我们还可以很肯定的是，作为开发者，我们对网络的理解跟我们想要触及的人群完全不一样。
你不能强制用户进行技术升级以获取互联网上的内容。个人用户和公司用户会倾向于待在一个确定的环境中，他们不会仅仅因为我们的希望就选择改变或升级。许多人只想使用网络，并不会去注意其背后的技术——他们所期望的只是获取我们所承诺提供的内容。让用户的系统保持在最新状态，这是操作系统和浏览器开发商的事情——作为 Web 开发者的我们对此没有任何发言权。
50. JavaScript 动画
Posted 03/10/2009 - 23:12 by yuanc
50: JavaScript 动画
作者 stuartlangridge · 2009年2月3日
引言
在本文中，我们将学习通过 JavaScript 创建动画效果——动画效果常常用来提高那些浏览器支持该功能的用户的体验。最常见的动画效果是可平滑伸缩面板、进度条、以及表单中的视觉反馈等。
看过卡通片或翻书动画的人都知道，动画其实是通过许多时间间隔很小的帧来实现的，这些帧连续播放使它看起来就像在动一样。动画是一种强大的技术，在吸引用户注意力这方面非常出色。但动画的缺点就是它总是会吸引人们的注意力，不管你想不想要它这么做。动画效果可以提高用户的 Web 应用程序使用体验，但就像辣椒一样：不要加太多哦。
本文目录如下：
一个简单的示例：黄色淡出技术
一种常见的动画应用就是黄色淡出技术：页面上被改动的区域的背景颜色会被设为黄色，然后会逐渐消褪，直到还回原来的背景。这是一个既美观又非干扰性的强调改动过的内容（比如显示了更多内容，或某些表单反馈信息）的方式，而不会干扰到用户正在进行的事情。点击此处查看黄色淡出技术实例。
黄色淡出技术背后的原理就是，将元素的背景颜色设置为黄色，然后通过一系列的步骤，将其逐渐变回为原来的颜色。因此如果原来的颜色是红色的话，背景颜色就会先设成黄色，然后是橙黄色，然后是橙色，然后是桔红色，然后成为红色。你所采用的步骤的数量决定了颜色变化的平滑度，而步骤之间的时间间隔决定了整个颜色变化的过程有多长。进行颜色变化时，我们可以利用一个很实用的CSS特性：颜色可以由三个一组的普通数字来定义，也可以用十六进制的字符串来定义。因此 #FF0000（红色）也可以写成 rgb(255,0,0)。经过五个步骤从 rgb(255,255,0) （黄色）改变成 rgb(255,0,0)（红色）的可以写成到 ：
49. 用 JavaScript 处理事件
Posted 03/10/2009 - 23:12 by yuanc
49: 用 JavaScript 处理事件
作者 robnyman · 2009年2月3日
引言
现在你应该能够得心应手地用 CSS 来进行样式化和页面布局了，而且也蹒跚地迈出了使用变量，函数，方法等的第一步。现在我们该开始运用这些知识来为我们的网站用户提供交互性和动态特性（比如说拖放与拖拽，动画，等等）了。用 JavaScript 来对事件进行控制，你就可以像 Frankenstein 博士一样，为你的作品添加活力了。
我们对 JavaScript 的乐趣已经谈的够多了——本文将会更注重实际一些，告诉你什么是事件，以及如何在网页中利用事件。本文目录如下：
48. 动态样式 —— 用 JavaScript 操作 CSS
Posted 03/10/2009 - 23:12 by yuanc
作者 Greg Schechter2009年2月3日
引言
在本教程的 JavaScript 部分中，到目前为止我们已经学过了 JavaScript 的基础用法，研究了如何通过 DOM 来获取元素并如何在获取成功后对其进行操作。
本文我们会讨论如何通过 JavaScript 在运行时操作 CSS，从而动态地更新应用到我们的元素上的式样。本文所用的技术是我们已经看到过的，但在利用 CSS DOM 来进行操作的时候还需要注意几个特殊点。下面的章节将讲述这些内容：
访问样式表
浏览器提供了与样式表进行交互的接口——在 JavaScript 代码中可以通过 document.styleSheets. document.styleSheets 来访问页面上所应用的所有样式表列表，包括通过 link 元素引用的外部样式表，以及位于 style 元素之内的内部样式表。如果我们的 style 元素包含 id 属性，就可以通过 document.getElementById(element_id) 来快速地对其进行引用。
我们也可以给页面添加新样式表——可以通过 document.createElement 函数来创建新的 style 元素。这个函数会很有用，比如你想向网站用户提供一些选择，使他们可以动态改变你网站的风格，你可以用一些按钮控件来实现这个效果。下面就是关于你该如何创建一个新样式表的一个例子：
var sheet = document.createElement('style')
sheet.innerHTML = "div {border: 2px solid black; background-color: blue;}";
document.body.appendChild(sheet);
删除样式表的操作也很简单。首先你必须要通过 document.getElementById 获取自己要删除的样式表，具体代码如下面的简例所示。你可以使用 DOM 函数 parent.removeChild(element) 来删除某个样式表，此处的 element 就是你想要删除的样式表对象，而 parent 就是该样式表的父节点。如下面的例子所示，要删除该样式表(sheetToBeRemoved) ，你首先要获取该样式表的父元素—— var sheetParent = sheetToBeRemoved.parentNode ——然后调用 removeChild ，参数为 sheetToBeRemoved —— sheetParent.removeChild(sheetToBeRemoved)。
47. HTML 的创建和修改
Posted 03/10/2009 - 23:11 by yuanc
47: HTML的创建和修改
作者 stuartlangridge · 2009年2月3日
引言
在本文中我将会阐述一些基础知识，告诉你如何利用 JavaScript 来对我们的页面进行操作，这些操作包括显示或隐藏页面上部分内容，以及添加新的 HTML 元素或对其进行删除。学完本文之后你就会明白 JavaScript 的最基本的功能就是改动页面内容，此外你还会学到进行页面内容改动的最好的方法。.
本文目录如下：
隐藏与显示
我们先从最容易的 JavaScript HTML 操作入手：隐藏或显示页面上已有的元素。为了实现这个目的，你可以用 JavaScript 来改变某个元素的样式。CSS 样式本身就是一种描述元素外观的有效方式，而元素外观的一个重要特性就是是否被显示。CSS 的 display 属性就是元素的显示和隐藏的关键所在：将其设为 display:none 就可以将一个元素隐藏起来。试想一下如下的一个段落：
<p id="mypara" style="display: none">I am a paragraph</p>该段落在页面上将会是不可见的。 JavaScript 允许我们动态地将 display: none 样式添加到某个元素上以隐藏此元素。
46. DOM 之旅
Posted 03/10/2009 - 23:11 by yuanc
46: DOM 之旅
作者 Mike West · 2009年2月3日
引言
在网上很难找得到不与 HTML 有任何形式的交互的实用 JavaScript 代码示例。一般而言，我们的代码需要从页面上读取数据，以某种方式处理这些数据，然后以可见的页面变化或通知信息的形式生成输出结果。为了给页面和应用程序创建反应灵敏的界面，本文和下一篇文章引入了文档对象模型( Document Object Model)，该模型提供了对我们所创建的语义性和表象性层进行检查与操作的机制。
学完本文后，你就能对什么是 DOM 有深刻的理解，本文还会教你如何用 DOM 来遍历 HTML 页面，以定位要获取数据或进行改动的位置。本系列教程的下一篇文章（创建和修改 HTML ）着重讲述我们该如何操作页面上的数据，修改数值或创建全新的元素和属性。
本文结构如下：
播种
正如你可能会根据文档对象模型这个名字推断出来的那样， DOM 是一种在加载 Web 页面时由浏览器创建的 HTML 文档模型。 JavaScript 可以访问这个模型中的所有信息。现在我们稍稍回顾一下，想想我们到底对什么建模。
45. JavaScript 中的对象
Posted 03/10/2009 - 23:10 by yuanc
45: JavaScript 中的对象
作者 Mike West · 2009年2月3日
引言
前面的函数一文引入了函数的概念，向我们讲授了如何将单个的程序任务划分成逻辑块，这样就可以在任何地方调用这些逻辑块，从而更好地组织和重复使用我们的代码。既然我们已经熟悉了这些 JavaScript 程序设计的基础知识，下面我们就可以更进一步，本文中我们会引入对象的概念。通过对象，你可以将自己定义为函数的相关功能集聚拢在一起，并将它们打成一个包，你可以把这个包像一个整体一样传送和引用。这种能力对于你所编写的代码来说有着非常实际的意义，尽管现在听起来有点抽象。
你可能还没有注意到，但在本系列的整个教程中你已经不知不觉地接触过对象了；在这里，我会更明白地告诉你在 JavaScript 中对象是如何工作的，还会教你如何利用对象来提高你的代码的可读性和可复用性。
本文结构如下：
注：你可以在此处下载一个示例，也可以实际运行它，该示例包括了用于计算一个三角形的面积的代码，既有使用了对象的版本，也有不使用对象的版本。在下面的文章中我们会逐步创建该程序。点击此处运行该三角形对象示例。
为什么要用对象？
关注对象的一个最重要的原因就是，它们能够改善你的代码对你所要实现的数据和处理过程的表达。作为一个简单的例子，我们来设想一下你该怎样编写代码以对一个三角形进行一些处理。我们知道三角形一般有三条边，因此为了对某个特定的三角形进行处理，显然需要创建三个变量：
