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
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 个字符,建议在运算符或者逗号后换行。