一、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()
编译正则表达式。
六、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 对象。