5天速通JavaScript
- 一，JavaScript是什么和作用？
- 二，JavaScript的组成与特点
- 二，JavaScript入门
- 三，JavaScript的注释
- 四，浏览器控制台的使用
- 五，基本语法
- 六，JavaScript运算符
- 七，JavaScript输出信息的方式
- 八，JavaScript条件判断
- 九，JS循环语句
- 十， break和continue跳出循环
- 十 一，函数
- 十二，JS事件功能
- 十三， JS作用域
- 十四， JS对象与属性
一，JavaScript是什么和作用？
JavaScript（简称“JS”）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能。
JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。
二，JavaScript的组成与特点
核心（ECMAScript）：提供语言的语法和基本对象；
文档对象模型（DOM）：提供处理网页内容的方法和接口；
浏览器对象模型（BOM）：提供与浏览器进行交互的方法和接口。
二，JavaScript入门
JavaScript的使用（分为两种标签）
1，嵌入式
在HTML的hand中嵌入
<script>
alert("Hello,World!"); #alert（"这里是要想输出的语句"）
</script>
2，外链式
同样是在hand中嵌入
<script src="main.js"></script> #在同一个文件夹下创建main.js文件，如：alert("Hello,World!");
在这里要注意script标签要成对出现即不要写成<script src="main.js"/>这是错误的方式.
在新版本的编程软件中不需要在script定义type类型
三，JavaScript的注释
单行注释：// 注释内容
多行注释：/* 注释内容 */
四，浏览器控制台的使用
在浏览器中右键审查元素（按f12）
Elements：网页的HTML与CSS。
Console：控制台可以写Javascript代码并且输出 {console.Log(score)在浏览器的控制台打印变量！相当于sout} 。
Sources：当前的源码目录，可以进行调试（代码进行打断点）。
Netbook：网络请求数据。
Application：web里的数据库储存一些简单的数据在浏览器中
五，基本语法
JavaScript严格区分大小写
1.定义变量
赋值（单行赋值）
var num = 1； #变量类型 变量名 = 变量值
多行复制
var num = 1; // 定义一个变量 num 并将其赋值为 1
var a = 2, b = 3, c = 4; // 同时定义 a、b、c 三个变量并分别赋值为 2、3、4
// var a = 2, // 为了让代码看起来更工整，上一行代码也可以写成这样
// b = 3,
// c = 4;
2.条件控制
3.数据类型（对象类型）
基本数据类型(值类型):
字符串(String)、数字(Number)、布尔(Boolean)、空(Null）、未定义(Undefined)、Symbol
引用数据类型:
对象(Object)、数组(Array)、函数(Function)
注意事项:
Symbol是ECMAScript6中引入的一种新的数据类型
指:
独一无二的值
基本数据类型(值类型)
字符串(String)
‘abc’ “abc”
布尔值
ture，false
1，正常字符串我们使用单引号，或者双引号包裹
2，注意转义字符
字符串定义
方式一(推荐): var str = ‘亲’； //基本类型
定义了一个字符串变量str，内容为'亲'
方式二: var str = new String(“hello”); //引用类型
定义一个字符串变量str，内容为hello，
注意: 此刻str为引用类型(object对象)
用new产生的变量都是引用类型的变量，也叫对象
方式三: var str = String(‘hello’);
基本类型: string, number, boolean, undefined,null等
引用类型/对象: Array , Date, Object, String, Function等
#3.new String()和String()的区别
当String()和元素符new一起使用, 那么String()是作为构造函数使用的,它返回的是一个新创建的String对象. 当不用new运算符调用String()时，它只是转换成原始的字符串，并返回转换后的值.
字符串的属性和方法
number（js不区分整数和小数）
Number定义数值注意事项:
1.Number定义的数值有数据范围限制
Number只能表示“负2的53次方减一” 到 “2的53次方减1”之间的数值
2.当出现极大数值时,可以使用一些特殊值表示
如:
Infinity:
表示正无穷大的数值
一般指大于 1.7976931348623157e+308 的数；
-Infinity:
表示负无穷大的数值
一般指小于 5e-324 的数；
3.NaN(非数值Not a Number) 表示无效的数字
Boolean 类型
布尔(Boolean)类型只有两个值：
1.true(真)
2.false(假)
布尔类型常用于值判断`
var a = true; // 定义一个布尔值 true
var b = false; // 定义一个布尔值 false
var c = 2 > 1; // 表达式 2 > 1 成立，其结果为“真（true）”，所以 c 的值为布尔类型的 true
var d = 2 < 1; // 表达式 2 < 1 不成立，其结果为“假（false）”，所以 c 的值为布尔类型的 false
Null 类型
Null是一个只有一个值的特殊数据类型
即表示空值,不存在任何值,常用于定义空对象指针
注意事项:
typeof(null)可以看出其结果为Object
Undefined 类型
Undefined是一个只有一个值的特殊数据类型
当我们声明一个变量但未给变量赋值时
这个变量的默认值就是 Undefined
var a;
console.log(a); // 输出 undefined
typeof(a) 会返回undefined
var m;
console.log(typeof m); // 输出 undefined
console.log(typeof t); // 输出 undefined
Symbol 类型
Symbol是ECMAScript6中引入一种新的数据类型
指独一无二的值
Symbol类型的值需要使用Symbol()函数来生成
var str = "888";
var sym1 = Symbol(str);
var sym2 = Symbol(str);
console.log(sym1); // 输出 Symbol(123)
console.log(sym2); // 输出 Symbol(123)
console.log(sym1 == sym2);
// 输出 false
// 虽然 sym1 与 sym2 看起来是相同
// 但实际上它们并不一样
// 根据 Symbol 类型的特点
// sym1 和 sym2 都是独一无二的
如何判断数据类型
JavaScript中检测数据类型,此时我们想到了一个操作符
那就是typeof操作符
typeof操作符简介:
typeof操作符的功能用于返回变量的数据类型
typeof操作符语法:
typeof x; //返回变量x数据类型
typeof(x); //返回变量x数据类型
JS引用数据类型
Object 类型
JavaScript中的对象(Object)类型
是一组由键、值组成的无序集合
定义对象类型需要使用花括号{ }
{name1: value1, name2: value2, name3: value3, ..., nameN: valueN}
name1、name2、name3、...、nameN:
为对象中的键
value1、value2、value3、...、valueN:
为对应的值
对象类型定义示例
ar person = {
name: 'maomao',
age: 18,
tags: ['js', 'python', 'java'],
city: 'ShenZhen',
hasCar: true,
zipcode: null
};
console.log(person.name); // 输出 maomao
console.log(person.age); // 输出 18
Array 类型
数组(Array):
指一组按顺序排列的数据的集合
数组中的每个值都称为元素
且数组中可以包含任意类型的数据
在JavaScript中定义数组需要使用方括号[ ]
数组中的每个元素使用逗号进行分隔
//定义方式1
var arr =[88, 2, 3, 'python', true, null]
//定义方式2
var arr = new Array(88, 2, 3, 4);
console.log(arr); // 输出 [88, 2, 3, 4]
//访问数组的方式
var arr = [88, 2, 3.14, 'Python', null, true];
console.log(arr[0]); // 输出索引为 0 的元素，即 8
console.log(arr[5]); // 输出索引为 5 的元素，即 true
console.log(arr[6]); // 索引超出了范围，返回 undefined
Function 类型
函数(Function)
是一段具有特定功能的代码块
函数并不会自动运行
使用函数名调用才能运行
function sayHello(name){
return "Hello, " + name;
}
var res = sayHello("Maomao");
console.log(res); // 输出 Hello, Maomao
列子
var fun = function(){
console.log("https://www.linux28.com/js/");
}
function createGreeting(name){
return "Hello, " + name;
}
function displayGreeting(greetingFunction, userName){
return greetingFunction(userName);
}
var result = displayGreeting(createGreeting, "Maomao");
console.log(result); // 输出 Hello, Maomao
六，JavaScript运算符
运算符的简介
运算符都是JavaScript引擎操作的符号
如:
加号(+):加法运算
减号(-):减法运算
算术运算符
算数运算符:
用于运行常见的数学运算
如：
加法、减法、乘法、除法等
*
var x = 100,
y = 40;
console.log("x + y =", x + y); // 输出：x + y = 140
console.log("x - y =", x - y); // 输出：x - y = 60
console.log("x * y =", x * y); // 输出：x * y = 4000
console.log("x / y =", x / y); // 输出：x / y = 2.5
console.log("x % y =", x % y); // 输出：x % y = 2
赋值运算符
var x = 20;
x += 30;
console.log(x); // 输出：50
var x = 18,
y = 9;
x -= y;
console.log(x); // 输出：9
x = 6;
x *= 36;
console.log(x); // 216
x = 60;
x /= 20;
console.log(x); // 输出：3
x = 100;
x %= 15;
console.log(x); // 输出：10
字符串运算符
在JavaScript中语法中:
+和+=运算符:除了可以进行数学运算外
还可以用来拼接字符串
其中：
+运算符的功能:将运算符左右两侧的字符串拼接到一起
+=运算符的功能:将字符串进行拼接
然后再将结果赋值给运算符左侧的变量
var x = "linux ";
var y = "YHW";
var z = x + y;
console.log(z); // 输出:linux YHW
x += y;
console.log(x); // 输出:linux YHW
自增、自减运算符
自增、自减运算符用来对变量的值
进行自增（+1）、自减（-1）操作
var x;
x = 10;
console.log(++x); // 输出：11
console.log(x); // 输出：11
x = 10;
console.log(x++); // 输出：10
console.log(x); // 输出：11
x = 10;
console.log(--x); // 输出：9
console.log(x); // 输出：9
x = 10;
console.log(x--); // 输出：10
console.log(x); // 输出：9
比较运算符
用于比较运算符左右两侧的表达式
比较运算符的运算结果是一个布尔值
结果只有两种:不是true就是false
var x = 88;
var y = 99;
var z = "88";
console.log(x == z); // 输出： true
console.log(x === z); // 输出： false
console.log(x != y); // 输出： true
console.log(x !== z); // 输出： true
console.log(x < y); // 输出： true
console.log(x > y); // 输出： false
console.log(x <= y); // 输出： true
console.log(x >= y); // 输出： false
逻辑运算符:
常用于组合多个表达式
逻辑运算符的运算结果是一个布尔值,返回true或false
与，或，非
三元运算符
由一个问号和一个冒号组成
语法格式如下：
条件表达式 ? 表达式1 : 表达式2 ;
当“条件表达式”的结果为真(true)
则运行“表达式1”中的代码，否则就执行“表达式2”中的代码。
var x = 22,
y = 88;
x > y ? console.log("x 大于 y") : console.log("x 小于 y"); // 输出：x 小于 y
位运算符
是JavaScript对二进制进行位操作
var a = 5 & 1,
b = 5 | 1,
c = 5 ^ 1,
d = ~ 5,
e = 5 << 1,
f = 5 >> 1,
g = 5 >>> 1;
console.log(a); // 输出：1
console.log(b); // 输出：5
console.log(c); // 输出：4
console.log(d); // 输出：-6
console.log(e); // 输出：10
console.log(f); // 输出：2
console.log(g); // 输出：2
七，JavaScript输出信息的方式
方式1：
alert() 函数来弹出提示框
方式2:
confirm() 函数来弹出一个对话框
方式3：
document.write() 方法将内容写入到HTML文档中
方式4:
innerHTML 将内容写入到 HTML 标签中
方式5:
console.log()在浏览器的控制台输出内容
alert函数示例
在这里插入代码片 alert(提示框中输出的内容);
alert函数的另一种写法:
window.alert(提示框中输出的内容)
confirm()函数
confirm()函数同alert()函数相似
都是window对象下的函数
confirm()函数提示的信息：
会有一个 确定 和 取消 按钮
点击“确定”,会返回true
点击“取消”,会返回false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var res = window.confirm("这里是要显示的内容");
if(res == true){
alert("你点击了“确定”按钮");
}else{
alert("你点击了“取消”按钮");
}
</script>
</body>
</html>
console.log()
console.log()函数的功能:
向浏览器的控制台输出信息
console.log()语法:
console.log(message);
参数说明:
message:为待输出的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var arr = ["Chrome","Firefox","Edge","Safari","Opera"];
console.log(arr);
</script>
</body>
</html>
document.write()
document.write()方法的功能:
向html文档写入html信息
注意事项:
写入html信息，会被浏览器渲染运行
document.write()方法的语法:
document.write(exp1, exp2, exp3, …);
参数说明:
exp1、exp2、exp3:
向文档中写入的内容
注意事项:
document.write()可接收多个参数,参数之间使用逗号分隔
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write("<p>现在的时间是：</p>");
document.write(Date());
</script>
</body>
</html>
innerHTML
innerHTML是一个属性：
借助这个属性可设置指定html标签中的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div id="demo">JavaScript 输出</div>
<script type="text/javascript">
var demo = document.getElementById("demo");
console.log(demo.innerHTML);
demo.innerHTML = "<h2>innerHTML</h2>"
</script>
</body>
</html>
八，JavaScript条件判断
(if else)语句
条件判断语句的语法样式
if 语句
if else 语句
if ,else if, else 语句
if 语句
if(条件表达式){
// 要执行的代码;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var age = 22;
if(age >= 22){ //当age >= 22结果为 true,则运行{ }中的代码
alert("你已经22岁了！");
}
</script>
</body>
</html>
if else语句
if else 语句:
是 if 语句的升级版
它可以设置当前布尔表达式满足条件时,运行相应的代码
同时还指定了不满足条件时,运行相应的代码
if else语法样式:
if(条件表达式){
// 当表达式成立时要执行的代码
}else{
// 当表达式不成立时要执行的代码
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var age = 22;
if(age >= 22){ //当age >= 22结果为 true,则运行{ }中的代码
alert("你已经22岁!");
}else{
alert("你不是22岁!");
}
</script>
</body>
</html>
if else语句
if else 语句:
是 if 语句的升级版
它可以设置当前布尔表达式满足条件时,运行相应的代码
同时还指定了不满足条件时,运行相应的代码
if else语法样式:
if(条件表达式){
// 当表达式成立时要执行的代码
}else{
// 当表达式不成立时要执行的代码
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var age = 22;
if(age >= 22){ //当age >= 22结果为 true,则运行{ }中的代码
alert("你已经22岁!");
}else{
alert("你不是22岁!");
}
</script>
</body>
</html>
if ,else if, else 语句
if ,else if, else 语句:
在条件判断语句中定义多个分支
只要一个分支符合条件,则运行下面的代码
if (条件表达式 1) {
// 条件表达式 1 为真时执行的代码
} else if (条件表达式 2) {
// 条件表达式 2 为真时执行的代码
}
...
else if (条件表达式N) {
// 条件表达式 N 为真时执行的代码
} else {
// 所有条件表达式都为假时要执行的代码
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var now = new Date(); // 获取当前的完整日期
var dayOfWeek = now.getDay(); // 获取一个 0-6 之间的数字，用来表示当前是星期几，0 表示星期日、1 表示星期一、以此类推
if(dayOfWeek == 0) { // 判断当前是星期几
alert("星期日")
} else if(dayOfWeek == 1) {
alert("星期一")
} else if(dayOfWeek == 2) {
alert("星期二")
} else if(dayOfWeek == 3) {
alert("星期三")
} else if(dayOfWeek == 4) {
alert("星期四")
} else if(dayOfWeek == 5) {
alert("星期五")
} else {
alert("星期六")
}
</script>
</body>
</html>
JS switch case语句
switch语句根据表达式的值
依次与case子句中的值进行比较
当两者相等,则运行其后的语句段
当遇到break关键字时则跳出整个switch语句
当不相等,则继续匹配下一个case
switch语句包含一个可选default 关键字
当在前面case中没有找到相等的条件,则执行default后面语句段
switch case语法结构:
switch (表达式){
case value1:
statements1 //当表达式的结果等于 value1 时，则执行该代码
break;
case value2:
statements2 //当表达式的结果等于 value2 时，则执行该代码
break;
......
case valueN:
statementsN //当表达式的结果等于 valueN 时，则执行该代码
break;
default :
statements //当没有与表达式相同的值，则执行该代码
}
switch case语句关键字
break 关键字
break关键字的功能:
用于跳出switch语句,当然break还可以跳出for,for in ,while,do while等运行语句
switch关键字是按行运行
当switch遇到一个匹配成功的case语句时，此时我们不想程序继续向下运行，则需要在case的末尾加上break关键字
达到switch关键字运行完毕的效果
switch (id) {
case 1 :
console.log("id=====1");
break; //停止执行，跳出switch
case 2 :
console.log("id=====2");
break; //停止执行，跳出switch
case 3 :
console.log("id=====3");
break; //停止执行，跳出switch
default : //上述条件都不满足时，默认执行的代码
console.log("id不是1,2,3 !");
}
case 子句
case 语句：
后面跟上具体的条件代码
case 语句:
后面也可以省略
var id = 1;
switch (id) {
case 1 :
case 2 :
console.log("id ===2");
break;
case 3 :
console.log("id ===3");
break;
default :
console.log("id不等于2，也不等于3");
default语句
default是switch子句
位于switch内任意位置
不会影响其它 case 子句的正常执行
注意事项：
default后面还有case语句
default后面需加上break关键字
否则default后的case会运行
var id = 1;
switch (id) {
default :
console.log("default");
break;
case 1 :
console.log("===1===");
break;
case 2 :
console.log("===2===");
break；
case 3 :
console.log("===3===");
break;
}
//例2
var id = 3;
switch (id) {
default :
console.log("default");
case 1 :
console.log("===1===");
case 2 :
console.log("===2===");
}
九，JS循环语句
while循环语句
while循环语句当符合条件,可持续运行while条件后面的代码块
javascript之while循环
while (条件表达式) {
// 要执行的代码
}
while 循环在每次循环之前
会先对条件表达式进行求值
当条件表达式的结果为 true
则会运行{ }中的代码
当条件表达式的结果为false
则退出while循环
运行while 循环之后的代码
注意事项：
条件表达式编写的不合理
会产生死循环
输出1-10之间的数
var i = 1;
while( i <= 10) {
document.write(i+", ");
i++;
}
用 while 循环计算 1~100 之间所有整数的和
var i=1;
var sum=0;
while (i <= 100){
sum += i;
i++;
}
document.write("1 + 2 + 3 + ... + 98 + 99 + 100 = " + sum)
do while循环语句
do while循环语句的功能:
先运行后面的语句
然后再判断条件的真假
如果条件为真，则继续运行do while后面的代码
如果条件为假，则退出while循环,程序继续向下运行
do while语法:
do {
//满足条件后运行的代码
} while (条件表达式);
var i = 1;
do{
document.write(i + " ");
i++;
}while (i > 8);
do while求1~100所有数值的和
var i=1;
var sum=0;
do {
sum += i;
i++;
} while (i <= 100);
document.write("1 + 2 + 3 + ... + 98 + 99 + 100 = " + sum)
for循环语句
for循环语句：
根据传入的条件进行循环
for循环的语法:
for(initialization; condition; increment) {
// 要执行的代码
}
#initialization:
为一个表达式或者变量声明，我们通常将该步骤称为“
初始化计数器变量”，在循环过程中只会执行一次；
condition:
为一个条件表达式，与 while 循环中的条件表达式功能相同，
通常用来与计数器的值进行比较，以确定是否进行循环，
通过该表达式可以设置循环的次数；
increment:
为一个表达式，用来在每次循环结束后更新（递增或递减）计数器的值
for (var i = 1; i <= 10; i++) {
document.write(i + " ");
}
for循环嵌套—打印9*9乘法口诀
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
document.write(j + " x " + i + " = " + (i * j) + " ");
}
document.write("<br>");
}
for in循环语句
Javascript中for in 循环:
是一种特殊类型的循环
即是普通for循环的变体
for in的功能:
遍历对象
使用它可以将对象中的属性依次循环出来
for in 的语法:
for (variable in object) {
//待运行的代码
}
// 定义一个对象
var person = {"name": "maomao", "surname": "adeal", "age": 12};
// 遍历对象中所有属性
for(var prop in person) {
document.write("<p>" + prop + " = " + person[prop] + "</p>");
}
----运行以上代码,将输出以下信息-----
name = maomao
surname = adeal
age = 12
for of循环语句
for of循环:
是ECMAScript6中新添加的一个循环方式
与for in相似是普通 for 循环的一种变体
for of循环的应用场景：
遍历数组或其它可遍历的对象
如：
字符串、对象等
for of 循环的语法格式如下:
for (variable of iterable) {
// 要执行的代码
}
#variable:每次循环时单行数据缓存的变量
iterable:待遍历的内容
// 定义一个数组
var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
// 使用 for of 循环遍历数组中的每个元素
for (var value of arr) {
document.write(value + ", ");
}
document.write("<br>");
// 定义一个字符串
var str = "Hello linux28.com 我最爱的教程站！";
// 使用 for of 循环遍历字符串中的每个字符
for (var value of str) {
document.write(value + ", ");
}
document.write("<br>");
// 定义一个对象
var obj = {"name": "maomao", "surname": "adeal", "age":18};
// 使用 for of 循环遍历对象中的所有属性
for(var value in obj) {
document.write(value + ", ");
}
十， break和continue跳出循环
跳出的三种情况
1.for循环运行一半时，跳出
2.for循环—单个代码块-运行一半,直接进入下一个循环
3.while循环终止等
如何跳出
javascript中跳出循环可使用break和continue关键字实现
break:
直接终止当前循环
continue:
跳出循环,进入循环的下一条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>linux28.com 跳出循环示例</title>
</head>
<body>
<script>
for (var i = 0; i < 10; i++) {
if(i == 5) {
break;
}
document.write("i = " + i + " ");
}
document.write("<hr>");
for (var i = 0; i < 10; i++) {
if(i % 2 == 0) {
continue;
}
document.write(i + " ");
}
</script>
</body>
</html>
十 一，函数
javascript中的函数会分为内置函数和自建函数（函数：
是一组任务代码通常函数是会被多次运行）
函数(function)
函数语法:
function functionName(parameter_list) {
// 函数中的代码
}
function sayHello(name){
document.write("Hello " + name);
}
调用函数
只需输入函数名及函数参数即可
function sayHello() {
console.log("Hello!");
}
sayHello(); // 调用函数
还有一种函数调用方式是通过事件触发，比如点击按钮时调用某个函数。这种调用方式需要把函数名绑定到对应的事件上
<button onclick="sayHello()">Click me</button>
函数中参数的默认值
设置一个默认值
这样当我们在调用这个函数时
如果未输入参数信息，则会使用默认值
function greet(name = "World") {
console.log(`Hello, ${name}!`);
}
greet(); // 输出 "Hello, World!"
greet("Alice"); // 输出 "Hello, Alice!"
多个参数设置默认值
function foo(a, b = 0, c = 1) {
console.log(a, b, c);
}
foo(10); // 输出 "10 0 1"
foo(10, 20); // 输出 "10 20 1"
foo(10, 20, 30); // 输出 "10 20 30"
函数表达式
基本语法：
const functionName = function(parameters) {
// function body
};
functionName 是变量名，可以随意命名，用于引用该函数；parameters 是函数的参数列表；function body 是函数体
下面的代码中，我们使用函数表达式定义了一个名为 greet 的匿名函数，并将其赋值给 greet 变量。然后我们调用 greet 函数，传入参数 “Alice”，输出 Hello, Alice!。
const greet = function(name) {
console.log(`Hello, ${name}!`);
};
greet("Alice"); // 输出 "Hello, Alice!"
// 两种不同的写法
// 函数声明
function getSum(num1, num2) {
var total = num1 + num2;
return total;
}
// 函数表达式
var getSum = function(num1, num2) {
var total = num1 + num2;
return total;
};
十二，JS事件功能
JS 事件(event):
用于用户同网页进行交互操作
如:
单机某个链接或按钮
在文本框中输入文本
按下键盘上的某个按键、移动鼠标等
当事件发生时
JS事件注意事项:
JS事件都使用on开头
如:onclick,onload等
鼠标、键盘事件
onclick 点击鼠标时触发此事件
ondblclick 双击鼠标时触发此事件
onmousedown 按下鼠标时触发此事件
onmouseup 鼠标按下后又松开时触发此事件
onmouseover 当鼠标移动到某个元素上方时触发此事件
onmousemove 移动鼠标时触发此事件
onmouseout 当鼠标离开某个元素范围时触发此事件
onkeypress 当按下并松开键盘上的某个键时触发此事件
onkeydown 当按下键盘上的某个按键时触发此事件
onkeyup 当放开键盘上的某个按键时触发此事件
窗口事件
onabort 图片在下载过程中被用户中断时触发此事件
onbeforeunload 当前页面的内容将要被改变时触发此事件
onerror 出现错误时触发此事件
onload 页面内容加载完成时触发此事件
onmove 当移动浏览器的窗口时触发此事件
onresize 当改变浏览器的窗口大小时触发此事件
onscroll 当滚动浏览器的滚动条时触发此事件
onstop 当按下浏览器的停止按钮或者正在下载的文件被中断时触发此事件
oncontextmenu 当弹出右键上下文菜单时触发此事件
onunload 改变当前页面时触发此事件
表单事件
onblur 当前元素失去焦点时触发此事件
onchange 当前元素失去焦点并且元素的内容发生改变时触发此事件
onfocus 当某个元素获得焦点时触发此事件
onreset 当点击表单中的重置按钮时触发此事件
onsubmit 当提交表单时触发此事件
事件绑定
指事件绑定到html元素中,然后通过事件触发
onclick属性示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<button type="button" onclick="myBtn()">按钮</button>
<script type="text/javascript">
function myBtn(){
alert("Hello World!");
}
</script>
</body>
</html>
事件绑定的第二种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<button type="button" id="myBtn">按钮</button>
<script>
function sayHello() {
alert('Hello World!');
}
document.getElementById("myBtn").onclick = sayHello;
</script>
</body>
</html>
onmouseover 事件
当用户鼠标指针移动到元素上时触发的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<button type="button"
onmouseover="alert('您的鼠标已经移动到了该按钮上');">
请将鼠标移动至此处</button><br>
<a href="#" onmouseover="myEvent()">请将鼠标移动至此处</a>
<script>
function myEvent() {
alert('您的鼠标已经移动到了该链接上');
}
</script>
</body>
</html>
onmouseout事件
onmouseout 事件与 onmouseover 事件正好相反，onmouseout 事件会在鼠标从元素上离开时触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div style="width: 350px; height: 200px; border:1px solid black" id="myBox"></div>
<script>
function myEvent() {
alert('您的鼠标已经离开指定元素');
}
document.getElementById("myBox").onmouseout = myEvent;
</script>
</body>
</html>
onkeydown事件
onkeydown 事件是指当用户按下键盘上的某个按键时触发的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<input type="text" onkeydown="myEvent()">
<script>
function myEvent() {
alert("您按下了键盘上的某个按钮");
}
</script>
</body>
</html>
onkeyup 事件
当用户按下键盘上的某个按键并将其释放（即按下并松开某个按键）时触发的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<input type="text" onkeyup="myEvent()">
<script>
function myEvent() {
alert("您按下了键盘上的某个按钮，并将其释放了");
}
</script>
</body>
</html>
十三， JS作用域
作用域指:
变量的可见范围,我们将这个范围称之为“作用域”
JS作用域分为以下两种:
全局作用域和局部作用域
全局作用域
全局作用域指:
变量可以在当前脚本的任意位置访问，拥有全局作用域的变量也被称为“全局变量”，一般情况下拥有以下特征的变量具有全局作用域。
拥有全局作用域:
1.最外层的函数和在最外层函数外面定义的变量拥有全局作用域；
2.所有未定义直接赋值的变量拥有全局作用域；
3.所有window对象的属性拥有全局作用域
如:
window.name、window.location、window.top 等。
var str = "Hello YHW!";
function myTest(){
document.write(str); // 输出：Hello YHW!
}
myTest();
document.write(str); // 输出：Hello YHW!
全局作用域变量都会绑定到window对象
作为window对象的一个属性存在
var str = "JavaScript";
document.write(str); // 输出：JavaScript
document.write(window.str); // 输出：JavaScript
document.write(str === window.str); // 输出：true
局部作用域
在函数内部声明的变量具有局部作用域
拥有局部作用域的变量也被称为“局部变量”
局部变量只能在其作用域中(函数内部)使用
注意事项:
函数内定义的局部变量只有在函数被调用时才会生成
当函数执行完毕后会被立即销毁
function myTest(){
var str = "Hello YHW!";
document.write(str); // 输出：Hello YHW!
}
myTest();
document.write(str); // 报错：str is not defined
十四， JS对象与属性
对象和类型的区别
JavaScript 中，基本类型（原始值）和对象是两种不同的概念。JavaScript 中的基本类型有 Number、String、Boolean、null、undefined 和 Symbol（ES6 新增），它们是不可变的、简单的值类型，存储在栈内存中；而对象则是引用类型，可以动态地增加或删除属性，存储在堆内存中。
但是为了方便处理基本类型的数据，JavaScript 提供了对应的包装对象，即 Number、String、Boolean、null 和 undefined。这些包装对象提供了许多实用的方法和属性供我们使用，例如 Number.toFixed()、String.length 等等。当我们在基本类型上调用方法或者属性时，JavaScript 会临时将基本类型转换成对应的包装对象，然后再调用相应的方法或属性。这个过程称之为“自动装箱”。
JS创建对象的方法
用花括号{ }即可创建对象
{ }中包含:
定义对象中的属性
属性是一个个键:值对的组合
其中键(属性名称)始终是字符串类型的
值(属性值)则可以是任意类型
如:
字符串、数组、函数或其它对象等
不同的属性之间使用逗号进行分隔
如name(姓名)、age(年龄)、gender(性别）
var person = {
name: "maomao",
age: 16,
gender: "FeMale",
displayName: function() {
document.write(this.name);
}
};
//相关说明
//displayName是对象中的属性，
//function() {
document.write(this.name);
}
是属性值
Javascript访问属性值
使用以下两种方式访问属性值:
使用对象名逗号属性名
或
对象名[“属性名”]
注意事项：
当属性名为不规则名称时,此时需使用引号将属性名引起来
或使用变量名作为属性名
document.write("姓名：" + person.name + "<br>"); // 输出：姓名：maomao
document.write("年龄：" + person["age"]); // 输出：年龄：16
var k ="name";
document.write("姓名：" + person[k] + "<br>"); // 输出：姓名：maomao
删除对象属性
使用 delete 关键字即可删除js对象中的属性
delete 对象名.属性名
delete 对象名[“属性名”]
delete 对象名[属性名]
注意事项:
1.将属性值修改为undefined或null只会修改属性值
不会删除对象属性
2.删除对象属性,只能由delete关键字完成
delete person.name
delete person.age
delete person.gender
调用对象中的方法
使用 对象名.属性名()
或
对象名"属性名"
即可调用属性中的方法
person.displayName(); // 输出：maomao
person["displayName"](); // 输出：maomao
Number(数字)对象
JavaScript不区分整数和浮点数
所有数字统一使用IEEE754 标准（二进制浮点数算术标准）的 64 位浮点格式表示数字
Number对象
创建Number对象的语法格式如下：
var myTest = new Number(value);
var myTest = Number(value);
value:非数字值,此时无法转换,则会返回NaN
var a = new Number("8888");
var b = Number("9999");
var c = 678;
var d = new Number("abc");
document.write(typeof a + "<br>"); // 输出：object
document.write(typeof b + "<br>"); // 输出：number
document.write(typeof c + "<br>"); // 输出：number
document.write(d + "<br>"); // 输出：NaN
JavaScript中数值最大值:
Number.MAX_VALUE
JavaScript中数值最大值:
Number.MIN_VALUE
var x = 898; // 整数
var y = 8.75; // 浮点数
var z = 0xff; // 十六进制数：255
//当遇到比较大的数字时
//我们可以使用指数法表示
//如:
var x = 1.67e4; // 等于 16700
var y = 4.36e+6; // 等于 4360000
var z = 4.36e-6; // 等于 0.00000436
注意事项:
JavaScript 中能够表示的最大的整数是 2⁵³ - 1，
即 9007199254740991，能够表示的最小整数是 -(2⁵³ - 1)，即 -9007199254740991。
Number可以使用八进制也可以使用十六进制表示
八进制:
八进制:
使用 0 作为前缀
十六进制:
使用 0x 作为前缀
var a = 0322;
var b = 0xab;
Infinity(无穷)
Infinity:
正无穷大
-Infinity:
负无穷大
var a = 88 / 0; // 等于 Infinity
var b = -88 / 0; // 等于 -Infinity
NaN(非数字)
NaN是JavaScript中一个特殊值
用于某个值不是数字
NaN不等于(通过 、!=、=、!=== 比较)其它任何值(包括另外一个 NaN 值)
使用isNaN()函数可判断一个数是否为NaN
parseInt("java")、new Number("java");
任何操作数中包含NaN表达式
例:
88 * NaN
如:
"java"/5 也可返回NaN
Number 属性
Number.MAX_VALUE 能表示的最大值
Number.MIN_VALUE 能表示的最小值
Number.NaN 非数字
Number.NEGATIVE_INFINITY 负无穷,在溢出时返回
Number.POSITIVE_INFINITY 正无穷,在溢出时返回
Number.EPSILON 指1与Number 所能
表示的大于 1 的最小浮点数之间的差
Number.MIN_SAFE_INTEGER 最小安全整数,即 -9007199254740991
Number.MAX_SAFE_INTEGER 最大安全整数,即 9007199254740991
Number方法
Number.parseFloat() 将字符串转换成浮点数，和全局方法 parseFloat() 作用相同
Number.parseInt() 将字符串转换成整型数字，和全局方法 parseInt() 作用相同
Number.isFinite() 判断 Number 对象是否为有穷数
Number.isInteger() 判断 Number 对象是否为整数
Number.isNaN() 判断 Number 对象是否为 NaN 类型
Number.isSafeInteger() 判断 Number 对象是否为安全整数，即范围为 -(2⁵³ - 1)到 2⁵³ - 1 之间的整数
Number.toString() 把 Number 对象转换为字符串，使用指定的基数
Number.toLocaleString() 把 Number 对象转换为字符串，使用本地数字格式顺序
Number.toFixed() 把 Number 对象转换为字符串，结果的小数点后有指定位数的数字
Number.toExponential() 把 Number 对象的值转换为指数计数法
Number.toPrecision() 把 Number 对象格式化为指定的长度
Number.valueOf() 返回一个 Number 对象的基本数字值
String(字符串)对象
String对象创建的语法：
var val = new String(value);
var val = String(value);
value:指待创建的字符串或字符串对象。
String对象中属性
constructor #获取创建此对象的 String() 函数的引用
length #获取字符串的长度
prototype #通过该属性您可以向对象中添加属性和方法
var str = new String('YHW');
String.prototype.name = null;
str.name = "Hello World!";
document.write(str.constructor + "<br>"); // 输出：function String() { [native code] }
document.write(str.length + "<br>"); // 输出：3
document.write(str.name); // 输出：YHW
String 对象中的方法
anchor() 创建一个 HTML 锚点，即生成一个a标签，
标签的 name 属性为 anchor() 方法中的参数
big() 用大号字体显示字符串
blink() 显示闪动的字符串
bold() 使用粗体显示字符串
charAt() 返回在指定位置的字符
charCodeAt() 返回指定字符的 Unicode 编码
concat() 拼接字符串
fixed() 以打字机文本显示字符串
fontcolor() 使用指定的颜色来显示字符串
fontsize() 使用指定的尺寸来显示字符串
fromCharCode() 将字符编码转换为一个字符串
indexOf() 检索字符串，获取给定字符串在字符串对象中首次出现的位置
italics() 使用斜体显示字符串
lastIndexOf() 获取给定字符串在字符串对象中最后出现的位置
link() 将字符串显示为链接
localeCompare() 返回一个数字，并使用该数字来
表示字符串对象是大于、小于还是等于给定字符串
match() 根据正则表达式匹配字符串中的字符
replace() 替换与正则表达式匹配的子字符串
search() 获取与正则表达式相匹配字符串首次出现的位置
slice() 截取字符串的片断，并将其返回
small() 使用小字号来显示字符串
split() 根据给定字符将字符串分割为字符串数组
strike() 使用删除线来显示字符串
sub() 把字符串显示为下标
substr() 从指定索引位置截取指定长度的字符串
substring() 截取字符串中两个指定的索引之间的字符
sup() 把字符串显示为上标
toLocaleLowerCase() 把字符串转换为小写
toLocaleUpperCase() 把字符串转换为大写
toLowerCase() 把字符串转换为小写
toUpperCase() 把字符串转换为大写
toString() 返回字符串
valueOf() 返回某个字符串对象的原始值
var str = new String('5天速通JavaScript');
document.write(str.anchor("myanchor") + "<br>"); // 生成一段 HTML 代码：<a name="myanchor">5天速通JavaScript</a>
document.write(str.big() + "<br>"); // 生成一段 HTML 代码：<big>5天速通JavaScript</big>
document.write(str.blink() + "<br>"); // 生成一段 HTML 代码：<blink>5天速通JavaScript</blink>
document.write(str.bold() + "<br>"); // 生成一段 HTML 代码：<b>5天速通JavaScript</b>
document.write(str.charAt(2) + "<br>"); // 获取 str 中的第 2 个字符，输出：速
document.write(str.charCodeAt(2) + "<br>"); // 获取 str 中第 2 个字符的 Unicode 编码，输出：36895
document.write(str.concat(" String 对象") + "<br>"); // 将字符串“ String 对象”拼接到字符串 str 之后，输出：5天速通JavaScript String 对象
document.write(str.fixed() + "<br>"); // 生成一段 HTML 代码：<tt>5天速通JavaScript</tt>
document.write(str.fontcolor("red") + "<br>"); // 生成一段 HTML 代码：<font color="red">5天速通JavaScript</font>
document.write(str.fontsize(2) + "<br>"); // 生成一段 HTML 代码：<font size="2">5天速通JavaScript</font>
document.write(String.fromCharCode(72,69,76,76,79) + "<br>"); // 将 Unicode 编码转换为具体的字符，输出：HELLO
document.write(str.indexOf("Script") + "<br>"); // 获取字符串“Script”在 str 中首次出现的为，输出：8
document.write(str.italics() + "<br>"); // 生成一段 HTML 代码：<i>5天速通JavaScript</i>
document.write(str.lastIndexOf("a") + "<br>"); // 获取字符串“a”在 str 中最后一次出现的位置，输出 7
document.write(str.link("http://c.biancheng.net/") + "<br>"); // 生成一段 HTML 代码：<a href="http://c.biancheng.net/">5天速通JavaScript</a>
document.write(str.localeCompare("JavaScript") + "<br>"); // 比较字符串对象与给定字符串，返回：-1
document.write(str.match(/[abc]/g) + "<br>"); // 根据正则 /[abc]/g 检索 str，返回：a,a,c
document.write(str.replace(/[abc]/g, "Y") + "<br>"); // 使用字符串“Y”替换正则 /[abc]/g 匹配的字符，返回：5天速通JYvYSYript
document.write(str.search(/[Script]/g) + "<br>"); // 获取与正则匹配的字符串首次出现的位置，返回：8
document.write(str.slice(6,11) + "<br>"); // 截取字符串（获取 str 中第 7 到第 11 个字符），返回：vascr
document.write(str.small() + "<br>"); // 生成一段 HTML 代码：<small>5天速通JavaScript</small>
document.write(str.split("a") + "<br>"); // 根据“a”将字符串 str 拆分为数组，返回：5天速通J,v,Script
document.write(str.strike() + "<br>"); // 生成一段 HTML 代码：<strike>5天速通JavaScript</strike>
document.write(str.sub() + "<br>"); // 生成一段 HTML 代码：<sub>5天速通JavaScript</sub>
document.write(str.substr(3, 7) + "<br>"); // 从第 4 个字符开始，向后截取 7 个字符，返回：通JavaSc
document.write(str.substring(3, 7) + "<br>"); // 截取字符串（获取 str 中第 4 到第 7 个字符），返回：通Jav
document.write(str.sup() + "<br>"); // 生成一段 HTML 代码：<sup>5天速通JavaScript</sup>
document.write(str.toLocaleLowerCase() + "<br>"); // 返回：5天速通JavaScript
document.write(str.toLocaleUpperCase() + "<br>"); // 返回：5天速通JAVASCRIPT
document.write(str.toLowerCase() + "<br>"); // 返回：5天速通JavaScript
document.write(str.toUpperCase() + "<br>"); // 返回：5天速通JAVASCRIPT
document.write(str.toString() + "<br>"); // 返回：5天速通JavaScript
document.write(str.valueOf() + "<br>"); // 返回：5天速通JavaScript
Array(数组)对象
数组中的每个值称为一个元素
每个元素在数组中都有一个数字位置,称为索引
数组的索引从0开始,依次递增
语法
ar arr = new Array(values);
var arr = Array(values);
values:各元素组成的列表
元素和元素之间使用逗号分隔
var arrs = new Array("YHW1", "YHW2", "YHW3");
console.log(arrs); //打印出信息 ["YHW1", "YHW2", "YHW3"]
var arrs = ["YHW1", "YHW2", "YHW3" ];
console.log(arrs); // 输出：(3) ["YHW1", "YHW2", "YHW3"]
您可以通过数组的索引来访问数组中的各个元素，示例代码如下：
var arrs = ["YHW1", "YHW2", "YHW3"];
document.write(arrs[0] + "<br>"); // 输出：YHW1
document.write(arrs[1] + "<br>"); // 输出：YHW2
document.write(arrs[2] + "<br>"); // 输出：YHW3
Array对象中的属性
constructor 返回创建数组对象的原型函数
length 设置或返回数组中元素的个数
prototype 通过该属性您可以向对象中添加属性和方法
var users = new Array("YHW1", "YHW2", "YHW3");
Array.prototype.name = null;
users.name = "5天速通JavaScript";
document.write(users.constructor + "<br>"); // 输出：function Array() { [native code]} 具体输出结果取决于users变量的类型和实现，如果users是一个数组，则输出结果应该为function Array() { [native code] }，如果users是一个对象，则输出结果应该为function Object() { [native code] }
document.write(users.length + "<br>"); // 输出：3
document.write(users.name + "<br>"); // 输出：5天速通JavaScript
Array对象中方法
concat() 拼接两个或更多的数组，并返回结果
copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中
entries() 返回数组的可迭代对象
every() 检测数值元素的每个元素是否都符合条件
fill() 使用一个固定值来填充数组
filter() 检测数值元素，并返回符合条件所有元素的数组
find() 返回符合传入函数条件的数组元素
findIndex() 返回符合传入函数条件的数组元素索引
forEach() 数组每个元素都执行一次回调函数
from() 通过给定的对象中创建一个数组
includes() 判断一个数组是否包含一个指定的值
indexOf() 搜索数组中的元素，并返回它所在的位置
isArray() 判断对象是否为数组
join() 把数组的所有元素放入一个字符串
keys() 返回数组的可迭代对象，包含原始数组的键（key）
lastIndexOf() 搜索数组中的元素，并返回它最后出现的位置
map() 通过指定函数处理数组的每个元素，并返回处理后的数组
pop() 删除数组的最后一个元素并返回删除的元素
push() 向数组的末尾添加一个或更多元素，并返回数组的长度
reduce() 累加（从左到右）数组中的所有元素，并返回结果
reduceRight() 累加（从右到左）数组中的所有元素，并返回结果
reverse() 反转数组中元素的顺序
shift() 删除并返回数组的第一个元素
slice() 截取数组的一部分，并返回这个新的数组
some() 检测数组元素中是否有元素符合指定条件
sort() 对数组的元素进行排序
splice() 从数组中添加或删除元素
toString() 把数组转换为字符串，并返回结果
unshift() 向数组的开头添加一个或多个元素，并返回新数组的长度
valueOf() 返回数组对象的原始值
var users = ["YHW1", "YHW2", "YHW3", "YHW4", "YHW5"];
document.write(users.entries() + "<br>"); // 返回：[object Array Iterator]
document.write(users.includes("YHW1") + "<br>"); // 返回：true
document.write(users.fill("小傻瓜") + "<br>"); // 返回：小傻瓜,小傻瓜,小傻瓜,小傻瓜,小傻瓜
var users = ["YHW1", "YHW2", "YHW3", "YHW4", "YHW5"];
document.write(users.indexOf("YHW5") + "<br>"); // 返回：4
document.write(Array.isArray(users) + "<br>"); // 返回：true
document.write(users.join("-") + "<br>"); // 返回：YHW1-YHW2-YHW3-YHW4-YHW5
document.write(users.lastIndexOf("YHW2") + "<br>"); // 返回：1
document.write(users.pop() + "<br>"); // 返回：YHW5
document.write(users.push("水葫芦") + "<br>"); // 返回：6
document.write(users.unshift("李四","张三") + "<br>"); // 返回：8
document.write(users.slice(1, 5) + "<br>"); // 返回：张三,YHW1,YHW2,YHW3
document.write(users.sort() + "<br>"); // 返回：YHW1,YHW2,YHW3,YHW4,YHW5,张三,李四,水葫芦
document.write(users.valueOf() + "<br>"); // 返回：YHW1,YHW2,YHW3,YHW4,YHW5,张三,李四,水葫芦
Date(日期/时间)对象
使用此对象可访问计算机系统的时间
Date对象对外提供操作日期时间的多种方法
创建Date对象的方法
四种方法创建Date对象
var time = new Date();
var time = new Date(milliseconds);
var time = new Date(datestring);
var time = new Date(year, month, date[, hour, minute, second, millisecond]);
使用具年月日、时分秒生成Date对象:
year:年,笔者推荐使用四位数字年份
month:月,0代表1月,1代表2月,以此类推；
date:月份中的某一天,1代表 1号,2代表2号,以此类推
hour:时,是使用24 小时制表示，取值范围为 0 ~ 23
minute:分,取值范围为 0 ~ 59；
second:秒,取值范围为 0 ~ 59；
millisecond:毫秒,取值范围为 0 ~ 999
Date对象中属性
constructor 返回创建 Date 对象的原型函数
prototype 通过该属性您可以向对象中添加属性和方法
var time = new Date();
Date.prototype.name = null;
time.name = "JavaScript";
document.write(time.constructor + "<br>"); // 输出：function Date() { [native code] }
document.write(time.name + "<br>"); // 输出：JavaScript
Date对象中方法
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)
getMonth() 从 Date 对象返回月份 (0 ~ 11)
getFullYear() 从 Date 对象返回四位数字的年份
getYear() 已废弃，请使用 getFullYear() 方法代替
getHours() 返回 Date 对象的小时 (0 ~ 23)
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)
getTime() 返回 1970 年 1 月 1 日至今的毫秒数
getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差
getUTCDate() 根据通用时间从 Date 对象返回月中的一天 (1 ~ 31)
getUTCDay() 根据通用时间从 Date 对象返回周中的一天 (0 ~ 6)
getUTCMonth() 根据通用时间从 Date 对象返回月份 (0 ~ 11)
getUTCFullYear() 根据通用时间从 Date 对象返回四位数的年份
getUTCHours() 根据通用时间返回 Date 对象的小时 (0 ~ 23)
getUTCMinutes() 根据通用时间返回 Date 对象的分钟 (0 ~ 59)
getUTCSeconds() 根据通用时间返回 Date 对象的秒钟 (0 ~ 59)
getUTCMilliseconds() 根据通用时间返回 Date 对象的毫秒(0 ~ 999)
parse() 返回1970年1月1日午夜到指定日期(字符串)的毫秒数
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)
setMonth() 设置 Date 对象中月份 (0 ~ 11)
setFullYear() 设置 Date 对象中的年份(四位数字)
setYear() 已废弃，请使用 setFullYear() 方法代替
setHours() 设置 Date 对象中的小时 (0 ~ 23)
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)
setTime() 以毫秒设置 Date 对象
setUTCDate() 根据通用时间设置 Date 对象中月份的一天 (1 ~ 31)
setUTCMonth() 根据通用时间设置 Date 对象中的月份 (0 ~ 11)
setUTCFullYear() 根据通用时间设置 Date 对象中的年份(四位数字)
setUTCHours() 根据通用时间设置 Date 对象中的小时 (0 ~ 23)
setUTCMinutes() 根据通用时间设置 Date 对象中的分钟 (0 ~ 59)
setUTCSeconds() 根据通用时间设置 Date 对象中的秒钟 (0 ~ 59)
setUTCMilliseconds() 根据通用时间设置 Date 对象中的毫秒 (0 ~ 999)
toSource() 返回该对象的源代码
toString() 把 Date 对象转换为字符串
toTimeString() 把 Date 对象的时间部分转换为字符串
toDateString() 把 Date 对象的日期部分转换为字符串
toGMTString() 已废弃，请使用 toUTCString() 方法代替
toUTCString() 根据通用时间，把 Date 对象转换为字符串
toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串
toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串
toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串
UTC() 根据通用时间返回 1970 年 1 月 1 日 到指定日期的毫秒数
valueOf() 返回 Date 对象的原始值
var time = new Date();
document.write(time.getDate() + "<br>");
document.write(time.getDay() + "<br>");
document.write(time.getFullYear() + "<br>");
document.write(time.getHours() + "<br>");
document.write(time.getMonth() + "<br>");
document.write(time.getTime() + "<br>");
document.write(time.getUTCDate() + "<br>");
document.write(time.toDateString() + "<br>");
document.write(time.toString() + "<br>");
document.write(time.toLocaleDateString() + "<br>");
document.write(time.toLocaleTimeString() + "<br>");
document.write(time.toLocaleString() + "<br>");
Math(数学)对象
Math是JavaScript中的一个内置对象
Math对象中提供数学中常用的信息
如:PI常量值、数学函数、平均数、绝对值、四舍五入等操作方法
var pi_val = Math.PI; // 数学中 π 的值：3.141592653589793
var abs_val = Math.sin(-5.35); // -5.35 的绝对值：5.35
E 返回算术常量 e，即自然对数的底数(约等于 2.718)
LN2 返回 2 的自然对数(约等于 0.693)
LN10 返回 10 的自然对数(约等于 2.302)
LOG2E 返回以 2 为底的 e 的对数(约等于 1.443)
LOG10E 返回以 10 为底的 e 的对数(约等于 0.434)
PI 返回圆周率 π(约等于 3.14159)
SQRT1_2 返回返回 2 的平方根的倒数(约等于 0.707)
SQRT2 返回 2 的平方根（约等于 1.414）
document.write(Math.E + "<br>"); // 输出：2.718281828459045
document.write(Math.LN2 + "<br>"); // 输出：0.6931471805599453
document.write(Math.LN10 + "<br>"); // 输出：2.302585092994046
document.write(Math.LOG2E + "<br>"); // 输出：1.4426950408889634
document.write(Math.LOG10E + "<br>"); // 输出：0.4342944819032518
document.write(Math.PI + "<br>"); // 输出：3.141592653589793
document.write(Math.SQRT1_2 + "<br>"); // 输出：0.7071067811865476
document.write(Math.SQRT2 + "<br>"); // 输出：1.4142135623730951
Math对象中方法说明
abs(x) 返回 x 的绝对值
acos(x) 返回 x 的反余弦值
acosh(x) 返回 x 的反双曲余弦值
asin(x) 返回 x 的反正弦值
asinh(x) 返回 x 的反双曲正弦值
atan(x) 返回 x 的反正切值
atanh(x) 返回 x 的反双曲正切值
atan2(y,x) 返回 y/x 的反正切值
cbrt(x) 返回 x 的立方根
ceil(x) 对 x 进行向上取整，即返回大于 x 的最小整数
clz32(x) 返回将 x 转换成 32 无符号整形数字的二进制形式后，开头 0 的个数
cos(x) 返回 x 的余弦值
cosh(x) 返回 x 的双曲余弦值
exp(x) 返回算术常量 e 的 x 次方，即 Ex
expm1(x) 返回 exp(x) - 1 的值
floor(x) 对 x 进行向下取整，即返回小于 x 的最大整数
fround(x) 返回最接近 x 的单精度浮点数
hypot([x, [y, […]]]) 返回所有参数平方和的平方根
imul(x, y) 将参数 x、y 分别转换位 32 位整数，并返回它们相乘后的结果
log(x) 返回 x 的自然对数
log1p(x) 返回 x 加 1 后的自然对数
log10(x) 返回 x 以 10 为底的对数
log2(x) 返回 x 以 2 为底的对数
max([x, [y, […]]]) 返回多个参数中的最大值
min([x, [y, […]]]) 返回多个参数中的最小值
pow(x,y) 返回 x 的 y 次幂
random() 返回一个 0 到 1 之间的随机数
round(x) 返回 x 四舍五入后的整数
sign(x) 返回 x 的符号，即一个数是正数、负数还是 0
sin(x) 返回 x 的正弦值
sinh(x) 返回 x 的双曲正弦值
sqrt(x) 返回 x 的平方根
tan(x) 返回 x 的正切值
tanh(x) 返回 x 的双曲正切值
toSource() 返回字符串"Math"
trunc(x) 返回 x 的整数部分
valueOf() 返回 Math 对象的原始值
document.write(Math.abs(-4.287) + "<br>");
document.write(Math.acos(0.6) + "<br>");
document.write(Math.ceil(1.23) + "<br>");
document.write(Math.exp(1) + "<br>");
document.write(Math.floor(4.88) + "<br>");
document.write(Math.log(8) + "<br>");
document.write(Math.max(2, 80, 11, 19) + "<br>");
document.write(Math.min(2, 80, 11, 19) + "<br>");
document.write(Math.random() + "<br>");
document.write(Math.pow(3, 4) + "<br>");
document.write(Math.sign(-46) + "<br>");
document.write(Math.sqrt(234) + "<br>");
RegExp(正则表达式)对象
正则表达式：
是一种用于匹配字符串或特殊字符的一种公式
这种公式按照正则表达式的规则进行组合,即可得到一个正则表达式
在JavaScript中，正则表达式由两个斜杠之间包含一个模式组成：/pattern/。
定义正则表达式的方法：
由字母、数字、标点以及一些特殊特殊字符组成
如:
/abc/、/(\d+)\.\d*/
RegExp对象的两种方法：
var patt = new RegExp(pattern, modifiers);
var patt = /pattern/modifiers;
注释：
pattern:
正则表达式
按照正则表达式的语法定义的正则表达式
modifiers：
修饰符
用来设置字符串的匹配模式
可选值如下表所示：
pattern: 正则表达式
按照正则表达式的语法定义的正则表达式
modifiers： 修饰符
用来设置字符串的匹配模式
修饰符说明
i 执行对大小写不敏感的匹配
g 执行全局匹配(查找所有的匹配项，而非在找到第一个匹配项后停止)
m 执行多行匹配
s 允许使用.匹配换行符
u 使用 Unicode 码的模式进行匹配
y 执行“粘性”搜索，匹配从目标字符串的当前位置开始
用new关键字创建RegExp对象时
需要将正则表达式中的特殊字符转义
即在特殊字符前加反斜杠\，例如\w+。
正则表达式中特殊字符说明
.：匹配任意单个字符，但不匹配换行符。
^：匹配输入字符串的开始位置。
$：匹配输入字符串的结束位置。
*：匹配前面的子表达式零次或多次。
+：匹配前面的子表达式一次或多次。
?：匹配前面的子表达式零次或一次。
{n}：匹配前面的子表达式恰好 n 次。
{n,}：匹配前面的子表达式至少 n 次。
{n,m}：匹配前面的子表达式至少 n 次，但是不超过 m 次。
[]：定义一个字符集合，匹配括号内的任意一个字符。
[^]：定义一个否定的字符集合，匹配除括号内的字符以外的任意一个字符。
()：标记一个子表达式的开始和结束位置。
|：指明两项之间的一个选择。
使用正则表达式
exec() 在字符串搜索匹配项，并返回一个数组，
当没有匹配项则返回 null
test() 测试字符串是否与正则表达式匹配，匹配则返回 true，不匹配则返回 false
toString() 返回表示指定对象的字符串
String对象中
提供一些方法来运行正则表达式
search() 在字符串中搜索匹配项，并返回第一个匹配的结果
当没有找到匹配项则返回 -1
match() 在字符串搜索匹配项，并返回一个数组，
当没有匹配项则返回 null
matchAll() 在字符串搜索所有匹配项，并返回一个迭代器(iterator)
replace() 替换字符串中与正则表达式相匹配的部分
split() 按照正则表达式将字符串拆分为一个字符串数组
RegExp对象中
constructor 返回一个函数，
该函数是一个创建 RegExp 对象的原型
global 判断是否设置了修饰符 “g”
ignoreCase 判断是否设置了修饰符 “i”
lastIndex 用于规定下次匹配的起始位置
multiline 判断是否设置了修饰符 “m”
source 返回正则表达式的匹配模式
var str = "Hello World!";
var reg = /[a-g]/g;
document.write(reg.exec(str) + "<br>"); // 输出：e
document.write(reg.test(str) + "<br>"); // 输出：true
document.write(reg.toString() + "<br>"); // 输出：/[a-g]/g
document.write(str.search(reg) + "<br>"); // 输出：1
document.write(str.match(reg) + "<br>"); // 输出：e,d
document.write(str.matchAll(reg) + "<br>"); // 输出：[object RegExp String Iterator]
document.write(str.replace(reg, "+") + "<br>"); // 输出：H+llo Worl+!
document.write(str.split(reg) + "<br>"); // 输出：H,llo Worl,!
十五，DOM(文档对象模型)
文档对象模型(Document Object Model,简称 DOM)
是一种与平台和语言无关的模型
用于表示 HTML 或 XML 文档
DOM模型是将html中的元素及内容转换为一个对象，这个对象就是DOM对象可以毫不夸张的说:"网页加载的同时，就会将整个HTML内容转换为一个DOM对象"我们可以通过JS操作这个DOM对象，从而达到修改HTML内容的目的。
始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：
更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。
Dom的产生
当浏览器访问一个html文档时，会创建一个Document 对象 Document 对象是 DOM 树中所有节点的根节点，我们可以访问Document对象达到访问所有HTML所有元素的目的。
节点：Node——构成HTML文档最基本的单元
查找 HTML 元素
获取 HTML 的值
改变 HTML 的值
修改 HTML 元素
查找 HTML 父子
document.addEventListener("click", function(){
document.body.innerHTML = document.activeElement;
var box = document.createElement('div');
document.body.appendChild(box);
var att = document.createAttribute('id');
att.value = "myDiv";
document.getElementsByTagName('div')[0].setAttributeNode(att);
document.getElementById("myDiv").innerHTML = Math.random();
var btn = document.createElement("button");
var t = document.createTextNode("按钮");
btn.appendChild(t);
document.body.appendChild(btn);
var att = document.createAttribute('onclick');
att.value = "myfunction()";
document.getElementsByTagName('button')[0].setAttributeNode(att);
});
function myfunction(){
alert(document.title);
}
Element对象
在DOM（文档对象模型）中，所有的HTML标签都可以表示成一个Element对象。
Element对象的获取方法：
getElementsByTagName()、getElementById()、getElementsByClassName() 等
Element对象中的属性
element.accessKey 设置或返回一个访问单选按钮的快捷键
element.attributes 返回一个元素的属性数组
element.childNodes 返回元素的一个子节点的数组
element.children 返回元素中子元素的集合
element.classList 返回元素中类名组成的对象
element.className 设置或返回元素的 class 属性
element.clientHeight 返回内容的可视高度（不包括边框，边距或滚动条）
element.clientWidth 返回内容的可视宽度（不包括边框，边距或滚动条）
element.contentEditable 设置或返回元素的内容是否可编辑
element.dir 设置或返回一个元素中的文本方向
element.firstChild 返回元素中的第一个子元素
element.id 设置或者返回元素的 id
element.innerHTML 设置或者返回元素的内容
element.isContentEditable 返回元素内容是否可编辑，如果可编辑则返回 true，否则返回 false
element.lang 设置或者返回一个元素的语言
element.lastChild 返回元素的最后一个子元素
element.namespaceURI 返回命名空间的 URI
element.nextSibling 返回指定元素之后的兄弟元素，两个元素在 DOM 树中位于同一层级（包括文本节点、注释节点）
element.nextElementSibling 返回指定元素之后的兄弟元素，两个元素在 DOM 树中位于同一层级（不包括文本节点、注释节点）
element.nodeName 返回元素名称（大写）
element.nodeType 返回元素的节点类型
element.nodeValue 返回元素的节点值
element.offsetHeight 返回元素的高度，包括边框和内边距，但不包括外边距
element.offsetWidth 返回元素的宽度，包括边框和内边距，但不包括外边距
element.offsetLeft 返回元素在水平方向的偏移量
element.offsetParent 返回距离该元素最近的进行过定位的父元素
element.offsetTop 返回元素在垂直方向的偏移量
element.ownerDocument 返回元素的根元素（文档对象）
element.parentNode 返回元素的父节点
element.previousSibling 返回元素之前的兄弟元素，两个元素在 DOM 树中位于同一层级（包括文本节点、注释节点）
element.previousElementSibling 返回元素之前的兄弟元素，两个元素在 DOM 树中位于同一层级（不包括文本节点、注释节点）
element.scrollHeight 返回元素的完整高度（包括被滚动条隐蔽的部分）
element.scrollLeft 设置或返回元素滚动条距离元素左侧的距离
element.scrollTop 设置或返回元素滚动条距离元素上方的距离
element.scrollWidth 返回元素的完整宽度（包括被滚动条隐蔽的部分）
element.style 设置或返回元素的样式属性
element.tabIndex 设置或返回元素的标签顺序
element.tagName 以字符的形式返回元素的名称（大写）
element.textContent 设置或返回某个元素以及其中的文本内容
element.title 设置或返回元素的 title 属性
element.length 返回对象的长度
Element对象中方法
element.addEventListener() 为指定元素定义事件
element.appendChild() 为元素添加一个新的子元素
element.cloneNode() 克隆某个元素
element.compareDocumentPosition() 比较当前元素与指定元素在文档中的位置，
返回值如下：
1：表示两个元素没有关系，不属于同一文档；
2：表示当前元素在指定元素之后；
4：当前元素在指定元素之前；
8：当前元素在指定元素之内；
16：指定元素在当前元素之内；
32：两个元素没有关系，或者它们是同一元素的两个属性
element.focus() 使元素获得焦点
element.getAttribute() 通过属性名称获取指定元素的属性值
element.getAttributeNode() 通过属性名称获取指定元素得属性节点
element.getElementsByTagName() 通过标签名获取当前元素下的所有子元素的集合
element.getElementsByClassName() 通过类名获取当前元素下的子元素的集合
element.hasAttribute() 判断元素是否具有指定的属性，若存在则返回 true，不存在则返回 false
element.hasAttributes() 判断元素是否存在任何属性，若存在则返回 true，不存在则返回 false
element.hasChildNodes() 判断一个元素是否具有子元素，有则返回 true，没有则返回 false
element.hasFocus() 判断元素是否获得了焦点
element.insertBefore() 在已有子元素之前插入一个新的子元素
element.isDefaultNamespace() 如果指定 namespaceURI 是默认的则返回 true，否则返回 false
element.isEqualNode() 检查两个元素是否相等
element.isSameNode() 检查当前元素与指定元素是否为同一元素
element.isSupported() 判断当前元素是否支持某个特性
element.normalize() 合并相邻的文本节点，并删除空的文本节点
element.querySelector() 根据CSS选择器，返回第一个匹配的元素
document.querySelectorAll() 根据CSS选择器，返回所有匹配的元素
element.removeAttribute() 从元素中删除指定的属性
element.removeAttributeNode() 从元素中删除指定的属性节点
element.removeChild() 删除一个子元素
element.removeEventListener() 移除由 addEventListener() 方法添加的事件
element.replaceChild() 替换一个子元素
element.setAttribute() 设置或者修改指定属性的值
element.setAttributeNode() 设置或者修改指定的属性节点
element.setUserData() 在元素中为指定键值关联对象
element.toString() 将元素转换成字符串
nodelist.item() 返回某个元素基于文档树的索引
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5天速成JavaScript</title>
</head>
<body onload="accesskey()">
<a id="r" class="ttt yyy uuu" href="javascript:;">使用 Alt + r 访问该元素</a><br>
<a id="g" href="javascript:;">使用 Alt + g 访问该元素</a>
<script type="text/javascript">
function accesskey(){
document.getElementById('r').accessKey="r"
document.getElementById('g').accessKey="g"
}
var ele = document.getElementById('r');
console.log(ele.attributes); // 输出：NamedNodeMap {0: id, 1: href, id: id, href: href, length: 2}
console.log(document.body.childNodes); // 输出：NodeList(7) [text, a#r, br, text, a#g, text, script]
console.log(ele.classList); // 输出：DOMTokenList(3) ["ttt", "yyy", "uuu", value: "ttt yyy uuu"]
console.log(ele.className); // 输出：aaa bbb ccc
console.log(ele.clientHeight); // 输出：DOMTokenList(3) ["ttt", "yyy", "uuu", value: "ttt yyy uuu"]
console.log(ele.tagName); // 输出：A
console.log(ele.compareDocumentPosition(document.getElementById('g'))); // 输出：4
console.log(ele.getAttribute('href')); // 输出：javascript:;
console.log(ele.getAttributeNode('href')); // 输出：href="javascript:;"
</script>
</body>
</html>
attributes对象
attributes对象:
包含元素对象的属性及可通过此对象操作元素的属性
如:对html元素属性进行增、删、改操作.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5天速成JavaScript</title>
</head>
<body>
<a href="javascript:;" target="_blank" id="linkTest">JavaScript</a><br>
<script type="text/javascript">
var atag = document.getElementById('linkTest');
var attr = atag.attributes;
document.write(attr.target.value + "<br>"); // 输出：_blank
document.write(attr.target.name + "<br>"); // 输出：target
document.write(attr.target.specified + "<br>"); // 输出：true
document.write(attr.getNamedItem('href').textContent + "<br>"); // 输出：javascript:;
document.write(attr.item(0).name + "<br>"); // 输出：href
document.write(attr.length + "<br>"); // 输出：3
document.write(attr.removeNamedItem('target') + "<br>"); // 输出：[object Attr]
var cla = document.createAttribute('class');
cla.value = 'democlass';
document.write(attr.setNamedItem(cla) + "<br>"); // 输出：null
</script>
</body>
</html>
十六，BOM(浏览器对象模型)
浏览器对象模型(Browser Object Model,简称BOM)JavaScript的组成部分之一，借助BOM设置JavaScript程序与浏览器交互能力。
Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象
Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效
Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息。
Window对象
JavaScript 有三种类型的弹出框：警告框、确认框和提示框。
警告框
window.alert("sometext");
确认框
window.confirm("sometext");
例
var r = confirm("请按按钮");
if (r == true) {
x = "您按了确认！";
} else {
x = "您按了取消！";
}
提示框
window.prompt("sometext","defaultText");
var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
console.log(person);
}
window对象中常见属性
closed 返回窗口是否已被关闭
defaultStatus 设置或返回窗口状态栏中的默认文本
document 对 Document 对象的只读引用
frames 返回窗口中所有已经命名的框架集合，集合由 Window 对象组成，每个 Window 对象在窗口中含有一个 <frame> 或 <iframe> 标签
history 对History 对象的只读引用，该对象中包含了用户在浏览器中访问过的 URL
innerHeight 返回浏览器窗口的高度，不包含工具栏与滚动条
innerWidth 返回浏览器窗口的宽度，不包含工具栏与滚动条
localStorage 在浏览器中以键值对的形式保存某些数据，保存的数据没有过期时间，会永久保存在浏览器中，直至手动删除
length 返回当前窗口中 <iframe> 框架的数量
location 引用窗口或框架的 Location 对象，该对象中包含当前 URL 的有关信息
name 设置或返回窗口的名称
navigator 对 Navigator 对象的只读引用，该对象中包含当前浏览器的有关信息
opener 返回对创建此窗口的 window 对象的引用
outerHeight 返回浏览器窗口的完整高度，包含工具栏与滚动条
outerWidth 返回浏览器窗口的完整宽度，包含工具栏与滚动条
pageXOffset 设置或返回当前页面相对于浏览器窗口左上角沿水平方向滚动的距离
pageYOffset 设置或返回当前页面相对于浏览器窗口左上角沿垂直方向滚动的距离
parent 返回父窗口
screen 对Screen 对象的只读引用，该对象中包含计算机屏幕的相关信息
screenLeft 返回浏览器窗口相对于计算机屏幕的 X 坐标
screenTop 返回浏览器窗口相对于计算机屏幕的 Y 坐标
screenX 返回浏览器窗口相对于计算机屏幕的 X 坐标
sessionStorage 在浏览器中以键值对的形式存储一些数据，数据会在关闭浏览器窗口或标签页之后删除
screenY 返回浏览器窗口相对于计算机屏幕的 Y 坐标
self 返回对 window 对象的引用
status 设置窗口状态栏的文本
top 返回最顶层的父窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5天速成JavaScript</title>
</head>
<body>
<script type="text/javascript">
window.defaultStatus = "JavaScript"
document.write(window.defaultStatus + "<br>"); // 输出：JavaScript
document.write(window.innerHeight + "<br>"); // 输出：314
document.write(window.innerWidth + "<br>"); // 输出：539
document.write(window.length + "<br>"); // 输出：0
document.write(window.location + "<br>"); // 输出：file:///D:/test/js.html
document.write(window.opener + "<br>"); // 输出：null
document.write(window.outerHeight + "<br>"); // 输出：558
document.write(window.outerWidth + "<br>"); // 输出：555
document.write(window.parent + "<br>"); // 输出：[object Window]
document.write(window.screenLeft + "<br>"); // 输出：2263
document.write(window.screenTop + "<br>"); // 输出：401
document.write(window.screenX + "<br>"); // 输出：2263
document.write(window.screenY + "<br>"); // 输出：401
</script>
</body>
</html>
window对象中方法
alert() 在浏览器窗口中弹出一个提示框，提示框中有一个确认按钮
atob() 解码一个 base-64 编码的字符串
btoa() 创建一个 base-64 编码的字符串
blur() 把键盘焦点从顶层窗口移开
clearInterval() 取消由 setInterval() 方法设置的定时器
clearTimeout() 取消由 setTimeout() 方法设置的定时器
close() 关闭某个浏览器窗口
confirm() 在浏览器中弹出一个对话框，对话框带有一个确认按钮和一个取消按钮
createPopup() 创建一个弹出窗口，注意：只有 IE 浏览器支持该方法
focus() 使一个窗口获得焦点
getSelection() 返回一个 Selection 对象，对象中包含用户选中的文本或光标当前的位置
getComputedStyle() 获取指定元素的 CSS 样式
matchMedia() 返回一个 MediaQueryList 对象，表示指定的媒体查询解析后的结果
moveBy() 将浏览器窗口移动指定的像素
moveTo() 将浏览器窗口移动到一个指定的坐标
open() 打开一个新的浏览器窗口或查找一个已命名的窗口
print() 打印当前窗口的内容
prompt() 显示一个可供用户输入的对话框
resizeBy() 按照指定的像素调整窗口的大小，即将窗口的尺寸增加或减少指定的像素
resizeTo() 将窗口的大小调整到指定的宽度和高度
scroll() 已废弃。您可以使用 scrollTo() 方法来替代
scrollBy() 将窗口的内容滚动指定的像素
scrollTo() 将窗口的内容滚动到指定的坐标
setInterval() 创建一个定时器，按照指定的时长（以毫秒计）来不断调用指定的函数或表达式
setTimeout() 创建一个定时器，在经过指定的时长（以毫秒计）后调用指定函数或表达式，只执行一次
stop() 停止页面载入
postMessage() 安全地实现跨源通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>linux28.com -JavaScript</title>
</head>
<body>
<p id="show_tag">此处显示点击按钮的效果</p>
<button onclick="myBtoa()">btoa()</button>
<button onclick="myAtob()">atob()</button>
<button onclick="myAlert()">alert()</button>
<button onclick="myConfirm()">confirm()</button>
<button onclick="myOpen()">open()</button>
<button onclick="myMoveBy()">moveBy()</button>
<button onclick="myMoveTo()">moveTo()</button>
<button onclick="myPrint()">print()</button>
<button onclick="myPrompt()">prompt()</button>
<button onclick="myResizeBy()">resizeBy()</button>
<button onclick="myClose()">close()</button>
<script type="text/javascript">
var ptag = document.getElementById('show_tag');
var str;
function myBtoa(){
str = btoa("JavaScript");
ptag.innerHTML = str;
}
function myAtob(){
ptag.innerHTML = typeof str;
if(str == undefined){
ptag.innerHTML = "请先点击 btoa() 按钮";
return;
}
ptag.innerHTML = atob(str);
}
function myAlert(){
alert("这是一个提示框！");
}
function myConfirm(){
var x;
var r = confirm("按下按钮!");
if (r == true){
x = "你按下了\"确定\"按钮!";
}
else{
x = "你按下了\"取消\"按钮!";
}
ptag.innerHTML = x;
}
var myWin;
function myOpen(){
if(myWin == undefined || (myWin != undefined && myWin.closed == true)){
myWin = window.open('', '', 'width=200,height=100');
}else{
return;
}
}
function myMoveBy(){
if(myWin == undefined || myWin.closed == true) myOpen();
myWin.moveBy(200, 200);
}
function myMoveTo(){
if(myWin == undefined || myWin.closed == true) myOpen();
myWin.moveTo(0, 0);
}
function myPrint(){
print();
}
function myPrompt(){
var name = prompt("请输入你的名字。")
if (name != null && name != ""){
ptag.innerHTML = "你好 " + name + "! 今天感觉如何?";
} else {
ptag.innerHTML = "你没有输入任何内容";
}
}
function myResizeBy(){
if(myWin == undefined || myWin.closed == true) myOpen();
myWin.resizeBy(100, 100);
}
function myClose(){
if(myWin == undefined) return;
if(myWin != undefined && myWin.closed == false) myWin.close();
}
</script>
</body>
</html>
Navigator对象
Navigator对象的功能， 用于获取浏览器信息Navigator对象中存储了浏览器信息。
对浏览器类型的判断：
var ua = navigator.userAgent;
if (/firefox/i.test(ua)) {
alert("你是火狐浏览器");
} else if (/chrome/i.test(ua)) {
alert("你是谷歌浏览器");
} else if (/msie/i.test(ua)) {
alert("你是IE5-IE10浏览器");
} else if ("ActiveXObject" in window) {
alert("你是IE11浏览器");
}
navigator对象中的属性
appCodeName 返回当前浏览器的内部名称（开发代号）
appName 返回浏览器的官方名称
appVersion 返回浏览器的平台和版本信息
cookieEnabled 返回浏览器是否启用 cookie，启用返回 true，禁用返回 false
onLine 返回浏览器是否联网，联网则返回 true，断网则返回 false
platform 返回浏览器运行的操作系统平台
userAgent 返回浏览器的厂商和版本信息，即浏览器运行的操作系统、浏览器的版本、名称
navigator 对象中的方法
navigator对象中的方法
javaEnabled() 返回浏览器是否支持运行 Java Applet 小程序，支持则返回 true，不支持则返回 false
sendBeacon() 向浏览器异步传输少量数据
document.write("navigator.appCodeName：" + navigator.appCodeName + "<br>");
document.write("navigator.appName：" + navigator.appName + "<br>");
document.write("navigator.appVersion：" + navigator.appVersion + "<br>");
document.write("navigator.cookieEnabled：" + navigator.cookieEnabled + "<br>");
document.write("navigator.onLine：" + navigator.onLine + "<br>");
document.write("navigator.platform：" + navigator.platform + "<br>");
document.write("navigator.userAgent：" + navigator.userAgent + "<br>");
document.write("navigator.javaEnabled()：" + navigator.javaEnabled() + "<br>");
Screen对象(获取屏幕信息)
screen对象中拥有当前计算机屏幕的信息
如:分辨率、宽度、高度等
获取screen对象的方法
window.screen
常用属性
availTop 返回屏幕上方边界的第一个像素点(大多数情况下返回 0)
availLeft 返回屏幕左边边界的第一个像素点(大多数情况下返回 0)
availHeight 返回屏幕的高度(不包括 Windows 任务栏)
availWidth 返回屏幕的宽度(不包括 Windows 任务栏)
colorDepth 返回屏幕的颜色深度(color depth),
根据 CSSOM(CSS 对象模型)视图,为兼容起见,该值总为 24
height 返回屏幕的完整高度
pixelDepth 返回屏幕的位深度/色彩深度(bit depth)
根据 CSSOM(CSS 对象模型)视图
为兼容起见，该值总为 24
width 返回屏幕的完整宽度
orientation 返回当前屏幕的方向
document.write(screen.availTop + "<br>"); // 输出：0
document.write(screen.availLeft + "<br>"); // 输出：0
document.write(screen.availHeight + "<br>");// 输出：1050
document.write(screen.availWidth + "<br>"); // 输出：1920
document.write(screen.height + "<br>"); // 输出：1080
document.write(screen.width + "<br>"); // 输出：1920
document.write(screen.colorDepth + "<br>"); // 输出：24
document.write(screen.pixelDepth + "<br>"); // 输出：24
console.log(screen.orientation);
// 输出：ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5天速成JavaScript</title>
</head>
<body>
<button type="button" onclick="getResolution();">获取屏幕的宽度和高度</button>
<script type="text/javascript">
function getResolution() {
alert("您计算机屏幕的尺寸为：" + screen.width + "x" + screen.height);
}
</script>
</body>
</html>
Location对象(获取URL)
Location对象中封装了浏览器的地址栏的信息（当前页面链接的信息
如:当前链接的URL、端口、协议、锚节点信息等），如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
location对象中属性
console.log(location); //输出location对象
console.log(location.href); //输出当前地址的全路径地址
console.log(location.origin); //输出当前地址的来源
console.log(location.protocol); //输出当前地址的协议
console.log(location.hostname); //输出当前地址的主机名
console.log(location.host); //输出当前地址的主机
console.log(location.port); //输出当前地址的端口号
console.log(location.pathname); //输出当前地址的路径部分
console.log(location.search); //输出当前地址的?后边的参数部分
location对象中方法
assign() 加载指定的 URL，即载入指定的文档
reload() 重新加载当前 URL
replace() 用指定 URL 替换当前的文档，与 assign() 方法不同的是，使用 replace() 替换的新页面不会保存在浏览历史中，用户不能使用后退来返回该页面
toString() 与href 属性的效果相同，以字符串的形式返回当前完整的 URL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<a href="https://www.bilibili.com/" id="url"></a>
<button onclick="myAssign()">assign()</button>
<button onclick="myReload()">reload()</button>
<button onclick="myReplace()">replace()</button>
<button onclick="myToString()">toString()</button>
<script type="text/javascript">
var url = 'https://www.bilibili.com';
function myAssign(){
location.assign(url);
}
function myReload(){
location.reload();
}
function myReplace(){
location.replace(url);
}
function myToString(){
var url = document.getElementById('url');
var str = url.toString();
alert(str);
}
</script>
</body>
</html>
History对象(获取浏览历史)
history对象:是浏览器用于存储访问历史信息
history对象会记载当前浏览器访问过的页面
当页面中存在iframe页面时,window对象的history也会记载iframe中的history信息。
history对象中属性
length 返回浏览历史的数目，包含当前已经加载的页面
scrollRestoration 利用浏览器特性，使我们在返回上一页或者下一页时，将页面滚动到之前浏览的位置，该属性有两个值，分别是 auto（表示滚动）与 manual（表示不滚动）
state 返回浏览器在当前 URL 下的状态信息，如果没有调用过 pushState() 或 replaceState() 方法，则返回默认值 null
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>linux28.com-JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write(history.length + "<br>");
document.write(history.scrollRestoration + "<br>");
document.write(history.state + "<br>");
</script>
</body>
</html>
history对象
back() 参照当前页面，返回历史记录中的上一条记录（即返回上一页），您也可以通过点击浏览器工具栏中的←按钮来实现同样的效果
forward() 参照当前页面，前往历史记录中的下一条记录（即前进到下一页），您也可以通过点击浏览器工具栏中的→按钮来实现同样的效果
go() 参照当前页面，根据给定参数，打开指定的历史记录，例如 -1 表示返回上一页，1 表示返回下一页
pushState() 向浏览器的历史记录中插入一条新的历史记录
replaceState() 使用指定的数据、名称和 URL 来替换当前历史记录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5天速成JavaScript</title>
</head>
<body>
<button onclick="myBack()">back()</button>
<button onclick="myForward()">forward()</button>
<button onclick="myGo()">go()</button>
<button onclick="myPushState()">pushState()</button>
<button onclick="myReplaceState()">replaceState()</button>
<script type="text/javascript">
function myBack(){
history.back();
}
function myForward(){
history.forward();
}
function myGo(){
var num = prompt('请输入一个整数', '1');
history.go(num);
}
function myPushState(){
var state = { 'page_id': 1, 'user_id': 5 }
var title = 'JavaScript'
var url = 'index.html'
history.pushState(state, title, url)
console.log(history.state);
}
function myReplaceState(){
var state = { 'page_id': 3, 'user_id': 5 }
var title = 'history'
var url = 'index.html'
history.replaceState(state, title, url)
console.log(history.state);
}
</script>
</body>
</html>
十七，定时器(setTimeout和setInterval)
avaScript定时器:称之为“计时器”
用于在指定的时间后运行某些任务,JS定时器耗时我们生活中的闹钟。
setTimeout() 在指定的时间后(单位为毫秒)
执行某些代码，代码只会执行一次
setInterval() 按照指定的周期(单位为毫秒)来重复执行某些代码，定时器不会自动停止，除非调用 clearInterval() 函数来手动停止或着关闭浏览器窗口
setTimeout()函数语法格式
setTimeout(function[, delay, arg1, arg2, ...]);
setTimeout(function[, delay]);
setTimeout(code[, delay]);
参数说明如下：
function:
一个函数(通常使用匿名函数)
其中定义了定时器中要执行的代码
code:
字符串类型的代码
这些代码会在定时器到期后被编译执行
出于安全考虑不建议使用；
delay:
可选参数，定时器在执行的其中代码之前,
要等待的时间
单位为毫秒(1秒 = 1000毫秒),
如果省略此参数,则表示立即执行；
arg1、arg2、...、argN：要传递给函数的参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5天速通JavaScript</title>
</head>
<body>
<script type="text/javascript">
var myTest = function (str = 'JavaScript'){
document.write(str + "<br>");
};
setTimeout(myTest, 500, 'Hello');
setTimeout(myTest, 1000);
setTimeout(function(){
document.write("定时器<br>");
}, 1500)
setTimeout("document.write(\"setTimeout()\")", 2000);
</script>
</body>
</html>
setInterval() 函数的语法格式
setInterval(function, delay, [arg1, arg2, ...]);
setInterval(code, delay);
参数说明如下：
function:
一个函数(通常使用匿名函数)
其中定义了定时器中要执行的代码；
code：
字符串类型的代码
这些代码会在定时器到期后被编译执行
出于安全考虑不建议使用；
delay:
可选参数
定时器在执行的其中代码之前
要等待的时间
单位为毫秒(1秒 = 1000毫秒)
如果省略此参数
则表示立即执行；
arg1、arg2、...、argN:
要传递给函数的参数
注意事项:
使用setInterval() 函数定义的定时器不会自动停止
除非调用clearInterval()函数来手动停止或关闭浏览器窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<p id="one"></p>
<p id="two"></p>
<script type="text/javascript">
var num = 1;
var myTest = function (){
document.getElementById('one').innerHTML += num + " ";
num ++;
};
setInterval(myTest, 500);
setInterval(function(){
var d = new Date();
document.getElementById('two').innerHTML = d.toLocaleTimeString();
}, 1000);
</script>
</body>
</html>
JS 取消定时器
当使用setTimeout()或setInterval()
设置定时器时
这两个方法都会产生一个定时器的唯一ID
ID为一个正整数值
也被称为“定时器标识符”
使用这个ID
我们可以清除ID所对应的定时器
可以使用clearTimeout()或clearInterval()函数
来分别清除由setTimeout()或setInterval()函数创建的定时器
调用clearTimeout()或clearInterval()函数需要提供定时器的唯一ID 作为参数
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5天速通JavaScript</title>
</head>
<body>
<p>当前时间为：<span id="clock"></span></p>
<button onclick="stopClock(this);">停止</button><hr>
<button onclick="delayedAlert(this);">2秒后弹出一个提示框</button>
<button onclick="clearAlert();">取消</button>
<script type="text/javascript">
var intervalID;
function showTime() {
var d = new Date();
document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}
function stopClock(e) {
clearInterval(intervalID);
e.setAttribute('disabled', true)
}
intervalID = setInterval(showTime, 1000);
var timeoutID;
var that;
function delayedAlert(e) {
that = e;
timeoutID = setTimeout(showAlert, 2000);
e.setAttribute('disabled', true)
}
function showAlert() {
alert('这是一个提示框。');
that.removeAttribute('disabled');
}
function clearAlert() {
clearTimeout(timeoutID);
that.removeAttribute('disabled');
}
</script>
</body>
</html>
十八，JavaScript异常处理
JavaScript中错误异常的分类
语法错误:
也称为解析错误
一般是因为代码存在某些语法错误引起的
当发生语法错误时,代码会停止运行
运行时错误:
也称为异常
发生在程序运行期间
如：
调用未定义的方法
读取不存在的文件等
发生运行时错误也会终止代码运行；
逻辑错误：
逻辑错误常指逻辑错误导致程序运行异常或终止运行
JS中错误和异常区别
错误(Error):
常指代码运行之前出现
在运行JavaScript程序之前
JavaScript解释器会先对代码进行检查
如果代码有误，如某些语法错误，浏览器就会报出相应的错误，只有将错误修正后，代码才能运行。
异常(Exception):
指代码运行中出现
如：
调用某个未定义的方法、读取不存在的文件等
在出现异常之前
代码的运行并不受影响
当出现异常时
会在浏览器控制台输出错误信息,此时程序也终止运行
JavaScript异常处理
异常处理的功能:
用于捕捉产生异常的代码
使整个程序不会因为异常而终止运行
在JavaScript中,可以使用try catch 语句来捕获异常
并做出相应处理
try catch语法格式如下所示:
try {
// 可能会发生异常的代码
} catch(error) {
// 发生异常时要执行的操作
}
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5天速通JavaScript</title>
</head>
<body>
<script>
try {
var title = "JavaScript";
document.write(title);
// 调用一个未定义的变量
document.write(str);
// 若发生错误，则不会执行以下行
alert("所有语句都已成功执行。");
} catch(error) {
// 处理错误
alert("错误信息: " + error.message);
}
// 继续执行下面的代码
document.write("<p>Hello World!</p>");
</script>
</body>
</html>
//代码说明
当try语句块中的代码出现异常时
会创建并抛出一个 Error 对象(如catch(error)中error)
对象中包含两个属性
name:错误的类型
message:对错误的描述信息
try catch finally语句
在 try catch 语句的后面 添加一个 finally 语句块无论 try 语句块中的代码是否发生错误 finally 语句中的代码都会执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>linux28.com -- JavaScript</title>
</head>
<body>
<script>
// 接收用户输入的参数
var num = prompt("输入一个 0 到 100 的数字");
// 获取当前时间
var start = Date.now();
try {
if(num > 0 && num <= 100) {
console.log(Math.pow(num, num)); // 指数幂的基
} else {
console.log("输入的值无效!");
}
} catch(e) {
console.log(e.message);
} finally {
// 显示执行代码所用的时间
console.log("代码执行花费了：" + (Date.now() - start) + "ms");
}
</script>
</body>
</html>
JS 抛出错误的方法
throw experession expression使用Error()内置函数抛出错误对象
JS内置错误类型
EvalError 使用 eval() 函数时发出错误，会抛出该错误
InternalError 由 JavaScript 引擎内部错误导致的异常，会抛出该错误
RangeError 范围错误，当使用了超出允许范围的数值时，会抛出该错误
SyntaxError 语法错误，当代码中存在任何语法错误时，会抛出该错误
TypeError 类型错误，当使用的值不是预期类型时，会抛出该错误，例如对数字调用字符串方法，对字符串调用数组方法等
URIError URI 错误，当使用 URI 相关函数但传入 URI 参数时，会抛出该错误
ReferenceError 参数错误，当尝试使用未定义的变量、函数、对象时，会抛出该错误
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script>
function squareRoot(number) {
// 如果数字为负数，则抛出错误
if(number < 0) {
throw new Error("抱歉，无法计算负数的平方根！");
} else {
console.log(Math.sqrt(number));
}
}
try {
squareRoot(16);
squareRoot(625);
squareRoot(-9);
squareRoot(100);
// 若抛出错误，则不会执行下面的行
console.log("所有函数都执行成功。");
} catch(e) {
// 处理错误
console.log(e.message);
}
</script>
</body>
</html>
十九，表单验证的方法
表单是交互页面的基础,所有的交互页面都是采用表单进行交互操作
如:网页上的用户名、手机号、密码等表单但当我们填写这些表单信息时,我们需对其进行相应的验证操作如:手机号必须符合规范，密码必须符合规范。
表单验证的实现方法:
1.使用Javascript获取页面DOM对象的方法获取html元素值
2.使用JS语法中判空或正则表达式进行验证操作
3.将不符合规则的元素值输出,并给用户相应的提示
HTML表单的输入控件主要有以下几种：
文本框，对应的 <input type="text"> ，用于输入文本；
口令框，对应的 <input type="password"> ，用于输入口令；
单选框，对应的 <input type="radio"> ，用于选择一项；
复选框，对应的 <input type="checkbox"> ，用于选择多项；
下拉框，对应的 <select> ，用于选择一项；
隐藏文本，对应的 <input type="hidden"> ，用户不可见，但表单提交时会把隐藏文本发送到
服务器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5天速通JavaScript</title>
<style>
.error{
color: red;
}
label{
display: inline-block;
width: 70px;
text-align: right;
}
</style>
</head>
<body>
<form onsubmit="return validateForm()" action="" method="post">
<fieldset>
<legend>注册:</legend>
<div class="row">
<label>用户名：</label>
<input type="text" name="name">
<span class="error" id="nameErr"></span>
</div>
<div class="row">
<label>密码：</label>
<input type="password" name="pwd">
<span class="error" id="pwdErr"></span>
</div>
<div class="row">
<label>Email：</label>
<input type="text" name="email">
<span class="error" id="emailErr"></span>
</div>
<div class="row">
<label>手机号：</label>
<input type="text" name="mobile" maxlength="11">
<span class="error" id="mobileErr"></span>
</div>
<div class="row">
<label>验证码：</label>
<input type="text" name="captcha" maxlength="4"><span id="captcha" onclick="getCaptcha()"></span>
<span class="error" id="captchaErr"></span>
</div>
<div class="row">
<input type="submit" value="注册">
</div>
</fieldset>
</form>
<script>
var captcha = getCaptcha(); // 生成验证码
// 清空 input 标签后的提示信息
var tags = document.getElementsByTagName('input');
for (var i = 0; i < tags.length; i++) {
tags[i].onchange = function(){
var idname = this.name + "Err";
document.getElementById(idname).innerHTML = '';
}
}
// 显示错误消息
function printError(elemId, hintMsg) {
document.getElementById(elemId).innerHTML = hintMsg;
}
// 验证表单数据
function validateForm() {
// 获取表单元素的值
var name = document.querySelector("input[name='name']").value;
var pwd = document.querySelector("input[name='pwd']").value;
var email = document.querySelector("input[name='email']").value;
var mobile = document.querySelector("input[name='mobile']").value;
var captcha = document.querySelector("input[name='captcha']").value;
if(name == "" || name == null){
printError("nameErr", "用户名不能为空");
return false;
}
if(pwd == "" || pwd == null){
printError("pwdErr", "密码不能为空");
return false;
}
if(email == "" || email == null){
printError("emailErr", "邮箱不能为空");
return false;
}
if(mobile == "" || mobile == null){
printError("mobileErr", "手机号不能为空");
return false;
}
if(captcha == "" || captcha == null){
printError("captchaErr", "验证码不能为空");
return false;
}
}
// 获取验证码
function getCaptcha(){
var cap = Math.floor(Math.random()*10000).toString();
if(cap.length != 4) cap += "0";
captcha = cap;
document.getElementById("captcha").innerHTML = cap;
}
</script>
</body>
</html>
数据格式验证
验证邮箱
验证手机号码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5天速通JavaScript</title>
<style>
.error{
color: red;
}
label{
display: inline-block;
width: 70px;
text-align: right;
}
</style>
</head>
<body>
<form onsubmit="return validateForm()" action="" method="post">
<fieldset>
<legend>注册:</legend>
<div class="row">
<label>用户名：</label>
<input type="text" name="name">
<span class="error" id="nameErr"></span>
</div>
<div class="row">
<label>密码：</label>
<input type="password" name="pwd">
<span class="error" id="pwdErr"></span>
</div>
<div class="row">
<label>Email：</label>
<input type="text" name="email">
<span class="error" id="emailErr"></span>
</div>
<div class="row">
<label>手机号：</label>
<input type="text" name="mobile" maxlength="11">
<span class="error" id="mobileErr"></span>
</div>
<div class="row">
<label>验证码：</label>
<input type="text" name="captcha" maxlength="4"><span id="captcha" onclick="getCaptcha()"></span>
<span class="error" id="captchaErr"></span>
</div>
<div class="row">
<input type="submit" value="注册">
</div>
</fieldset>
</form>
<script>
var capCode = getCaptcha(); // 生成验证码
console.log(capCode);
// 清空 input 标签后的提示信息
var tags = document.getElementsByTagName('input');
for (var i = 0; i < tags.length; i++) {
tags[i].onchange = function(){
var idname = this.name + "Err";
document.getElementById(idname).innerHTML = '';
}
}
// 显示错误消息
function printError(elemId, hintMsg) {
document.getElementById(elemId).innerHTML = hintMsg;
}
// 验证表单数据
function validateForm() {
// 获取表单元素的值
var name = document.querySelector("input[name='name']").value;
var pwd = document.querySelector("input[name='pwd']").value;
var email = document.querySelector("input[name='email']").value;
var mobile = document.querySelector("input[name='mobile']").value;
var captcha = document.querySelector("input[name='captcha']").value;
if(name == "" || name == null){
printError("nameErr", "用户名不能为空");
return false;
}
if(pwd == "" || pwd == null){
printError("pwdErr", "密码不能为空");
return false;
}
if(email == "" || email == null){
printError("emailErr", "邮箱不能为空");
return false;
} else {
var regex = /^\S+@\S+\.\S+$/;
if(regex.test(email) === false) {
printError("emailErr", "请输入正确的邮箱地址");
return false;
}
}
if(mobile == "" || mobile == null){
printError("mobileErr", "手机号不能为空");
return false;
} else {
var regex = /^[1]\d{10}$/;
if(regex.test(mobile) === false) {
printError("mobileErr", "您输入的手机号码有误");
return false;
}
}
if(captcha == "" || captcha == null){
printError("captchaErr", "验证码不能为空");
return false;
} else {
console.log(capCode);
console.log(captcha);
if(capCode != captcha){
printError("captchaErr", "验证码有误");
return false;
}
}
}
// 获取验证码
function getCaptcha(){
var cap = Math.floor(Math.random()*10000).toString();
if(cap.length != 4) cap += "0";
document.getElementById("captcha").innerHTML = cap;
return capCode = cap;
}
</script>
</body>
</html>
二十，实现动画效果
JavaScript实现动画的本质：采用修改元素的样式,使元素形态发生变化从而实现相应的动画效果，JavaScript动画经常配合定时器使用,达到动画变更的效果。
JavaScript动画和CSS动画的不同之处
JavaScript动画控制能力更强
可以在动画播放过程中对动画进行控制
如：
开始、暂停、回放、终止、取消等；
JavaScript动画效果比CSS动画更丰富
如:
曲线运动，冲击闪烁，视差滚动等效果
只有JavaScript 动画才能完成；
CSS动画存在兼容性问题
而JavaScript大多时候没有兼容性问题
下面是两种js的动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>linux28.com -JavaScript</title>
<style>
*{
margin: 0;
padding: 0;
}
#box {
width: 200px;
height: 200px;
margin-top: 10px;
background: rgb(43, 221, 255);
position: relative;
left: -200px;
top: 0;
}
#box span {
width: 20px;
background: rgb(255, 119, 157);
position: absolute;
left: 200px;
top: 75px;
color: #fff;
text-align: center;
cursor: pointer;
padding: 5px 1px 5px 0;
border-radius: 0 5px 5px 0;
}
#box span:hover {
background: rgb(255, 84, 137);
}
</style>
</head>
<body>
<div id="box">
<span id="share">分享</span>
</div>
<script>
window.onload = function () {
//动画
var div = document.getElementById("box");
var timer = null;
div.onmouseover = function () {
startMove(0);
};
div.onmouseout = function () {
startMove(-200);
};
function startMove(targetPosition) {
clearInterval(timer);
var speed = 0;
if (targetPosition < 0) {
speed = -10;
} else {
speed = 10;
}
timer = setInterval(function () {
if (div.offsetLeft == targetPosition) {
clearInterval(timer);
} else {
div.style.left = div.offsetLeft + speed + 'px';
}
}, 17);
}
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>linux28.com -JavaScript</title>
<style type="text/css">
* {
margin: 0 auto;
padding: 0;
}
ul {
list-style: none;
}
#view {
position: relative;
width: 320px;
height: 120px;
border: 10px solid #bc8f8f;
overflow: hidden;
margin-top: 5px;
}
#img_list {
position: absolute;
width: 960px;
}
#img_list li {
float: left;
width: 320px;
height: 120px;
}
</style>
</head>
<body>
<div id="view">
<ul id="img_list">
<li style="background-color: #87ceeb;"></li>
<li style="background-color: #ff69b4;"></li>
<li style="background-color: #98fb98;"></li>
</ul>
</div>
<script type="text/javascript">
var img_list = document.getElementById('img_list');
setInterval(function() {
for (var i = 0; i <= 100; i++) {
(function(pos) {
setTimeout(function() {
img_list.style.left = - (pos / 100) * 320 + 'px';
}, (pos + 1) * 10)
})(i)
}
var current = img_list.children[0];
setTimeout(function() {
img_list.appendChild(current);
img_list.style.left = '0px';
}, 1100);
}, 2000);
</script>
</body>
</html>
二十一，闭包原理及功能
当两个函数彼此嵌套时内部的函数就是闭包
闭包形成条件
内部函数需要通过外部函数 return 给返回出来
function test1(){ // 外部函数
var num = 0; // 局部变量
function test2(){ // 内部函数
num++;
return num;
}
return test2;
}
var fun = test1(); // 返回函数 test2
上述代码构成一个闭包
其实就是函数test2
闭包功能
function test1(){ // 外部函数
var num = 0; // 局部变量
function test2(){ // 内部函数
num++;
return num;
}
return test2;
}
var fun = test1();
fun(); // 输出：1
fun(); // 输出：2
fun(); // 输出：3
fun(); // 输出：4
num 是外部函数test1()中一个变量 但值在内部函数test2()中被修改函数test2() 每运行一次就会将 num 加 1，根据闭包的特点，函数 test1()中变量num会一直保存在内存中。
闭包的应用场景
当我们需要在一些函数中定义变量，并希望变量常驻内存中
同时也不影响外部的全局变量,此时我们就可以使用闭包
function fun1() {
var a = 2;
function subFun() {
a++;
console.log(a);
}
return subFun;
}
var f1 = fun1();
f1();
f1();
console.log("===============");
function fun2() {
var a = 2;
function subFun() {
a--;
console.log(a);
}
return subFun;
}
var f2 = fun2();
f2();
f2();
console.log("===============");
二十二，严格模式(use strict)
由于JavaScript语法不够严谨在使用一个变量时在使用一个变量时,可不使用var关键字来提前声明
(例:
url = ‘https://www.bilibili.com/’)
此时JavaScript 解释器会自动为您创建这个变量
为使代码更加严谨,JavaScript中引入严格模式
当我们使用严格模式,将不再允许使用那些不严谨的语法
) 这就是严格模式的由来。
在ECMAScript5(ES5)中引入严格模式由于限制语法更严谨,以前能运行的代码,在严格模式下可能不能运行。
启用严格模式的方法：
只需要在JavaScript脚本的开头添加"use strict";或’use strict’;指令即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script>
"use strict";
x = 'https://www.bilibili.com/'; // 此处报错：Uncaught ReferenceError: x is not defined at index.html:11
console.log(x);
</script>
</body>
</html>
如果将"use strict";指令添加到 JavaScript 程序的第一行，则表示整个脚本都会处于严格模式。如果在函数的第一行代码中添加"use strict";，则表示只在该函数中启用严格模式。如下例所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script>
x = 'https://www.linux28.com/';
console.log(x);
function sayHello(){
'use strict';
str = 'https://www.bilibili.com/'; // 调用 sayHello() 函数在此处报错：Uncaught ReferenceError: str is not defined at sayHello (index.html:14) at index.html:17
console.log(str);
}
sayHello();
</script>
</body>
</html>
# "use strict";或'use strict';指令只有在整个脚本第一行或函数第一行时才能被识别
除IE9以及更低的版本外,所有的浏览器都支持该指令
严格模式与普通模式的区别
变量必须先声明后使用
在严格模式下，变量必须先通过var、let或const关键字声明，然后才能被使用。如果不先声明就使用变量，会抛出ReferenceError错误。
删除变量或函数会抛出错误
在严格模式下，如果尝试删除一个变量或函数，会抛出语法错误。在普通模式下，这种操作会静默失败，不会抛出错误。
禁止使用未声明的变量
在严格模式下，如果使用未声明的变量，会抛出ReferenceError错误。在普通模式下，这样的操作会创建一个全局变量。
函数必须声明在顶层作用域或函数内部
在严格模式下，函数必须要么声明在顶层作用域，要么声明在函数内部。在普通模式下，可以在代码块中声明函数。
禁止对只读属性赋值
在严格模式下，如果尝试对只读属性进行赋值，会抛出TypeError错误。在普通模式下，这种操作会静默失败。
eval()函数的作用域限制
在严格模式下，eval()函数执行时的作用域限制更为严格，它执行的代码无法访问包含它的函数的作用域变量。在普通模式下，eval()函数执行的代码可以访问包含它的函数的作用域变量。
二十三，JSON
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式，目前使用特别广
泛。
采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
JSON中有两种基本的结构：
数组和对象
数组：
一个有序的值列表
每个数组以左方括号[开始，以右方括号]结尾
多个值之间使用逗号,分隔
对象：
由若干键/值对（即key:value）组成的无序集合
每个对象以左花括号{开始，以右花括号}结尾
多个键/值对之间使用逗号,分隔
JavaScript中解析JSON数据
将一个字符串转换为JSON对象
转换为JSON对象的方法
使用JSON.parse(str)方法
将数据转换为JSON
将javascript值转换为JSON格式，我们可以使用
JSON.stringify()方法
var obj = {
"name": "JavaScript",
"author": "https://www.bilibili.com/",
"year": 2023,
"genre": "Getting Started tutorial",
"bestseller": true
};
var json = JSON.stringify(obj);
document.write(json);
二十四，cookie操作
cookie是存储在计算机上的一个文件
cookie常用于web网站中当用户访问一个网站,此时会存储用户的信息,方便同服务器进行交互时,标记用户身份，cookie采用键值对的形式将用户信息存储在客户端。
设置Cookie
可使用document.cookie属性来创建、读取、修改和删除 Cookie 信息。
Cookie读取
document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;
document.cookie = "username=zhangsan";
var cookies = document.cookie;
console.log(cookies);
Cookie修改
使用 document.cookie 将旧的 cookie 将被覆盖就是修改
document.cookie = "username=zhangsan";
document.cookie = "username=lisi";
var cookies = document.cookie;
console.log(cookies);
Cookie删除
删除 cookie 非常简单，您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = "username=zhangsan";
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
var cookies = document.cookie;
console.log(cookies);
二十五，AJAX
JAX 的核心是 XMLHttpRequest 对象。 所有现代浏览器都支持 XMLHttpRequest 对象。
XMLHttpRequest 对象用于幕后同服务器交换数据，这意味着可以更新网页的部分，而不需要重新加载整个页面。
语法
variable = new XMLHttpRequest();
AJAX的XMLHttpRequest对象方法
new XMLHttpRequest() 创建新的 XMLHttpRequest 对象
abort() 取消当前请求
getAllResponseHeaders() 返回头部信息
getResponseHeader() 返回特定的头部信息
open(method, url, async, user, psw) 规定请求method：请求类型 GET 或 POST
url：文件位置
async：true（异步）或 false（同步）
user：可选的用户名称
psw：可选的密码
send() 将请求发送到服务器，用于 GET 请求
send(string) 将请求发送到服务器，用于 POST 请求
setRequestHeader() 向要发送的报头添加标签/值对
AJAX的XMLHttpRequest对象属性
XMLHttpRequest.onreadystatechange
指定一个函数（回调函数），当 readyState 的值发生改变时，就会调用这个函数；
XMLHttpRequest.responseText
请求的响应信息，如果请求未成功或尚未发送请求，则为 null；
XMLHttpRequest.responseType
一个枚举值，用于指定响应中包含的数据类型；
XMLHttpRequest.responseURL
返回响应的序列化 URL（与请求的 URL 相同），如果 URL 为空则返回空字符串；
XMLHttpRequest.responseXML
返回一个包含 HTML 或 XML 的 Document 对象
若请求未成功、未发送或响应数据无法解析为 XML 或 HTML 则返回 null；
XMLHttpRequest.status
一个无符号整型数字，表示请求的响应状态码，常见的响应状态码如下所示：
200：请求成功，服务器成功处理了请求；
404：请求失败，服务器未找到请求的页面；
500：服务器暂时不可用。
XMLHttpRequest.statusText
一个字符串，表示响应状态的文本信息，例如“OK”或“Not Found”；
XMLHttpRequest.timeout
一个无符号整型数字，表示请求的超时时间，单位为毫秒
若超过该时间，请求会自动终止，默认值为 0，表示没有超时时间；
XMLHttpRequest.upload
返回一个 XMLHttpRequestUpload 对象，用来表示上传的进度。
二十六，事件冒泡与事件捕获
点击一个事件，同时向上触发的一系列事件我们将这种现象称之为“事件冒泡”。
事件冒泡的示例
<body>
<div id="wrap">
<p class="hint">
<a href="#">Click Me</a>
</p>
</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>linux28.com JavaScript</title>
<style type="text/css">
div, p, a {
padding: 15px 30px;
display: block;
border: 2px solid #000;
background: #fff;
}
</style>
</head>
<body>
<div id="wrap">DIV
<p class="hint">P
<a href="#">A</a>
</p>
</div>
<script>
function showTagName() {
alert("事件捕获: " + this.tagName);
}
var elems = document.querySelectorAll("div, p, a");
for (let elem of elems) {
elem.addEventListener("click", showTagName, true);
}
</script>
</body>
</html>
事件冒泡
事件冒泡是从目标节点开始沿父节点依次向上并触发父节点上的事件直至文档根节点就像水底的气泡一样，会一直向上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style type="text/css">
div, p, a {
padding: 15px 30px;
display: block;
border: 2px solid #000;
background: #fff;
}
</style>
</head>
<body>
<div onclick="alert('事件冒泡: ' + this.tagName)">DIV
<p onclick="alert('事件冒泡: ' + this.tagName)">P
<a href="#" onclick="alert('事件冒泡: ' + this.tagName)">A</a>
</p>
</div>
</body>
</html>
阻止事件捕获和冒泡
JavaScript中提供stopPropagation()方法阻止事件捕获和事件冒泡的发生。
语法：
event.stopPropagation();
stopPropagation() 会阻止事件捕获和事件冒泡
但无法阻止标签的默认行为
stopImmediatePropagation()方法
阻止同一节点的同一事件的其它事件处理程序
如
为某个节点定义了多个点击事件
当事件触发时，这些事件会按定义顺序依次执行
当其中一个事件处理程序中使用stopImmediatePropagation()方法
则剩下的事件处理程序将不再执行
stopImmediatePropagation() 方法的语法格式如下：
event.stopImmediatePropagation();
后记
特别感谢轻松的小希的文章和年华大佬的个人资料还有狂神的笔记。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
