JavaScript之旅（二）

二、进阶知识

js的正则表达式
异常处理
调试
变量提升
表单验证
JSON
javascript:void(0)
JavaScript 代码规范

二、进阶知识

1. js的正则表达式

js中的正则表达式的构造方式：

/模式/选项

例如：var patt = /w3cschool/i

其中”w3cschool“为要搜索的正则表达式模式，i是选项或修饰符，表示忽略大小写。

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

实例1：

使用正则表达式搜索 "w3cschool" 字符串，且不区分大小写：

var str = "Visit w3cschool";

var n = str.search(/w3cschool/i);

输出结果为：6

实例2：

使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 w3cschool :

var str = "Visit Microsoft!";

var res = str.replace(/microsoft/i, "w3cschool");

结果输出为:Visit w3cschool!

修饰符：

i：执行对大小写不敏感的匹配。

g：执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。

m：执行多行匹配。

test() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

实例3：

var patt = /e/;

patt.test("The best things in life are free!");

字符串中含有 "e"，所以该实例输出为：true

exec() 方法是一个正则表达式方法。

exec() 方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

实例4：

/e/.exec("The best things in life are free!");

字符串中含有 "e"，所以该实例输出为:e

完整的 RegExp 对象参考手册

2. 异常处理

try 语句测试代码块的错误。

catch 语句处理错误。

finally语句无论如何都会执行。

throw 语句创建自定义错误。

示例：

function myFunction()

{

	try

	{

		var x=document.getElementById("demo").value;

		if(x=="")    throw "值为空";

		if(isNaN(x)) throw "不是数字";

		if(x > 10) throw "太大";

		if(x < 5) throw "太小";

	}

	catch(err)

	{

		var y=document.getElementById("mess");

		y.innerHTML="错误：" + err + "。";

	}

}

3. 调试

*设置断点

在调试窗口中，你可以设置 JavaScript 代码的断点。

在每个断点上，都会停止执行 JavaScript 代码，以便于我们检查 JavaScript 变量的值。

在检查完毕后，可以重新执行代码（如播放按钮）。

debugger 关键字

debugger 关键字用于停止执行 JavaScript，并调用调试函数。

这个关键字与在调试工具中设置断点的效果是一样的。

如果没有调试可用，debugger 语句将无法工作。

浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。

4.变量提升

JavaScript 中，函数及变量的声明都将被解释器自动提升到函数的最顶部。因此，变量可以在使用后声明，也就是变量可以先使用再声明。

实例 1:

x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素

elem.innerHTML = x;                     // 在元素中显示 x

var x; // 声明 x

但是！只有声明的变量会提升，而初始化的不会！

var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素

elem.innerHTML = x + " " + y;           // 显示 x 和 y

var y = 7; // 初始化 y

运行结果：x 为：5，y 为：undefined

但是！还有但是！！！

JavaScript 的严格模式(strict mode)将不允许使用未声明的变量。

在以后use strict必将是强制性的，因此，上面的特性忘了它吧！

5. JavaScript 表单验证

vaScript 可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证。主要包括：

验证表单数据是否为空？
验证输入是否是一个正确的email地址？
验证日期是否输入正确？
验证表单输入内容是否为数字型？

5.1 必填（或必选）项目验证

下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为false，否则返回值true：

function validateForm()

{

	var x=document.forms["myForm"]["fname"].value;

	if (x==null || x=="")

	{

		alert("姓必须填写");

		return false;

	}

}

以上函数在 form 表单提交时被调用，它配合下面的html页面使用:

<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">

姓: <input type="text" name="fname">

<input type="submit" value="提交">

</form>

5.2 E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

数据必须包含 @ 符号和点号(.)。同时，@不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

function validateForm(){

	var x=document.forms["myForm"]["email"].value;

	var atpos=x.indexOf("@");

	var dotpos=x.lastIndexOf(".");

	if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){

		alert("不是一个有效的 e-mail 地址");

		return false;

	}

}

下面是连同 HTML 表单的完整代码：

<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">

Email: <input type="text" name="email">

<input type="submit" value="提交">

</form>

6. JSON

JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据。

什么是 JSON?

JSON 英文全称 JavaScript Object Notation
JSON 是一种轻量级的数据交换格式。
JSON是独立的语言
JSON 易于理解。
JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。

可以被任何编程语言读取及作为数据格式传递。

JSON 实例

以下 JSON 语法定义了 employees 对象: 3 条员工记录（对象）的数组:

{"employees":[

{"firstName":"John", "lastName":"Doe"},

{"firstName":"Anna", "lastName":"Smith"},

{"firstName":"Peter", "lastName":"Jones"}

]}

JSON 语法规则

数据为键/值对。
数据由逗号分隔。
大括号保存对象
方括号保存数组
一个名称对应一个值
键/值对包括字段名称（在双引号中），后面一个冒号，然后是值.

JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。

JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。

更多 JSON 信息，可以阅读JSON 教程。

7.javascript的void

javascript:void(0)中最关键的是void关键字，这是一个非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

实例1：

下面的代码创建了一个超级链接，当用户点击以后不会发生任何事。

<a href="javascript:void(0)">单击此处什么也不会发生</a>

实例2：

用户点击链接后显示警告信息。

<a href="javascript:void(alert('Warning!!!'))">点我!</a>

href="#"与href="javascript:void(0)"的区别

# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。在页面很长的时候会使用 # 来定位页面的具体位置，格式为：#id。如果你要定义一个死链接请使用 javascript:void(0) 。

<a href="javascript:void(0);">点我没有反应的!</a>

<a href="#pos">点我定位到指定位置!</a>

<br>

...

<br>

<p id="pos">尾部定位点</p>

8. JavaScript 代码规范

变量名

变量名和函数推荐使用驼峰法来命名(camelCase):

全局变量为大写 (UPPERCASE )

常量 (如 PI) 为大写 (UPPERCASE )

空格与运算符

通常运算符 ( = + - * / ) 前后需要添加空格

代码缩进

通常使用 4 个空格符号来缩进代码块

不推荐使用 TAB 键来缩进

语句规则

一条语句通常以分号作为结束符

将左花括号放在第一行的结尾

左花括号前添加一空格

将右花括号独立放在一行

不要以分号结束一个复杂的声明

对象规则

将左花括号与类名放在同一行

冒号与属性值间有个空格

字符串使用双引号，数字不需要

最后一个属性-值对后面不要添加逗号

将右花括号独立放在一行，并以分号作为结束符号。

每行代码字符小于 80

如果超过了 80 个字符，建议在运算符或者逗号后换行。