JavaScript复习（中）——事件、日期、条件语句、位运算、正则、异常和作用域

一、JS事件

HTML 事件是发生在 HTML 元素上的“事情”，当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。

在学JS事件之前，先复习HTML事件。

HTML事件
HTML 事件可以是浏览器或用户做的某些事情。比如：
●HTML 网页完成加载
●HTML 输入字段被修改
●HTML 按钮被点击
通过 JavaScript 代码，HTML 允许我们向 HTML 元素添加事件处理程序。

在下面的例子中，onclick 属性（以及代码）被添加到 <button> 元素：

<button onclick='document.getElementById("demo").innerHTML=Date()'>
现在的时间是？</button>

事件调用函数更常见，点击此处，查看例子

想知道例如onclick这样的事件，请点击W3CJS参考手册HTMLDOM 事件

而JS可以做的就是处理事件。（HTML DOM）

二、JS日期

1.创建日期对象

Date 对象由新的 Date() 构造函数创建。
有 4 种方法创建新的日期对象：
●new Date()
●new Date(year, month, day, hours, minutes, seconds, milliseconds)
●new Date(milliseconds)
●new Date(date string)

（1）new Date()
用当前日期和时间创建新的日期对象。
日期对象是静态的。

var d = new Date();

输出：Sun Sep 22 2019 10:22:52 GMT+0800 (中国标准时间)

默认情况下，JavaScript 将使用浏览器的时区并将日期显示为全文本字符串

（2）new Date(year, month, …)
new Date(year, month, day, hours, minutes, seconds, milliseconds)用指定日期和时间创建新的日期对象。

7个数字分别指定年、月、日、小时、分钟、秒和毫秒（按此顺序）。

var d = new Date(2018, 8, 22, 10, 33, 30, 0);

<注释：JavaScript 从 0 到 11 计算月份。
一月是 0。十二月是11。
年也是一样。输出都会自动+1。>

可以写2~7个参数，指定对应的年、月、日、小时、分钟、秒、毫秒。
如果写一个参数，默认是毫秒。

（3）上个世纪
一位和两位数年份将被解释为 19xx 年：

var d1 = new Date(99, 11, 24);

//Tue Jan 25 2000 00:00:00 GMT+0800 (中国标准时间)

var d2 = new Date(9, 11, 24);
//Tue Jan 25 1910 00:00:00 GMT+0800 (中国标准时间)

（4）new Date(dateString)
new Date(dateString) 从日期字符串创建一个新的日期对象。

var d = new Date("December 25, 2019 12:46:00");
//Wed Dec 25 2019 12:46:00 GMT+0800 (中国标准时间)

日期字符串接下来会复习到。

（5）new Date(milliseconds)
new Date(milliseconds) 创建一个零时加毫秒的新日期对象。
前面讲过，只有一个参数时默认是毫秒。
计算机元年是1970年。所以，

var d = new Date(0);  //1970.1.1 08:00:00 GMT+0800 (中国标准时间)

点击此处，查看例子

一天（24 小时）是 86 400 000 毫秒。
参数可以是负值。

（6）显示日期
JavaScript（默认情况下）将以全文本字符串格式输出日期。
在 HTML 中显示日期对象时，会使用 toString() 方法自动转换为字符串。

d = new Date();
document.getElementById("demo").innerHTML = d;

等同于：

d = new Date();
document.getElementById("demo").innerHTML = d.toString();

●toUTCString() 方法将日期转换为 UTC 字符串（一种日期显示标准）。

var d = new Date();
document.getElementById("demo").innerHTML = d.toUTCString();

点击此处，查看例子

●toDateString() 方法将日期转换为更易读的格式（简单的日期字符串）。

var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();
//输出Sun Sep 22 2019

（7）识别日期
创建 isDate() 函数：

function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}
也可以是这样：
function isDate(myDate) {
    return myDate.constructor === Date;
}

假如对象原型包含单词 “Date” 则返回 true。

constructor属性可以在JS类型转换复习。

2.日期格式化

有四种 JavaScript 日期输入格式：

类型	实例
ISO日期	“2019-09-22” （国际标准）
短日期	“09/22/2019” 或者 “2019/09/22”
长日期	“Sep 22 2019” 或者 “22 Sep 2019”
完整日期	“Sunday September 22 2019”

无论输入格式如何，JavaScript 默认将输出全文本字符串格式：
Sun Sep 22 2019 06:00:00 GMT+0800 (中国标准时间)

（1）ISO 日期（完整的日期加时、分和秒）
写日期也可以添加时、分和秒 (YYYY-MM-DDTHH:MM:SS)：
var d = new Date("2019-09-22T12:00:00");
日期和时间通过大写字母 T 来分隔。
UTC 时间通过大写字母 Z 来定义。
修改相对于 UTC 的时间，要删除 Z 并用 +HH:MM 或 -HH:MM 代替
var d = new Date("2019-09-22T12:00:00-08:30");

注释：UTC（Universal Time Coordinated）等同于 GMT（格林威治时间）。
UTC，协调世界时，又称世界统一时间，世界标准时间，国际协调时间。
在日期-时间字符串中省略 T 或 Z，在不同浏览器中会产生不同结果。

ISO日期的参数可以选择：
ISO 日期（只有年）
写日期也可以不规定具体的月和日 (YYYY)：
var d = new Date("2019");

ISO 日期（年和月）
写日期也可以不规定具体某日 (YYYY-MM)：
var d = new Date("2019-09");

ISO完整日期
ISO 8601 语法 (YYYY-MM-DD) 也是首选的 JavaScript 日期格式：
var d = new Date("2019-09-22");

（2）短日期
短日期通常使用 “MM/DD/YYYY” 这样的语法：
var d = new Date("09/22/2019");

前导0要写。不然格式错误，会返回NaN。

（3）长日期
长日期通常以 “MMM DD YYYY” 这样的语法来写：
var d = new Date("Sep 22 2019");

月和天能够以任意顺序出现：
var d = new Date("22 Sep 2019");

并且，月能够以全称 (January) 或缩写 (Jan) 来写：
var d = new Date("September 22 2019");

逗号会被忽略，且对大小写不敏感：
var d = new Date("FEBRUARY, 25, 2015");

（4）完整日期
JavaScript 接受“完整 JavaScript 格式”的日期字符串。

var d = new Date("Sun Sep 22 2019 10:55:23 GMT+0100 (W. Europe Standard Time)");

3.获取、设置日期的方法

使用日期方法可以获取并设置日期值（年、月、日、时、分、秒、毫秒）。

（1）getTime() 、setTime()
getTime() 方法返回自 1970 年 1 月 1 日以来的毫秒数。
setTime() 设置时间（从 1970 年 1 月 1 日至今的毫秒数）。

（2）getFullYear() 、setFullYear()
getFullYear() 方法以四位数字形式返回日期年份。
setFullYear() 设置年（可选月和日）。

选择设置月和日：

var d = new Date();
d.setFullYear(2020, 11, 3);

（3）getMonth() 、setMonth()
getMonth() 以数字（0-11）返回日期的月份。
setMonth() 方法设置日期对象的月份（0-11）。
在 JavaScript 中，第一个月（1 月）是月号 0，因此 12 月返回月号 11。

可以使用名称数组，并使用 getMonth() 将月份作为名称返回：

var d = new Date();
var months = 
            [
            "January", "February", "March", "April", "May", "June", 
            "July", "August", "September", "October", "November", "December"
            ];
document.getElementById("demo").innerHTML = months[d.getMonth()];

（4）getDate() 、setDate()
getDate() 方法以数字（1-31）返回日期的日。
setDate() 方法设置日期对象的日（1-31）。

可用于将天数添加到日期：

var d = new Date();
d.setDate(d.getDate() + 50);
document.getElementById("demo").innerHTML = d;

（5）getHours() 、setHours()
getHours() 方法以数字（0-23）返回日期的小时数。
setHours() 方法设置日期对象的小时（0-23）。

（6）getMinutes() 、setMinutes()
getMinutes() 方法以数字（0-59）返回日期的分钟数。
setMinutes() 方法设置日期对象的分钟（0-59）。

（7）getSeconds() 、setSeconds()
getSeconds() 方法以数字（0-59）返回日期的秒数。
setSeconds() 方法设置日期对象的秒数（0-59）。

（8）getMilliseconds() 、setMilliseconds()
getMilliseconds() 方法以数字（0-999）返回日期的毫秒数。
setMilliseconds() 设置毫秒（0-999）。

（9）getDay() 、setDate()
getDay() 方法以数字（0-6）返回日期的星期名（weekday）。
setDate() 以数值（1-31）设置日。

在 JavaScript 中，一周的第一天（0）表示“星期日”，即使世界上的一些国家认为周的第一天是“星期一”。

可以使用名称数组，并使用 getDay() 将星期名作为名称返回：

var d = new Date();
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", 
            "Thursday", "Friday", "Saturday"];
document.getElementById("demo").innerHTML = days[d.getDay()];

（10）UTC日期方法
UTC 日期方法用于处理 UTC 日期（通用时区日期，Univeral Time Zone dates）。返回UTC的日期。
在以上九个日期方法的名称+UTC即可，例如 ：getDate() -> getUTCDate()

（11）比较日期
日期可以很容易地进行比较。

点击此处，查看例子

三、JS条件语句

1.if…else语句
（1）一个if语句

 if (条件) {
    如果条件为 true 时执行的代码
} 

（2）if…else语句

if (条件) {
    条件为 true 时执行的代码块
} else { 
    条件为 false 时执行的代码块
}

（3）else if 语句

if (条件 1) {
    条件 1 为 true 时执行的代码块
} else if (条件 2) {
    条件 1 为 false 而条件 2 为 true 时执行的代码块
 } else {
    条件 1 和条件 2 同时为 false 时执行的代码块
}

2.switch语句

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
} 

计算一次 switch 表达式，
把表达式的值与每个 case 的值进行对比，
如果存在匹配，则执行关联代码，
如果不存在 case 匹配，则运行 default的代码。

Switch case 使用严格比较（===）。
值必须与要匹配的类型相同。
只有操作数属于同一类型时，严格比较才能为 true。

3.For 循环
for 循环的语法如下：

for (语句 1; 语句 2; 语句 3) {
     要执行的代码块
}

语句 1 在循环（代码块）开始之前执行。
语句 2 定义运行循环（代码块）的条件。
语句 3 会在循环（代码块）每次被执行后执行。

4.While 循环
while 循环会一直循环代码块，只要指定的条件为 true。
语法：

while (条件) {
    要执行的代码块
}

5.Do/While 循环
do/while 循环是 while 循环的变体。在检查条件是否为真之前，这种循环会执行一次代码块，然后只要条件为真就会重复循环。

语法：

do {
    要执行的代码块
}

while (条件);

6.Break 和 Continue
Break 语句
有时被用于“跳出” switch 语句。
break 语句也可用于跳出循环。
break 语句会中断循环，并继续执行循环之后的代码（如果有）。

Continue 语句
continue 语句“ 跳过 ”循环中的一个迭代。
continue 语句中断（循环中）的一个迭代，如果发生指定的条件。然后继续循环中的下一个迭代。

四、JS位运算

把十进制转换为二进制

function dec2bin(dec){
    return (dec >>> 0).toString(2);
}

把二进制转换为十进制

function bin2dec(bin){
    return parseInt(bin, 2).toString(10);
}

五、JS正则表达式

正则表达式是构成搜索模式的字符序列。
该搜索模式可用于文本搜索和文本替换操作。
语法：/pattern/modifiers;

1.使用字符串方法 search() 来处理字符串

var str = "Visit W3School";
var n = str.search(/w3school/i); 

结果：n=6；

2.使用字符串方法 replace() 处理字符串

var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "W3School"); 

结果：Visit W3School!

3.正则表达式修饰符
i ：执行对大小写不敏感的匹配。
g ：执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m ：执行多行匹配。

4.正则表达式模式
（1）括号用于查找一定范围的字符串：
[abc] ： 查找方括号之间的任何字符。
[^abc] ：查找任何不在方括号之间的字符。
[0-9] ：查找任何从 0 至 9 的数字。
(x|y) ：查找由 | 分隔的任何选项。

（2）元字符（Metacharacter）是拥有特殊含义的字符：
. ：查找单个字符，除了换行和行结束符。
\d ：查找数字。
\s ：查找空白字符。
\b ：匹配单词边界。
\uxxxx ：查找以十六进制数 xxxx 规定的 Unicode 字符。

（3）Quantifiers 定义量词：
n+ ：匹配任何包含至少一个 n 的字符串。
n* ：匹配任何包含零个或多个 n 的字符串。
n? ：匹配任何包含零个或一个 n 的字符串。

5.使用 RegExp 对象
在 JavaScript 中，RegExp 对象是带有预定义属性和方法的正则表达式对象。
语法：

new RegExp(pattern, attributes);

参数 pattern： 是一个字符串，指定了正则表达式的模式或其他正则表达式。
参数 attributes： 是一个可选的字符串，包含属性 “g”、"i" 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。

6.使用 test()
test() 是一个正则表达式方法。
它通过模式来搜索字符串，然后根据结果返回 true 或 false。

7.使用 exec()
exec() 方法是一个正则表达式方法。
它通过指定的模式（pattern）搜索字符串，并返回已找到的文本。
如果未找到匹配，则返回 null。

8.使用compile()
编译正则表达式。

点击此处，查看W3C正则表达式详情

六、JS异常

try 语句：能够测试代码块中的错误。
catch 语句：允许处理错误。
throw 语句：允许创建自定义错误。
finally ：能够执行代码，在 try 和 catch 之后，无论结果如何。

try {
     供测试的代码块
}
 catch(err) {
     处理错误的代码块
} 
finally {
     无论 try / catch 结果如何都执行的代码块
}

Error 对象
JavaScript 拥有当错误发生时提供错误信息的内置 error 对象。
error 对象提供两个有用的属性：name 错误名和 message错误消息（string）。

error 的 name 属性可返回六个不同的值：
EvalError ：已在 eval() 函数中发生的错误
RangeError： 已发生超出数字范围的错误
ReferenceError： 已发生非法引用
SyntaxError ：已发生语法错误
TypeError ：已发生类型错误
URIError ：在 encodeURI() 中已发生的错误、

七、JS作用域

作用域指的是您有权访问的变量集合。

在 JavaScript 中有两种作用域类型：
●局部作用域
●全局作用域

JavaScript 拥有函数作用域：每个函数创建一个新的作用域。
作用域决定了这些变量的可访问性（可见性）。
函数内部定义的变量从函数外部是不可访问的（不可见的）。

1.局部 JavaScript 变量
在 JavaScript 函数中声明的变量，会成为函数的局部变量。
局部变量的作用域是局部的：只能在函数内部访问它们。

由于只能在函数内部识别局部变量，因此能够在不同函数中使用同名变量。
在函数开始时会创建局部变量，在函数完成时会删除它们。
函数参数也是函数内的局部变量。

2.全局 JavaScript 变量
函数之外声明的变量，会成为全局变量。
全局变量的作用域是全局的：网页的所有脚本和函数都能够访问它。
全局变量会在您关闭页面是被删除。

3.JavaScript 变量
在 JavaScript 中，对象和函数也是变量。
作用域决定了从代码不同部分对变量、对象和函数的可访问性。

4.自动全局
如果为尚未声明的变量赋值，此变量会自动成为全局变量。
这段代码将声明一个全局变量 carName，即使在函数内进行了赋值。

myFunction();
// 此处的代码能够使用 carName 变量
function myFunction() {
    carName = "porsche";
}

5.严格模式
在“严格模式”中不会自动创建全局变量。

6.HTML 中的全局变量
通过 JavaScript，全局作用域形成了完整的 JavaScript 环境。
在 HTML 中，全局作用域是 window。所有全局变量均属于 window 对象。