这是我所知道的最完整最简洁的JavaScript基础教程。这篇文章带你尽快走进JavaScript的世界——前提是你有一些编程经验的话。本文试图描述这门语言的最小子集。我给这个子集起名叫做“JavaScript简易教程”，并推荐准备深入阅读细节和高级技巧之前的新手阅读。心急吃不了热豆腐。文章的最后提出如何进一步学习。警告：下面是我所描述的规则集和最佳实践。我喜欢整洁清晰（例如，你可以随时通过下面的目录快速导航）。规则是无懈可击的，但不可避免——每个人的理解不同。##目录本文约定语言的性质语法变量和赋值值布尔数字字符串语句函数异常处理严格模式变量作用域和闭包对象和继承数组正则表达式数学标准库的其他功能下一步学什么？本文约定（Conventions used in this blog post）###命令行交互（Command line interaction）每当我介绍一个新概念，我都会尝试通过JavaScript命令行进行演示。像下面这样：> 3 + 4 7大于号后面的文本是用户输入内容。其他的都是JavaScript引擎的输出内容。此外，也可以使用console.log()来向控制台打印数据（这方法可以在大部分JavaScript引擎中工作，包括Node.js）.###查找文档（Finding documentation）有时你看到一些函数或方法有超链接，你应该清楚他们 ...继续阅读 (8)

“this”关键字是JavaScript中广泛应用的一种特性，但它经常也是这门语言中最容易混淆和误解的特性。“this”的实际意义是什么？它是如何求值的？本文试图以清晰的方式澄清和解释这问题的答案。有过其他编程经验的人对“this”关键字并不陌生，大部分时候当通过构造函数实例化一个类的实例时，它指新创建的对象。例如，如果我有一个类Boat()，其拥有一个moveBoat()方法，当在moveBoat方法中引用“this”的时候，我们实际上访问的基于Boat类新创建的对象。在JavaScript中，当通过“new”关键字调用构造函数时，我们也有this概念，然而，这并不是唯一的规则，并且“this”经常在不同的执行上下文中引用到不同的对象。如果你不熟悉JavaScript中的执行上下文，我建议你阅读我的另一篇文章。说的够多了，让我们看一些JavaScript的例子：// 全局作用域 foo = 'abc'; alert(foo); // abc this.foo = 'def'; alert(foo); // def每当你在全局作用域中使用“this”关键字时（没在函数内部），它通常指向全局对象（global object）。现在让我们看看函数内部“this”的值：var boat = { size: 'normal', boatInfo: function() ...继续阅读 (31)

你知道下面的JavaScript代码执行时会输出什么吗？var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar();答案是“10”，吃惊吗？那么下面的可能会真的让你大吃一惊：var a = 1; function b() { a = 10; return; function a() {} } b(); alert(a);这里浏览器会弹出“1”。怎么回事？这似乎看起来是奇怪，未知，让人混淆的，但这实际上是这门语言一个强大和富有表现力的特性。我不知道这一特性行为是否有标准名字，但我喜欢这个术语“提升（hoisting）”。本文试图揭示这一特性的机制，但首先让我们链接JavaScript的作用域。JavaScript中的作用域（scope）JavaScript初学者最容易混淆的地方是作用域。实际上，不只是初学者。我遇到过许多经验丰富的JavaScript程序员，却不完全明白作用域。JavaScript的作用域如此容易混淆的原因是它看起来很像C家族的语言（类C语言）。考虑下面的C程序：#includeint main() { int x = 1; printf("%d, ", x); // 1 if (1) ...继续阅读 (15)

“this”关键字是JavaScript中广泛应用的一种特性，但它经常也是这门语言中最容易混淆和误解的特性。“this”的实际意义是什么？它是如何求值的？本文试图以清晰的方式澄清和解释这问题的答案。有过其他编程经验的人对“this”关键字并不陌生，大部分时候当通过构造函数实例化一个类的实例时，它指新创建的对象。例如，如果我有一个类Boat()，其拥有一个moveBoat()方法，当在moveBoat方法中引用“this”的时候，我们实际上访问的基于Boat类新创建的对象。在JavaScript中，当通过“new”关键字调用构造函数时，我们也有this概念，然而，这并不是唯一的规则，并且“this”经常在不同的执行上下文中引用到不同的对象。如果你不熟悉JavaScript中的执行上下文，我建议你阅读我的另一篇文章。说的够多了，让我们看一些JavaScript的例子：// 全局作用域 foo = 'abc'; alert(foo); // abc this.foo = 'def'; alert(foo); // def每当你在全局作用域中使用“this”关键字时（没在函数内部），它通常指向全局对象（global object）。现在让我们看看函数内部“this”的值：var boat = { size: 'normal', boatInfo: function() ...继续阅读 (7)

你知道下面的JavaScript代码执行时会输出什么吗？var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar();答案是“10”，吃惊吗？那么下面的可能会真的让你大吃一惊：var a = 1; function b() { a = 10; return; function a() {} } b(); alert(a);这里浏览器会弹出“1”。怎么回事？这似乎看起来是奇怪，未知，让人混淆的，但这实际上是这门语言一个强大和富有表现力的特性。我不知道这一特性行为是否有标准名字，但我喜欢这个术语“提升（hoisting）”。本文试图揭示这一特性的机制，但首先让我们链接JavaScript的作用域。##JavaScript中的作用域（scope）JavaScript初学者最容易混淆的地方是作用域。实际上，不只是初学者。我遇到过许多经验丰富的JavaScript程序员，却不完全明白作用域。JavaScript的作用域如此容易混淆的原因是它看起来很像C家族的语言（类C语言）。考虑下面的C程序：#include <stdio.h> int main() { int x = 1; printf("%d, ", x ...继续阅读 (7)

在这篇文章里，我将深入研究JavaScript中最基本的部分——执行上下文（execution context）。读完本文后，你应该清楚了解解释器做了什么，为什么函数和变量能在声明前使用以及他们的值是如何决定的。什么是执行上下文？当JavaScript代码运行，执行环境非常重要，有下面几种不同的情况：全局代码——你的代码首次执行的默认环境。函数代码——每当进入一个函数内部。Eval代码——eval内部的文本被执行时。在网上你能读到许多关于作用域（scope）的资源，本文的目的是让事情变得更简单，让我们将术语执行上下文想象为当前被执行代码的环境/作用域。说的够多了，现在让我们看一个包含全局和函数上下文的代码例子。很简单的例子，我们有一个被紫色边框圈起来的全局上下文和三个分别被绿色，蓝色和橘色框起来的不同函数上下文。只有全局上下文（的变量）能被其他任何上下文访问。你可以有任意多个函数上下文，每次调用函数创建一个新的上下文，会创建一个私有作用域，函数内部声明的任何变量都不能在当前函数作用域外部直接访问。在上面的例子中，函数能访问当前上下文外面的变量声明，但在外部上下文不能访问内部的变量/函数声明。为什么会发生这种情况？代码到底是如何被解释的？执行上下文堆栈浏览器里的JavaScript解释器被实现为单线程。这意味着同一时间只能发生一件事情，其他的行文或事件将会被放在叫做执行栈里面排队。下 ...继续阅读 (17)

在这篇文章里，我将深入研究JavaScript中最基本的部分——执行上下文（execution context）。读完本文后，你应该清楚了解解释器做了什么，为什么函数和变量能在声明前使用以及他们的值是如何决定的。##什么是执行上下文？当JavaScript代码运行，执行环境非常重要，有下面几种不同的情况：全局代码——你的代码首次执行的默认环境。函数代码——每当进入一个函数内部。Eval代码——eval内部的文本被执行时。在网上你能读到许多关于作用域（scope）的资源，本文的目的是让事情变得更简单，让我们将术语执行上下文想象为当前被执行代码的环境/作用域。说的够多了，现在让我们看一个包含全局和函数上下文的代码例子。很简单的例子，我们有一个被紫色边框圈起来的全局上下文和三个分别被绿色，蓝色和橘色框起来的不同函数上下文。只有全局上下文（的变量）能被其他任何上下文访问。你可以有任意多个函数上下文，每次调用函数创建一个新的上下文，会创建一个私有作用域，函数内部声明的任何变量都不能在当前函数作用域外部直接访问。在上面的例子中，函数能访问当前上下文外面的变量声明，但在外部上下文不能访问内部的变量/函数声明。为什么会发生这种情况？代码到底是如何被解释的？##执行上下文堆栈浏览器里的JavaScript解释器被实现为单线程。这意味着同一时间只能发生一件事情，其他的行文或事件将会被放在叫做执行栈里面 ...继续阅读 (7)

在JavaScript中什么情况下使用==是正确的？简而言之：没有。这篇文章来看五种情况下总是使用===，并且解释为什么不用==。JavaScript有两种操作符用来比较两个值是否相等 [1]：严格相等 === 仅考虑相同类型的值是否相等。“正常”（或非严格）相等操作符 == 在比较之前，尝试为不同类型的值进行转换，然后类似严格相等。给JavaScript初学者的建议是完全忘掉 == ，并且总是使用 ===。事实证明，后者是更符合常规的。有五种案例，表面看起来可以不遵从规则，但真的不是这样。从现在开始，我使用下面的规则：意图清晰的代码胜过更简洁的代码。 记住：你的代码仅写一次，但被阅读很多次——尽可能保证对阅读者友好。例1：你清楚自己在比较什么例如，使用typeof操作符[2],你能确保结果是字符串。然后可以放心使用 ==，因为我们确定不会在发生类型转换。if (typeof x == "function") { ... }然而，有两个反对这样做的原因：一致性：使用==对一致性没有任何好处，那么为什么不避免使用呢？简单和性能：一般来说，=== 是最简单的操作符，因为它不进行类型转换。JavaScript引擎的性能参差不齐[3]，但在大部分浏览器中 === 比 == 速度更快。例2：与undefined和null做比较当使用 == 时，undefined和null在结 ...继续阅读 (40)

在JavaScript中什么情况下使用==是正确的？简而言之：没有。这篇文章来看五种情况下总是使用===，并且解释为什么不用==。JavaScript有两种操作符用来比较两个值是否相等 [1]：严格相等 === 仅考虑相同类型的值是否相等。“正常”（或非严格）相等操作符 == 在比较之前，尝试为不同类型的值进行转换，然后类似严格相等。给JavaScript初学者的建议是完全忘掉 == ，并且总是使用 ===。事实证明，后者是更符合常规的。有五种案例，表面看起来可以不遵从规则，但真的不是这样。从现在开始，我使用下面的规则：意图清晰的代码胜过更简洁的代码。 记住：你的代码仅写一次，但被阅读很多次——尽可能保证对阅读者友好。##例1：你清楚自己在比较什么例如，使用typeof操作符[2],你能确保结果是字符串。然后可以放心使用 ==，因为我们确定不会在发生类型转换。if (typeof x == "function") { ... }然而，有两个反对这样做的原因：一致性：使用==对一致性没有任何好处，那么为什么不避免使用呢？简单和性能：一般来说，=== 是最简单的操作符，因为它不进行类型转换。JavaScript引擎的性能参差不齐[3]，但在大部分浏览器中 === 比 == 速度更快。##例2：与undefined和null做比较当使用 == 时，undefined和nu ...继续阅读 (11)

如果你是一个JavaScript新手或仅仅最近才在你的开发工作中接触它，你可能感到沮丧。所有的语言都有自己的怪癖（quirks）——但从基于强类型的服务器端语言转移过来的开发人员可能会感到困惑。我就曾经这样，几年前，当我被推到了全职JavaScript开发者的时候，有很多事情我希望我一开始就知道。在这篇文章中，我将分享一些怪癖，希望我能分享给你一些曾经令我头痛不已的经验。这不是一个完整列表——仅仅是一部分——但希望它让你看清这门语言的强大之处，可能曾经被你认为是障碍的东西。我们将看下列技巧：相等点号vs括号函数上下文函数声明vs函数表达式命名vs匿名函数立即执行函数表达式typeof vs Object.prototype.toString1.) 相等C#出身的我非常熟悉==比较运算符。值类型（或字符串）当有相同值是是相等的。引用类型相等需要有相同的引用。（我们假设你没有重载==运算符，或实现你自己的等值运算和GetHashCode方法）我很惊讶为什么JavaScript有两个等值运算符：==和===。最初我的大部分代码都是用的==，所以我并不知道当我运行如下代码的时候JavaScript为我做了什么：var x = 1; if(x == "1") { console.log("YAY! They're equal!"); }这是黑暗魔法吗？整数1是如何和字符串”1”相等 ...继续阅读 (15)

如果你是一个JavaScript新手或仅仅最近才在你的开发工作中接触它，你可能感到沮丧。所有的语言都有自己的怪癖（quirks）——但从基于强类型的服务器端语言转移过来的开发人员可能会感到困惑。我就曾经这样，几年前，当我被推到了全职JavaScript开发者的时候，有很多事情我希望我一开始就知道。在这篇文章中，我将分享一些怪癖，希望我能分享给你一些曾经令我头痛不已的经验。这不是一个完整列表——仅仅是一部分——但希望它让你看清这门语言的强大之处，可能曾经被你认为是障碍的东西。我们将看下列技巧：相等点号vs括号函数上下文函数声明vs函数表达式命名vs匿名函数立即执行函数表达式typeof vs Object.prototype.toString##1.) 相等C#出身的我非常熟悉==比较运算符。值类型（或字符串）当有相同值是是相等的。引用类型相等需要有相同的引用。（我们假设你没有重载==运算符，或实现你自己的等值运算和GetHashCode方法）我很惊讶为什么JavaScript有两个等值运算符：==和===。最初我的大部分代码都是用的==，所以我并不知道当我运行如下代码的时候JavaScript为我做了什么：var x = 1; if(x == "1") { console.log("YAY! They're equal!"); }这是黑暗魔法吗？整数1是如何和字符串”1” ...继续阅读 (9)

12345679*81 =(11111111+1111111+111111+11111+1111+111+11+2)*9*9 =(99999999+9999999+999999+99999+9999+999+99+9+9)*9 =(100000000+10000000+1000000+100000+10000+1000+100+10+10-9)*9 =111111111*9 =999999999 Done.注原文：http://www.cnblogs.com/tupx/archive/2012/04/22/2464906.html ...继续阅读 (36)

12345679*81 =(11111111+1111111+111111+11111+1111+111+11+2)*9*9 =(99999999+9999999+999999+99999+9999+999+99+9+9)*9 =(100000000+10000000+1000000+100000+10000+1000+100+10+10-9)*9 =111111111*9 =999999999 Done.##注原文：http://www.cnblogs.com/tupx/archive/2012/04/22/2464906.html ...继续阅读 (7)

如果你构建过Web引用程序，你可能处理过很多DOM操作。访问和操作DOM元素几乎是每一个Web应用程序的通用需求。我们我们经常从不同的控件收集信息，我们需要设置value值，修改div或span标签的内容。当然有许多库能帮助处理这些行为，其中最流行的当属jQuery，已经成为事实上的标准。有事你并不需要jQuery提供每一样东西，所以在这篇文章中，我们将看看如何创建自己的类库来操作DOM元素。API身为开发者的我们每天都要做决定。我相信在测试驱动开发中，我真的非常喜欢的一个事实是它迫使你在开始实际编码之前必须做出设计决定。沿着这些思路，我想我想要的DOM操作类库的API最终看起来可能像这样：//返回 DOM 元素 dom('.selector').el //返回元素的值/内容 dom('.selector').val() //设置元素的值/内容 dom('.selector').val('value')这应该包括了大多数可能用到的操作。然而如何我们可以一次操作多个对象会显得个更好。如果能生成一个JavaScript对象，那将是伟大之举。//生成包装DOM元素的对象 dom({ structure: { propA: '.selector', propB: '.selector' }, propC: '.selector' } ...继续阅读 (14)

如果你构建过Web引用程序，你可能处理过很多DOM操作。访问和操作DOM元素几乎是每一个Web应用程序的通用需求。我们我们经常从不同的控件收集信息，我们需要设置value值，修改div或span标签的内容。当然有许多库能帮助处理这些行为，其中最流行的当属jQuery，已经成为事实上的标准。有事你并不需要jQuery提供每一样东西，所以在这篇文章中，我们将看看如何创建自己的类库来操作DOM元素。##API身为开发者的我们每天都要做决定。我相信在测试驱动开发中，我真的非常喜欢的一个事实是它迫使你在开始实际编码之前必须做出设计决定。沿着这些思路，我想我想要的DOM操作类库的API最终看起来可能像这样：//返回 DOM 元素 dom('.selector').el //返回元素的值/内容 dom('.selector').val() //设置元素的值/内容 dom('.selector').val('value')这应该包括了大多数可能用到的操作。然而如何我们可以一次操作多个对象会显得个更好。如果能生成一个JavaScript对象，那将是伟大之举。//生成包装DOM元素的对象 dom({ structure: { propA: '.selector', propB: '.selector' }, propC: '.selector' ...继续阅读 (7)

一共收集整理了图形20个，比较实用，同时也为了熟悉CSS的代码。整合了一下，有错误欢迎指出。1.正方形#square { width: 100px; height: 100px; background: red; }2.长方形#rectangle { width: 200px; height: 100px; background: red; }3.左上三角#triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; }4.右上三角#triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; }5.左下三角#triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent; }6.右下三角#triangle-bottomright { width: 0; height: 0; ...继续阅读 (23)

1、*{} #zishu *{} 尽量避开由于不同浏览器对HTML标签的解释有差异，所以最终的网页效果在不同的浏览器中可能是不一样的，为了消除这方面的风险，设计者通常会在CSS的一个始就把所有标签的默认属性全部去除，以达到所有签标属性值都统一的效果。所以就有了*通配符。*会遍历所有的标签；*{margin:0; padding:0}建议的的解决办法：不要去使用生僻的标签，因为这些标签往往在不同浏览器中解释出来的效果不一样；所以你要尽可能的去使用那些常用的标签；不要使用*；而是把你常用到的这些标签进行处理；例如：body,li,p,h1{margin:0; padding:0}2、滤镜的一些东西不要去用IE的一些滤镜在FIREFOX中不支持，往往写一些效果时你还是使用CSS HACK；而滤镜是一个非常毫资源的东西；特别是一些羽化、阴影和一个前透明的效果；建议的解决办法：能不使用就不要使用，一方面兼容问题；很多效果只能在IE中使用；就本例而言，如果非要这样在的效果，建议用图片作背景；（只说优化速度，实际应用还是可以小部分用，有人可能会说，用图片还多一个HTTP请求呢，呵呵……）一个非常好的例子，就是在今年512大地震时，很多网站一夜之间全部变成了灰色，他们只用了一行CSS代码：body{filter: gray;}但，你会看会看到这些网页非常的慢，打开后你的CPU也会飙升，不夸张的说， ...继续阅读 (26)

一共收集整理了图形20个，比较实用，同时也为了熟悉CSS的代码。整合了一下，有错误欢迎指出。##1.正方形#square { width: 100px; height: 100px; background: red; }##2.长方形#rectangle { width: 200px; height: 100px; background: red; }##3.左上三角#triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; }##4.右上三角#triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; }##5.左下三角#triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent; }##6.右下三角#triangle-bottomright { width: 0; ...继续阅读 (8)

##1、*{} #zishu *{} 尽量避开由于不同浏览器对HTML标签的解释有差异，所以最终的网页效果在不同的浏览器中可能是不一样的，为了消除这方面的风险，设计者通常会在CSS的一个始就把所有标签的默认属性全部去除，以达到所有签标属性值都统一的效果。所以就有了*通配符。*会遍历所有的标签；*{margin:0; padding:0}建议的的解决办法：不要去使用生僻的标签，因为这些标签往往在不同浏览器中解释出来的效果不一样；所以你要尽可能的去使用那些常用的标签；不要使用*；而是把你常用到的这些标签进行处理；例如：body,li,p,h1{margin:0; padding:0}##2、滤镜的一些东西不要去用IE的一些滤镜在FIREFOX中不支持，往往写一些效果时你还是使用CSS HACK；而滤镜是一个非常毫资源的东西；特别是一些羽化、阴影和一个前透明的效果；建议的解决办法：能不使用就不要使用，一方面兼容问题；很多效果只能在IE中使用；就本例而言，如果非要这样在的效果，建议用图片作背景；（只说优化速度，实际应用还是可以小部分用，有人可能会说，用图片还多一个HTTP请求呢，呵呵……）一个非常好的例子，就是在今年512大地震时，很多网站一夜之间全部变成了灰色，他们只用了一行CSS代码：body{filter: gray;}但，你会看会看到这些网页非常的慢，打开后你的CPU也会飙升，不夸 ...继续阅读 (7)

在这篇文章中，我们将来看一些CSS3新属性，从而用HTML和CSS处理网格的时候更容易。但首先让我们讨论一点HTML和CSS网格的历史，了解清楚为什么以前很困难。网格简史曾几何时，我们的布局是一团糟。表格和框架是用于创建多列布局的主要工具。虽然他们能完成工作（但其实非常糟糕）。把目光投向今天。HTML和CSS已经变得非常复杂，Web设计的知名度和复杂度与日俱增。我们曾经使用的旧的布局方法显然已经out了。然而，一个历史遗留问题浮出水面：多列布局。更复杂的是，我们的页面宽度不再是静态的。响应式大行其道，所以我们倾向于基于百分比的列宽。基于固定960像素宽的简单网格已经行不通——我们需要流体网格。CSS2规范中用浮动解决列的方法存在一个问题。为了防止父元素破环你的布局，我们需要添加clearfix。通过这种方法，来修正父元素的高度坍塌问题（浮动元素脱离标准流，父元素会认为浮动资源不存在）。我们大部分接受这种方法，但许多人仍然认为它是一种hack（奇技淫巧）。通过inline-box的方法并不常见，但仍然存在。内联元素会保持在一行，他们自然顺序排列。当一行被占满，后面的元素自然折到下一行。但因为他表现为文本特性，其行为类似文本。这意味着你必须避免HTML元素之间的空白元素(空格，tab，换行……)。Inline-block不是为这设计的，不且工作的并不十分如意。在这两种方法中，浮动的方法 ...继续阅读 (23)

在这篇文章中，我们将来看一些CSS3新属性，从而用HTML和CSS处理网格的时候更容易。但首先让我们讨论一点HTML和CSS网格的历史，了解清楚为什么以前很困难。##网格简史曾几何时，我们的布局是一团糟。表格和框架是用于创建多列布局的主要工具。虽然他们能完成工作（但其实非常糟糕）。把目光投向今天。HTML和CSS已经变得非常复杂，Web设计的知名度和复杂度与日俱增。我们曾经使用的旧的布局方法显然已经out了。然而，一个历史遗留问题浮出水面：多列布局。更复杂的是，我们的页面宽度不再是静态的。响应式大行其道，所以我们倾向于基于百分比的列宽。基于固定960像素宽的简单网格已经行不通——我们需要流体网格。CSS2规范中用浮动解决列的方法存在一个问题。为了防止父元素破环你的布局，我们需要添加clearfix。通过这种方法，来修正父元素的高度坍塌问题（浮动元素脱离标准流，父元素会认为浮动资源不存在）。我们大部分接受这种方法，但许多人仍然认为它是一种hack（奇技淫巧）。通过inline-box的方法并不常见，但仍然存在。内联元素会保持在一行，他们自然顺序排列。当一行被占满，后面的元素自然折到下一行。但因为他表现为文本特性，其行为类似文本。这意味着你必须避免HTML元素之间的空白元素(空格，tab，换行……)。Inline-block不是为这设计的，不且工作的并不十分如意。在这两种方法中，浮动的 ...继续阅读 (7)

如果你想对使用手机，平板电脑和辅助技术的用户隐藏某些内容，而只对键盘用户显示，那么请使用title属性。细节HTML的title属性本身有问题。之所以有问题是因为它在一些重要的方面表现的不够好，尽管它陪伴我们超过14年了。随着触摸设备的兴起，这个属性的作用进一步降低。title属性的可访问性变得很鸡肋，由于缺少浏览器的支持，屏幕阅读器的支持和制作人员的重视。下列情况下title属性由于缺乏支持变得多余：对于在手机浏览器里访问web内容信息的人。通常title属性的内容在桌面浏览器里显示为提示信息。据我所知，没有任何手机浏览器支持显示提示信息，并且也没有其他访问title属性内容的视觉方法。对于那些无法使用鼠标的人提供信息。通常title属性的内容在桌面浏览器里显示为提示信息。虽然提示信息的行为已经有10多年历史，但一直没有浏览器实现使用键盘显示title属性的方法。对于在大多数HTML元素上使用它为使用各种辅助技术的人提供信息。据我所知屏幕阅读器对访问title属性信息一致不支持。title属性不友好用户如下手机用户仅使用键盘的用户使用屏幕放大器的用户屏幕阅读器用户精细运动技能障碍的用户认知障碍的用户title属性有用的例子：为frame或iframe元素贴上标签：提供需要程序才能实现的在特殊情况下才显示的标签，直接使用可见的文本标签会显得多余：数据表格中的标签控件。 ###tit ...继续阅读 (18)

你是否觉得 CSS 不再跟以前一样了呢？最近几年成了热门话题，许多聪明的人也在谈论它。CSS 远不止是前端开发者应该用来美化网页的小玩意儿。我们关心性能，想要创作出更好的网站。在这篇文章里，我会分享最近几个月学习 CSS 相关的知识和我个人对编写 CSS 代码确切的看法。作为程序员，我真的对每样东西的结构部分很感兴趣。我觉得编写 CSS 的方式应该改变并对此深入研究。我寻找好的处理方式，最佳准则（best principles）和新的工作流程（workflows）。这篇文章就像是在 CSS 世界里旅行的总结。很多人说编写 CSS 不是真正的编程。我并不认同，它同样充满乐趣和挑战性。CSS 预处理器（CSS Preprocessors）当一个程序员开始写 CSS 时发生了什么 当一个程序员开始写 CSS 时发生了什么：你 -> 编写代码 -> 预处理器 -> CSS 代码 -> 网页好吧，让我们面对它。这世上编写纯的 CSS 不是件有趣的事情。预处理器使用一些类似 CSS 语法，神奇地生成有效的 CSS 代码。在你和最终发送给浏览器的样式之间，它添加了一个中间层。这没有听起来那么坏，因为预处理器提供了一些真正实用的特性。合并（Concatenation）我认为能使你的文件合并在一起是最有价值的事情之一。我确信，你了解当在你的.css文件用@import时，实际上告诉浏览器“麻烦你顺便 ...继续阅读 (19)

如果你想对使用手机，平板电脑和辅助技术的用户隐藏某些内容，而只对键盘用户显示，那么请使用title属性。##细节HTML的title属性本身有问题。之所以有问题是因为它在一些重要的方面表现的不够好，尽管它陪伴我们超过14年了。随着触摸设备的兴起，这个属性的作用进一步降低。title属性的可访问性变得很鸡肋，由于缺少浏览器的支持，屏幕阅读器的支持和制作人员的重视。###下列情况下title属性由于缺乏支持变得多余：对于在手机浏览器里访问web内容信息的人。通常title属性的内容在桌面浏览器里显示为提示信息。据我所知，没有任何手机浏览器支持显示提示信息，并且也没有其他访问title属性内容的视觉方法。对于那些无法使用鼠标的人提供信息。通常title属性的内容在桌面浏览器里显示为提示信息。虽然提示信息的行为已经有10多年历史，但一直没有浏览器实现使用键盘显示title属性的方法。对于在大多数HTML元素上使用它为使用各种辅助技术的人提供信息。据我所知屏幕阅读器对访问title属性信息一致不支持。###title属性不友好用户如下手机用户仅使用键盘的用户使用屏幕放大器的用户屏幕阅读器用户精细运动技能障碍的用户认知障碍的用户###title属性有用的例子：为frame或iframe元素贴上标签：<frame title="navigation">提供需要程序才能实现的在特殊情况 ...继续阅读 (14)

你是否觉得 CSS 不再跟以前一样了呢？最近几年成了热门话题，许多聪明的人也在谈论它。CSS 远不止是前端开发者应该用来美化网页的小玩意儿。我们关心性能，想要创作出更好的网站。在这篇文章里，我会分享最近几个月学习 CSS 相关的知识和我个人对编写 CSS 代码确切的看法。作为程序员，我真的对每样东西的结构部分很感兴趣。我觉得编写 CSS 的方式应该改变并对此深入研究。我寻找好的处理方式，最佳准则（best principles）和新的工作流程（workflows）。这篇文章就像是在 CSS 世界里旅行的总结。很多人说编写 CSS 不是真正的编程。我并不认同，它同样充满乐趣和挑战性。##CSS 预处理器（CSS Preprocessors）当一个程序员开始写 CSS 时发生了什么 当一个程序员开始写 CSS 时发生了什么：你 -> 编写代码 -> 预处理器 -> CSS 代码 -> 网页好吧，让我们面对它。这世上编写纯的 CSS 不是件有趣的事情。预处理器使用一些类似 CSS 语法，神奇地生成有效的 CSS 代码。在你和最终发送给浏览器的样式之间，它添加了一个中间层。这没有听起来那么坏，因为预处理器提供了一些真正实用的特性。###合并（Concatenation）我认为能使你的文件合并在一起是最有价值的事情之一。我确信，你了解当在你的.css文件用@impor ...继续阅读 (7)

在JavaScript开发者的开发生涯中的某些点，总会遇到奇怪的BUG——看似基础的数学问题，但却又觉得有些不对劲。总有一天，你会被告知JavaScript中的数字实际上是浮点数。试图了解浮点数和为什么他们如此奇怪，迎接你的将是一片又臭又长的文章。本文的目的是给JavaScript开发者简单讲解浮点数。本文假设读者熟悉的用二进制表示的十进制数字（即1被写成1b，2是10b，3是11b，4是100b……等）。为了使文章表达的更清楚，在本章中，“十进制”主要是指计算机内部的十进制数字表示法（例如：2.718）。“二进制”在本文中指计算机内部的表示。书面陈述将分别被称为“以十为底″和“以二为底″。浮点数什么是浮点数，我们开始认为我们见过各种数字，我可可以说1是一个整数，因为它没有分数部分。½被称为分数。这意味着，将一平均分开为二，分数是浮点运算中一个非常重要的概念。0.5通常被称为一个十进制数。然而，有一个很重要的区别必须阐明——0.5实际上是分数½的十进制（以十为底）表示。本文中，我们将这种表示方法称为点表示法。我们把0.5称为有限表示（有限小数）因为其分数表示的数字是有限的——5后面没有其他数字。表示⅓的0.3333…是无限表示的例子。这个想法在我们的讨论非常重要。还存在另一种表示全部整数，分数或小数的方法。你可能已经见过。它看起来像这样：6.022×1023（注：这是阿伏伽德罗数， ...继续阅读 (31)

在JavaScript开发者的开发生涯中的某些点，总会遇到奇怪的BUG——看似基础的数学问题，但却又觉得有些不对劲。总有一天，你会被告知JavaScript中的数字实际上是浮点数。试图了解浮点数和为什么他们如此奇怪，迎接你的将是一片又臭又长的文章。本文的目的是给JavaScript开发者简单讲解浮点数。本文假设读者熟悉的用二进制表示的十进制数字（即1被写成1b，2是10b，3是11b，4是100b……等）。为了使文章表达的更清楚，在本章中，“十进制”主要是指计算机内部的十进制数字表示法（例如：2.718）。“二进制”在本文中指计算机内部的表示。书面陈述将分别被称为“以十为底″和“以二为底″。##浮点数什么是浮点数，我们开始认为我们见过各种数字，我可可以说1是一个整数，因为它没有分数部分。½被称为分数。这意味着，将一平均分开为二，分数是浮点运算中一个非常重要的概念。0.5通常被称为一个十进制数。然而，有一个很重要的区别必须阐明——0.5实际上是分数½的十进制（以十为底）表示。本文中，我们将这种表示方法称为点表示法。我们把0.5称为有限表示（有限小数）因为其分数表示的数字是有限的——5后面没有其他数字。表示⅓的0.3333…是无限表示的例子。这个想法在我们的讨论非常重要。还存在另一种表示全部整数，分数或小数的方法。你可能已经见过。它看起来像这样：6.022×1023（注：这是阿伏伽德罗 ...继续阅读 (7)

边界是众所周知的，有什么新的东西吗？好吧，我敢打赌，在这篇文章中，有很多你不看永远不知道的东西！不仅可以用CSS3来创建圆角，使用原有CSS一样可以显示自定义图形。这是正确的（有待考究）；在过去，没发现这种技术之前，我们可能使用背景图像定位来显示一个园或箭头。幸运的是，我们能放下PS图象处理软件了。基础你可能很熟悉边的最基本用法。border: 1px solid black;上面的代码将给元素应用1px的边。即简洁又简单；但我们也可以稍作修改。border-width: thick; border-style: solid; border-color: black;除了指定具体的边框宽度值，也可以使用这三个关键词：thin，medium和thick。虽然乍看起来单个属性的方式没必要，但有极少数的情况下，当它是有利的，例如当你需要在特定的事件发生时更新边的部分属性。也许你需要在用户将鼠标悬停在一个特定的元素上时改变这个元素的边框颜色。使用复合属性需要重复像素值和边的样式。box { border: 1px solid red; } .box:hover { border: 1px solid green; }一个更优雅的和简洁（DRY，don’t repeat yourself）的做法是只更新边的颜色属性。.box { border: 1px so ...继续阅读 (29)

边界是众所周知的，有什么新的东西吗？好吧，我敢打赌，在这篇文章中，有很多你不看永远不知道的东西！不仅可以用CSS3来创建圆角，使用原有CSS一样可以显示自定义图形。这是正确的（有待考究）；在过去，没发现这种技术之前，我们可能使用背景图像定位来显示一个园或箭头。幸运的是，我们能放下PS图象处理软件了。基础你可能很熟悉边的最基本用法。border: 1px solid black;上面的代码将给元素应用1px的边。即简洁又简单；但我们也可以稍作修改。border-width: thick; border-style: solid; border-color: black;除了指定具体的边框宽度值，也可以使用这三个关键词：thin，medium和thick。虽然乍看起来单个属性的方式没必要，但有极少数的情况下，当它是有利的，例如当你需要在特定的事件发生时更新边的部分属性。也许你需要在用户将鼠标悬停在一个特定的元素上时改变这个元素的边框颜色。使用复合属性需要重复像素值和边的样式。box { border: 1px solid red; } .box:hover { border: 1px solid green; }一个更优雅的和简洁（DRY，don’t repeat yourself）的做法是只更新边的颜色属性。.box { border: 1px so ...继续阅读 (9)

最近公司要开发网站的移动版，让我准备准备知识，话说本人开发移动网站的经验还真不多，最悲剧的事情就是我的手机是个经典的诺基亚，而且公司还不给配手机，这是有多讨厌，没办法，没有手机只能用电脑模拟了，相办法代替，查了很多资料，尝试了大部分方法，下面将这一天的努力总结下分享给大家，也让大家免去看那么多文章，以下介绍的方法，都是本人亲自测试成功的方法，测试环境winxp。Chrome*chrome模拟手机总共有四种方法，原理都一样，通过伪装User-Agent，将浏览器模拟成Android设备。以下标星的为推荐方法。1.新建Chrome快捷方式右击桌面上的Chrome浏览器图标，在弹出的右键菜单中选择“复制”，复制一个图标副本到桌面。右击该副本，选择“属性”，打开相应的对话框，在“目标”文本框的字符后面添加以下语句：“–user-agent=”Android””，如下图：注意user前面是两个“-”，并且“chrome.exe”与“–user”之间有一个空格。确定之后，打开这个新建的Chrome快捷方式，输入3g.qq.com就可以浏览到像手机里打开一样的页面了。这时可以新建一个用户，就不影响原来用户访问的时候也是访问的手机版。2.一次性模拟iPhone和安卓手机开始–运行中输入以下命令，启动浏览器：模拟谷歌Android：chrome.exe --user-agent="Mozilla/5 ...继续阅读 (17)