JavaScript（四）

JS验证API

• 约束验证DOM方法

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>
 
<p id="demo"></p>
 
<script>
function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {  // 如果 input 元素中的数据是合法的返回 true，否则返回 false。
        document.getElementById("demo").innerHTML = inpObj.validationMessage;  // 设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。
    }
}
</script>

• 约束验证DOM属性

<input id="id1" type="number" max="100">
<button onclick="myFunction()">验证</button>
 
<p id="demo"></p>
 
<script>
function myFunction() {
    var txt = "";
    if (document.getElementById("id1").validity.rangeOverflow) {
       txt = "输入的值太大了";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>

<input id="id1" type="number" min="100" required>
<button onclick="myFunction()">OK</button>
 
<p id="demo"></p>
 
<script>
function myFunction() {
    var txt = "";
    var inpObj = document.getElementById("id1");
    if(!isNumeric(inpObj.value)) {
        txt = "你输入的不是数字";
    } else if (inpObj.validity.rangeUnderflow) {
        txt = "输入的值太小了";
    } else {
        txt = "输入正确";
    }
    document.getElementById("demo").innerHTML = txt;
}
 
// 判断输入是否为数字
function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>

JS保留字要注意

JS this关键字

• 面向对象语言中 this 表示当前对象的一个引用。但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。
  • 在方法中，this 表示该方法所属的对象。
  • 如果单独使用，this 表示全局对象。
  • 在函数中，this 表示全局对象。
  • 在函数中，在严格模式下，this 是未定义的(undefined)。
  • 在事件中，this 表示接收事件的元素。
  • 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

• 在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素

<button onclick="this.style.display='none'">
点我后我就消失了
</button>

• JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
person1.fullName.call(person2);  // 返回 "John Doe"

JS let和const

• let 声明的变量只在 let 命令所在的代码块内有效。
• const 声明一个只读的常量，一旦声明，常量的值就不能改变。

使用 var 关键字声明的全局作用域变量属于 window 对象。使用 let 关键字声明的全局作用域变量不属于 window 对象
在相同的作用域或块级作用域中，不能使用 let 关键字来重置 var 关键字声明的变量
在相同的作用域或块级作用域中，不能使用 var 关键字来重置 let 关键字声明的变量
let 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的
JavaScript 中，var 关键字定义的变量可以在使用后声明，也就是变量可以先使用再声明

• const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改

块儿级作用域
可以对常量对象和常量数组进行修改，但不能重新赋值。
const 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的
const 关键字定义的变量则不可以在使用后声明

JS Json

• JSON 是用于存储和传输数据的格式。JSON 通常用于服务端向网页传递数据 。
• 使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象
• JSON.stringify()，用于将 JavaScript 值转换为 JSON 字符串。

var obj = JSON.parse(text);

JS void()

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

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

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

<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>

JS异步编程

• 同步：按顺序执行。异步：不按顺序执行。异步就是从主线程发射一个子线程来完成任务。

用子线程来完成一些可能消耗时间足够长以至于被用户察觉的事情，比如读取一个大文件或者发出一个网络请求。因为子线程独立于主线程，所以即使出现阻塞也不会影响主线程的运行。但是子线程有一个局限：一旦发射了以后就会与主线程失去同步，我们无法确定它的结束，如果结束之后需要处理一些事情，比如处理来自服务器的信息，我们是无法将它合并到主线程中去的。
为了解决这个问题，JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。

• 回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了，他自己会善始善终。

function print() {
    document.getElementById("demo").innerHTML="RUNOOB!";
}
setTimeout(print, 3000);
// 第一个参数是个回调函数，第二个参数是毫秒数，这个函数执行之后会产生一个子线程，子线程会等待 3 秒，然后执行回调函数 "print"，在命令行输出 "RUNOOB!"

• 异步回调多用于Ajax

XMLHttpRequest 常常用于请求来自远程服务器上的 XML 或 JSON 数据。一个标准的 XMLHttpRequest 对象往往包含多个回调
XMLHttpRequest 的 onload 和 onerror 属性都是函数，分别在它请求成功和请求失败时被调用。

var xhr = new XMLHttpRequest();
 
xhr.onload = function () {
    // 输出接收到的文字数据
    document.getElementById("demo").innerHTML=xhr.responseText;
}
 
xhr.onerror = function () {
    document.getElementById("demo").innerHTML="请求出错";
}
 
// 发送异步 GET 请求
xhr.open("GET", "https://www.runoob.com/try/ajax/ajax_info.txt", true);
xhr.send();

JS Promise

• Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。多次调用异步任务。

Promise 构造函数只有一个参数，是一个函数，这个函数在构造之后会直接被异步运行，所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject。当 Promise 被构造时，起始函数会被异步执行
resolve 和 reject 都是函数，其中调用 resolve 代表一切正常，reject 是出现异常时所调用的

Promise 类有 .then() .catch() 和 .finally() 三个方法，这三个方法的参数都是一个函数，.then() 可以将参数中的函数添加到当前 Promise 的正常执行序列，.catch() 则是设定 Promise 的异常处理序列，.finally() 是在 Promise 执行的最后一定会执行的序列。 .then() 传入的函数会按顺序依次执行，有任何异常都会直接跳到 catch 序列

new Promise(function (resolve, reject) {
    console.log(1111);
    resolve(2222);
}).then(function (value) {
    console.log(value);
    return 3333;
}).then(function (value) {
    console.log(value);
    throw "An error";
}).catch(function (err) {
    console.log(err);
});

resolve() 中可以放置一个参数用于向下一个 then 传递一个值，then 中的函数也可以返回一个值传递给 then。但是，如果 then 中返回的是一个 Promise 对象，那么下一个 then 将相当于对这个返回的 Promise 进行操作。reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常。

• Promise 函数

function print(delay, message) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log(message);
            resolve();
        }, delay);
    });
}

print(1000, "First").then(function () {
    return print(4000, "Second");
}).then(function () {
    print(3000, "Third");
});

• 异步函数

async function asyncFunc() {
    try {
        await new Promise(function (resolve, reject) {
            throw "Some error"; // 或者 reject("Some error")
        });
    } catch (err) {
        console.log(err);
        // 会输出 Some error
    }
}
asyncFunc();

async function asyncFunc() {
    let value = await new Promise(
        function (resolve, reject) {
            resolve("Return value");
        }
    );
    console.log(value);
}
asyncFunc();

1、Promise 对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）
2、Promise构造函数接收一个函数作为参数，该函数的两个参数分别是 resolve 和 reject
3、一个promise对象只能改变一次状态，成功或者失败后都会返回结果数据。
4、then 方法可以接收两个回调函数作为参数，第一个回调函数是Promise对象的状态改变为 resoved 是调用，第二个回调函数是 Promise 对象的状态变为 rejected 时调用。其中第二个参数可以省略。
5、catch 方法，该方法相当于最近的 then 方法的第二个参数，指向 reject 的回调函数，另一个作用是，在执行resolve回调函数时，如果出错，抛出异常，不会停止陨星，而是进入catch 方法中。

JS日期

Date() 获得当日的日期
getTime() 返回从1970.01.01至今的毫秒数
setFullYear() 设置具体的日期
toUTCString() 将日期转换为字符串
getDay() 显示星期

• 定义日期

var myDate=new Date()

• 操作日期

var myDate=new Date()
myDate.setFullYear(2008,7,9)
# 表示月份的参数结余0到11之间

var myDate=new Date()
myDate.setDate(myDate.getDate()+5)
# 如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。

• 比较日期：日期对象也可用于比较两个日期。

JavaScript数组

• 数组对象的作用是：使用单独的变量名来存储一系列的值。
• 定义数组

var mycars=new Array()
mycars[0]="Saab"

var mycars=new Array(3)
mycars[0]="Saab"

var mycars=new Array("Saab","Volvo","BMW")

• 访问数组

document.write(mycars[0])

• 修改已有数组中的值

mycars[0]=“opel”

JavaScript Boolean对象

• 初始值为false的Boolean对象

var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);

• 初始值为true的Boolean对象

var myBoolean=new Boolean(1);
var myBoolean=new Boolean(true);
var myBoolean=new Boolean("true");
var myBoolean=new Boolean("false");
var myBoolean=new Boolean("Bill Gates");

JavaScript 算数对象

document.write(Math.round(4.7)) #四舍五入
document.write(Math.random()) # 随机数0和1之间
document.write(Math.floor(Math.random()*11)) #0和10之间随机数

JavaScript 正则表达式

• 正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜素模式。
• 正则表达式是由一个字符序列形成的搜索模式。

/正则表达式主体/修饰符(可选)
var pattern = /runoob/i

// search()方法使用正则表达式
var str = "Visit Runoob!";
var n = str.search(/Runoob/i);  // 6

// replace()方法使用正则表达式
var str = document.getElementById("demo").innerHTML;
var txt = str.replace(/microsoft/i, "Runoob"); //Visit Runoob!

• 修饰符 可以在全局搜索中不区分大小写:

修饰符	描述
i	执行对大小写不敏感的匹配。
g 执行全局匹配	（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

• 方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x|y)	查找任何以

• 元字符是拥有特殊含义的字符：

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

• 量词:

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

• RegExp对象是一个预定义了属性和方法的正则表达式对象。

var patt1=new RegExp(“e”);

• RegExp 对象有 3 个方法：test()、exec() 以及 compile()

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

var patt=/e/; //寻找e
document.write(patt1.test("The best things in life are free"));    //true

/e/.test("The best things in life are free") //也行

exec() 方法检索字符串中的指定值。返回值是被找到的值的数组。如果没有发现匹配，则返回 null。
可以向 RegExp 对象添加第二个参数，以设定检索。例如，如果需要找到所有某个字符的所有存在，则可以使用 “g” 参数 (“global”)。

var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));

var patt1=new RegExp("e","g");
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null) 

compile() 既可以改变检索模式，也可以添加或删除第二个参数。

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));

/*是否带有小数*/
function    isDecimal(strValue )  {  
   var  objRegExp= /^\d+\.\d+$/;
   return  objRegExp.test(strValue);  
}  

/*校验是否中文名称组成 */
function ischina(str) {
    var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验是否全由8位数字组成 */
function isStudentNo(str) {
    var reg=/^[0-9]{8}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验电话码格式 */
function isTelCode(str) {
    var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
    return reg.test(str);
}

/*校验邮件地址是否合法 */
function IsEmail(str) {
    var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
    return reg.test(str);
}