zoukankan      html  css  js  c++  java
  • 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 个字符,建议在运算符或者逗号后换行。

  • 相关阅读:
    [转]C#正则表达式小结
    Silverlight 参考:KeyEventArgs.Handled 属性
    一步一步搭建免费的Silverlight 2开发环境(转载)
    Silverlight2 跨域调用Web服务的方法
    BinaryFormatter 类
    从说事到流程的理解
    比尔盖茨给青少年的11条准则
    燃烧热情
    GOF模式之乱记一通
    学而不思则罔,思而不学则殆
  • 原文地址:https://www.cnblogs.com/feixuelove1009/p/5775114.html
Copyright © 2011-2022 走看看