1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)

当一个脚本在下载的时候，浏览器干不了其它的事儿(串行了)。所以，把它扔到最后面去处理。对于一些功能性的脚本，可能实现起来有些两难。不过对于国内网站来说，有很多使用 Google Analytics 服务进行网站数据分析的。这这一点来说，绝对可行的建议，放到页面最底下。

2. Make JavaScript and CSS External

参见 CSS 篇的描述

3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)

参见 CSS 篇的描述

4. 移除重复脚本 (Remove Duplicate Scripts)

对于一些历史遗留站点或是论坛类的网站来说，这倒是比较常见的。接手维护人前后变化过多，每个人都有自己的一套。这就会带来一些潜在的麻烦。

5. 减少 DOM 访问 (Minimize DOM Access)

有三条指导建议:

• 缓存已经访问过的元素 (Cache references to accessed elements)
• “离线”更新节点, 再将它们添加到树中 (Update nodes “offline” and then add them to the tree)
• 避免使用 JavaScript 输出页面布局–应该是 CSS 的事儿 (Avoid fixing layout with JavaScript)

6. Develop Smart Event Handlers

除了英文解释外，这里也提醒一下注意关于 Java Script 内存泄漏的问题。

另外推荐一篇《如何优化 JavaScript 脚本的性能》，关于 Ajax 优化指导原则，可以参见 提高 Ajax 应用程序性能，避开 Web 服务漏洞。

后记1) ：整理得差不多之后，发现网络上已经有一篇 《Yahoo!网站性能最佳体验的34条黄金守则》，是翻译稿。看来我做了一部分重复劳动。

后记 2)：CSS / JavaScript 都有优化规则。但似乎缺少了对 Flash 的优化实践。

您可能感兴趣的文章

• Flickr 的开发者的 Web 应用优化技巧
• Web 前端优化最佳实践之 Mobile(iPhone) 篇
• Web 前端优化最佳实践之 图象篇
• Web 前端优化最佳实践之 CSS 篇
• Web 前端优化最佳实践之 Cookie 篇
• Web 前端优化最佳实践之 Server 篇
• Web 前端优化最佳实践之 内容篇
• RSS对网站SEO优化的好处
• 如何优化网站内链建设
• wordpress博客seo优化指南

1，JavaScript compressor and comparison tool

有许多工具可以帮助你压缩JavaScript代码，但是这个过程比较耗时，并且，对于某个特定的场景来说，很难分析出具体哪个工具表现的最好。这 个应用程序可以对那些工具的常规压缩做一个汇总统计，它可以让开发者在不安装这些工具的情况下，对在自己的JavaScript代码上应用那些工具的情况 进行比较。

具体可以参考：http://compressorrater.thruhere.net/

2，Regular expression validator tool

这个基于Web的JavaScript正则表达式验证器可以让你轻松地为JavaScript测试和编写正则表达式。这个工具可以帮助你检查语法方面的错误，此外，它还为你提供一个正则表达式库。

具体可以参考：http://tools.netshiftmedia.com/regexlibrary/

3，Regular expression generator

在IE中，这个脚本运行在 JDC 1.0.3 之上，这就是它在 Firefox，Opera 和 Safari 上运行的稍微快一些的原因。

具体可以参考：http://www.jslab.dk/tools.regex.php

4，Jsbeautifier

这个微型的美化器可以重新调整 bookmarklet 和丑陋的JavaScript的格式和缩进，也可以对使用流行的 Dean Edward 的 Packer 打包的脚本进行拆包，对通过javascriptobfuscator.com 混淆的脚本进行反混淆。

具体可以参考：http://jsbeautifier.org/

5，Jsbin

JS Bin是一个开源的，协同的JavaScript调试工具。

具体可以参考：http://jsbin.com/

6，Jslint

JSlint会对JavaScript的源代码进行扫描。如果它发现了一个问题，会返回一个描述这个问题的消息和源代码中的大概位置。这个问题不一 定是一个语法错误（虽然通常情况下，这个问题都是一个语法错误）。JSLint 会发现一些样式约定和结构问题。它无法证明你的程序是正确的。它只能帮助你发现一些问题。

具体可以参考：http://www.jslint.com/

7，Rockstarapps

Rockstarapps 的使命比较简单：给开发者提供一套工具，让他们可以在云中创建经过高度优化的Web应用程序。

具体可以参考：http://rockstarapps.com/joomla-1.5.8/home.html

8，Prettyprinter

这是一个源代码美化器（源代码格式化器），和缩进的效果是类似的。

具体可以参考：http://www.prettyprinter.de/

9，Pixastic

Pixastic是一个实验性的库，使用这个库，你只需要一点点的 JavaScript 代码，就可以执行各种图像操作。它支持的效果包括淡化/灰度调整，倒置，翻转，亮度/对比度的调整，色调/饱和度，浮现，模糊，等等。

具体可以参考：http://www.pixastic.com/

10，Extjs

构建丰富的，可持续发展的Web应用程序比以往更加快捷了。许多著名的公司（Adobe, Amazon, CNN 等）都在使用extjs。

具体可以参考：http://www.sencha.com/

11，Slickspeed

各种测试在一个中立的环境中运行，在主要的JavaScript测试中，既不包括库也不包括框架，这样可以避免偏颇。

具体可以参考：http://mootools.net/slickspeed/

12，Scriptalizer

对于那些在互联网上部署和传输的解释性语言（例如：JavaScript）来说，对源代码进行最小化是很有帮助的，因为这可以减少需要传输的数据量。

具体可以参考：http://www.scriptalizer.com/

13，Yui compressor

YUI Compressor 是100%安全的 JavaScript 最小化器，它比大多数其他工具的压缩比都要高。在YUI库上的测试表明，和 JSMin 比起来，它可以节省超过20%的体积（在HTTP压缩以后，这个数字是10%）。

具体可以参考：http://developer.yahoo.com/yui/compressor/

14，Js minifier

具体可以参考：http://fmarcia.info/jsmin/test.html

15，Jslitmus

JSLitmus 是一个轻量级的工具，主要用于创建 ad-hoc JavaScript benchmark tests。

具体可以参考：http://broofa.com/Tools/JSLitmus/

16，Js regular expression tester

这个方便的实用程序可以在一个浏览器中，使用 JavaScript 来测试 JavaScript 正则表达式。它的界面和其他正则表达式测试工具类似，但是，和其他工具不同的是，它用JavaScript 测试正则表达式的 JavaScript 实现。

具体可以参考：http://www.codeproject.com/KB/scripting/regex2.aspx

17，Qooxdoo

qooxdoo是一个集综合性和创新性于一身的框架，它主要用于创建富互联网应用程序（RIA）。面向对象的 JavaScript 可以让开发者构建跨浏览器的应用程序。无须掌握HTML, CSS的知识，也无须掌握 DOM 知识。

具体可以参考：http://qooxdoo.org/

18，JavascriptMVC

JavascriptMVC是一个开源的框架，它融合了企业级的 JavaScript 开发方面的最佳理念。它可以通过执行最佳实践，增加可维护性，和推广约定优于配置的理念等方式来帮助你成功地完成项目。

具体可以参考：http://javascriptmvc.com/

19，GNUcitizen

为了把JavaScript攻击向量和其他的客户端和服务端技术组合在一起，AttackAPI提供了简单而直观的编程界面。

具体可以参考：http://www.gnucitizen.org/blog/attackapi/

20，Jsfuzzer

这个 fuzzing 工具支持事件，标签，样式和 HTML 属性的 fuzzing。你可以使用各种深度的不完整标签，也可以对所有参数进行随机排列。它还包含一个带有所有新的攻击向量的数据库。

具体可以参考：http://code.google.com/p/jsfuzzer/

21，J3unit

J3Unit是一个面向对象的 JavaScript 单元测试框架。J3Unit可以直接在Web浏览器中运行JavaScript测试，也可以自动地运行 JUnit 和Jetty。J3Unit是建立在JSUnit 和 Script.aculo.us 基础之上的，它提供了一种更好的方式来自动化JavaScript单元测试。

具体可以参考：http://j3unit.sourceforge.net/

22，Jsunit

JsUnit是一个客户端（浏览器内）JavaScript单元测试框架。它实际上是JUnit到JavaScript的一个通道。此外，它还包括一个平台，这个平台可以自动地执行多个浏览器和运行不同的操作系统的多台机器上的测试。

具体可以参考：http://www.jsunit.net/

23,Firebug

Firebug是和 Firefox 集成在一起的，当你浏览页面的时候，你随时可以使用它提供的丰富的Web开发工具。在任何一个Web页面中，你都可以实时地编辑，调试和监控 CSS，HTML，和JavaScript。

具体可以参考：http://getfirebug.com/

24，Venkman

Venkman 是 Mozilla 的 JavaScript 调试器的代号。Venkman 旨在为基于 Gecko 的浏览器（即：Firefox 3.x,Netscape 7.x 系列的浏览器）提供一个强大的 JavaScript 调试环境。

具体可以参考：http://www.mozilla.org/projects/venkman/

25，Drosera

为了调试你的应用程序中的 JavaScript 代码，你需要为你的应用程序指定一个默认的“bundle identifier”。此外，你还需要使用 TOT WebKit 框架来发布你的应用程序。通过 WebKitTools/Scripts 内的 run-webkit-app 脚本，你可以轻松地完成这些工作，然后，你会发现你的应用程序已经显示在 Drosera 的窗口中了。

具体可以参考：http://webkit.org/blog/61/introducing-drosera/

26，Dragonfly

欢迎 Opera Dragonfly 的 alpha版的到来，这是一个为基于 Presto 的 Opera 浏览器而提供的功能完备的调试环境。Opera Dragonfly 提供的那些工具可以让你更快速，更轻松地进行开发，它们可以调试你的 JavaScript 代码，也可以检查DOM，CSS，网络流量和数据存储。Opera Dragonfly 内置的远程调试功能让移动开发变得前所未有的轻松。

具体可以参考：http://www.opera.com/dragonfly/

27，Nitobibug

对于专家和新手来说，NitobiBug 都是一个实用的工具。它让 JavaScript 和 DOM 问题的调试变得更加快捷，更加简单。

具体可以参考：http://www.nitobibug.com/

28，Wavemaker

具体可以参考：http://www.wavemaker.com/

29，Jaxer

Jaxer是一个 Aptana Ajax Server，它内置在 Aptana Studio 中。Jaxer可以让你在提供那个页面以前或者是在回调期间，在服务器上执行 JavaScript 代码。

具体可以参考：http://jaxer.org/

30，Jxlib

一个 JavaScript 库，主要用于创建基于传说中的 MooTools 库的图形化的用户界面。

具体可以参考：http://jxlib.org/

31，Dojotoolkit

Dojo 可以节省你的时间，提供强大的性能，缩短你的开发过程。为了提供良好的Web体验，有经验的开发人员都会使用这个工具包。

您可能感兴趣的文章

• Web 前端优化最佳实践之 JavaScript 篇
• javascript 正则表达式-替换
• 高质量JavaScript代码书写基本要点|值得收藏
• 前端开发的一些必备工具信息
• js入门学习：Javascript的学习笔记
• 学习JavaScript三件必须了解的事
• JavaScript操作iframe里的dom
• javascript中的107个基础知识收集整理
• 所有网站长必备的SEO工具大全
• JavaScript面向对象之静态与非静态类

一，概述
1，正则表达式，可以说是任何一种编程语言都提供的机制，它主要是提供了对字符串的处理能力。
2，正则表达式在页面处理中的使用场景：
1）表单验证。验证某些域符合某种规则，例如邮件输入框必须输入的是邮件、联系电话输入框输入的必须是数字等等
2）处理DOM模型。例如通过表达式定位DOM中的一个对象或一系列对象，一个例子就是定位id属性中含有某个特殊字符的div对象。
3）纯编程逻辑。直接用于编程的逻辑之中。
3，说明：本部分所举的正则表达式的代码片断，都是经过测试的，但有一点需要注意，对于换行的字符串的定义，我们在表述时使用的是类似如下的形式：
var str=“It’s is
a beautiful city”；
这种形式直接写在JS代码中是错误的，那如何获取具有换行的字符串呢？简单的办法：在textarea中输入文本并换行，然后将该值赋给JS变量即可。例如：
var str=document.forms[0].mytextarea.value;
二，语法与使用
1，定义正则表达式
1）定义正则表达式有两种形式，一种是普通方式，一种是构造函数方式。
2）普通方式：var reg=/表达式/附加参数
表达式：一个字符串，代表了某种规则，其中可以使用某些特殊字符，来代表特殊的规则，后面会详细说明。
附加参数：用来扩展表达式的含义，目前主要有三个参数：
g：代表可以进行全局匹配。
i：代表不区分大小写匹配。
m：代表可以进行多行匹配。
上面三个参数，可以任意组合，代表复合含义，当然也可以不加参数。
例子：
var reg=/a*b/;
var reg=/abc+f/g;
3）构造函数方式：var reg=new RegExp(“表达式”,”附加参数”);
其中“表达式”与“附加参数”的含义与上面那种定义方式中的含义相同。
例子：
var reg=new RegExp(“a*b”);
var reg=new RegExp(“abc+f”,”g”);
4）普通方式与构造函数方式的区别
普通方式中的表达式必须是一个常量字符串，而构造函数中的表达式可以是常量字符串，也可以是一个js变量，例如根据用户的输入来作为表达式参数等等：
var reg=new RegExp(document.forms[0].exprfiled.value,”g”);
2，表达式模式
1）表达式模式，是指表达式的表达方式与样式， 即 var reg=/表达式/附加参数 中的“表达式”怎样去描述？
2）从规范上讲，表达式模式分为简单模式和复合模式。
3）简单模式：是指通过普通字符的组合来表达的模式，例如
var reg=/abc0d/;
可见简单模式只能表示具体的匹配。
4）复合模式：是指含有通配符来表达的模式，例如：
var reg=/a+b?\w/;
其中的+、?和\w都属于通配符，代表着特殊的含义。因此复合模式可以表达更为抽象化的逻辑。
下面我们着重说一下复合模式中各个通配符的含义及其使用。
5)复合模式中特殊字符的讲解：
1>\：在许多编程语言里面被用作转义符，一般来说
\符号后面如果跟的是普通字符c，那么\c就代表特殊的含义，例如n本来代表字符n，但\n就代表换行。
\符号后面如果跟的是特殊字符c，那么\c就代表普通字符c，例如\一般用作转义符，但\\则调表普通字符\。
Javascript的正则表达式中\的用法与上面相同，只是不同的编程语言，特殊字符表可能不太一样罢了。
2>^：匹配输入字符串的起始端，如果是多行匹配，即表达式的附加参数中含有m，则也在一个换行符后匹配。
例子：/^B/匹配 “Bab Bc ”中的第一个B
例子2：/^B/gm匹配
“Badd B
cdaf
B dsfB”
中的第一行第一个B，第三行中的第一个B

3>$：匹配输入字符创的尾端，如果是多行匹配，即表达式的附加参数中含有m，则也在一个换行符前匹配。
与^的用法相反。
例子：/t$/匹配“bat”中的t，但是不匹配“hate”中的t
例子2：/t$/匹配
“tag at
bat”
中第一行的最后一个t和第二行的t。
4>*：匹配前一个字符0次或多次。
例子：/ab*/匹配“dddabbbbc”中的“abbbb”，也匹配“ddda”中的“a”
5>+：匹配前一个字符1次或多次。
例子：/ab+/匹配“dddabbbbc”中的“abbbb”，但不匹配“ddda”
与后面的{1,}（原型：{n,}）的用法类似
6>?：?的用法比较特殊，一般来说它用来对前一个字符做0次或1次匹配，但是它有另外两种特殊的用法：
如果紧跟在*、+、?和{ }之后，则表示原始匹配的最小次数匹配，例如：
/ba*/本来匹配“bbbaaaa”中的“baaaa”，但是/ba*?/则匹配“bbbaaaa”中的“b”（因为*表示0次或多次匹配，而加?应该表示最少次数匹配，即0次匹配）。
同理：/ba+?/则匹配“baaaa”中的“ba”。
作为语法结构符号，使用于前置断言中，即后面要说到的x(?=y)和x(?!=y)
7>.：小数点中的“.”号，匹配任何一个单独的字符，但是换行符除外。
标准中总共有哪些字符？请参考：字符集
例如：/a.b/匹配“acbaa”中的“acb”，但是不匹配“abbb”。
8>(x)：表示匹配x(并非特指字符x或者特指一个字符，x表示一个字符串)，而且匹配会被记住，在语法中这种()被称为“capturing parentheses ”，即捕捉用的小括号。
匹配会被记住，是因为在表达式提供的函数中，有些函数返回一个数组，该数组会保存所匹配的所有字符串，例如exec()函数。
另外还要注意()中的x被记住的前提是匹配x。
例子1：
var regx=/a(b)c/;
var rs=regx.exec(“abcddd”);
从上面可以看出,/a(b)c/匹配“abcddd”中的“abc”，因为()的原因，b也会记录下来，因此rs返回的数字内容为：
{abc,b}
例子2：
var regx=/a(b)c/;
var rs=regx.exec(“acbcddd”);
rs返回null，因为/a(b)c/不匹配“acbcddd”，所以()中的b不会被记录下来（尽管字符串中含有b）

9>(?:x)：匹配x，但不会记住x，这种格式中的()被称为“non-capturing parentheses ”，即非捕捉用的小括号。
例子：
var regx=/a(?:b)c/;
var rs=regx.exec(“abcddd”);
从上面可以看出,/a(?:b)c/匹配“abcddd”中的“abc”，因为(?:)的原因，b不会记录下来，因此rs返回的数字内容为：
{abc}
10>X(?=y)：匹配x，仅当后面紧跟着y时。如果符合匹配，则只有x会被记住，y不会被记住。
例子：
var regx=/user(?=name)/;
var rs=regx.exec(“The username is Mary”);
结果：匹配成功，而且rs的值为{user}
11>X(?!y)：匹配x，仅当后面不紧跟着y时。如果符合匹配，则只有x会被记住，y不会被记住。
例子：
var regx=/user(?!name)/;
var rs=regx.exec(“The user name is Mary”);
结果：匹配成功，而且rs的值为{user}
例子2：
var regx=/\d+(?!\.)/;
var rs=regx.exec(“54.235”);
结果：匹配成果，rs的值为{5}，不匹配54是因为54后面跟着“.”号，当然235也匹配，但是由于exec方法的行为，235不会被返回
12>x|y：匹配x或y。注意如果x和y都匹配上了，那么只记住x。
例子：
var regx=/beijing|shanghai/;
var rs=regx.exec(“I love beijing and shanghai”);
结果：匹配成功，rs的值为{beijing}，虽然shanghai也匹配，但不会被记住。
13>{n}：匹配前一个字符的n次出现。
n必须是一个非负数，当然如果是一个负数或小数也不会报语法错误。
例子：
var regx=/ab{2}c/;
var rs=regx.exec(“abbcd”);
结果：匹配成功，rs的值为：{abbc}。
14>{n,}：匹配前一个字符的至少n次出现。
例子：
var regx=/ab{2,}c/;
var rs=regx.exec(“abbcdabbbc”);
结果：匹配成功，rs的值为：{abbc}。注意为什么abbbc也符合条件为什么没有被记住，这与exec方法的行为有关，后面会统一讲解。
15>{n,m}：匹配前一个字符的至少n次最多m次的出现。
只要n与m为数字，而且m>=n就不会报语法错误。
例子：
var regx=/ab{2,5}c/;
var rs=regx.exec(“abbbcd”);
结果：匹配成功，rs的值为：{abbbc}。
例子2：
var regx=/ab{2,2}c/;
var rs=regx.exec(“abbcd”);
结果：匹配成功，rs的值为：{abbc}。
例子3：
var regx=/ab(2,5)/;
var rs=regx.exec(“abbbbbbbbbb”);
结果：匹配成功，rs的值为：{abbbbb}，这说明，如果前一个字符出现多于m次，则只匹配m次。另外：
var regx=/ab(2,5)c/;
var rs=regx.exec(“abbbbbbbbbbc”);
结果：匹配失败，rs的值为：null，为什么匹配失败，因为b多于5个则b(2,5)会匹配前5个b，，而表达式/ab(2,5)c/中b后面是c，但字符串中5个b之后还是b所以会报错。
16>[xyz]：xyz表示一个字符串，该模式表示匹配[]中的一个字符，形式上[xyz]等同于[x-z]。
例子：
var regx=/a[bc]d/;
var rs=regx.exec(“abddgg”);
结果：匹配成功，rs的值为：{abd}
例子2：
var regx=/a[bc]d/;
var rs=regx.exec(“abcd”);
结果：匹配失败，rs的值为：null，之所以失败，是因为[bc]表示匹配b或c中的一个，但不会同时匹配。
17>[^xyz]：该模式表示匹配非[]中的一个字符，形式上[^xyz]等同于[^x-z]。
例子：
var regx=/a[^bc]d/;
var rs=regx.exec(“afddgg”);
结果：匹配成功，rs的值为：{afd}
例子2：
var regx=/a[^bc]d/;
var rs=regx.exec(“abd”);
结果：匹配失败，rs的值为：。
18>[\b]：匹配退格键。
19>\b：匹配一个词的边界符，例如空格和换行符等等，当然匹配换行符时，表达式应该附加参数m。
例子：
var regx=/\bc./;
var rs=regx.exec(“Beijing is a beautiful city”);
结果：匹配成功，rs的值为：{ci}，注意c前边的空格不会匹配到结果中，即{ ci}是不正确的。
20>\B：代表一个非单词边界。
例子：
var regx=/\Bi./;
var rs=regx.exec(“Beijing is a beautiful city”);
结果：匹配成功，rs的值为：{ij}，即匹配了Beijing中的ij。
21>\cX，匹配一个控制字符。例如， \cM 匹配一个 Control-M 或
回车符。 x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一
个原义的 ’c’ 字符。（实际的例子还需补充）
21>\d：匹配一个数字字符，等同于[0-9]。
例子：
var regx=/user\d/;
var rs=regx.exec(“user1”);
结果：匹配成功，rs的值为：{user1}
22>\D：匹配一个非数字字符，等同于[^0-9]。
例子：
var regx=/user\D/;
var rs=regx.exec(“userA”);
结果：匹配成功，rs的值为：{userA}
23>\f：匹配一个换页符。
24>\n：匹配一个换行符。因为是换行符，所以在表达式中要加入m参数。
例子：
var regx=/a\nbc/m;
var str=“a
bc”;
var rs=regx.exec(str);
结果：匹配成功，rs的值为：{ }，如果表达式为/a\n\rbc/，则不会被匹配，因此在一般的编辑器中一个”Enter”键代表着“回车换行”，而非“换行回车”，至少在textarea域中是这样的。
25>\r：匹配一个回车符
26>\s：匹配一个空格符，等同于[ \f\n\r\t\v\u00A0\u2028\u2029].
例子：
var regx=/\si/;
var rs=regx.exec(“Beijing is a city”);
结果：匹配成功，rs的值为：{ i}
27>\S：匹配一个非空格符，等同于[ ^\f\n\r\t\v\u00A0\u2028\u2029].
例子：
var regx=/\Si/;
var rs=regx.exec(“Beijing is a city”);
结果：匹配成功，rs的值为：{ei}
28>\t：匹配一个tab
例子：
var regx=/a\tb/;
var rs=regx.exec(“a bc”);
结果：匹配成功，rs的值为： {a bc}
29>\v：匹配一个竖向的tab
30>\w：匹配一个数字、_或字母表字符，即[A-Za-z0-9_ ]。
例子：
var regx=/\w/;
var rs=regx.exec(“$25.23”);
结果：匹配成功，rs的值为：{2}
31>\W：匹配一个非数字、_或字母表字符，即[^A-Za-z0-9_ ]。
例子：
var regx=/\w/;
var rs=regx.exec(“$25.23”);
结果：匹配成功，rs的值为：{$}
32>\n：注意不是\n，这里n是一个正整数，表示匹配第n个()中的字符。
例子：
var regx=/user([,-])group\1role/;
var rs=regx.exec(“user-group-role”);
结果：匹配成功，rs的值为：{user-group-role,-}，同样对user,group,role的匹配也是成功的，但像user-group,role等就不对了。
33>\0：匹配一个NUL字符。
34>\xhh：匹配一个由两位16进制数字所表达的字符。
35>\uhhhh：匹配一个由四位16进制数字所表达的字符。

3，表达式操作
1）表达式操作，在这里是指和表达式相关的方法，我们将介绍六个方法。
2）表达式对象（RegExp）方法：
1>exec(str)，返回str中与表达式相匹配的第一个字符串，而且以数组的形式表现，当然如果表达式中含有捕捉用的小括号，则返回的数组中也可能含有()中的匹配字符串，例如：
var regx=/\d+/;
var rs=regx.exec(“3432ddf53”);
返回的rs值为：{3432}
var regx2=new RegExp(“ab(\d+)c”);
var rs2=regx2.exec(“ab234c44”);
返回的rs值为：{ab234c,234}
另外，如果有多个合适的匹配，则第一次执行exec返回一个第一个匹配，此时继续执行exec，则依次返回第二个第三个匹配。例如：
var regx=/user\d/g;
var rs=regx.exec(“ddduser1dsfuser2dd”);
var rs1=regx.exec(“ddduser1dsfuser2dd”);
则rs的值为{user1}，rs的值为{rs2}，当然注意regx中的g参数是必须的，否则无论exec执行多少次，都返回第一个匹配。后面还有相关内容涉及到对此想象的解释。
2>test(str)，判断字符串str是否匹配表达式，返回一个布尔值。例如：
var regx=/user\d+/g;
var flag=regx.test(“user12dd”);
flag的值为true。
3）String对象方法
1>match(expr)，返回与expr相匹配的一个字符串数组，如果没有加参数g，则返回第一个匹配，加入参数g则返回所有的匹配
例子：
var regx=/user\d/g;
var str=“user13userddduser345”;
var rs=str.match(regx);
rs的值为：{user1,user3}
2>search(expr)，返回字符串中与expr相匹配的第一个匹配的index值。
例子：
var regx=/user\d/g;
var str=“user13userddduser345”;
var rs=str.search(regx);
rs的值为：0
3>replace(expr,str)，将字符串中匹配expr的部分替换为str。另外在replace方法中，str中可以含有一种变量符号$，格式为$n，代表匹配中被记住的第n的匹配字符串（注意小括号可以记忆匹配）。
例子：
var regx=/user\d/g;
var str=“user13userddduser345”;
var rs=str.replace(regx,”00”);
rs的值为：003userddd0045
例子2：
var regx=/u(se)r\d/g;
var str=“user13userddduser345”;
var rs=str.replace(regx,”$1”);
rs的值为：se3userdddse45
对于replace(expr,str)方法还要特别注意一点，如果expr是一个表达式对象则会进行全局替换（此时表达式必须附加参数g，否则也只是替换第一个匹配），如果expr是一个字符串对象，则只会替换第一个匹配的部分，例如：
var regx=“user”
var str=“user13userddduser345”;
var rs=str.replace(regx,”00”);
rs的值为： 0013userddduser345
4>split(expr)，将字符串以匹配expr的部分做分割，返回一个数组，而且表达式是否附加参数g都没有关系，结果是一样的。
例子：
var regx=/user\d/g;
var str=“user13userddduser345”;
var rs=str.split(regx);
rs的值为：{3userddd,45}
4，表达式相关属性
1）表达式相关属性，是指和表达式相关的属性，如下面的形式：
var regx=/myexpr/;
var rs=regx.exec(str);
其中，和表达式自身regx相关的属性有两个，和表达式匹配结果rs相关的属性有三个，下面将逐一介绍。
2）和表达式自身相关的两个属性：
1>lastIndex，返回开始下一个匹配的位置，注意必须是全局匹配（表达式中带有g参数）时，lastIndex才会有不断返回下一个匹配值，否则该值为总是返回第一个下一个匹配位置，例如：
var regx=/user\d/;
var rs=regx.exec(“sdsfuser1dfsfuser2”);
var lastIndex1=regx.lastIndex;
rs=regx.exec(“sdsfuser1dfsfuser2”);
var lastIndex2=regx.lastIndex;
rs=regx.exec(“sdsfuser1dfsfuser2”);
var lastIndex3=regx.lastIndex;
上面lastIndex1为9，第二个lastIndex2也为9，第三个也是9；如果regx=/user\d/g，则第一个为9，第二个为18，第三个为0。
2>source，返回表达式字符串自身。例如：
var regx=/user\d/;
var rs=regx.exec(“sdsfuser1dfsfuser2”);
var source=regx.source;
source的值为user\d
3）和匹配结果相关的三个属性：
1>index，返回当前匹配的位置。例如：
var regx=/user\d/;
var rs=regx.exec(“sdsfuser1dfsfuser2”);
var index1=rs.index;
rs=regx.exec(“sdsfuser1dfsfuser2”);
var index2=rs.index;
rs=regx.exec(“sdsfuser1dfsfuser2”);
var index3=rs.index;
index1为4，index2为4，index3为4，如果表达式加入参数g，则index1为4，index2为13，index3会报错（index为空或不是对象）。
2>input，用于匹配的字符串。例如：
var regx=/user\d/;
var rs=regx.exec(“sdsfuser1dfsfuser2”);
var input=rs.input;
input的值为sdsfuser1dfsfuser2。
3>[0]，返回匹配结果中的第一个匹配值，对于match而言可能返回一个多值的数字，则除了[0]外，还可以取[1]、[2]等等。例如：
var regx=/user\d/;
var rs=regx.exec(“sdsfuser1dfsfuser2”);
var value1=rs[0];
rs=regx.exec(“sdsfuser1dfsfuser2”);
var value2=rs[0];
value1的值为user1,value2的值为user2
5，实际应用

1）实际应用一描述：有一表单，其中有一个“用户名”input域要求：汉字，而且不能少于2个汉字，不能多于4个汉字。实现：<script>function checkForm(obj){     var username=obj.username.value;     var regx=/^[\u4e00-\u9fa5]{2,4}$/g     if(!regx.test(username)){               alert(“Invalid username!”);               return false;      }     return true;}</script><form name=“myForm”onSubmit=“return checkForm(this)”>    <input type=“text” name=“username”/>    <input type=“submit” vlaue=“submit”/></form>2）实际应用二描述：给定一个含有html标记的字符串，要求将其中的html标记去掉。实现：<script>function toPlainText(htmlStr){     var regx=/<[^>]*>|<\/[^>]*>/gm;     var str=htmlStr.replace(regx,”");     return str;}</script><form name=“myForm”>    <textarea id=“htmlInput”></textarea>    <input type=“button” value=“submit” onclick=“toPlainText(document.getElementById(‘htmlInput’).value”/></form>

三，小结
1，Javascript正则表达式，我想在一般的程序员之中，使用者应该不是很多，因为我们处理的页面一般都不是很复杂，而复杂的逻辑一般我们都在后台处理完成了。但是目前趋势已经出现了扭转，富客户端已经被越来越多的人接受，而Javascript就是其中的关键技术，对于复杂的客户端逻辑而言，正则表达式的作用也是很关键的，同时它也是Javascript高手必须要掌握的重要技术之一。
2，为了能够便于大家对前面讲述的内容有一个更为综合和深刻的认识，我将前面的一些关键点和容易犯糊涂的地方再系统总结一下，这部分很关键！
总结1：附件参数g的用法
表达式加上参数g之后，表明可以进行全局匹配，注意这里“可以”的含义。我们详细叙述：
1）对于表达式对象的exec方法，不加入g，则只返回第一个匹配，无论执行多少次均是如此，如果加入g，则第一次执行也返回第一个匹配，再执行返回第二个匹配，依次类推。例如
var regx=/user\d/;
var str=“user18dsdfuser2dsfsd”;
var rs=regx.exec(str);//此时rs的值为{user1}
var rs2=regx.exec(str);//此时rs的值依然为{user1}
如果regx=/user\d/g；则rs的值为{user1}，rs2的值为{user2}
通过这个例子说明：对于exec方法，表达式加入了g，并不是说执行exec方法就可以返回所有的匹配，而是说加入了g之后，我可以通过某种方式得到所有的匹配，这里的“方式”对于exec而言，就是依次执行这个方法即可。
2）对于表达式对象的test方法，加入g于不加上g没有什么区别。
3）对于String对象的match方法，不加入g，也只是返回第一个匹配，一直执行match方法也总是返回第一个匹配，加入g，则一次返回所有的匹配（注意这与表达式对象的exec方法不同，对于exec而言，表达式即使加上了g，也不会一次返回所有的匹配）。例如：
var regx=/user\d/;
var str=“user1sdfsffuser2dfsdf”;
var rs=str.match(regx);//此时rs的值为{user1}
var rs2=str.match(regx);//此时rs的值依然为{user1}
如果regx=/user\d/g，则rs的值为{user1,user2}，rs2的值也为{user1,user2}
4）对于String对象的replace方法，表达式不加入g，则只替换第一个匹配，如果加入g，则替换所有匹配。（开头的三道测试题能很好的说明这一点）
5）对于String对象的split方法，加上g与不加g是一样的，即：
var sep=/user\d/;
var array=“user1dfsfuser2dfsf”.split(sep);
则array的值为{dfsf, dfsf}
此时sep=/user\d/g，返回值是一样的。
6）对于String对象的search方法，加不加g也是一样的。
总结2：附加参数m的用法
附加参数m，表明可以进行多行匹配，但是这个只有当使用^和$模式时才会起作用，在其他的模式中，加不加入m都可以进行多行匹配（其实说多行的字符串也是一个普通字符串），我们举例说明这一点
1）使用^的例子
var regx=/^b./g;
var str=“bd76 dfsdf
sdfsdfs dffs
b76dsf sdfsdf”;
var rs=str.match(regx);
此时加入g和不加入g，都只返回第一个匹配{bd}，如果regx=/^b./gm，则返回所有的匹配{bd,b7}，注意如果regx=/^b./m，则也只返回第一个匹配。所以，加入m表明可以进行多行匹配，加入g表明可以进行全局匹配，综合到一起就是可以进行多行全局匹配
2）使用其他模式的例子，例如
var regx=/user\d/;
var str=“sdfsfsdfsdf
sdfsuser3 dffs
b76dsf user6”;
var rs=str.match(regx);
此时不加参数g，则返回{user3}，加入参数g返回{user3,user6}，加不加入m对此没有影响。
3）因此对于m我们要清楚它的使用，记住它只对^和$模式起作用，在这两种模式中，m的作用为：如果不加入m，则只能在第一行进行匹配，如果加入m则可以在所有的行进行匹配。我们再看一个^的例子
var regx=/^b./;
var str=“ret76 dfsdf
bjfsdfs dffs
b76dsf sdfsdf”;
var rs=str.match(regx);
此时rs的值为null，如果加入g，rs的值仍然为null，如果加入m，则rs的值为{bj}（也就是说，在第一行没有找到匹配，因为有参数m，所以可以继续去下面的行去找是否有匹配），如果m和g都加上，则返回{bj,b7}（只加m不加g说明，可以去多行进行匹配，但是找到一个匹配后就返回，加入g 表明将多行中所有的匹配返回，当然对于match方法是如此，对于exec呢，则需要执行多次才能依次返回）
总结3：在HTML的textarea输入域中，按一个Enter键，对应的控制字符为“\r\n”，即“回车换行”，而不是“\n\r”，即“换行回车”，我们看一个前面我们举过的例子：
var regx=/a\r\nbc/;
var str=“a
bc”;
var rs=regx.exec(str);
结果：匹配成功，rs的值为：{ }，如果表达式为/a\n\rbc/，则不会被匹配，因此在一般的编辑器中一个”Enter”键代表着“回车换行”，而非“换行回车”，至少在textarea域中是这样的。

您可能感兴趣的文章

• Web 前端优化最佳实践之 JavaScript 篇
• 31个Javascript的实用工具
• 高质量JavaScript代码书写基本要点|值得收藏
• javascript的正则表达式集合
• js入门学习：Javascript的学习笔记
• 学习JavaScript三件必须了解的事
• JavaScript操作iframe里的dom
• javascript中的107个基础知识收集整理
• JavaScript面向对象之静态与非静态类
• JavaScript trim函数的十二种实现

您可能感兴趣的文章

• JavaScript面向对象之静态与非静态类
• Web 前端优化最佳实践之 JavaScript 篇
• 31个Javascript的实用工具
• javascript 正则表达式-替换
• js入门学习：Javascript的学习笔记
• 学习JavaScript三件必须了解的事
• JavaScript操作iframe里的dom
• WordPress分类列表函数:wp_list_categories
• javascript中的107个基础知识收集整理
• jQuery中10个非常有用的遍历函数[4]

一、在页面中怎么添加javascript
  <script language=”javascript”>   //这行是javascript脚本标记，斜杠后面的就是注释了
  document.write(”在页面显示的javascript”) //在页面显示一句话
  </script>
/*这也是注释*/

二、javascript的数据类型
1、字符串（string）：字符串就是由一连串的字符组成的序列。包括字母、数字以及标点符号。当然还可以是汉字等。简单一点就是表示文本信息。

2、数字（number）：数字又分为两类：整型数字和浮点型数字。
    整数包括正整数，零和负整数。
    javascript中的数字可以使用十进制、八进制和十六进制来书写。方法如下：
    十进制：15（直接写数字即可）
    八进制：017（要以零做为引导数字）
    十六进制：0xf（要以0x做为引导数字）
    浮点型数字也叫实数，为了方便，也可以使用科学记数法来表示：
    1.13e1、1.5e3（等价于1.5乘10的3次方）
    javascript的数字范围大约为10的负308次方到10的308次方之间。
    javascript中还有一个特殊的数字值NaN（not a number），javascript 用nan表示这个无意义的结果。

3、布尔值（boolean）：true和false，在计算机中一般用1表示true，用0表示false。

三、alert()方法的使用：
  <script language=”javascript”>
  alert(”在页面上显示警告对话框”);
  </script>
  alert()是javascript产生一个带确认按钮的对话框，上面显示括号内的信息。

四、confirm()方法的使用：
  <script language=”javascript”>
  confirm(”在页面上显示确认对话框”);
  </script>
  confirm()和alert()差不多，不同的就是多了个取消按钮。按确定返回true，按取消返回false。
  <script language=”javascript”>
  var con;
  con=confirm(”你们喜欢这样的教程吗？”);
  if (con==true) alert(”喜欢”);
  else alert(”不喜欢”);
  </script>

五、prompt()方法的使用：
  <script language=”javascript”>
    var name,age;
    name=prompt(”请问您的名字？”);
    alert(name);
    age=prompt(”多大？”);
    alert(age);
   </script>
    它不但可以显示信息，而且可以输入信息。

六、javascript变量
    用var加上为变量指定的名称来声明变量，变量类型可以通过给变量赋值来确定。由于javascript采用的是弱类型的样式，对数据类型要求不太严格，在程序执行的过程中，会根据需要自动转换。
字符串变量，可以通过“变量名.length”来获得该变量中字符串的长度，如
    var name;
    name=”javascript”;
    那么name.length的值就是10。
    若在一行中创建多个变量时，记住用逗号来隔开变量名。各语句用分号隔开。(使用分号是个好习惯, 大家在学习的时候尽量养成加分号的习惯)
    类型转换：javascript允许在程序中改变变量的类型，最常见的两个类型转换符Number和String。
    Number(x)是字符型值——〉数字值型。String与之相反。相对于javascript的自动类型转换，可以将这种转换成为强制类型转换。（强制类型转换需要在javascript1.2及以上版本才可以使用）

变量的命名：
1.必须以字母或下划线开头，中间可以有字母数字和或下划线。不能使用空格、+、-等其他符号。
    作为连字符外，变量名称不能有空格、（＋）、（－）、（，）或其它符号。
2.不能使用JavaScript中的关键字作为变量。
  （javascript变量名是区分大小写的，name和Name是不一样的。）

对于变量还有一个重要性──那就是变量的作用域。在JavaScript中同样有全局变量和局部变量。全局变量是定义在所有函数体之外，其作用范围是整个函数；而局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。
如果局部变量和全局变量重名，则局部变量优先。js没有块级作用域。函数中声明的所有的变量，作用域是相同的。

变量的类型规则
javascript是无类型的，他的变量可以放任何数据类型的值。
变量的声明
在javascript程序中，在使用变量之前，必须先声明它。变量是使用关键字var声明的。而实际上，不一定要先声明变量，在某些情况下，变量声明是可选的。
    var i；
    var sum；
也可以使用一个var关键字声明多个变量；
    var i，sum；
而且还可以将变量声明和变量初始化绑定在一起：
    var message = ‘hello’；
    var i = 0，j=0，k=0；
    由var声明的变量是永久的，因为各浏览器对是否可以删除全局性的变量的态度是不同的，（都可以删除局部变量）为了安全，最好假设全局变量不可删除。
    可以使用var多次声明同一个变量，当你给一个没有声明的变量赋值时，js会自动用哪个变量为你创建一个全局变量。如果你想在函数内部创建一个局部变量。那就必须用var在函数内部声明。

七、javascript表达式和运算符
表达式：在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常由表达式来完成，可以说它是变量、常量、布尔及运算符的集合，因此表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。
1.算术运算符：+（加） 、-（减）、 *（乘）、 /（除）、 %（取模） -（取反）、++（递加1）、–（递减1）。
例：11%2=1 ； 如果x=2   ++x+4=7     x+++4=6（++x是先执行加1，x++是执行完语句之后x在自加1)
例子：
<script>
var i=0, j=0;
alert(i++ + ” ” + ++j + ” ” + i);
// 输出 “0 1 1”，可见i++是先输出了i，然后进行运算，而++j是先对j进行了自加运算，然后输出j的值
</script>
2.比较运算符：<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)
               （基本操作过程是，首先对它的操作数进行比较，然后再返回一个true或False值。）
3.逻辑运算符：!（取反)、&=（与之后赋值）、 &（逻辑与）、 |=（或之后赋值）、 |（逻辑或）、^=（异或之后赋值）、 ^（逻辑异或）、 ?:（三目操作符）、||（或）、&& （与）==(等于)、|=(不等于)。
4.字符串运算符：只有+   （”my“+”javascript“结果等于”my javascript“）
5.赋值运算符：即=，将右边的值赋给左边的变量。
6.条件运算符：（？：）例：status=(age>=18)?”adult”:”child”;如果大于18，则表达式的值为adult。
7.typeof()运算符：用来返回变量或数据的类型。

八、IF语句。
if (条件)
语句段１
else
语句段２
功能：若表达式为true，则执行语句段１；否则执行语句段２。
说明：
if -else 语句是JavaScript中最基本的控制语句，通过它可以改变语句的执行顺序。
表达式中必须使用关系语句，来实现判断，它是作为一个布尔值来估算的。
它将零和非零的数分别转化成false和true。
若if后的语句有多行，则必须使用花括号将其括起来。

九、window.com()的用法
1、基本语法
  window.open(pageURL,name,parameters)
  其中：
    pageURL 为子窗口路径
    name 为子窗口句柄
    parameters 为窗口参数(各参数用逗号分隔)
2. 窗口参数
   其中yes/no也可使用1/0； value为具体的数值，单位象素。
   toolbar=yes,no 是否显示工具条
   location=yes,no 是否显示网址栏
   directories=yes,no 是否显示导航条
   status=yes,no 是否显示状态条
   menubar=yes,no 是否显示菜单
   scrollbars=yes,no 是否显示滚动条
   resizable=yes,no 是否可以改变公告窗口大小
   copyhistory=yes,no 是否显示历史按钮
   width=value 公告窗口的宽
   height=value 公告窗口的高
   left=value 公告窗口的左上顶点距屏幕左边100像素
   top=value 公告窗口的左上顶点距屏幕顶端100像素
例：
<script language=”javascript”>
<!–
window.open(”00000.html”,”newwindow”,”toolbar=no,location=no,directories=no,status=no,menubar=no,
scrollbars=no,resizable=no,copyhistory=no,width=500,height=500,left=100,top=100″)  //–>
</script>

十、for循环。另外就是数据类型。既for  in
将字符串转换为数值：
javascript语言提供两个内置函数将表示数值的字符串转换为真实的数值：parseInt()和parseFloat()。
为了使用这些函数，需要将进行转换的字符串作为参数传入函数，例：
    parseInt(”42″)     //result=42
    parseInt(”42.33″)   //result=42
不过是浮点数还是整数，函数返回的值都是整数。不存在四舍五入，小数点和它后面的数字将被舍弃。
而parseFloat()则返回浮点数（如果是整数就返回整数），例：
    parseFloat(”42″)   //result=42
    parseFloat(”42.33″) //result=42.33
如果在某处需要进行字符串的转换，只需将函数插入该初即可。如：
    3+3+parseInt(”3″)   //result=9

将数值转换为字符串：
虽然当遇到表达式中含有混合数据类型时，js会倾向于字符串。但为了防止潜在的问题发生，最好先转换以下。在数值中加入空字符串就可以把数值转换为字符串了：
(””+2500)         //result=”2500″
(””+2500).length   //result=4

For循环:
javascript中最常用的循环结构称之为for循环，关键词放在循环结构的开始位置。正式语法结构如下：
for ([initial expression];[condition];[update expression]){
  statement[s] inside loop
}
例：
for(var i=0;i<9;i++)
{
n+=i
myfunc(n)
}
for…in循环:
这个语句完全依照变量var所设定的值决定运行次数。你可以用for…in语句在一个对象或一个数组上建立循环
for(var in [obj | array])
{
statements
}
例：
<script language=”javascript”>
document.write(”The properties of the document object”)
for(var element in document){
document.write(element+”=”+document[element])
}
</script>

十一、鼠标事件
主要内容就是基于鼠标的事件,有如下几种：
1.mouseover（鼠标移至）
2.mouseout（鼠标移出）
3.mousemove（鼠标移动）
4.mousedown（鼠标按下）
5.mouseup（鼠标弹起）
6.click（单击）
7.dblclick（双击）
例子：
<html>
<head>
<title>test</title>
<script language=”javascript”>
function text_onmouseover(){
mytext.style.fontSize=”30pt”;
mytext.style.color=”red”;
mytext.style.fontStyle=”italic”;
}
function text_onmouseout(){
mytext.style.fontSize=”20pt”;
mytext.style.color=”blue”;
mytext.style.fontStyle=”normal”;
}
</script>
</head>
<body>
<p id=mytext onmouseover=”text_onmouseover()” onmouseout=”text_onmouseout()”>http://www.javascript.com.cn</p>
<p>看看字体样式有什么变化</p>
</body>
</html>
8.mouseDown事件和mouseUp事件
    大家知道，mouseDown事件和mouseUp事件的组合就是click事件，但是如果在链接上按下鼠标，并移到链接之外在放开鼠标，那么就只有mouseDown事件了。这两个事件可以增加图标按钮的图像效果，
    至于mouseDown和mouseUp的属性，它们是伴随着Click事件发生的，这和keyPress事件是keyDown事件和keyUp事件组合而成的机制是一样的，这3个鼠标事件也有modifier属性。
    （注意：如果在onClick事件处理中使用return语句，它可以接收任何数值。只要这个值不是False，浏览器就可以完成提交。但如果浏览器得到的是False值，表单提交操作就会被取消。）
9.Click事件和dbClick事件
    onClick是单击事件，onDblClick是双击事件，而实际上很难分清连续的单击和双击。它们会互相干扰。而且在ie和其他浏览器的情况还有不同。有的浏览器是双击事件的每一次单击都会触发单击事件，而在ie中，只有双击事件的第一次单击会触发单击事件。不管怎么样，单击事件都不会自动的取消或被忽略。因此，如果想使用单击和双击一个链接时触发两个完全不同的过程，则必须通过编程来延迟单击的动作知道双击。
<script>
var timer=null;
document.onclick=new Function(”timer=setTimeout(click,500)”)
document.ondblclick=new Function(”clearTimeout(timer);dblclick()”)
function click(){
alert(”click”)
}
function dblclick(){
alert(”dblclick”)
}
</script>

十二、javascript函数.
函数是有function加函数名和一对带有参数括号,以及大括号组成的，其中大括号里是主体javascript语句.
例:
function hanshuname(js) //hanshuname是函数名.
{
document.write(js,”<br>”); //是函数的主体语句.
}
函数可以嵌套,如下:
function qiantao(a,b){
function lqiantao(x){return x*x;}
return Math.sqrt(lqiantao(a)+lqiantao(b));
}
函数还可以作为数据来应用,因此可以象处理其他数据那样来处理函数,如:赋值,存储,传递等.
例:
    function zhi(x){return x*x;}
实际上,函数名没有什么意义,不过是保存函数的变量名而已.
    a=zhi(6);//a存放的是数字36;
    b=zhi;//现在b和zhi引用同一个函数.
    c=b(5);//c存放的是数字25.
在一个函数体内,标识符arguments总是具有特殊含义,它是调用对象的一个特殊属性,用来引用实际参数对象.这个实际参数对象具有大量有用的属性.除此之外,它还兼有数组的角色.
尽管定义javascript函数时都有固定的参数，但调用这个函数时,传递给它的参数数目却可以是任意的，数组arguments[]允许完全存取那些实际参数值.另外,arguments有一个length属性,看如下例子:
    function zhi(x,y,z)
    {
    if(arguments.length !=3){
    alert(”function zhi called with”+arguments.length+”arguments,but it expects 3 arguments.”);
    return null;
    }
    }
数组arguments[ ]还为javascript函数开发了一项重要的可能性,既可以将函数编写为能够接受任意数目的实际参数.
    function zhi()
    {
    var m=Number.NEGATIVE_INFINITY;
    //遍历所有参数
    //检索并记忆最大的一个.
    for(var i=0;i<arguments.length;i++)
    if(arguments>m)m=arguments;
    //返回最大的参数值.
    return m;
    }
    var lazgest=zhi(1,10,100,2,3,1000,4,5,10000,6);
    也可以使用arguments[]数组来编写一个函数.

    调用js函数
    <a href=”#” onClick=”functionName()”>Link text</a>
    <a href=”javascript:functionName()”>Link text</a>

您可能感兴趣的文章

• 学习JavaScript三件必须了解的事
• Web 前端优化最佳实践之 JavaScript 篇
• 31个Javascript的实用工具
• javascript 正则表达式-替换
• 高质量JavaScript代码书写基本要点|值得收藏
• JavaScript操作iframe里的dom
• javascript中的107个基础知识收集整理
• JavaScript面向对象之静态与非静态类
• JavaScript trim函数的十二种实现

首先开发者必须知道如何正确地使用JavaScript语言。很多开发者还不熟悉这个语言时，就开始使用它，所以会衍生很多问题。

对开发者而言，必须了解语言特性后，再开始运用它。因为JavaScript是非常强大的语言，开发过程要处理很多工作，只有真正了解语言特性，才可以拥有更多生产力，开发者才能更快乐。
 
JavaScript是一种函数语言(Functional Language)，可用来控制动态对象，也提供开发者熟悉的语法，这反映出它的功能特殊性，从对象角度来看，其实JavaScript语言比Java、C++或C#语言更优秀。

但是很多人痛恨JavaScript，其实是因为不了解JavaScript所工作的环境，这正是开发者必须知道的第二件事。开发者之所以痛恨JavaScript，其实他们痛恨的是浏览器提供的DOM组件。DOM的确是一种恐怖的API，若将任何开发语言的标准函式换成DOM以后，任谁都会痛恨这个语言，这就是JavaScript的处境。

浏览器是JavaScript的工作环境，开发者唯有了解浏览器的特性，才能顺利掌握它。新一代的JavaScript标准ECMAScript 5已经初露锋芒了，旨在用更合理的API来取代DOM。

最后一项重点是JavaScript的安全知识。对浏览器应用程序而言，安全永远是最重要的。因为不论用户是否清楚网页程序的确切用途，浏览器都会执行程序，而网页程序很容易加载用户所不知道的程序片段。

我们总是在功能强大和危险之间挣扎，浏览器的功能有限是好事。这样就能区分出程序到底考虑用户还是网站的利益，这是浏览器的重要创新。可是，浏览器只能分辨出使用者、网站或浏览器本身的意图，无法分辨出其他程序的意图，例如浏览器无法预料跨站脚本攻击(XSS)可以透过混搭程序渗透到网页中。

在混搭的网络应用中， 每一个外挂组件代表了不同的利益和意图。软件界过去几十年一直在寻找这类组件，JavaScript和浏览器是第一个成功者。但是，浏览器最大问题是让每一个组件取得所有权限，所以混搭组件会衍生出跨站脚本攻击。

您可能感兴趣的文章

• js入门学习：Javascript的学习笔记
• Web 前端优化最佳实践之 JavaScript 篇
• 31个Javascript的实用工具
• javascript 正则表达式-替换
• 高质量JavaScript代码书写基本要点|值得收藏
• JavaScript操作iframe里的dom
• javascript中的107个基础知识收集整理
• JavaScript面向对象之静态与非静态类
• JavaScript trim函数的十二种实现

JS操作iframe里的dom可是使用contentWindow属性，contentWindow属性是指指定的frame或者iframe所在的window对象，在IE中iframe或者frame的contentWindow属性可以省略，但在Firefox中如果要对iframe对象进行编辑则，必须指定contentWindow属性，contentWindow属性支持所有主流浏览器。

相关的还有一个contentDocument属性，这个属性是指指定的frame或者iframe所在的document对象，但是悲剧的是，ie6-ie7并不支持这个属性。

ie6和ie7还可以使用document.frames["iframe Name"]或者document.frames["iframe ID"]来获取相当于contentWindow属性，而firefox和chrome并不支持这些document.frames["iframe Name"]或者document.frames["iframe ID"]，但是window.frames["iframe Name"]或window.frames[index]（index是索引值）也支持所有主流浏览器；

这个可以看实例：http://www.css88.com/demo/iframe-correspond/index-test.html

我们知道document对象是window对象的一个子对象，所以我们可以通过document.getElementById(“iframe ID”).contentWindow.document来获取iframe的document对象，相当于contentDocument属性。

二、iframe里的js操作父级窗口的dom

iframe里的js要操作父级窗口的dom，必须搞懂几个对象：

parent是父窗口（如果窗口是顶级窗口，那么parent==self==top），

top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe），

self是当前窗口（等价window），

opener是用open方法打开当前窗口的那个窗口；

这样iframe里的js要操作父级窗口的dom可以通过parent，top这些对象来获取父窗口的window对象，例如：

parent.document.getElementById(“dom ID”)；

parent，top还能调用父级窗口的的js方法，比如，getIFrameDOM(iID）是父级窗口的一个方法，那么iframe里可以使用parent.getIFrameDOM(“wIframeA”)来调用父级窗口的getIFrameDOM(iID）方法；

————————————————

查看一下JS操作iframe里的dom的demo：http://www.css88.com/demo/iframe-correspond/

虽然iframe在现在WEB开发中越来越少用到了，但是iframe还有很多值得使用的地方，比如使用iframe解决跨域问题.关于iframe还有很多东西要学习，比如iframe自适应高度，使用iframe解决跨域问题，iframe加载问题，iframe加载性能问题等等，还有很多东西要学习，

您可能感兴趣的文章

• Web 前端优化最佳实践之 JavaScript 篇
• 31个Javascript的实用工具
• javascript 正则表达式-替换
• 高质量JavaScript代码书写基本要点|值得收藏
• js入门学习：Javascript的学习笔记
• 学习JavaScript三件必须了解的事
• javascript中的107个基础知识收集整理
• jsDom 事件处理函数
• JavaScript面向对象之静态与非静态类
• JavaScript trim函数的十二种实现

,则innerHTML的值就是:how are you
58.innerTEXT的值和上面的一样,只不过不会把这种标记显示出来.
59.contentEditable可设置元素是否可被修改,isContentEditable返回是否可修改的状态.
60.isDisabled判断是否为禁止状态.disabled设置禁止状态
61.length取得长度,返回整型数值
62.addBehavior()是一种JS调用的外部函数文件其扩展名为.htc
63.window.focus()使当前的窗口在所有窗口之前.
64.blur()指失去焦点.与FOCUS()相反.
65.select()指元素为选中状态.
66.防止用户对文本框中输入文本:onfocus=”this.blur()”
67.取出该元素在页面中出现的数量:document.all.tags(“div(或其它HTML标记符)”).length
68.JS中分为两种窗体输出:模态和非模态.window.showModaldialog(),window.showModeless()
69.状态栏文字的设置:window.status=’文字’,默认的状态栏文字设置:window.defaultStatus = ‘文字.’;
70.添加到收藏夹:external.AddFavorite(“http://www.dannyg.com”t;,”jaskdlf”);
71.JS中遇到脚本错误时不做任何操作:window.onerror = doNothing; 指定错误句柄的语法为:window.on
error = handleError;
72.JS中指定当前打开窗口的父窗口:window.opener,支持opener.opener…的多重继续.
73.JS中的self指的是当前的窗口
74.JS中状态栏显示内容:window.status=”内容”
75.JS中的top指的是框架集中最顶层的框架
76.JS中关闭当前的窗口:window.close();
77.JS中提出是否确认的框:if(confirm(“Are you sure?”))else{alert(“Not Ok”);}
78.JS中的窗口重定向:window.navigate(“http://www.sina.com.cn”t;);
79.JS中的打印:window.print()
80.JS中的提示输入框:window.prompt(“message”,”defaultReply”);
81.JS中的窗口滚动条:window.scroll(x,y)
82.JS中的窗口滚动到位置:window.scrollby
83.JS中设置时间间隔:setInterval(“expr”,msecDelay)或setInterval(funcRef,msecDelay)或setTimeou
t
84.JS中的模态显示在IE4+行,在NN中不行:showModalDialog(“URL”[,arguments][,features]);
85.JS中的退出之前使用的句柄:function verifyClose(){event.returnValue=”we really like you and ho
pe you will stay longer.”;}} window.onbeforeunload=verifyClose;
86.当窗体第一次调用时使用的文件句柄:onload()
87.当窗体关闭时调用的文件句柄:onunload()
88.window.location的属性: protocol(http:),hostname(example.com),port(80),host(e
xample.com:80),pathname(“/a/a.html”),hash(“#giantGizmo”,指跳转到相应的锚记),href(全部的信
息)
89.window.location.reload()刷新当前页面.
90.window.history.back()返回上一页,window.history.forward()返回下一页,window.history.go(返回
第几页,也可以使用访问过的URL)
91.document.write()不换行的输出,document.writeln()换行输出
92.document.body.noWrap=true;防止链接文字折行.
93.变量名.charAt(第几位),取该变量的第几位的字符.
94.”abc”.charCodeAt(第几个),返回第几个字符的ASCii码值.
95.字符串连接:string.concat(string2),或用+=进行连接
96.变量.indexOf(“字符”,起始位置),返回第一个出现的位置(从0开始计算)
97.string.lastIndexOf(searchString[,startIndex])最后一次出现的位置.
98.string.match(regExpression),判断字符是否匹配.
99.string.replace(regExpression,replaceString)替换现有字符串.
100.string.split(分隔符)返回一个数组存储值.
101.string.substr(start[,length])取从第几位到指定长度的字符串.
102.string.toLowerCase()使字符串全部变为小写.
103.string.toUpperCase()使全部字符变为大写.
104.parseInt(string[,radix(代表进制)])强制转换成整型.
105.parseFloat(string[,radix])强制转换成浮点型.
106.isNaN(变量):测试是否为数值型.
107.定义常量的关键字:const,定义变量的关键字:var

您可能感兴趣的文章

• Web 前端优化最佳实践之 JavaScript 篇
• 31个Javascript的实用工具
• javascript 正则表达式-替换
• 高质量JavaScript代码书写基本要点|值得收藏
• js入门学习：Javascript的学习笔记
• 学习JavaScript三件必须了解的事
• JavaScript操作iframe里的dom
• 2009年度最佳jQuery插件整理
• JavaScript面向对象之静态与非静态类
• JavaScript trim函数的十二种实现

不要告诉我你没有见过上面的代码，说实话，上面的代码确实写得快，调用简单，如果前两个函数还不足以引发你的愤慨，那么第三个函数应该让你有点想问候写这代码创建者的冲动了。是的，第三个函数直接触发了我决定使用面向对象。
实际上，我完全可以把第三个函数改造成下面这样。
复制代码 代码如下:
function append(obj)
{
var a=document.craeteElement(“a”);
a.title=”你好”;
a.href=”javascript:void(0);”;
a.innerHTML=a.title;
a.click=function(){createdom();};
$(obj).append(a);
}

这样如何？有进步吧，好，这就是我想要的代码，但是还不够简洁。我希望可以把创建DOM对象封装到一个类中，并且把以上的三个方法都装到一个对象中；那好吧，动手起来是很简单的事情，这种工作不需要上网搜索代码和示例的，直接应用C#的面向对象思维就可以完成。
首先是封装以上的三个方法到一个对象中,封装很简单，应该不用我多废话的，直接上代码。
封装后的三个函数
复制代码 代码如下:
User={
Function finduser(userId)
{
},
Function showmessage(msg)
{
Var message=”提示，出错了，错误原因”+msg;
Alert(message);
},
Function append(obj)
{
Var a=document.craeteElement(“a”);
a.title=”你好”;
a.href=”javascript:void(0);”;
a.innerHTML=a.title;
a.click=function(){createdom();};
$(obj).append(a);
}
}

只需要声明一个User变量来存储上面的三个方法即可，不同的方法间使用逗号分隔，需要注意的是，这时候的User是一个静态的类，无构造函数或者构造函数私有（我猜的），反正不可new了。
其次，我再创建一个封装创建DOM对象的静态类，代码如下：
复制代码 代码如下:
createElement={
element=function(targetName){return document.createElement(targetName);},
a=document. createElement(“a”)
}

相当简单，这样我就可以测试一下上面的CreateElement对象是否可正常工作，这次测试是在append方法中进行测试。append方法再次被改造成下面的代码。
复制代码 代码如下:
function append(obj)
{
Var a= createElement .a;
a.title=”你好”;
a.href=”javascript:void(0);”;
a.innerHTML=a.title;
a.click=function(){createdom();};
$(obj).append(a);
}

目前看来，append工作得相当的良好，好吧，我需要作出一点小改动，我需要在append函数中创建三个a并把它依次添加到obj对象中，代码如下：
代码
复制代码 代码如下:
function append(obj)
{
For(i=0;i<3;i++)
{
Var a= createElement .a;
a.title=”你好”;
a.href=”javascript:void(0);”;
a.innerHTML=a.title;
a.click=function(){createdom();};
$(obj).append(a);
}
}

最后显示的结果是obj对象中只得到了一个a我十分的不理解，这一个a让我觉得我又回到了C#的怀抱，多么美好呀，经过分析，当我通过Var a= CreateElement .a;
第一次调用在CreateElement.a来获取a对象时，a属性中的document.createElement(“a”)就已经把a对象驻留到内存中，这之后不管我再怎么调用CreateElement.a，实际上都只是得到了内存中a的一个引用，改变的都竟然是同一个对象，这就是静态类的特别之处，但是，当我通过调用CreateElement.element函数来获取对象时，每次我得到的都是一个新的对象，方法不会保存对象的引用，这是肯定的，解决方法就是通过调用CreateElement.element函数来创建新的对象，但是这种方法非面向对象推荐。
另外一种比较好的解决办法是使用非静态类，即实体类的方式，创建非静态类的方式也是相当的简单，代码如下：
复制代码 代码如下:
createElement=function(){
element=function(targetName){return document.createElement(targetName);};
a=document. createElement(“a”);
}

直接声明createElement对象，并使之有构造函数，成员间以分号进行分隔，当然如果你喜欢，还可以直接这样写，也是没有一样的效果。
复制代码 代码如下:
function createElement (){
element=function(targetName){return document.createElement(targetName);};
a=document. createElement(“a”);
}

经过上面的声明，我们就可以在append函数中像C#一样使用createElement类来创建DOM对象了。
函数
复制代码 代码如下:
function append(obj)
{
for(i=0;i<3;i++)
{
var ele=new createElement();
var a=ele.a;
a.title=”你好”;
a.href=”javascript:void(0);”;
a.innerHTML=a.title;
a.click=function(){createdom();};
$(obj).append(a);
}
}

这样每次new createElement()都是一个新的对象，不存在引用的问题了。
实际上，上面提到的就是Javascript中静态类和非静态类的区别；当然也从中得知，使用静态类非静态类的效率上还是有些差别的，而且调用的时候肯定也是静态类方便一些，如果不计较引用冲突问题，我觉得静态类应该是首选的。

您可能感兴趣的文章

• 高质量JavaScript代码书写基本要点|值得收藏
• Web 前端优化最佳实践之 JavaScript 篇
• 31个Javascript的实用工具
• javascript 正则表达式-替换
• js入门学习：Javascript的学习笔记
• 学习JavaScript三件必须了解的事
• JavaScript操作iframe里的dom
• javascript中的107个基础知识收集整理
• JavaScript trim函数的十二种实现

看起来不怎么样，动用了两次正则替换，实际速度非常惊人，主要得益于浏览器的内部优化。一个著名的例子字符串拼接，直接相加比用Array做成的StringBuffer还快。base2类库使用这种实现。
实现2
1.String.prototype.trim = function() {
2.  return this.replace(/^\s+/, ”).replace(/\s+$/, ”);
3.}

和实现1很相似，但稍慢一点，主要原因是它最先是假设至少存在一个空白符。Prototype.js使用这种实现，不过其名字为strip，因为Prototype的方法都是力求与Ruby同名。
实现3
1.String.prototype.trim = function() {
2.  return  this.substring(Math.max(this.search(/\S/), 0),this.search(/\S\s*$/) + 1);
3.}

以截取方式取得空白部分（当然允许中间存在空白符），总共调用了四个原生方法。设计得非常巧妙，substring以两个数字作为参数。Math.max以两个数字作参数，search则返回一个数字。速度比上面两个慢一点，但比下面大多数都快。
实现4
1.String.prototype.trim = function() {
2.  return  this.replace(/^\s+|\s+$/g, ”);
3.}

这个可以称得上实现2的简化版，就是利用候选操作符连接两个正则。但这样做就失去了浏览器优化的机会，比不上实现3。由于看来很优雅，许多类库都使用它，如JQuery与mootools
实现5
1.String.prototype.trim = function() {
2.  var str = this;
3.  str = str.match(/\S+(?:\s+\S+)*/);
4.  return str ? str[0] : ”;
5.}

match是返回一个数组，因此原字符串符合要求的部分就成为它的元素。为了防止字符串中间的空白符被排除，我们需要动用到非捕获性分组（?:exp）。由于数组可能为空，我们在后面还要做进一步的判定。好像浏览器在处理分组上比较无力，一个字慢。所以不要迷信正则，虽然它基本上是万能的。
实现6
1.String.prototype.trim = function() {
2.  return this.replace(/^\s*(\S*(\s+\S+)*)\s*$/, ‘$1′);
3.}

把符合要求的部分提供出来，放到一个空字符串中。不过效率很差，尤其是在IE6中。
实现7
1.String.prototype.trim = function() {
2.  return this.replace(/^\s*(\S*(?:\s+\S+)*)\s*$/, ‘$1′);
3.}

和实现6很相似，但用了非捕获分组进行了优点，性能效之有一点点提升。
实现8
1.String.prototype.trim = function() {
2.  return this.replace(/^\s*((?:[\S\s]*\S)?)\s*$/, ‘$1′);
3.}

沿着上面两个的思路进行改进，动用了非捕获分组与字符集合，用?顶替了*，效果非常惊人。尤其在IE6中，可以用疯狂来形容这次性能的提升，直接秒杀火狐。
实现9
1.String.prototype.trim = function() {
2.  return this.replace(/^\s*([\S\s]*?)\s*$/, ‘$1′);
3.}

这次是用懒惰匹配顶替非捕获分组，在火狐中得到改善，IE没有上次那么疯狂。
实现10
01.String.prototype.trim = function() {
02.  var str = this,
03.  whitespace = ‘ \n\r\t\f\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000′;
04.  for (var i = 0,len = str.length; i < len; i++) {
05.    if (whitespace.indexOf(str.charAt(i)) === -1) {
06.      str = str.substring(i);
07.      break;
08.    }
09.  }
10.  for (i = str.length – 1; i >= 0; i–) {
11.    if (whitespace.indexOf(str.charAt(i)) === -1) {
12.      str = str.substring(0, i + 1);
13.      break;
14.    }
15.  }
16.  return whitespace.indexOf(str.charAt(0)) === -1 ? str : ”;
17.}

我只想说，搞出这个的人已经不是用牛来形容，已是神一样的级别。它先是把可能的空白符全部列出来，在第一次遍历中砍掉前面的空白，第二次砍掉后面的空白。全过程只用了indexOf与substring这个专门为处理字符串而生的原生方法，没有使用到正则。速度快得惊人，估计直逼上内部的二进制实现，并且在IE与火狐（其他浏览器当然也毫无疑问）都有良好的表现。速度都是零毫秒级别的。
实现11
01.String.prototype.trim = function() {
02.  var str = this,
03.  str = str.replace(/^\s+/, ”);
04.  for (var i = str.length – 1; i >= 0; i–) {
05.    if (/\S/.test(str.charAt(i))) {
06.      str = str.substring(0, i + 1);
07.      break;
08.    }
09.  }
10.  return str;
11.}

实现10已经告诉我们普通的原生字符串截取方法是远胜于正则替换，虽然是复杂一点。但只要正则不过于复杂，我们就可以利用浏览器对正则的优化，改善程序执行效率，如实现8在IE的表现。我想通常不会有人在项目中应用实现10，因为那个whitespace 实现太长太难记了（当然如果你在打造一个类库，它绝对是首先）。实现11可谓其改进版，前面部分的空白由正则替换负责砍掉，后面用原生方法处理，效果不逊于原版，但速度都是非常逆天。
实现12
1.String.prototype.trim = function() {
2.  var str = this,
3.  str = str.replace(/^\s\s*/, ”),
4.  ws = /\s/,
5.  i = str.length;
6.  while (ws.test(str.charAt(–i)));
7.  return str.slice(0, i + 1);
8.}

实现10与实现11在写法上更好的改进版，注意说的不是性能速度，而是易记与使用上。和它的两个前辈都是零毫秒级别的，以后就用这个来工作与吓人。

您可能感兴趣的文章

• Web 前端优化最佳实践之 JavaScript 篇
• 31个Javascript的实用工具
• javascript 正则表达式-替换
• 高质量JavaScript代码书写基本要点|值得收藏
• js入门学习：Javascript的学习笔记
• 学习JavaScript三件必须了解的事
• JavaScript操作iframe里的dom
• javascript中的107个基础知识收集整理
• JavaScript面向对象之静态与非静态类