JavaScript之旅（二）

JavaScript之旅（二）

二、进阶知识

1. js的正则表达式
2. 异常处理
3. 调试
4. 变量提升
5. 表单验证
6. JSON
7. javascript:void(0)
8. 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 个字符，建议在运算符或者逗号后换行。