day1

运算符的优先级

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* , 运算符
* 使用,可以分割多个语句,一般可以在声明多个变量时使用,
*/
//使用,运算符同时声明多个变量
//var a , b , c;

//可以同时声明多个变量并赋值
//var a=1 , b=2 , c=3;
//alert(b);

/*
* 就和数学中一样,在JS中运算符也有优先级,
* 比如:先乘除 后加减
* 在JS中有一个运算符优先级的表,
* 在表中越靠上优先级越高,优先级越高越优先计算,
* 如果优先级一样,则从左往右计算。
* 但是这个表我们并不需要记忆,如果遇到优先级不清楚
* 可以使用()来改变优先级
*/

//var result = 1 + 2 * 3;

/*
* 如果||的优先级高,或者两个一样高,则应该返回3
* 如果与的优先级高,则应该返回1
*
*/
var result = 1 || 2 && 3;

console.log("result = "+result);

</script>
</head>
<body>
</body>
</html>

代码块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 我们的程序是由一条一条语句构成的
* 语句是按照自上向下的顺序一条一条执行的
* 在JS中可以使用{}来为语句进行分组,
* 同一个{}中的语句我们称为是一组语句,
* 它们要么都执行,要么都不执行,
* 一个{}中的语句我们也称为叫一个代码块
* 在代码块的后边就不用再编写;了
*
* JS中的代码块,只具有分组的的作用,没有其他的用途
* 代码块内容的内容,在外部是完全可见的
*/
{
var a = 10;
alert("hello");
console.log("你好");
document.write("语句");
}


console.log("a = "+a);




</script>
</head>
<body>
</body>
</html>

流程控制语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 流程控制语句
* - JS中的程序是从上到下一行一行执行的
* - 通过流程控制语句可以控制程序执行流程,
* 使程序可以根据一定的条件来选择执行
* - 语句的分类:
* 1.条件判断语句
* 2.条件分支语句
* 3.循环语句
*
*
* 条件判断语句:
* - 使用条件判断语句可以在执行某个语句之前进行判断,
* 如果条件成立才会执行语句,条件不成立则语句不执行。
* - if语句
* - 语法一:
* if(条件表达式){
* 语句...
* }
*
* if语句在执行时,会先对条件表达式进行求值判断,
* 如果条件表达式的值为true,则执行if后的语句,
* 如果条件表达式的值为false,则不会执行if后的语句。
* if语句只能控制紧随其后的那个语句,
* 如果希望if语句可以控制多条语句,
* 可以将这些语句统一放到代码块中
* if语句后的代码块不是必须的,但是在开发中尽量写上代码块,即使if后只有一条语句
*
*/

var a = 25;

if(a > 10 && a <= 20){
alert("a大于10,并且 a小于等于20");
}


</script>
</head>
<body>
</body>
</html>

if语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* if语句
* 语法二:
* if(条件表达式){
* 语句...
* }else{
* 语句...
* }
*
* if...else...语句
* 当该语句执行时,会先对if后的条件表达式进行求值判断,
* 如果该值为true,则执行if后的语句
* 如果该值为false,则执行else后的语句
*
* 语法三:
* if(条件表达式){
* 语句...
* }else if(条件表达式){
* 语句...
* }else if(条件表达式){
* 语句...
* }else{
* 语句...
* }
*
* if...else if...else
* 当该语句执行时,会从上到下依次对条件表达式进行求值判断
* 如果值为true,则执行当前语句。
* 如果值为false,则继续向下判断。
* 如果所有的条件都不满足,则执行最后一个else后的语句
* 该语句中,只会有一个代码块被执行,一旦代码块执行了,则直接结束语句
*/

var age = 50;

/*if(age >= 60){
alert("你已经退休了~~");
}else{
alert("你还没退休~~~");
}*/

age = 200;

/*if(age > 100){
alert("活着挺没意思的~~");
}else if(age > 80){
alert("你也老大不小的了~~");
}else if(age > 60){
alert("你也退休了~~");
}else if(age > 30){
alert("你已经中年了~~");
}else if(age > 17){
alert("你已经成年了");
}else{
alert("你还是个小孩子~~");
}*/

age = 90;

if(age > 17 && age <= 30){
alert("你已经成年了");
}else if(age > 30 && age <= 60){
alert("你已经中年了");
}else if(age > 60 && age <= 80){
alert("你已经退休了");
}else{
alert("你岁数挺大的了~~");
}


</script>
</head>
<body>
</body>
</html>

条件分支语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 条件分支语句也叫switch语句
* 语法:
* switch(条件表达式){
* case 表达式:
* 语句...
* break;
* case 表达式:
* 语句...
* break;
* default:
* 语句...
* break;
* }
*
* 执行流程:
* switch...case..语句
* 在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较,
* 如果比较结果为true,则从当前case处开始执行代码。
* 当前case后的所有的代码都会执行,我们可以在case的后边跟着一个break关键字,
* 这样可以确保只会执行当前case后的语句,而不会执行其他的case
* 如果比较结果为false,则继续向下比较
* 如果所有的比较结果都为false,则只执行default后的语句
*
* switch语句和if语句的功能实际上有重复的,使用switch可以实现if的功能,
* 同样使用if也可以实现switch的功能,所以我们使用时,可以根据自己的习惯选择。
*/

//根据num的值,输出对应的中文

var num = 3;

/*if(num == 1){
console.log("壹");
}else if(num == 2){
console.log("贰");
}else if(num == 3){
console.log("叁");
}*/

num = "hello";

switch(num){
case 1:
console.log("壹");
//使用break可以来退出switch语句
break;
case 2:
console.log("贰");
break;
case 3:
console.log("叁");
break;
default:
console.log("非法数字~~");
break;
}

</script>
</head>
<body>
</body>
</html>

循环语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">


/*
* 向页面中输出连续的数字
*/
/*var n = 1;
document.write(n++ +"<br />");*/

/*
* 循环语句:
* 通过循环语句可以反复的执行一段代码多次
*
* while循环
* - 语法:
* while(条件表达式){
* 语句...
* }
*
* - while语句在执行时,
* 先对条件表达式进行求值判断,
* 如果值为true,则执行循环体,
* 循环体执行完毕以后,继续对表达式进行判断
* 如果为true,则继续执行循环体,以此类推
* 如果值为false,则终止循环
*
* do...while循环
* - 语法:
* do{
* 语句...
* }while(条件表达式)
*
* - 执行流程:
* do...while语句在执行时,会先执行循环体,
* 循环体执行完毕以后,在对while后的条件表达式进行判断,
* 如果结果为true,则继续执行循环体,执行完毕继续判断以此类推
* 如果结果为false,则终止循环
*
* 实际上这两个语句功能类似,不同的是while是先判断后执行,
* 而do...while会先执行后判断,
* do...while可以保证循环体至少执行一次,
* 而while不能
*/
var n = 1;

//向这种将条件表达式写死为true的循环,叫做死循环
//该循环不会停止,除非浏览器关闭,死循环在开发中慎用
//可以使用break,来终止循环
/*while(true){
alert(n++);

//判断n是否是10
if(n == 10){
//退出循环
break;
}

}*/

//创建一个循环,往往需要三个步骤

//1.创初始化一个变量
var i = 11;

//2.在循环中设置一个条件表达式
/*while(i <= 10){
//3.定义一个更新表达式,每次更新初始化变量
document.write(i++ +"<br />")

}*/

/*do{
document.write(i++ +"<br />");
}while(i <= 10);*/

/*while(true){
alert(1);
}*/

</script>
</head>
<body>
</body>
</html>

while练习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 假如投资的年利率为5%,试求从1000块增长到5000块,需要花费多少年
*
* 1000 1000*1.05
* 1050 1050*1.05
*/

//定义一个变量,表示当前的钱数
var money = 1000;

//定义一个计数器
var count = 0;

//定义一个while循环来计算每年的钱数
while(money < 5000){
money *= 1.05;

//使count自增
count++;
}


//console.log(money);
console.log("一共需要"+count+"年");



</script>
</head>
<body>
</body>
</html>

while练习2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>if练习1</title>
<script type="text/javascript">
/*
* 从键盘输入小明的期末成绩:
* 当成绩为100时,'奖励一辆BMW'
* 当成绩为[80-99]时,'奖励一台iphone15s'
* 当成绩为[60-80]时,'奖励一本参考书'
* 其他时,什么奖励也没有
*/

/*
* prompt()可以弹出一个提示框,该提示框中会带有一个文本框,
* 用户可以在文本框中输入一段内容,该函数需要一个字符串作为参数,
* 该字符串将会作为提示框的提示文字
*
* 用户输入的内容将会作为函数的返回值返回,可以定义一个变量来接收该内容
*/
//将prompt放入到一个循环中
while(true){
//score就是小明的期末成绩
var score = prompt("请输入小明的期末成绩(0-100):");
//判断用户输入的值是否合法
if(score >= 0 && score <= 100){
//满足该条件则证明用户的输入合法,退出循环
break;
}

alert("请输入有效的分数!!!");
}



//判断值是否合法
if(score > 100 || score < 0 || isNaN(score)){
alert("拉出去毙了~~~");
}else{
//根据score的值来决定给小明什么奖励
if(score == 100){
//奖励一台宝马
alert("宝马,拿去~~~");
}else if(score >= 80){
//奖励一个手机
alert("手机,拿去玩~~~");
}else if(score >= 60){
//奖励一本参考书
alert("参考书,拿去看~~~");
}else{
alert("棍子一根~~");
}
}






</script>
</head>
<body>

</body>
</html>

for循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* for语句,也是一个循环语句,也称为for循环
* 在for循环中,为我们提供了专门的位置用来放三个表达式:
* 1.初始化表达式
* 2.条件表达式
* 3.更新表达式
*
* for循环的语法:
* for(①初始化表达式;②条件表达式;④更新表达式){
* ③语句...
* }
*
* for循环的执行流程:
* ①执行初始化表达式,初始化变量(初始化表达式只会执行一次)
* ②执行条件表达式,判断是否执行循环。
* 如果为true,则执行循环③
* 如果为false,终止循环
* ④执行更新表达式,更新表达式执行完毕继续重复②
*/

//创建一个执行10次的while循环
//初始化表达式
/*var i = 0;

//创建一个循环,定义条件表达式
while(i < 10){
//设置更新表达式
alert(i++);
}*/

for(var i = 0 ; i < 10 ; i++ ){
alert(i);
}

/*
* for循环中的三个部分都可以省略,也可以写在外部
* 如果在for循环中不写任何的表达式,只写两个;
* 此时循环是一个死循环会一直执行下去,慎用
* for(;;){
alert("hello");
}
*/







</script>
</head>
<body>
</body>
</html>

for循环练习1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 打印1-100之间所有奇数之和
*/

//创建一个变量,用来保存奇数之和
//var sum = 0;

//打印1-100之间的数
for(var i=1 , sum=0 ; i<=100 ; i++){

//判断i是否是奇数
//不能被2整除的数就是奇数
if(i%2 != 0){
//如果i除以2有余数则证明i是奇数
//console.log(i);
sum = sum+i;
}
}

console.log("奇数之和为 : "+sum);

</script>
</head>
<body>
</body>
</html>

for循环练习2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 打印1-100之间所有7的倍数的个数及总和
*/
//定义一个变量,来保存总和
var sum = 0;
//定义一个计数器,来记录数量
var count = 0;

//打印1-100之间所有的数
for(var i=1 ; i<=100 ; i++){

//判断i是否是7的倍数
if(i % 7 == 0){
//console.log(i);
sum += i;
//使计数器自增1
count++;

}

}

//输出总和
console.log("总和为:"+sum);
//输出总数
console.log("总数量为:"+count);



</script>
</head>
<body>
</body>
</html>

for循环练习3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 水仙花数是指一个3位数,它的每个位上的数字的3 次幂之和等于它本身。
(例如:1^3 + 5^3 + 3^3 = 153),请打印所有的水仙花数。
*/

//打印所有的三位数
for(var i=100 ; i<1000 ; i++){

//获取i的百位 十位 个位的数字
//获取百位数字
var bai = parseInt(i/100);

//获取十位的数字
var shi = parseInt((i-bai*100)/10);

//获取个位数字
var ge = i % 10;

//判断i是否是水仙花数
if(bai*bai*bai + shi*shi*shi + ge*ge*ge == i){
console.log(i);
}


}


</script>
</head>
<body>
</body>
</html>

for练习4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 在页面中接收一个用户输入的数字,并判断该数是否是质数。
质数:只能被1和它自身整除的数,1不是质数也不是合数,质数必须是大于1的自然数。
*/

var num = prompt("请输入一个大于1的整数:");


//判断这个值是否合法
if(num <= 1){
alert("该值不合法!");
}else{

//创建一个变量来保存当前的数的状态
//默认当前num是质数
var flag = true;

//判断num是否是质数
//获取2-num之间的数
for(var i=2 ; i<num ; i++){
//console.log(i);
//判断num是否能被i整除
if(num % i == 0){
//如果num能被i整除,则说明num一定不是质数
//设置flag为false
flag = false;
}
}

//如果num是质数则输出
if(flag){
alert(num + "是质数!!!");
}else{
alert("这个不是质数")
}


}


</script>
</head>
<body>
</body>
</html>

嵌套的for循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">

/*

通过程序,在页面中输出如下的图形:

* 1 <1 i=0
** 2 <2 i=1
*** 3 <3 i=2
**** 4 <4 i=3
***** 5 <5 i=4

*****
*****
*****
*****
*****

***** 1 j<5(5-0) i=0
**** 2 j<4(5-1) i=1
*** 3 j<3(5-2) i=2
** 4 j<2(5-3) i=3
* 5 j<1(5-4) i=4


*/

//向body中输出一个内容
//document.write("*****<br />");

//通过一个for循环来输出图形
//这个for循环执行几次,图形的高度就是多少
//它可以用来控制图形的高度
for(var i=0 ; i<5 ; i++){

/*
* 在循环的内部再创建一个循环,用来控制图形的宽度
* 目前我们的外部的for循环执行1次,内部的就会执行5次
* 内层循环可以来决定图形的宽度,执行几次图形的宽度就是多少
*/
/*for(var j=0 ; j<i+1 ; j++){
document.write("*&nbsp;&nbsp;&nbsp;");
}*/
for(var j=0 ; j<5-i ; j++){
document.write("*&nbsp;&nbsp;&nbsp;");
}

//输出一个换行
document.write("<br />");


}



</script>
</head>
<body>

</body>
</html>

99乘法表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 1.打印99乘法表
* 1*1=1
* 1*2=2 2*2=4
* 1*3=3 2*3=6 3*3=9
* 1*4=4 2*4=8 3*4=12 4*4=16
* ....9*9=81
*
* 2.打印出1-100之间所有的质数
*/

//创建外层循环,用来控制乘法表的高度
for(var i=1 ; i<=9 ; i++ ){
//创建一个内层循环来控制图形的宽度
for(var j=1 ; j<=i ; j++){
document.write("<span>"+j+"*"+i+"="+i*j+"</span>");
}

//输出一个换行
document.write("<br />");

}


</script>
<style type="text/css">

body{
width: 2000px;
}

span{
display: inline-block;
width: 80px;
}

</style>
</head>
<body>
</body>
</html>

质数练习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 打印出1-100之间所有的质数
*/

//打印2-100之间所有的数
for(var i=2 ; i<=100 ; i++){

//创建一个布尔值,用来保存结果,默认i是质数
var flag = true;

//判断i是否是质数
//获取到2-i之间的所有的数
for(var j=2 ; j<i ; j++){

//判断i是否能被j整除
if(i%j == 0){
//如果进入判断则证明i不是质数,修改flag值为false
flag = false;

}

}

//如果是质数,则打印i的值
if(flag){
console.log(i);
}

}


</script>
</head>
<body>
</body>
</html>

break和continue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* break关键字可以用来退出switch或循环语句
* 不能在if语句中使用break和continue
* break关键字,会立即终止离他最近的那个循环语句
*/

/*for(var i=0 ; i<5 ; i++){
console.log(i);

if(i == 2){
break;
}

}*/


/*for(var i=0 ; i<5 ; i++){
console.log("@外层循环"+i)
for(var j=0 ; j<5; j++){
break;
console.log("内层循环:"+j);
}
}*/


/*
* 可以为循环语句创建一个label,来标识当前的循环
* label:循环语句
* 使用break语句时,可以在break后跟着一个label,
* 这样break将会结束指定的循环,而不是最近的
*/

/*outer:
for(var i=0 ; i<5 ; i++){
console.log("@外层循环"+i)
for(var j=0 ; j<5; j++){
break outer;
console.log("内层循环:"+j);
}
}*/


/*
* continue关键字可以用来跳过当次循环
* 同样continue也是默认只会对离他最近的循环循环起作用
*/
/*for(var i=0 ; i<5 ; i++){

if(i==2){
continue;
}

console.log(i);
}*/

outer:
for(var i=0 ; i<5 ; i++){

for(var j=0 ; j<5 ; j++){

continue;

console.log("-->"+j);

}

console.log("@--->"+i);
}


</script>
</head>
<body>
</body>
</html>

质素练习补充

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">


//测试如下的程序的性能
//在程序执行前,开启计时器
//console.time("计时器的名字")可以用来开启一个计时器
//它需要一个字符串作为参数,这个字符串将会作为计时器的标识
console.time("test");

//打印2-100之间所有的数
for(var i=2 ; i<=100000 ; i++){
var flag = true;
for(var j=2 ; j<=Math.sqrt(i) ; j++){
if(i%j == 0){
//如果进入判断则证明i不是质数,修改flag值为false
flag = false;
//一旦进入判断,则证明i不可能是质数了,此时循环再执行已经没有任何意义了
//使用break来结束循环
break;

//不加break 215ms
//加break 25ms
//修改j<=后 2.6
}
}
//如果是质数,则打印i的值
if(flag){
//console.log(i);
}
}

//终止计时器
//console.timeEnd()用来停止一个计时器,需要一个计时器的名字作为参数
console.timeEnd("test"); //在浏览器控制台显示

/*
* 36
* 1 36
* 2 18
* 3 12
* 4 9
* 6 6
*/

//可以通过Math.sqrt()对一个数进行开方
//var result = Math.sqrt(97);

//console.log("result = "+result)


</script>
</head>
<body>
</body>
</html>

对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* JS中数据类型
* - String 字符串
* - Number 数值
* - Boolean 布尔值
* - Null 空值
* - Undefined 未定义
* - 以上这五种类型属于基本数据类型,以后我们看到的值
* 只要不是上边的5种,全都是对象
* - Object 对象
*
*
* 基本数据类型都是单一的值"hello" 123 true,
* 值和值之间没有任何的联系。
*
* 在JS中来表示一个人的信息(name gender age):
* var name = "孙悟空";
* var gender = "男";
* var age = 18;
* 如果使用基本数据类型的数据,我们所创建的变量都是独立,不能成为一个整体。
*
* 对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性。
*
* 对象的分类:
* 1.内建对象
* - 由ES标准中定义的对象,在任何的ES的实现中都可以使用
* - 比如:Math String Number Boolean Function Object....
*
* 2.宿主对象
* - 由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象
* - 比如 BOM DOM
*
* 3.自定义对象
* - 由开发人员自己创建的对象
*
*/

//创建对象
/*
* 使用new关键字调用的函数,是构造函数constructor
* 构造函数是专门用来创建对象的函数
* 使用typeof检查一个对象时,会返回object
*/
var obj = new Object();


/*
* 在对象中保存的值称为属性
* 向对象添加属性
* 语法:对象.属性名 = 属性值;
*/

//向obj中添加一个name属性
obj.name = "孙悟空";
//向obj中添加一个gender属性
obj.gender = "男";
//向obj中添加一个age属性
obj.age = 18;

/*
* 读取对象中的属性
* 语法:对象.属性名
*
* 如果读取对象中没有的属性,不会报错而是会返回undefined
*/

//console.log(obj.gender);
//console.log(obj.hello);

/*
* 修改对象的属性值
* 语法:对象.属性名 = 新值
*/
obj.name = "tom";

/*
* 删除对象的属性
* 语法:delete 对象.属性名
*/
delete obj.name;


console.log(obj.age);





</script>
</head>
<body>
</body>
</html>

属性名和属性值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

var obj = new Object();

/*
* 向对象中添加属性
* 属性名:
* - 对象的属性名不强制要求遵守标识符的规范
* 什么乱七八糟的名字都可以使用
* - 但是我们使用是还是尽量按照标识符的规范去做
*
*/
obj.name = "孙悟空";

//obj.var = "hello";

/*
* 如果要使用特殊的属性名,不能采用.的方式来操作
* 需要使用另一种方式:
* 语法:对象["属性名"] = 属性值
* 读取时也需要采用这种方式
*
* 使用[]这种形式去操作属性,更加的灵活,
* 在[]中可以直接传递一个变量,这样变量值是多少就会读取那个属性
*
*/
obj["123"] = 789;
obj["nihao"] = "你好";
var n = "nihao";
//console.log(obj["123"]);

/*
* 属性值
* JS对象的属性值,可以是任意的数据类型
* 甚至也可以是一个对象
*/

obj.test = true;
obj.test = null;
obj.test = undefined;

//创建一个对象
var obj2 = new Object();
obj2.name = "猪八戒";

//将obj2设置为obj的属性
obj.test = obj2;

//console.log(obj.test.name);

/*
* in 运算符
* - 通过该运算符可以检查一个对象中是否含有指定的属性
* 如果有则返回true,没有则返回false
* - 语法:
* "属性名" in 对象
*/
//console.log(obj.test2);

//检查obj中是否含有test2属性
//console.log("test2" in obj);
//console.log("test" in obj);
console.log("name" in obj);

</script>
</head>
<body>
</body>
</html>

基本和引用类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 基本数据类型
* String Number Boolean Null Undefined
*
* 引用数据类型
* Object
*
* JS中的变量都是保存到栈内存中的,
* 基本数据类型的值直接在栈内存中存储,
* 值与值之间是独立存在,修改一个变量不会影响其他的变量
*
* 对象是保存到堆内存中的,每创建一个新的对象,就会在堆内存中开辟出一个新的空间,
* 而变量保存的是对象的内存地址(对象的引用),如果两个变量保存的是同一个对象引用,
* 当一个通过一个变量修改属性时,另一个也会受到影响
*/

var a = 123;
var b = a;
a++;

/*console.log("a = "+a);
console.log("b = "+b);*/

var obj = new Object();
obj.name = "孙悟空";

var obj2 = obj;

//修改obj的name属性
obj.name = "猪八戒";



/*console.log(obj.name);
console.log(obj2.name);*/

//设置obj2为null
obj2 = null;

/*console.log(obj);
console.log(obj2);*/

var c = 10;
var d = 10;
//console.log(c == d);

var obj3 = new Object();
var obj4 = new Object();
obj3.name = "沙和尚";
obj4.name = "沙和尚";

/*console.log(obj3);
console.log(obj4);*/

/*
* 当比较两个基本数据类型的值时,就是比较值。
* 而比较两个引用数据类型时,它是比较的对象的内存地址,
* 如果两个对象是一摸一样的,但是地址不同,它也会返回false
*/
console.log(obj3 == obj4);


</script>
</head>
<body>
</body>
</html>

对象字面量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

//创建一个对象
//var obj = new Object();

/*
* 使用对象字面量来创建一个对象
*/
var obj = {};

//console.log(typeof obj);

obj.name = "孙悟空";

//console.log(obj.name);

/*
* 使用对象字面量,可以在创建对象时,直接指定对象中的属性
* 语法:{属性名:属性值,属性名:属性值....}
* 对象字面量的属性名可以加引号也可以不加,建议不加,
* 如果要使用一些特殊的名字,则必须加引号
*
* 属性名和属性值是一组一组的名值对结构,
* 名和值之间使用:连接,多个名值对之间使用,隔开
* 如果一个属性之后没有其他的属性了,就不要写,
*/
var obj2 = {

name:"猪八戒",
age:13,
gender:"男",
test:{name:"沙僧"}

};

console.log(obj2.test);

</script>
</head>
<body>
</body>
</html>

函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 函数 function
* - 函数也是一个对象
* - 函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)
* - 函数中可以保存一些代码在需要的时候调用
* - 使用typeof检查一个函数对象时,会返回function
*/

//我们在实际开发中很少使用构造函数来创建一个函数对象
//创建一个函数对象
//可以将要封装的代码以字符串的形式传递给构造函数
//var fun = new Function("console.log('Hello 这是我的第一个函数');");

//封装到函数中的代码不会立即执行
//函数中的代码会在函数调用的时候执行
//调用函数 语法:函数对象()
//当调用函数时,函数中封装的代码会按照顺序执行
//fun();

/*
* 使用 函数声明 来创建一个函数
* 语法:
* function 函数名([形参1,形参2...形参N]){
* 语句...
* }
*/

function fun2(){
console.log("这是我的第二个函数~~~");
alert("哈哈哈哈哈");
document.write("~~~~(>_<)~~~~");
}

//console.log(fun2);
//调用fun2
//fun2();

/*
* 使用 函数表达式 来创建一个函数
* var 函数名 = function([形参1,形参2...形参N]){
* 语句....
* }
*/

var fun3 = function(){
console.log("我是匿名函数中封装的代码");
};


fun3();

</script>
</head>
<body>
</body>
</html>

函数的参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 定义一个用来求两个数和的函数
* 可以在函数的()中来指定一个或多个形参(形式参数)
* 多个形参之间使用,隔开,声明形参就相当于在函数内部声明了对应的变量
* 但是并不赋值
*/
function sum(a,b){
console.log("a = "+a);
console.log("b = "+b);
console.log(a+b);
}

/*
* 在调用函数时,可以在()中指定实参(实际参数)
* 实参将会赋值给函数中对应的形参
*/
/*sum(1,2);
sum(123,456);*/

/*
* 调用函数时解析器不会检查实参的类型,
* 所以要注意,是否有可能会接收到非法的参数,如果有可能则需要对参数进行类型的检查
* 函数的实参可以是任意的数据类型
*/
//sum(123,"hello");
//sum(true , false);

/*
* 调用函数时,解析器也不会检查实参的数量
* 多余实参不会被赋值
* 如果实参的数量少于形参的数量,则没有对应实参的形参将是undefined
*
*/
//sum(123,456,"hello",true,null);
sum(123);

</script>
</head>
<body>
</body>
</html>

返回值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">

/*
* 创建一个函数,用来计算三个数的和
*
* 可以使用 return 来设置函数的返回值
* 语法:
* return 值
*
* return后的值将会会作为函数的执行结果返回,
* 可以定义一个变量,来接收该结果
*
* 在函数中return后的语句都不会执行
*
* 如果return语句后不跟任何值就相当于返回一个undefined,
* 如果函数中不写return,则也会返回undefined
*
* return后可以跟任意类型的值
*
*/
function sum(a , b , c){
//alert(a + b +c);

var d = a + b + c;

return d;

//return undefined;

}

//调用函数
//变量result的值就是函数的执行结果
//函数返回什么result的值就是什么
var result = sum(4,7,8);

//var result = alert("hello");

console.log("result = "+result);


</script>
</head>
<body>

</body>
</html>

练习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 定义一个函数,判断一个数字是否是偶数,如果是返回true,否则返回false
*/

function isOu(num){

return num % 2 == 0;
}

var result = isOu(15);

//console.log("result = "+result);


/*
* 定义一个函数,可以根据半径计算一个圆的面积,并返回计算结果
* 3.14*r*r
*/
function mianji(r){

return 3.14*r*r;

}

result = mianji(5);

//console.log("result = "+result);


/*
* 创建一个函数,可以在控制台中输出一个人的信息
* 可以输出人的 name age gender address
*
* 实参可以是任意的数据类型,也可以是一个对象
* 当我们的参数过多时,可以将参数封装到一个对象中,然后通过对象传递
*/
function sayHello(o){

//console.log("o = "+o);
console.log("我是"+o.name+",今年我"+o.age+"岁了,"+"我是一个"+o.gender+"人"+",我住在"+o.address);
}

//sayHello("猪八戒",28,"高老庄","男");
//创建一个对象
var obj = {
name:"孙悟空",
age:18,
address:"花果山",
gender:"男"

};

//sayHello(obj);

/*
* 实参可以是一个对象,也可以是一个函数
*/

function fun(a){
console.log("a = "+a);
//a(obj);
}

//fun(sayHello);

//fun(function(){alert("hello")});

fun(mianji(10));

/*
* mianji()
* - 调用函数
* - 相当于使用的函数的返回值
*
* mianji
* - 函数对象
* - 相当于直接使用函数对象
*/

</script>
</head>
<body>
</body>
</html>

返回值类型

在JS中可以在函数内部再定义一个函数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

function fun(){
alert("函数要执行了~~~~");

for(var i=0 ; i<5 ; i++){


if(i == 2){
//使用break可以退出当前的循环
//break;

//continue用于跳过当次循环
//continue;

//使用return可以结束整个函数
//return;
}

console.log(i);
}

alert("函数执行完了~~~~");
}

//fun();

/*
* 返回值可以是任意的数据类型
* 也可以是一个对象,也可以是一个函数
*/
function fun2(){

//返回一个对象
return {name:"沙和尚"};
}

var a = fun2();

//console.log("a = "+a);

function fun3(){
//在函数内部再声明一个函数
function fun4(){
alert("我是fun4");
}

//将fun4函数对象作为返回值返回
return fun4;
}

a = fun3();
//console.log(a);
//a();
fun3()(); //调用fun4


</script>
</head>
<body>
</body>
</html>

立即执行函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">


//函数对象()
/*
* 立即执行函数
* 函数定义完,立即被调用,这种函数叫做立即执行函数
* 立即执行函数往往只会执行一次
*/
/*(function(){
alert("我是一个匿名函数~~~");
})();*/

(function(a,b){
console.log("a = "+a);
console.log("b = "+b);
})(123,456);

</script>
</head>
<body>
</body>
</html>

对象方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 创建一个对象
*/
var obj = new Object();

//向对象中添加属性
obj.name = "孙悟空";
obj.age = 18;

//对象的属性值可以是任何的数据类型,也可以是个函数
obj.sayName = function(){
console.log(obj.name);
};

function fun(){
console.log(obj.name);
};

//console.log(obj.sayName);
//调方法
obj.sayName();
//调函数
//fun();

/*
* 函数也可以称为对象的属性,
* 如果一个函数作为一个对象的属性保存,
* 那么我们称这个函数时这个对象的方法
* 调用这个函数就说调用对象的方法(method)
*
* 但是它只是名称上的区别没有其他的区别
*
*/

var obj2 = {

name:"猪八戒",
age:18,
sayName:function(){
console.log(obj2.name);
}

};

obj2.sayName();



</script>
</head>
<body>
</body>
</html>

枚举对象中的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

var obj = {
name:"孙悟空",
age:18,
gender:"男",
address:"花果山"
};

//枚举对象中的属性
//使用for ... in 语句
/*
* 语法:
* for(var 变量 in 对象){
*
* }
*
* for...in语句 对象中有几个属性,循环体就会执行几次
* 每次执行时,会将对象中的一个属性的名字赋值给变量
*/

for(var n in obj){
console.log("属性名:"+n);

console.log("属性值:"+obj[n]);
}



</script>
</head>
<body>
</body>
</html>

作用域(Scope)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 作用域
* - 作用域指一个变量的作用的范围
* - 在JS中一共有两种作用域:
* 1.全局作用域
* - 直接编写在script标签中的JS代码,都在全局作用域
* - 全局作用域在页面打开时创建,在页面关闭时销毁
* - 在全局作用域中有一个全局对象window,
* 它代表的是一个浏览器的窗口,它由浏览器创建我们可以直接使用
* - 在全局作用域中:
* 创建的变量都会作为window对象的属性保存
* 创建的函数都会作为window对象的方法保存
* - 全局作用域中的变量都是全局变量,
* 在页面的任意的部分都可以访问的到
*
* 2.函数作用域
*
*/

var a = 10;
var b = 20;
//var c = "hello";

//console.log(window.c);

function fun(){
console.log("我是fun函数");
}

//window.fun();

//window.alert("hello");




</script>
</head>
<body>
</body>
</html>

变量的声明提前

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">


/*
* 变量的声明提前
* - 使用var关键字声明的变量,会在所有的代码执行之前被声明(但是不会赋值),
* 但是如果声明变量时不适用var关键字,则变量不会被声明提前
*
* 函数的声明提前
* - 使用函数声明形式创建的函数 function 函数(){}
* 它会在所有的代码执行之前就被创建,所以我们可以在函数声明前来调用函数
* 使用函数表达式创建的函数,不会被声明提前,所以不能在声明前调用
*/
/*console.log("a = "+a);

var a = 123;*/

//fun();


//函数声明,会被提前创建
function fun(){
console.log("我是一个fun函数");
}

//函数表达式,不会被提前创建
var fun2 = function(){
console.log("我是fun2函数");
};

fun2();



</script>
</head>
<body>
</body>
</html>
因为用var声明了,所以不会报错,但是没有赋值,赋值要执行到var a =10;这里才会赋值

image-20260307190300860

没有var所以变量没有被声明就会报错

image-20260307190344791

函数作用域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 函数作用域
* - 调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁
* - 每调用一次函数就会创建一个新的函数作用域,他们之间是互相独立的
* - 在函数作用域中可以访问到全局作用域的变量
* 在全局作用域中无法访问到函数作用域的变量
* - 当在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接使用
* 如果没有则向上一级作用域中寻找,直到找到全局作用域,
* 如果全局作用域中依然没有找到,则会报错ReferenceError
* - 在函数中要访问全局变量可以使用window对象
*/

//创建一个变量
var a = 10;

function fun(){

var a = "我是fun函数中的变量a";
var b = 20;

//console.log("a = "+a);

function fun2(){
console.log("a = "+window.a);
}

fun2();

}

//fun();
//console.log("b = "+b); //无法访问到函数里面定义的变量

/*
* 在函数作用域也有声明提前的特性,
* 使用var关键字声明的变量,会在函数中所有的代码执行之前被声明
* 函数声明也会在函数中所有的代码执行之前执行
*/

function fun3(){

fun4();

//console.log(a);

var a = 35;

function fun4(){
alert("I'm fun4");
}

}

//fun3();


var c = 33;

/*
* 在函数中,不使用var声明的变量都会成为全局变量
*/
function fun5(){
//console.log("c = "+c);
//c = 10;

//d没有使用var关键字,则会设置为全局变量
d = 100;
}

fun5();

//在全局输出c
//console.log("d = "+d);

var e = 23;

/*
* 定义形参就相当于在函数作用域中声明了变量
*/
function fun6(e){
alert(e);
}

fun6();



</script>
</head>
<body>
</body>
</html>

debug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

alert(d);

var a = 10;

var b = "hello";

c = true;

function fun(){
alert("hello");
}

var d = 35;

</script>
</head>
<body>
</body>
</html>


this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 解析器在调用函数每次都会向函数内部传递进一个隐含的参数,
* 这个隐含的参数就是this,this指向的是一个对象,
* 这个对象我们称为函数执行的 上下文对象,
* 根据函数的调用方式的不同,this会指向不同的对象
* 1.以函数的形式调用时,this永远都是window
* 2.以方法的形式调用时,this就是调用方法的那个对象
*/

function fun(){
//console.log("a = "+a+", b = "+b);
console.log(this.name);
}

//fun();

//创建一个对象
var obj = {
name:"孙悟空",
sayName:fun
};

var obj2 = {
name:"沙和尚",
sayName:fun
};

//console.log(obj.sayName == fun);
var name = "全局的name属性";
//obj.sayName();
//以函数形式调用,this是window
//fun();

//以方法的形式调用,this是调用方法的对象
//obj.sayName();
obj2.sayName();

</script>
</head>
<body>
</body>
</html>


this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

//创建一个name变量
var name = "全局";

//创建一个fun()函数
function fun(){
console.log(this.name);
}

//创建两个对象
var obj = {
name:"孙悟空",
sayName:fun
};

var obj2 = {
name:"沙和尚",
sayName:fun
};
fun()
//我们希望调用obj.sayName()时可以输出obj的名字
obj.sayName();

obj2.sayName();



</script>
</head>
<body>
</body>
</html>


对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 创建一个对象
*/
var obj = {
name:"孙悟空",
age:18,
gender:"男",
sayName:function(){
alert(this.name);
}
};

/*
* 使用工厂方法创建对象
* 通过该方法可以大批量的创建对象
*/
function createPerson(name , age ,gender){
//创建一个新的对象
var obj = new Object();
//向对象中添加属性
obj.name = name;
obj.age = age;
obj.gender = gender;
obj.sayName = function(){
alert(this.name);
};
//将新的对象返回
return obj;
}

/*
* 用来创建狗的对象
*/
function createDog(name , age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.sayHello = function(){
alert("汪汪~~");
};

return obj;
}

var obj2 = createPerson("猪八戒",28,"男");
var obj3 = createPerson("白骨精",16,"女");
var obj4 = createPerson("蜘蛛精",18,"女");
/*
* 使用工厂方法创建的对象,使用的构造函数都是Object
* 所以创建的对象都是Object这个类型,
* 就导致我们无法区分出多种不同类型的对象
*/
//创建一个狗的对象
var dog = createDog("旺财",3);

console.log(dog);
console.log(obj4);


</script>
</head>
<body>
</body>
</html>


构造函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 创建一个构造函数,专门用来创建Person对象的
* 构造函数就是一个普通的函数,创建方式和普通函数没有区别,
* 不同的是构造函数习惯上首字母大写
*
* 构造函数和普通函数的区别就是调用方式的不同
* 普通函数是直接调用,而构造函数需要使用new关键字来调用
*
* 构造函数的执行流程:
* 1.立刻创建一个新的对象
* 2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
* 3.逐行执行函数中的代码
* 4.将新建的对象作为返回值返回
*
* 使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类。
* 我们将通过一个构造函数创建的对象,称为是该类的实例
*
* this的情况:
* 1.当以函数的形式调用时,this是window
* 2.当以方法的形式调用时,谁调用方法this就是谁
* 3.当以构造函数的形式调用时,this就是新创建的那个对象
*
*/
function Person(name , age , gender){
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function(){
alert(this.name);
};
}

function Dog(){

}

var per = new Person("孙悟空",18,"男");
var per2 = new Person("玉兔精",16,"女");
var per3 = new Person("奔波霸",38,"男");

var dog = new Dog();

/*console.log(per);
console.log(dog);*/

/*
* 使用instanceof可以检查一个对象是否是一个类的实例
* 语法:
* 对象 instanceof 构造函数
* 如果是,则返回true,否则返回false
*/
//console.log(per instanceof Person);
//console.log(dog instanceof Person);

/*
* 所有的对象都是Object的后代,
* 所以任何对象和Object左instanceof检查时都会返回true
*/
//console.log(dog instanceof Object);


</script>
</head>
<body>
</body>
</html>


构造函数2

image-20260309144036992

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 创建一个Person构造函数
* - 在Person构造函数中,为每一个对象都添加了一个sayName方法,
* 目前我们的方法是在构造函数内部创建的,
* 也就是构造函数每执行一次就会创建一个新的sayName方法
* 也是所有实例的sayName都是唯一的。
* 这样就导致了构造函数执行一次就会创建一个新的方法,
* 执行10000次就会创建10000个新的方法,而10000个方法都是一摸一样的
* 这是完全没有必要,完全可以使所有的对象共享同一个方法
*/
function Person(name , age , gender){
this.name = name;
this.age = age;
this.gender = gender;
//向对象中添加一个方法
//this.sayName = fun;
}

//将sayName方法在全局作用域中定义
/*
* 将函数定义在全局作用域,污染了全局作用域的命名空间
* 而且定义在全局作用域中也很不安全
*/
/*function fun(){
alert("Hello大家好,我是:"+this.name);
};*/
//向原型中添加sayName方法
Person.prototype.sayName = function(){
alert("Hello大家好,我是:"+this.name);
};

//创建一个Person的实例
var per = new Person("孙悟空",18,"男");
var per2 = new Person("猪八戒",28,"男");
per.sayName();
per2.sayName();

//console.log(per.sayName == per2.sayName);


</script>
</head>
<body>
</body>
</html>



原型1

image-20260309144036992

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 原型 prototype
*
* 我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype
* 这个属性对应着一个对象,这个对象就是我们所谓的原型对象
* 如果函数作为普通函数调用prototype没有任何作用
* 当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐含的属性,
* 指向该构造函数的原型对象,我们可以通过__proto__来访问该属性
*
* 原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象,
* 我们可以将对象中共有的内容,统一设置到原型对象中。
*
* 当我们访问对象的一个属性或方法时,它会先在对象自身中寻找,如果有则直接使用,
* 如果没有则会去原型对象中寻找,如果找到则直接使用
*
* 以后我们创建构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中,
* 这样不用分别为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都具有这些属性和方法了
*/

function MyClass(){

}

//向MyClass的原型中添加属性a
MyClass.prototype.a = 123;

//向MyClass的原型中添加一个方法
MyClass.prototype.sayHello = function(){
alert("hello");
};

var mc = new MyClass();

var mc2 = new MyClass();

//console.log(MyClass.prototype);
//console.log(mc2.__proto__ == MyClass.prototype);

//向mc中添加a属性
mc.a = "我是mc中的a";

//console.log(mc2.a);

mc.sayHello();


</script>
</head>
<body>
</body>
</html>



原型2

1
2
3
prototype是给构造函数用的,__proto__是给对象使用的
构造函数名.prototype是给构造函数名用的,
对象名.__proto__
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 创建一个构造函数
*/
function MyClass(){

}

//向MyClass的原型中添加一个name属性
MyClass.prototype.name = "我是原型中的名字";

var mc = new MyClass();
mc.age = 18;

//console.log(mc.name);

//使用in检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回true
//console.log("name" in mc);

//可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
//使用该方法只有当对象自身中含有属性时,才会返回true
//console.log(mc.hasOwnProperty("age"));

//console.log(mc.hasOwnProperty("hasOwnProperty"));

/*
* 原型对象也是对象,所以它也有原型,
* 当我们使用一个对象的属性或方法时,会现在自身中寻找,
* 自身中如果有,则直接使用,
* 如果没有则去原型对象中寻找,如果原型对象中有,则使用,
* 如果没有则去原型的原型中寻找,直到找到Object对象的原型,
* Object对象的原型没有原型,如果在Object原型中依然没有找到,则返回undefined
*/

//console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));

//console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));

//console.log(mc.__proto__.__proto__.__proto__);

//console.log(mc.hello);

//console.log(mc.__proto__.__proto__.__proto__)

</script>
</head>
<body>
</body>
</html>



重新写toString方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

function Person(name , age , gender){
this.name = name;
this.age = age;
this.gender = gender;
}

//修改Person原型的toString
Person.prototype.toString = function(){
return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
};


//创建一个Person实例
var per = new Person("孙悟空",18,"男");
var per2 = new Person("猪八戒",28,"男");

//当我们直接在页面中打印一个对象时,事件上是输出的对象的toString()方法的返回值
//如果我们希望在输出对象时不输出[object Object],可以为对象添加一个toString()方法
//Person[name=孙悟空,age=18,gender=男]
/*per.toString = function(){
return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
};*/

var result = per.toString();
//console.log("result = " + result);
//console.log(per.__proto__.__proto__.hasOwnProperty("toString"));
console.log(per2);
console.log(per);


</script>
</head>
<body>
</body>
</html>

垃圾回收

image-20260309144327334

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 垃圾回收(GC)
* - 就像人生活的时间长了会产生垃圾一样,程序运行过程中也会产生垃圾
* 这些垃圾积攒过多以后,会导致程序运行的速度过慢,
* 所以我们需要一个垃圾回收的机制,来处理程序运行过程中产生垃圾
* - 当一个对象没有任何的变量或属性对它进行引用,此时我们将永远无法操作该对象,
* 此时这种对象就是一个垃圾,这种对象过多会占用大量的内存空间,导致程序运行变慢,
* 所以这种垃圾必须进行清理。
* - 在JS中拥有自动的垃圾回收机制,会自动将这些垃圾对象从内存中销毁,
* 我们不需要也不能进行垃圾回收的操作
* - 我们需要做的只是要将不再使用的对象设置null即可
*
*/
var obj = new Object();

//对对象进行各种操作。。。。


obj = null;



</script>
</head>
<body>
</body>
</html>

数组1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 内建对象
* 宿主对象
* 自定义对象
*
* 数组(Array)
* - 数组也是一个对象
* - 它和我们普通对象功能类似,也是用来存储一些值的
* - 不同的是普通对象是使用字符串作为属性名的,
* 而数组时使用数字来作为索引操作元素
* - 索引:
* 从0开始的整数就是索引
* - 数组的存储性能比普通对象要好,在开发中我们经常使用数组来存储一些数据
*/

//创建数组对象
var arr = new Array();

//使用typeof检查一个数组时,会返回object
//console.log(typeof arr);

/*
* 向数组中添加元素
* 语法:数组[索引] = 值
*/
arr[0] = 10;
arr[1] = 33;
arr[2] = 22;
arr[3] = 44;
/*arr[10] = 31;
arr[100] = 90;*/

/*
* 读取数组中的元素
* 语法:数组[索引]
* 如果读取不存在的索引,他不会报错而是返回undefined
*/

//console.log(arr[3]);

/*
* 获取数组的长度
* 可以使用length属性来获取数组的长度(元素的个数)
* 语法:数组.length
*
* 对于连续的数组,使用length可以获取到数组的长度(元素的个数)
* 对于非连续的数组,使用length会获取到数组的最大的索引+1
* 尽量不要创建非连续的数组
*/
/*console.log(arr.length);
console.log(arr);*/

/*
* 修改length
* 如果修改的length大于原长度,则多出部分会空出来
* 如果修改的length小于原长度,则多出的元素会被删除
*/
//arr.length = 10;

/*arr.length = 2;

console.log(arr.length);
console.log(arr);*/

arr[4] = 50;
arr[5] = 60;

//向数组的最后一个位置添加元素
//语法:数组[数组.length] = 值;
arr[arr.length] = 70;
arr[arr.length] = 80;
arr[arr.length] = 90;

console.log(arr);

</script>
</head>
<body>
</body>
</html>

数组2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

//创建一个数组
//var arr = new Array();

//使用字面量来创建数组
//语法:[]
//var arr = [];

//console.log(typeof arr);

//使用字面量创建数组时,可以在创建时就指定数组中的元素
var arr = [1,2,3,4,5,10];

//console.log(arr[3]);

//使用构造函数创建数组时,也可以同时添加元素,将要添加的元素作文构造函数的参数传递
//元素之间使用,隔开
var arr2 = new Array(10,20,30);
//console.log(arr2);

//创建一个数组数组中只有一个元素10
arr = [10];

//创建一个长度为10的数组
arr2 = new Array(10);

//console.log(arr2.length);
//数组中的元素可以是任意的数据类型
arr = ["hello",1,true,null,undefined];

//也可以是对象
var obj = {name:"孙悟空"};
arr[arr.length] = obj;
arr = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}];

//也可以是一个函数
arr = [function(){alert(1)},function(){alert(2)}];

//console.log(arr);
//arr[0]();

//数组中也可以放数组,如下这种数组我们称为二维数组
arr = [[1,2,3],[3,4,5],[5,6,7]];
console.log(arr[1]);

</script>
</head>
<body>
</body>
</html>

数组的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚"];

/*
* push()
* - 该方法可以向数组的末尾添加一个或多个元素,并返回数组的新的长度
* - 可以将要添加的元素作为方法的参数传递,
* 这样这些元素将会自动添加到数组的末尾
* - 该方法会将数组新的长度作为返回值返回
*/

var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");


//console.log(arr);
//console.log("result = "+result);

/*
* pop()
* - 该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
*/
result = arr.pop();
/*console.log(arr);
console.log("result = "+result);*/

/*
* unshift()
* - 向数组开头添加一个或多个元素,并返回新的数组长度
* - 向前边插入元素以后,其他的元素索引会依次调整
*/
//console.log(arr);

arr.unshift("牛魔王","二郎神");

console.log(arr);

/*
* shift()
* - 可以删除数组的第一个元素,并将被删除的元素作为返回值返回
*/
result = arr.shift();
result = arr.shift();

console.log(arr);
console.log("result = "+result);


</script>
</head>
<body>
</body>
</html>

数组的遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];

//所谓的遍历数组,就是将数组中所有的元素都取出来
/*console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);*/

for(var i=0 ; i<arr.length ; i++){
console.log(arr[i]);
}

</script>
</head>
<body>
</body>
</html>

练习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

function Person(name , age , gender){
this.name = name;
this.age = age;
}

//修改Person原型的toString
Person.prototype.toString = function(){
return "Person[name="+this.name+",age="+this.age+"]";
};

//创建一个Person对象
var per = new Person("孙悟空",18);
var per2 = new Person("猪八戒",28);
var per3 = new Person("红孩儿",8);
var per4 = new Person("蜘蛛精",16);
var per5 = new Person("二郎神",38);

/*
* 将这些person对象放入到一个数组中
*/
var perArr = [per,per2,per3,per4,per5];

/*
* 创建一个函数,可以将perArr中的满18岁的Person提取出来,
* 然后封装到一个新的数组中并返回
* arr
* 形参,要提取信息的数组
*/
function getAdult(arr){
//创建一个新的数组
var newArr = [];

//遍历arr,获取arr中Person对象
for(var i=0 ; i<arr.length ; i++){
var p = arr[i];
//判断Person对象的age是否大于等于18
if(p.age >= 18){
//如果大于等于18,则将这个对象添加到newArr中
//将对象放入到新数组中
newArr.push(p);
}
}
//将新的数组返回
return newArr;

}

var result = getAdult(perArr);

console.log(result);


</script>
</head>
<body>
</body>
</html>

forEach

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 一般我们都是使用for循环去遍历数组,
* JS中还为我们提供了一个方法,用来遍历数组
* forEach()
* - 这个方法只支持IE8以上的浏览器
* IE8及以下的浏览器均不支持该方法,所以如果需要兼容IE8,则不要使用forEach
* 还是使用for循环来遍历
*/

//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];

/*
* forEach()方法需要一个函数作为参数
* - 像这种函数,由我们创建但是不由我们调用的,我们称为回调函数
* - 数组中有几个元素函数就会执行几次,每次执行时,浏览器会将遍历到的元素
* 以实参的形式传递进来,我们可以来定义形参,来读取这些内容
* - 浏览器会在回调函数中传递三个参数:
* 第一个参数,就是当前正在遍历的元素
* 第二个参数,就是当前正在遍历的元素的索引
* 第三个参数,就是正在遍历的数组
*
*/
arr.forEach(function(value , index , obj){
console.log(value);
});


</script>
</head>
<body>
</body>
</html>

数组的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];

/*
* slice()
* - 可以用来从数组提取指定元素
* - 该方法不会改变元素数组,而是将截取到的元素封装到一个新数组中返回
* - 参数:
* 1.截取开始的位置的索引,包含开始索引
* 2.截取结束的位置的索引,不包含结束索引
* - 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
* - 索引可以传递一个负值,如果传递一个负值,则从后往前计算
* -1 倒数第一个
* -2 倒数第二个
*/

var result = arr.slice(1,4);

result = arr.slice(3);

result = arr.slice(1,-2);

//console.log(result);

/*
* splice()
* - 可以用于删除数组中的指定元素
* - 使用splice()会影响到原数组,会将指定元素从原数组中删除
* 并将被删除的元素作为返回值返回
* - 参数:
* 第一个,表示开始位置的索引
* 第二个,表示删除的数量
* (可选)第三个及以后。。
* 可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边
*
*/

arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
var result = arr.splice(3,0,"牛魔王","铁扇公主","红孩儿");

console.log(arr);
//console.log(result);


</script>
</head>
<body>
</body>
</html>

练习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

//创建一个数组
var arr = [1,2,3,2,2,1,3,4,2,5];

//去除数组中重复的数字
//获取数组中的每一个元素
for(var i=0 ; i<arr.length ; i++){
//console.log(arr[i]);
/*获取当前元素后的所有元素*/
for(var j=i+1 ; j<arr.length ; j++){
//console.log("---->"+arr[j]);
//判断两个元素的值是否相等
if(arr[i] == arr[j]){
//如果相等则证明出现了重复的元素,则删除j对应的元素
arr.splice(j,1);
//当删除了当前j所在的元素以后,后边的元素会自动补位
//此时将不会在比较这个元素吧,我需要在比较一次j所在位置的元素
//使j自减
j--;
}
}
}

console.log(arr);


</script>
</head>
<body>
</body>
</html>

数组的剩余方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">

var arr = ["孙悟空","猪八戒","沙和尚"];
var arr2 = ["白骨精","玉兔精","蜘蛛精"];
var arr3 = ["二郎神","太上老君","玉皇大帝"];

/*
* concat()可以连接两个或多个数组,并将新的数组返回
* - 该方法不会对原数组产生影响
*/
var result = arr.concat(arr2,arr3,"牛魔王","铁扇公主");

/*
* join()
* - 该方法可以将数组转换为一个字符串
* - 该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回
* - 在join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符
* 如果不指定连接符,则默认使用,作为连接符
*/
arr = ["孙悟空","猪八戒","沙和尚","唐僧"];

result = arr.join("@-@");
/*
* reverse()
* - 该方法用来反转数组(前边的去后边,后边的去前边)
* - 该方法会直接修改原数组
*/

arr.reverse();

//console.log(arr);

arr = ["b","d","e","a","c"];

/*
* sort()
* - 可以用来对数组中的元素进行排序
* - 也会影响原数组,默认会按照Unicode编码进行排序
*/
arr.sort();
//arr.reverse();

/*
* 即使对于纯数字的数组,使用sort()排序时,也会按照Unicode编码来排序,
* 所以对数字进排序时,可能会得到错误的结果。
*
* 我们可以自己来指定排序的规则
* 我们可以在sort()添加一个回调函数,来指定排序规则,
* 回调函数中需要定义两个形参,
* 浏览器将会分别使用数组中的元素作为实参去调用回调函数
* 使用哪个元素调用不确定,但是肯定的是在数组中a一定在b前边
* - 浏览器会根据回调函数的返回值来决定元素的顺序,
* 如果返回一个大于0的值,则元素会交换位置
* 如果返回一个小于0的值,则元素位置不变
* 如果返回一个0,则认为两个元素相等,也不交换位置
*
* - 如果需要升序排列,则返回 a-b
* 如果需要降序排列,则返回b-a
*/
arr = [5,4,2,1,3,6,8,7];

arr.sort(function(a,b){

//前边的大
/*if(a > b){
return -1;
}else if(a < b){
return 1;
}else{
return 0;
}*/

//升序排列
//return a - b;

//降序排列
return b - a;

});

console.log(arr);

</script>
</head>
<body>

</body>
</html>

函数的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function fun(a,b) {
console.log("a = "+a);
console.log("b = "+b);
//alert(this);
}

var obj = {
name: "obj",
sayName:function(){
alert(this.name);
}
};

/*
* call()和apply()
* - 这两个方法都是函数对象的方法,需要通过函数对象来调用
* - 当对函数调用call()和apply()都会调用函数执行
* - 在调用call()和apply()可以将一个对象指定为第一个参数
* 此时这个对象将会成为函数执行时的this
* - call()方法可以将实参在对象之后依次传递
* - apply()方法需要将实参封装到一个数组中统一传递
*
* - this的情况:
* 1.以函数形式调用时,this永远都是window
* 2.以方法的形式调用时,this是调用方法的对象
* 3.以构造函数的形式调用时,this是新创建的那个对象
* 4.使用call和apply调用时,this是指定的那个对象
*/

//fun.call(obj,2,3);
fun.apply(obj,[2,3]);



var obj2 = {
name: "obj2"
};

/*fun.apply();
fun.call();
fun();*/

//fun.call(obj);
//fun.apply(obj);

//fun();

//obj.sayName.apply(obj2);
</script>
</head>

<body>
</body>

</html>

arguments

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 在调用函数时,浏览器每次都会传递进两个隐含的参数:
* 1.函数的上下文对象 this
* 2.封装实参的对象 arguments
* - arguments是一个类数组对象,它也可以通过索引来操作数据,也可以获取长度
* - 在调用函数时,我们所传递的实参都会在arguments中保存
* - arguments.length可以用来获取实参的长度
* - 我们即使不定义形参,也可以通过arguments来使用实参,
* 只不过比较麻烦
* arguments[0] 表示第一个实参
* arguments[1] 表示第二个实参 。。。
* - 它里边有一个属性叫做callee,
* 这个属性对应一个函数对象,就是当前正在指向的函数的对象
*
*/

function fun(a,b){
//console.log(arguments instanceof Array);
//console.log(Array.isArray(arguments));
//console.log(arguments[1]);
//console.log(arguments.length);
console.log(arguments.callee == fun);
}

fun("hello",true);

</script>
</head>
<body>
</body>
</html>

Date对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* Date对象
* - 在JS中使用Date对象来表示一个时间
*/

//创建一个Date对象
//如果直接使用构造函数创建一个Date对象,则会封装为当前代码执行的时间
var d = new Date();

//创建一个指定的时间对象
//需要在构造函数中传递一个表示时间的字符串作为参数
//日期的格式 月份/日/年 时:分:秒
var d2 = new Date("2/18/2011 11:10:30");

/*
* getDate()
* - 获取当前日期对象是几日
*/
var date = d2.getDate();
/*
* getDay()
* - 获取当前日期对象时周几
* - 会返回一个0-6的值
* 0 表示周日
* 1表示周一
* 。。。
*/
var day = d2.getDay();

/*
* getMonth()
* d2 = new Date("12/18/2011 11:10:30");
* - 获取当前时间对象的月份
* - 会返回一个0-11的值
* 0 表示1月
* 1 表示2月
* 11 表示12月
*/
var month = d2.getMonth();

/*
* getFullYear()
* - 获取当前日期对象的年份
*/
var year = d2.getFullYear();

//console.log(d2);
//console.log("date = "+date);
//console.log("day = "+day);
//console.log("month = "+month);
//console.log(year);

/*
* getTime()
* - 获取当前日期对象的时间戳
* - 时间戳,指的是从格林威治标准时间的1970年1月1日,0时0分0秒
* 到当前日期所花费的毫秒数(1秒 = 1000毫秒)
* - 计算机底层在保存时间时使用都是时间戳
*/

var time = d2.getTime();

//console.log(time/1000/60/60/24/365);

/*var d3 = new Date("1/1/1970 0:0:0");
time = d3.getTime();
console.log(time);*/

//利用时间戳来测试代码的执行的性能
//Date.now获取当前的时间戳
var start = Date.now();

for(var i=0 ; i<100 ; i++){
console.log(i);
}

var end = Date.now();


console.log("执行了:"+(end - start)+"毫秒");


</script>
</head>
<body>
</body>
</html>

Math对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* Math
* - Math和其他的对象不同,它不是一个构造函数,
* 它属于一个工具类不用创建对象,它里边封装了数学运算相关的属性和方法
* - 比如
* Math.PI 表示的圆周率
*/

//console.log(Math.PI);

/*
* abs()可以用来计算一个数的绝对值
*/
//console.log(Math.abs(-1));

/*
* Math.ceil()
* - 可以对一个数进行向上取整,小数位只有有值就自动进1
* Math.floor()
* - 可以对一个数进行向下取整,小数部分会被舍掉
* Math.round()
* - 可以对一个数进行四舍五入取整
*/
//console.log(Math.ceil(1.1));
//console.log(Math.floor(1.99));
//console.log(Math.round(1.4));

/*
* Math.random()
* - 可以用来生成一个0-1之间的随机数
* - 生成一个0-10的随机数
* - 生成一个0-x之间的随机数
* Math.round(Math.random()*x)
*
* - 生成一个1-10
* - 生成一个x-y之间的随机数
* Math.round(Math.random()*(y-x)+x)
*/
/*for(var i=0 ; i<100 ; i++){
//console.log(Math.round(Math.random()*10));
//console.log(Math.round(Math.random()*20));

//console.log(Math.round(Math.random()*9)+1);
//console.log(Math.round(Math.random()*8)+2);

//生成1-6之间的随机数
console.log(Math.round(Math.random()*5+1));
}*/

/*
* max() 可以获取多个数中的最大值
* min() 可以获取多个数中的最小值
*/

var max = Math.max(10,45,30,100);
var min = Math.min(10,45,30,100);
//console.log(min);

/*
* Math.pow(x,y)
* 返回x的y次幂
*/

//console.log(Math.pow(12,3));

/*
* Math.sqrt()
* 用于对一个数进行开方运算
*/
console.log(Math.sqrt(2));

</script>
</head>
<body>
</body>
</html>

包装类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 基本数据类型
* String Number Boolean Null Undefined
* 引用数据类型
* Object
*
* 在JS中为我们提供了三个包装类,通过这三个包装类可以将基本数据类型的数据转换为对象
* String()
* - 可以将基本数据类型字符串转换为String对象
* Number()
* - 可以将基本数据类型的数字转换为Number对象
* Boolean()
* - 可以将基本数据类型的布尔值转换为Boolean对象
* 但是注意:我们在实际应用中不会使用基本数据类型的对象,
* 如果使用基本数据类型的对象,在做一些比较时可能会带来一些不可预期的结果
*/

//创建一个Number类型的对象
//num = 3;
var num = new Number(3);
var num2 = new Number(3);
var str = new String("hello");
var str2 = new String("hello");
var bool = new Boolean(true);
var bool2 = true;

//向num中添加一个属性
num.hello = "abcdefg";

//console.log(str === str2);

var b = new Boolean(false);

/*if(b){
alert("我运行了~~~");
}*/

/*
* 方法和属性之能添加给对象,不能添加给基本数据类型
* 当我们对一些基本数据类型的值去调用属性和方法时,
* 浏览器会临时使用包装类将其转换为对象,然后在调用对象的属性和方法
* 调用完以后,在将其转换为基本数据类型
*/
var s = 123;

s = s.toString();

s.hello = "你好";

console.log(s.hello);
//console.log(typeof s);


</script>
</head>
<body>
</body>
</html>

字符串的相关方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//创建一个字符串
var str = "Hello Atguigu";

/*
* 在底层字符串是以字符数组的形式保存的
* ["H","e","l"]
*/

/*
* length属性
* - 可以用来获取字符串的长度
*/
//console.log(str.length);
//console.log(str[5]);

/*
* charAt()
* - 可以返回字符串中指定位置的字符
* - 根据索引获取指定的字符
*/
str = "中Hello Atguigu";

var result = str.charAt(6);

/*
* charCodeAt()
* - 获取指定位置字符的字符编码(Unicode编码)
*/

result = str.charCodeAt(0);

/*
* String.formCharCode()
* - 可以根据字符编码去获取字符
*/
result = String.fromCharCode(0x2692);

/*
* concat()
* - 可以用来连接两个或多个字符串
* - 作用和+一样
*/
result = str.concat("你好","再见");

/*
* indexof()
* - 该方法可以检索一个字符串中是否含有指定内容
* - 如果字符串中含有该内容,则会返回其第一次出现的索引
* 如果没有找到指定的内容,则返回-1
* - 可以指定一个第二个参数,指定开始查找的位置
*
* lastIndexOf();
* - 该方法的用法和indexOf()一样,
* 不同的是indexOf是从前往后找,
* 而lastIndexOf是从后往前找
* - 也可以指定开始查找的位置
*/

str = "hello hatguigu";

result = str.indexOf("h",1);

result = str.lastIndexOf("h",5);

/*
* slice()
* - 可以从字符串中截取指定的内容
* - 不会影响原字符串,而是将截取到内容返回
* - 参数:
* 第一个,开始位置的索引(包括开始位置)
* 第二个,结束位置的索引(不包括结束位置)
* - 如果省略第二个参数,则会截取到后边所有的
* - 也可以传递一个负数作为参数,负数的话将会从后边计算
*/
str = "abcdefghijk";

result = str.slice(1,4);
result = str.slice(1,-1);

/*
* substring()
* - 可以用来截取一个字符串,可以slice()类似
* - 参数:
* - 第一个:开始截取位置的索引(包括开始位置)
* - 第二个:结束位置的索引(不包括结束位置)
* - 不同的是这个方法不能接受负值作为参数,
* 如果传递了一个负值,则默认使用0
* - 而且他还自动调整参数的位置,如果第二个参数小于第一个,则自动交换
*/

result = str.substring(0,1);

/*
* substr()
* - 用来截取字符串
* - 参数:
* 1.截取开始位置的索引
* 2.截取的长度
*/

str = "abcdefg";

result = str.substr(3,2);

/*
* split()
* - 可以将一个字符串拆分为一个数组
* - 参数:
* -需要一个字符串作为参数,将会根据该字符串去拆分数组
*/
str = "abcbcdefghij";

result = str.split("d");

/*
* 如果传递一个空串作为参数,则会将每个字符都拆分为数组中的一个元素
*/
result = str.split("");

//console.log(Array.isArray(result));
//console.log(result[0]);
console.log(result);


str = "abcdefg";

/*
* toUpperCase()
* - 将一个字符串转换为大写并返回
*/
result = str.toUpperCase();

str = "ABCDEFG";

/*
* toLowerCase()
* -将一个字符串转换为小写并返回
*/
result = str.toLowerCase();

//console.log(result);


</script>
</head>
<body>
</body>
</html>

正则表达式1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 正则表达式
* - admin@atguigu.com
* - admin@.com adminatguigu.com
* - 邮件的规则:
* 1.前边可以是xxxx乱七八糟
* 2.跟着一个@
* 3.后边可以是xxxx乱七八糟
* 4..com获取其他的乱七八糟
*
* - 正则表达式用于定义一些字符串的规则,
* 计算机可以根据正则表达式,来检查一个字符串是否符合规则,
* 获取将字符串中符合规则的内容提取出来
*/

//创建正则表达式的对象
/*
* 语法:
* var 变量 = new RegExp("正则表达式","匹配模式");
* 使用typeof检查正则对象,会返回object
* var reg = new RegExp("a"); 这个正则表达式可以来检查一个字符串中是否含有a
* 在构造函数中可以传递一个匹配模式作为第二个参数,
* 可以是
* i 忽略大小写
* g 全局匹配模式
*/
var reg = new RegExp("ab","i");

var str = "a";

/*
* 正则表达式的方法:
* test()
* - 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则,
* 如果符合则返回true,否则返回false
*/
var result = reg.test(str);
//console.log(result);
console.log(reg.test("Ac"));



</script>
</head>
<body>
</body>
</html>

正则表达式2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 使用字面量来创建正则表达式
* 语法:var 变量 = /正则表达式/匹配模式
* 使用字面量的方式创建更加简单
* 使用构造函数创建更加灵活
*
*/
//var reg = new RegExp("a","i");

var reg = /a/i;

//console.log(typeof reg);
//console.log(reg.test("abc"));

//创建一个正则表达式,检查一个字符串中是否有a或b
/*
* 使用 | 表示或者的意思
*/
reg = /a|b|c/;

/*
* 创建一个正则表达式检查一个字符串中是否有字母
*/
//reg = /a|b|c|d|e|f|g/;

/*
* []里的内容也是或的关系
* [ab] == a|b
* [a-z] 任意小写字母
* [A-Z] 任意大写字母
* [A-z] 任意字母
* [0-9] 任意数字
*/
reg = /[A-z]/;

//检查一个字符串中是否含有 abc 或 adc 或 aec
reg = /a[bde]c/;

/*
* [^ ] 除了
*/
reg = /[^ab]/;

reg = /[^0-9]/;

console.log(reg.test("12a3456"));

</script>
</head>
<body>
</body>
</html>

字符串和正则表达式的相关方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

var str = "1a2b3c4d5e6f7";
/*
* split()
* - 可以将一个字符串拆分为一个数组
* - 方法中可以传递一个正则表达式作为参数,这样方法将会根据正则表达式去拆分字符串
* - 这个方法即使不指定全局匹配,也会全都插分
*/

/*
* 根据任意字母来将字符串拆分
*/
var result = str.split(/[A-z]/);


//console.log(result);

/*
* search()
* - 可以搜索字符串中是否含有指定内容
* - 如果搜索到指定内容,则会返回第一次出现的索引,如果没有搜索到返回-1
* - 它可以接受一个正则表达式作为参数,然后会根据正则表达式去检索字符串
* - serach()只会查找第一个,即使设置全局匹配也没用
*/
str = "hello abc hello aec afc";
/*
* 搜索字符串中是否含有abc 或 aec 或 afc
*/
result = str.search(/a[bef]c/);

//console.log(result);


/*
* match()
* - 可以根据正则表达式,从一个字符串中将符合条件的内容提取出来
* - 默认情况下我们的match只会找到第一个符合要求的内容,找到以后就停止检索
* 我们可以设置正则表达式为全局匹配模式,这样就会匹配到所有的内容
* 可以为一个正则表达式设置多个匹配模式,且顺序无所谓
* - match()会将匹配到的内容封装到一个数组中返回,即使只查询到一个结果
*
*
*/
str = "1a2a3a4a5e6f7A8B9C";

result = str.match(/[a-z]/ig);

//console.log(result[2]);

/*
* replace()
* - 可以将字符串中指定内容替换为新的内容
* - 参数:
* 1.被替换的内容,可以接受一个正则表达式作为参数
* 2.新的内容
* - 默认只会替换第一个
*/
//result = str.replace(/[a-z]/gi , "@_@");
result = str.replace(/[a-z]/gi , "");

//console.log(result);

</script>
</head>
<body>
</body>
</html>

正则表达式3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 创建一个正则表达式检查一个字符串中是否含有aaa
*/

/*
* 量词
* - 通过量词可以设置一个内容出现的次数
* - 量词只对它前边的一个内容起作用
* - {n} 正好出现n次
* - {m,n} 出现m-n次
* - {m,} m次以上
* - + 至少一个,相当于{1,}
* - * 0个或多个,相当于{0,}
* - ? 0个或1个,相当于{0,1}
*/
var reg = /a{3}/;
//ababab
reg = /(ab){3}/;

reg = /b{3}/;

reg = /ab{1,3}c/;

reg = /ab{3,}c/;

reg = /ab+c/;

reg = /ab*c/;

reg = /ab?c/;

//console.log(reg.test("abbc"));

/*
* 检查一个字符串中是否以a开头
* ^ 表示开头
* $ 表示结尾
*/
reg = /^a/; //匹配开头的a

reg = /a$/; //匹配结尾的a

//console.log(reg.test("abcabca"));

/*
* 如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式
*/
reg = /^a$/;

//console.log(reg.test("bbca"));

/*
* 创建一个正则表达式,用来检查一个字符串是否是一个合法手机号
*
* 手机号的规则:
* 1 3 567890123 (11位)
*
* 1. 以1开头
* 2. 第二位3-9任意数字
* 3. 三位以后任意数字9个
*
* ^1 [3-9] [0-9]{9}$
*
*/

var phoneStr = "13067890123";

var phoneReg = /^1[3-9][0-9]{9}$/;

console.log(phoneReg.test(phoneStr));


</script>
</head>
<body>
</body>
</html>

正则表达式4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 检查一个字符串中是否含有 .
* . 表示任意字符
* 在正则表达式中使用\作为转义字符
* \. 来表示.
* \\ 表示\
*
* 注意:使用构造函数时,由于它的参数是一个字符串,而\是字符串中转义字符,
* 如果要使用\则需要使用\\来代替
*/
var reg = /\./;

reg = /\\/;

reg = new RegExp("\\.");
reg = new RegExp("\\\\");

/*
* \w
* - 任意字母、数字、_ [A-z0-9_]
* \W
* - 除了字母、数字、_ [^A-z0-9_]
* \d
* - 任意的数字 [0-9]
* \D
* - 除了数字 [^0-9]
* \s
* - 空格
* \S
* - 除了空格
* \b
* - 单词边界
* \B
* - 除了单词边界
*/

reg = /\w/;
reg = /\W/;

reg = /\d/;
reg = /\D/;

reg = /\s/;
reg = /\S/;

/*
* 创建一个正则表达式检查一个字符串中是否含有单词child
*/

reg = /\bchild\b/;

//console.log(reg.test("hello child "));

//接收一个用户的输入
//var str = prompt("请输入你的用户名:");

var str = " he llo ";

//去除掉字符串中的前后的空格
//去除空格就是使用""来替换空格
console.log(str);

//str = str.replace(/\s/g , "");

//去除开头的空格
//str = str.replace(/^\s*/, "");
//去除结尾的空格
//str = str.replace(/\s*$/, "");
// /^\s*|\s*$/g 匹配开头和结尾的空格
str = str.replace(/^\s*|\s*$/g,"");


console.log(str);

</script>
</head>
<body>
</body>
</html>

邮件的正则表达式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">

/*
* 电子邮件
* hello .nihao @ abc .com.cn
*
* 任意字母数字下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母(2-5位) .任意字母(2-5位)
*
* \w{3,} (\.\w+)* @ [A-z0-9]+ (\.[A-z]{2,5}){1,2}
*/

var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;

var email = "abc.hello@163.com";

console.log(emailReg.test(email));


</script>
</head>
<body>
</body>
</html>

DOM

image-20260314165819092

image-20260314165937947

image-20260314165927975

image-20260314170007836

image-20260314170035092

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">我是一个按钮</button>
<script type="text/javascript">

/*
* 浏览器已经为我们提供 文档节点 对象这个对象是window属性
* 可以在页面中直接使用,文档节点代表的是整个网页
*/
//console.log(document);

//获取到button对象
var btn = document.getElementById("btn");

//修改按钮的文字
btn.innerHTML = "I'm Button";


</script>
</body>
</html>

事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
我们可以在事件对应的属性中设置一些js代码,
这样当事件被触发时,这些代码将会执行

这种写法我们称为结构和行为耦合,不方便维护,不推荐使用
-->
<!--<button id="btn" onmousemove="alert('讨厌,你点我干嘛!');">我是一个按钮</button>-->
<button id="btn">我是一个按钮</button>
<script type="text/javascript">

/*
* 事件,就是用户和浏览器之间的交互行为,
* 比如:点击按钮,鼠标移动、关闭窗口。。。
*/



//获取按钮对象
var btn = document.getElementById("btn");

/*
* 可以为按钮的对应事件绑定处理函数的形式来响应事件
* 这样当事件被触发时,其对应的函数将会被调用
*/

//绑定一个单击事件
//像这种为单击事件绑定的函数,我们称为单击响应函数
btn.onclick = function(){
alert("你还点~~~");
};


</script>
</body>
</html>