从0到1:JavaScript 快速上手

微信读书
操作笔记 03
2023-06-08 11:34:11(开始)
2023-06-12 18:11:18(结束)
.
ES6 再学习-2021-01-08
【日期标记】2023-06-29 17:45:04 以上同步完成

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<pre>
JavaScript,就是我们通常所说的JS。
这是一种嵌入到HTML页面中的编程语言,由浏览器一边解释一边执行。

1.JavaScript与Java有什么关系吗?
很多人看到JavaScript和Java,自然而然就会问:“这两个究竟有什么关系?”其实,它们也是“有一毛钱关系”的,并不能说完全没有关系。
JavaScript最初的确是受Java启发而开始设计的,而且设计的目的之一就是“看上去像Java”,因此语法上它们有不少类似之处,JavaScript的很多名称和命名规则也借自Java。
但实际上,JavaScript的主要设计原则源自Self和Scheme。JavaScript和Java虽然名字相似,但是本质上是不同的,主要体现在以下2个方面。JavaScript往往都是在网页中使用的,而Java却可以在软件、网页、手机App等各个领域中使用。从本质上讲,Java是一门面向对象的语言,而JavaScript更像是一门函数式编程语言。

2.我的页面加入了JavaScript特效,那这个页面是静态页面,还是动态页面呢?
不是“会动”的页面就叫动态页面,静态页面和动态页面的区别在于是否与服务器进行数据交互。

3.对于学习JavaScript,有什么好的建议呢?
JavaScript是当下较流行也是较复杂的一门编程语言,对于JavaScript的学习,我给初学者2个建议。
学完JavaScript入门(也就是本书内容)后,不要急于去学习JavaScript进阶的内容而应该先去学习jQuery。
经过jQuery的学习,可以让我们对JavaScript的基础知识有更深一层的理解。学完了jQuery,再去学习JavaScript进阶的内容会更好。
很多人在学习JavaScript的时候,喜欢在第一遍的学习过程中就对每一个细节都“抠”清楚,实际上,这是效率最低的学习方法。
在第一遍的学习中,如果有些内容我们实在没办法理解,那就直接跳过,等学到后面或者看第2遍的时候,自然而然就懂了。
</pre>
</body>
</html>

document.write

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
document.write("绿叶学习网,给你初恋般的感觉~");
</script>
</head>
<body>
</body>
</html>

元素事件js

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="button" value="按钮" onclick="alert('绿叶学习,给你初恋般的感觉')"/>
</body>
</html>

元素事件调用js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script>
function alertMes() {
alert("绿叶学习网,给你初恋般的感觉");
}
</script>
</head>
<body>
<input type="button" value="按钮" onclick="alertMes()"/>
</body>
</html>

浏览器开关

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
/*
下面这个例子实现的功能:当页面打开时,会弹出对话框,内容为“欢迎光临萌萌小店”;
当页面关闭时,也会弹出对话框,内容为“记得下次再来喔”。
*/
window.onload = function () {
alert("欢迎光临萌萌小店!");
}
window.onbeforeunload = function (event) {
var e = event || window.event;
e.returnValue = "记得下来再来喔!";
}
</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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
/*
Number 会保留小数
Number 完全数字转换

parseInt 会舍去小数
截取数字转换

parseFloat 会保留小数
截取数字转换
*/
document.write("Number('123'):" + Number("123") + "<br/>");
document.write("Number('3.1415'):" + Number("3.1415") + "<br/>");
document.write("Number('hao123'):" + Number("hao123") + "<br/>");
document.write("Number('100px'):" + Number("100px") + "<br/>");

document.write("<br/>");

document.write("parseInt('123'):" + parseInt("123") + "<br/>");
document.write("parseInt('3.1415'):" + parseInt("3.1415") + "<br/>");
document.write("parseInt('3.999'):" + parseInt("3.999") + "<br/>");
document.write("parseInt('hao123'):" + parseInt("hao123") + "<br/>");
document.write("parseInt('100px'):" + parseInt("100px")+ "<br/>");
document.write("parseInt('+123'):" + parseInt("+123") + "<br/>");
document.write("parseInt('-123'):" + parseInt("-123")+ "<br/>");

document.write("<br/>");

document.write("parseFloat('123'):" + parseFloat("123") + "<br/>");
document.write("parseFloat('3.1415'):" + parseFloat("3.1415") + "<br/>");
document.write("parseFloat('3.999'):" + parseFloat("3.999") + "<br/>");
document.write("parseFloat('hao123'):" + parseFloat("hao123") + "<br/>");
document.write("parseFloat('100px'):" + parseFloat("100px")+ "<br/>");
document.write("parseFloat('+123'):" + parseFloat("+123") + "<br/>");
document.write("parseFloat('-123'):" + parseFloat("-123")+ "<br/>");
</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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
document.write("绿叶,给你初恋般的感觉~");

document.write("<br>");

/*
\' 单引号
\" 双引号
\n 换行
*/

document.write("绿叶,给你\"初恋\"般的感觉~");
</script>
</head>
<body>
</body>
</html>

while true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script>
while (true) {
alert("我也是醉了~");
}
</script>
</head>
<body>
</body>
</html>

判断整数 小数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script>
var n = 3.14;
if (parseInt(n.toString()) == parseFloat(n.toString())) {
document.write(n + "是整数")
} else {
document.write(n + "是小数")
}
</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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script>
//定义一个空字符串,用来保存水仙花数
var str = "";
for (var i = 100; i < 1000; i++) {
var a = i % 10; //提取个位数
var b = (i / 10) % 10 //提取十位数
b = parseInt(b); //舍弃小数部分
var c = i / 100; //提取百位数
c = parseInt(c); //舍弃小数部分
if (i == (a * a * a + b * b * b + c * c * c)) {
str = str + i + "、";
}
}
document.write("水仙花数有:" + str);
</script>
</head>
<body>
</body>
</html>

三种循环1加到100

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script>