摘要：利用 元素，我们可以在网页中嵌入样式表。如果需要动态增加 元素，似乎可以用如下的 JavaScript 代码：var style = document.createElement("style");var head = document.getElementsByTagName("head")[0];head.appendChild(style);style.type = "text/css";style.id = "some-id";style.innerHTML = css;但是，这样直接用 style.inn 阅读全文

摘要：之前提到，Modernizr 是 HTML5 和 CSS3 的特性检测工具，这里简单介绍一下它的用法。最简单的用法是在页面的 中添加 Modernizr 的 JavaScript 文件： Modernizr 脚本执行后，你会发现页面类似下面的样子（以 IE9 为例）： 可以看到，Modernizr 检测了数十个 HTML5 和 CSS3 特性之后，将结果记录在 html 标签的 class 属性中，其中带 no 前缀的表示浏览器不支持该特性，不带 no 前缀的表示浏览器支持该特性。这样，我们就可以根据 html 标签的这些 class 属性，在 CSS 文件中针对不同的特性应用不... 阅读全文

摘要：在 Wep App 中，我们经常需要在 JavaScript 中处理链接的点击。因此，我们希望用户点击 元素时阻止它的默认行为。此时我们可以用很多不同的方法来处理。例如：Click MeClick MeClick MeClick MeClick MeClick Me第一种方法最简单，但是它会导致点击时页面滚动到页首。因此第二种方法利用 return false 语句阻止默认行为的执行。后面几种方法利用javascript: URI 来达到页面不跳转的效果：按照规定，只要 javascript 代码执行的结果不为 undefined，则页面不跳转。因此第三、四种方法利用了 void 操作符的返. 阅读全文

摘要：一、try-catch-finally为了处理可能出现的错误，我们可以用 try-catch 语句。例如：try { doSomeThing(); return 1; } catch (err) { handleError(); return 2; }这时候当 doSomething 函数能够正常执行时，返回 1；而当 doSomeThing 函数执行出现错误时将执行 handleError 函数并返回 2。当然我们也可以在最后加上 finally 子句，例如：try { doSomeThing(); return 1; } catch (err) { handleErro... 阅读全文

摘要：Node.JS 官方的模块只提供了列出某目录所有文件的命令fs.readdir，要用异步的方式遍历一个目录并记录所有文件的内容，需要仔细处理。下面的代码参考了后面列出的资料，并增加了排除某些文件的功能：var fs = require('fs');function walkInto(dir, excludes, back) { var result = []; fs.readdir(dir, function(err, files){ if (err) back(err); files = files.filter(function(value){ ... 阅读全文

摘要：Node.JS 中的一大麻烦就是异步函数太多，导致程序的流程不好控制。但是，有了 async 模块，这个问题不再是问题了。这里我们总结下 async 模块的用法。假如我们需要分别读取两个文件的内容，如果两者都成功就执行其它操作。如果按照同步的思路，代码如下：function task1() { fs.readFile('somefile', function(err, data) { if (err) throw err; window.data1 = data; console.log('task1 done!'); });}functi... 阅读全文

摘要：Node.JS 使用 npm 工具来管理它的模块。例如：npm install packagenpm update packagenpm remove package上面的是局部安装方式，还有对应的全局安装方式如下：npm install -g packagenpm update -g packagenpm remove -g package局部安装方式适合程序库，全局安装方式适合应用程序。我们也可以安装 git 代码仓库的模块，例如：npm install -g git://github.com/chjj/marked.git参考资料：[1]Node Packaged Modules[2]n 阅读全文

摘要：Node.JS 作为一个强调事件驱动、异步执行的后端语言，最近慢慢的流行起来了。这里总结一下安装和入门的基本知识。Node.JS 目前的最新版本是 0.10.5。它的官方网站上提供了二进制安装包，因此在Windows 中安装非常简单。安装时，Node.JS 在开始菜单中创建了到“Node.JS 控制台”的快捷方式。打开该控制台就可以工作了。我们先来写一个最简单的网页服务器。建立一个文件 hello.js，写上如下内容：var http = require('http');var server = http.createServer(function (request, resp 阅读全文

摘要：一、DOM 级别 2 的事件模拟利用 DOM2 的标准我们可以模拟这些类型的事件：HTMLEvents，MutationEvents，UIEvents 和 MouseEvents。而事件的模拟基本是三步：createEvent，initEvent 和 dispatchEvent。例如我们可以用下面的方式模拟 HTML 事件：var event = document.createEvent("HTMLEvents");event.initEvent("focus", true, false);element.dispatchEvent(event);其中 阅读全文

摘要：在 JavaScript 中，一个语句（statement）以分号结尾。如果省略分号，则按照 ECMAScript 的规范来确定语句的结尾。在 ECMAScript 规范说明，对于下列这些语句，如果没有分号，解析器将会自动添加分号到合适的位置：空语句变量语句表达式语句do-while 语句continue 语句break 语句return 语句throw 语句分号自动添加的规则有如下三条：一、解析器碰到文件的结尾。二、解析器遇到不合语法的符号（token），而且 (a) 这个符号和前面的符号之间有换行符；或者 (b) 这个符号就是 }。三、解析器遇到下列五种 restricted produc 阅读全文

摘要：在网页中设置某元素的样式，可以有以下几种方式：通过外部的 CSS 样式表<!-- some.html --><link rel="stylesheet" type="text/css" href="some.css">/* some.css */#someid {background-color: blue;}通过内嵌的 CSS 样式表<!-- some.html --><style> #someid {background-color: blue;} </style>通过元 阅读全文

摘要：在 ECMAScript 5 中，与对象的属性有关的方法有这些：Object.prototype.hasOwnProperty，Object.defineProperty，Object.defineProperties，Object.getOwnPropertyNames 和Object.getOwnPropertyDescriptor。除了第一个在 ECMAScript 3 中就已经出现，其它的都是新增的方法。Object.prototype.hasOwnProperty方法用于检测某个属性是对象自己的，还是从原型中继承来的。例如：o = {abc: 123};console.log(o.h 阅读全文

摘要：在 ECMAScript 5 中，对 Array 增加了几个原型方法，包括 indexOf 和 lastIndexOf 这两个定位方法，以及 every，some，forEach，filter，map，reduce 和 reduceRight 这几个迭代方法。Array.prototype.indexOf 和 Array.prototype.lastIndexOf 这两个方法用于在数组中查找一个元素，如果找到则返回该元素所在位置，否则返回 -1。两者的区别在于前者从最前面开始查找，而后者从最后面开始查找。例如：var arr = ['red', 'green', 阅读全文

摘要：jQuery 是个很流行的 JavaScript 库，最近研究了下，尝试写一个 jQuery 对象的简化山寨版，命名为 jsquick。jQuery 这个对象也不简单，因此我们首先实现 $.each 和 $.extend 这两个最基本的功能。代码如下：(function(){ var jsquick = { each: function(collection, callback) { var i, arr = []; if (Object.prototype.toString.call(collection) !== "[object Array]") { ... 阅读全文

摘要：一、基本使用在 JavaScript 中，可以用下面的两种方法来创建一个正则表达式（RegExp）对象：var re = /fox/;var re = new RegExp("fox");创建了 RegExp 对象后，就可以用 test() 方法来检测某个字符串是否匹配。例如：var re = /fox/;var str = "The quick brown fox jumps over the lazy dog";alert(re.test(str)); // true test() 方法根据字符串是否匹配该正则表达式，返回 true 或者 false 阅读全文

摘要：在 JavaScript 中，function 和 array 也是 object，所以它们也可以当成 object 来使用。例如：var fun = function(){};fun.key = "dog";var arr = new Array();arr.key = "cat";console.log(fun.key); // dogconsole.log(arr.key); // cat类似地，我们也可以用 function 和 object 当成 array 来使用，例如：var fun = function(){};fun[1] = &quo 阅读全文

摘要：在 JavaScript 中，typeof 和 instanceof 这两个操作符都可以用于区分不同的变量。这里总结一下。typeof用于检测数据类型，它的基本用法如下面的例子：var u;var b = true;var i = 1234;var s = "abc";var f = function(){};var n = null;var o = {key: "value"};var a = [1, 2, 3];console.log(typeof u); // undefinedconsole.log(typeof b); // booleanco 阅读全文

摘要：JavaScript 中 caller，callee，call，apply 这几个涉及到函数调用的概念，这里总结一下。callee 是函数的 arguments 对象的一个属性，指代当前这个函数。利用 arguments.callee，我们可以让函数递归的调用自己，而不用总是写出这个函数的名字。例如：function factorial (n) { return !(n > 1) ? 1 : arguments.callee(n - 1) * n;}caller 是 Function 对象的一个属性，指代调用当前函数的函数；如果当前函数在顶层，caller 就是 null。例如funct 阅读全文

摘要：JavaScript 的原型（prototype）及其实例是不容易理解的东西，这里总结一下。一、原型与实例先看下面的例子：function Foo(value) { this.name = value; this.prototype.type = "example";}var foo1 = new Foo("hello");var foo2 = new Foo("world");在这个例子中，总共出现三种不同的东西：Foo 是构造函数（constructor），通过使用 new 关键字，我们调用这个构造函数，从 Foo.prototy 阅读全文

摘要：本地存储是 HTML5 的一部分，用于方便地从页面存储本地数据。它包括 localStorage 和 sessionStorage 两种：前者保存的数据可以一直保存，除非清除浏览器缓存；而后者保存的数据在关闭浏览器后即失效。本地存储 IE 8.0+，Firefox 3.5+，Chrome4.0+，Safari 4.0+ 和 Opera 10.5+ 都支持。使用方式也很简单：if (window.localStorage){ // set item localStorage.key1 = 'value1'; localStorage['key2'] = ' 阅读全文