《JavaScript高级程序设计》笔记
# 《JavaScript 高级程序设计》笔记
# 第 1 章 JavaScript 简介
console.log('hello')
1
# 第 2 章 在 HTML 中使用 JavaScript
# 第 3 章 基本概念
# 第 4 章 变量、作用域和内存问题
# 第 5 章 引用类型
# 求介于两数之间（包括临界值）的随机数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
function selectFrom(lowerValue, upperValue) {
var choices = upperValue - lowerValue + 1
return Math.floor(Math.random() * choices + lowerValue)
}
console.log(selectFrom(1, 10))
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 第 6 章 面向对象的程序设计
# 检测属性是不是原型属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
function hasPrototypeProperty(object, name) {
return !object.hasOwnProperty(name) && name in object
}
console.log(hasPrototypeProperty({ name: 1 }, 'name'))
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 第 7 章 函数表达式
# 第 8 章 BOM
# 获取窗口位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>获取窗口位置</title>
</head>
<body>
<script>
function getWindowPosition() {
var leftPos =
typeof window.screenX == 'number' ? window.screenX : window.screenLeft
var topPos =
typeof window.screenY == 'number' ? window.screenY : window.screenTop
return {
leftPos,
topPos,
}
}
</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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 获取页面视口大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
var size = getViewPortSize()
console.log(size)
function getViewPortSize() {
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight
if (typeof pageWidth != 'number') {
if (document.compatMode == 'CSS1Compat') {
// 是在标准模式下
pageWidth = document.documentElement.clientWidth
pageHeight = document.documentElement.clientHeight
} else {
// 混杂模式下
pageWidth = document.body.clientWidth
pageHeight = document.body.clientHeight
}
}
return {
pageWidth,
pageHeight,
}
}
</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
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
# location 格式化查询字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>格式化查询字符串</title>
</head>
<body>
<script>
function getQueryStringArgs(url) {
// 获取查询字符串并去掉开头的问号
var qs = location.search.length > 0 ? location.search.substring(1) : '',
// 保存数据的对象
args = {},
// 取得每一项
items = qs.length ? qs.split('&') : [],
item = null,
name = null,
value = null,
// 在for 循环钟使用
i = 0,
len = items.length
// 逐个将每一项添加到args 对象中
for (i = 0; i < len; i++) {
item = items[i].split('=')
name = decodeURIComponent(item[0])
value = decodeURIComponent(item[1])
if (name.length) {
args[name] = value
}
}
return args
}
</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
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
# 第 9 章 客户端检测
# 第 10 章 DOM
# Node 类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<div id="app">
<h1>测试机</h1>
</div>
<body>
<script>
const app = document.querySelector('#app')
console.log(Node.ELEMENT_NODE === app.nodeType)
console.log(app.nodeName, app.nodeValue) // app.nodeValue ELEMENT 类型的节点 nodeValue 永远null
console.log(app.childNodes)
console.log(app.childNodes.length)
console.log(app.childNodes.item(0))
console.log(Array.prototype.slice.call(app.childNodes, 0))
console.log(app.childNodes.item(0).parentNode) // 父节点
console.log(app.childNodes.item(0).nextSibling) // 下一个兄弟节点
console.log(app.firstChild) // 第一个子节点
console.log(app.lastChild) // 最后一个子节点
console.log(app.firstElementChild) // 第一个元素节点
console.log(app.lastElementChild) // 最后一个元素节点
console.log(app.hasChildNodes()) // 检测节点是否含有子节点
console.log(app.ownerDocument)
</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
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
# NodeList 伪数组对象转为数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
function convertToArray(nodes) {
var array = null
try {
array = Array.prototype.slice.call(nodes, 0) // 针对非IE浏览器
} catch (error) {
array = new Array()
for (var i = 0, len = nodes.length; i < len; i++) {
array.push(nodes[i])
}
}
return array
}
</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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 第 11 章 DOM 扩展
# 第 12 章 DOM2 和 DOM3
# 第 13 章 事件
# 第 14 章 表单脚本
# 第 15 章 使用 Canvas 绘图
# 第 16 章 HTML5 脚本编程
# 第 17 章 错误处理与调试
# 第 18 章 JavaScript 与 XML
# 第 19 章 E4X
# 第 20 章 JSON
# 第 21 章 Ajax 与 Comet
# 第 22 章 高级技巧
# 第 23 章 离线应用与客户端存储
# 第 24 章 最佳实践
# 第 25 章 新兴的 API
编辑 (opens new window)
上次更新: 2021/08/03 17:31:03