任务七:JavaScript和树(一)

Lesson

Target

熟练JavaScript
学习树这种数据结构的基本知识

Reference

Demo

Note

树的数据结构

  • test():正则对象的test方法返回一个布尔值,表示当前模式是否能匹配参数字符串。
  • match():返回一个数组,成员是所有匹配的子字符串。
  • search():按照给定的正则表达式进行搜索,返回一个整数,表示匹配开始的位置。
  • replace():按照给定的正则表达式进行替换,返回替换后的字符串。
  • split():按照给定规则进行字符串分割,返回一个数组,包含分割后的各个成员。

Tip

  • 这一题中其实可以在HTML中直接写嵌套div作为一棵树,但是我为了掌握树的生成方法决定使用JS写树,遇到了一些麻烦。

正则预定义

\d 匹配0-9之间的任一数字,相当于[0-9]。
\D 匹配所有0-9以外的字符,相当于[^0-9]。
\w 匹配任意的字母、数字和下划线,相当于[A-Za-z0-9]。
\W 除所有字母、数字和下划线以外的字符,相当于[^A-Za-z0-9
]。
\s 匹配空格(包括制表符、空格符、断行符等),相等于[\t\r\n\v\f]。
\S 匹配非空格的字符,相当于[^\t\r\n\v\f]。
\b 匹配词的边界。
\B 匹配非词边界,即在词的内部。

HTML

1

任务六:基础JavaScript练习(三)

Lesson

Reference

Demo

Note

正则方法

  • test():正则对象的test方法返回一个布尔值,表示当前模式是否能匹配参数字符串。
  • match():返回一个数组,成员是所有匹配的子字符串。
  • search():按照给定的正则表达式进行搜索,返回一个整数,表示匹配开始的位置。
  • replace():按照给定的正则表达式进行替换,返回替换后的字符串。
  • split():按照给定规则进行字符串分割,返回一个数组,包含分割后的各个成员。

正则特殊字

\cX 表示Ctrl-[X],其中的X是A-Z之中任一个英文字母,用来匹配控制字符。
[\b] 匹配退格键(U+0008),不要与\b混淆。
\n 匹配换行键。
\r 匹配回车键。
\t 匹配制表符tab(U+0009)。
\v 匹配垂直制表符(U+000B)。
\f 匹配换页符(U+000C)。
\0 匹配null字符(U+0000)。
\xhh 匹配一个以两位十六进制数(\x00-\xFF)表示的字符。
\uhhhh 匹配一个以四位十六进制数(\u0000-\uFFFF)表示的unicode字符。

正则预定义

\d 匹配0-9之间的任一数字,相当于[0-9]。
\D 匹配所有0-9以外的字符,相当于[^0-9]。
\w 匹配任意的字母、数字和下划线,相当于[A-Za-z0-9]。
\W 除所有字母、数字和下划线以外的字符,相当于[^A-Za-z0-9
]。
\s 匹配空格(包括制表符、空格符、断行符等),相等于[\t\r\n\v\f]。
\S 匹配非空格的字符,相当于[^\t\r\n\v\f]。
\b 匹配词的边界。
\B 匹配非词边界,即在词的内部。

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 lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#display{
list-style: none;
margin: 5px 0;
padding: 0;
}

#display li{
list-style: none;
display: inline-block;
padding: 5px;
margin:0 5px 5px 0;
border:1px solid #aaa;
background: #eee;
font-size:10px;
color: #aaa;
vertical-align: bottom;
}

</style>

</head>
<body>
<div id="insert-div">
<h3>Insert/ Delete</h3>
<!-- <input type="text" id="input-text"> -->
<textarea name="input-text" id="input-text" cols="30" rows="10">华莱士,蛤三篇、233 大新闻
蛤蛤</textarea>
<br>
<button id="leftin" value="LeftIn">LeftIn</button>
<button id="rightin" value="RightIn">RightIn</button>
<button id="leftout" value="LeftOut">LeftOut</button>
<button id="rightout" value="RightOut">RightOut</button>
</div>
<hr/>
<div id="search-div">
<h3>Search</h3>
<input type="text" id="search-text" value="蛤">
<button id="search-btn">Search</button>
</div>
<hr/>
<ul id="display">

</ul>
</body>
<script>
var inputText = getid('input-text');
var leftIn = getid('leftin');
var leftOut = getid('leftout');
var rightIn = getid('rightin');
var rightOut = getid('rightout');
var display = getid('display');
var queue = new Array();

// 选择器
function getid(id){
return document.getElementById(id);
}

// 创建执行函数
function putLeftIn(input){
queue.unshift(input);
}

function putRightIn(input){
queue.push(input);
}

function putLeftOut(){
var removed = queue.shift();
alert(removed);
}

function putRightOut(){
var removed = queue.pop();
alert(removed);
}

// 检验合法性
function splitInput(input){
var newqueue = input.split(/\s{1,}|、|,|,/);
return newqueue;
}

// 渲染
function render(){
display.innerHTML = ""
for (var i=0;i<queue.length;i++){
var newLi = document.createElement('li');
var newText = document.createTextNode(queue[i]);
newLi.append(newText);
display.append(newLi)
}
}

// 绑定事件
leftin.addEventListener('click',function(){
var input = inputText.value.trim();
var childque = splitInput(input);
if(childque){
for(var i=childque.length-1;i>=0;i--){
putLeftIn(childque[i]);
}
render();
}
})
rightin.addEventListener('click',function(){
var input = inputText.value.trim();
var childque = splitInput(input);
if(childque){
for(var i=0;i<childque.length;i++){
putRightIn(childque[i]);
}
render();
}
})
leftout.addEventListener('click',function(){
if (queue.length){
putLeftOut();
render();
}

})
rightout.addEventListener('click',function(){
if(queue.length){
putRightOut();
render();
}
})

var searchText = getid('search-text').value;
var searchBtn = getid('search-btn');

// 搜索函数
function search(input){
var inputText = input.trim();
for(var i=0;i<queue.length;i++){
if(queue[i].match(inputText)){
display.children[i].style.background = "#888";
display.children[i].style.color = "#fff";
}
}
}

// 绑定搜索函数
searchBtn.addEventListener('click',function(){
search(searchText);
})


</script>

</html>

任务六:基础JavaScript练习(三)

Lesson

Reference

Demo

Note

正则方法

  • test():正则对象的test方法返回一个布尔值,表示当前模式是否能匹配参数字符串。
  • match():返回一个数组,成员是所有匹配的子字符串。
  • search():按照给定的正则表达式进行搜索,返回一个整数,表示匹配开始的位置。
  • replace():按照给定的正则表达式进行替换,返回替换后的字符串。
  • split():按照给定规则进行字符串分割,返回一个数组,包含分割后的各个成员。

正则特殊字

\cX 表示Ctrl-[X],其中的X是A-Z之中任一个英文字母,用来匹配控制字符。
[\b] 匹配退格键(U+0008),不要与\b混淆。
\n 匹配换行键。
\r 匹配回车键。
\t 匹配制表符tab(U+0009)。
\v 匹配垂直制表符(U+000B)。
\f 匹配换页符(U+000C)。
\0 匹配null字符(U+0000)。
\xhh 匹配一个以两位十六进制数(\x00-\xFF)表示的字符。
\uhhhh 匹配一个以四位十六进制数(\u0000-\uFFFF)表示的unicode字符。

正则预定义

\d 匹配0-9之间的任一数字,相当于[0-9]。
\D 匹配所有0-9以外的字符,相当于[^0-9]。
\w 匹配任意的字母、数字和下划线,相当于[A-Za-z0-9]。
\W 除所有字母、数字和下划线以外的字符,相当于[^A-Za-z0-9
]。
\s 匹配空格(包括制表符、空格符、断行符等),相等于[\t\r\n\v\f]。
\S 匹配非空格的字符,相当于[^\t\r\n\v\f]。
\b 匹配词的边界。
\B 匹配非词边界,即在词的内部。

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 lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#display{
list-style: none;
margin: 5px 0;
padding: 0;
}

#display li{
list-style: none;
display: inline-block;
padding: 5px;
margin:0 5px 5px 0;
border:1px solid #aaa;
background: #eee;
font-size:10px;
color: #aaa;
vertical-align: bottom;
}

</style>

</head>
<body>
<div id="insert-div">
<h3>Insert/ Delete</h3>
<!-- <input type="text" id="input-text"> -->
<textarea name="input-text" id="input-text" cols="30" rows="10">华莱士,蛤三篇、233 大新闻
蛤蛤</textarea>
<br>
<button id="leftin" value="LeftIn">LeftIn</button>
<button id="rightin" value="RightIn">RightIn</button>
<button id="leftout" value="LeftOut">LeftOut</button>
<button id="rightout" value="RightOut">RightOut</button>
</div>
<hr/>
<div id="search-div">
<h3>Search</h3>
<input type="text" id="search-text" value="蛤">
<button id="search-btn">Search</button>
</div>
<hr/>
<ul id="display">

</ul>
</body>
<script>
var inputText = getid('input-text');
var leftIn = getid('leftin');
var leftOut = getid('leftout');
var rightIn = getid('rightin');
var rightOut = getid('rightout');
var display = getid('display');
var queue = new Array();

// 选择器
function getid(id){
return document.getElementById(id);
}

// 创建执行函数
function putLeftIn(input){
queue.unshift(input);
}

function putRightIn(input){
queue.push(input);
}

function putLeftOut(){
var removed = queue.shift();
alert(removed);
}

function putRightOut(){
var removed = queue.pop();
alert(removed);
}

// 检验合法性
function splitInput(input){
var newqueue = input.split(/\s{1,}|、|,|,/);
return newqueue;
}

// 渲染
function render(){
display.innerHTML = ""
for (var i=0;i<queue.length;i++){
var newLi = document.createElement('li');
var newText = document.createTextNode(queue[i]);
newLi.append(newText);
display.append(newLi)
}
}

// 绑定事件
leftin.addEventListener('click',function(){
var input = inputText.value.trim();
var childque = splitInput(input);
if(childque){
for(var i=childque.length-1;i>=0;i--){
putLeftIn(childque[i]);
}
render();
}
})
rightin.addEventListener('click',function(){
var input = inputText.value.trim();
var childque = splitInput(input);
if(childque){
for(var i=0;i<childque.length;i++){
putRightIn(childque[i]);
}
render();
}
})
leftout.addEventListener('click',function(){
if (queue.length){
putLeftOut();
render();
}

})
rightout.addEventListener('click',function(){
if(queue.length){
putRightOut();
render();
}
})

var searchText = getid('search-text').value;
var searchBtn = getid('search-btn');

// 搜索函数
function search(input){
var inputText = input.trim();
for(var i=0;i<queue.length;i++){
if(queue[i].match(inputText)){
display.children[i].style.background = "#888";
display.children[i].style.color = "#fff";
}
}
}

// 绑定搜索函数
searchBtn.addEventListener('click',function(){
search(searchText);
})


</script>

</html>

任务六:基础JavaScript练习(三)

Lesson

Reference

Demo

Note

正则方法

  • test():正则对象的test方法返回一个布尔值,表示当前模式是否能匹配参数字符串。
  • match():返回一个数组,成员是所有匹配的子字符串。
  • search():按照给定的正则表达式进行搜索,返回一个整数,表示匹配开始的位置。
  • replace():按照给定的正则表达式进行替换,返回替换后的字符串。
  • split():按照给定规则进行字符串分割,返回一个数组,包含分割后的各个成员。

正则特殊字

\cX 表示Ctrl-[X],其中的X是A-Z之中任一个英文字母,用来匹配控制字符。
[\b] 匹配退格键(U+0008),不要与\b混淆。
\n 匹配换行键。
\r 匹配回车键。
\t 匹配制表符tab(U+0009)。
\v 匹配垂直制表符(U+000B)。
\f 匹配换页符(U+000C)。
\0 匹配null字符(U+0000)。
\xhh 匹配一个以两位十六进制数(\x00-\xFF)表示的字符。
\uhhhh 匹配一个以四位十六进制数(\u0000-\uFFFF)表示的unicode字符。

正则预定义

\d 匹配0-9之间的任一数字,相当于[0-9]。
\D 匹配所有0-9以外的字符,相当于[^0-9]。
\w 匹配任意的字母、数字和下划线,相当于[A-Za-z0-9]。
\W 除所有字母、数字和下划线以外的字符,相当于[^A-Za-z0-9
]。
\s 匹配空格(包括制表符、空格符、断行符等),相等于[\t\r\n\v\f]。
\S 匹配非空格的字符,相当于[^\t\r\n\v\f]。
\b 匹配词的边界。
\B 匹配非词边界,即在词的内部。

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 lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#display{
list-style: none;
margin: 5px 0;
padding: 0;
}

#display li{
list-style: none;
display: inline-block;
padding: 5px;
margin:0 5px 5px 0;
border:1px solid #aaa;
background: #eee;
font-size:10px;
color: #aaa;
vertical-align: bottom;
}

</style>

</head>
<body>
<div id="insert-div">
<h3>Insert/ Delete</h3>
<!-- <input type="text" id="input-text"> -->
<textarea name="input-text" id="input-text" cols="30" rows="10">华莱士,蛤三篇、233 大新闻
蛤蛤</textarea>
<br>
<button id="leftin" value="LeftIn">LeftIn</button>
<button id="rightin" value="RightIn">RightIn</button>
<button id="leftout" value="LeftOut">LeftOut</button>
<button id="rightout" value="RightOut">RightOut</button>
</div>
<hr/>
<div id="search-div">
<h3>Search</h3>
<input type="text" id="search-text" value="蛤">
<button id="search-btn">Search</button>
</div>
<hr/>
<ul id="display">

</ul>
</body>
<script>
var inputText = getid('input-text');
var leftIn = getid('leftin');
var leftOut = getid('leftout');
var rightIn = getid('rightin');
var rightOut = getid('rightout');
var display = getid('display');
var queue = new Array();

// 选择器
function getid(id){
return document.getElementById(id);
}

// 创建执行函数
function putLeftIn(input){
queue.unshift(input);
}

function putRightIn(input){
queue.push(input);
}

function putLeftOut(){
var removed = queue.shift();
alert(removed);
}

function putRightOut(){
var removed = queue.pop();
alert(removed);
}

// 检验合法性
function splitInput(input){
var newqueue = input.split(/\s{1,}|、|,|,/);
return newqueue;
}

// 渲染
function render(){
display.innerHTML = ""
for (var i=0;i<queue.length;i++){
var newLi = document.createElement('li');
var newText = document.createTextNode(queue[i]);
newLi.append(newText);
display.append(newLi)
}
}

// 绑定事件
leftin.addEventListener('click',function(){
var input = inputText.value.trim();
var childque = splitInput(input);
if(childque){
for(var i=childque.length-1;i>=0;i--){
putLeftIn(childque[i]);
}
render();
}
})
rightin.addEventListener('click',function(){
var input = inputText.value.trim();
var childque = splitInput(input);
if(childque){
for(var i=0;i<childque.length;i++){
putRightIn(childque[i]);
}
render();
}
})
leftout.addEventListener('click',function(){
if (queue.length){
putLeftOut();
render();
}

})
rightout.addEventListener('click',function(){
if(queue.length){
putRightOut();
render();
}
})

var searchText = getid('search-text').value;
var searchBtn = getid('search-btn');

// 搜索函数
function search(input){
var inputText = input.trim();
for(var i=0;i<queue.length;i++){
if(queue[i].match(inputText)){
display.children[i].style.background = "#888";
display.children[i].style.color = "#fff";
}
}
}

// 绑定搜索函数
searchBtn.addEventListener('click',function(){
search(searchText);
})


</script>

</html>

任务五:基础JavaScript练习(二)

Lesson

Reference

Demo

Note

操作样式

Tips

  • 函数内可以用if内的return中断函数向后运行

  • 给一个ul内挨个增加li,让每个li的css不一样并不需要重新写选择器,只要直接在新li的style上修改即可。即为:js中修改css实际上是html中的内联样式,优先级高于

任务四:基础JavaScript练习(一)

Lesson

Reference

Demo

Note

Array

  • push()
    在末端添加

  • pop()
    在末端删除

  • shift()
    将首端删除

  • unshift()
    在首端添加

Tips

  • $(‘#id’).value的值可以随着引用位置变化,var value = $(‘#id’).value的值不再变化。
  • isNaN()可用来验证数字。
  • 判断句中0就是false

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#display{
list-style: none;
margin: 5px 0;
padding: 0;
}

#display li{
list-style: none;
display: inline-block;
padding: 5px;
margin:0 5px 5px 0;
border:1px solid #aaa;
background: #eee;
}

</style>

</head>
<body>
<div>
<input type="text" id="input-text">
<button id="leftin" value="LeftIn">LeftIn</button>
<button id="rightin" value="RightIn">RightIn</button>
<button id="leftout" value="LeftOut">LeftOut</button>
<button id="rightout" value="RightOut">RightOut</button>
</div>
<ul id="display">

</ul>
</body>
<script>
var inputText = getid('input-text');
var leftIn = getid('leftin');
var leftOut = getid('leftout');
var rightIn = getid('rightin');
var rightOut = getid('rightout');
var display = getid('display');
var queue = new Array();

// 选择器
function getid(id){
return document.getElementById(id);
}

// 创建执行函数
function putLeftIn(input){
queue.unshift(input);
}

function putRightIn(input){
queue.push(input);
}

function putLeftOut(){
var removed = queue.shift();
alert(removed);
}

function putRightOut(){
var removed = queue.pop();
alert(removed);
}

// 检验合法性
function veryfied(input){
if(!(isNaN(input))){
return input;
}else{
alert('请输入数字!');
return false;
}
}

// 渲染
function render(){
display.innerHTML = ""
for (i=0;i<queue.length;i++){
var newLi = document.createElement('li');
var newText = document.createTextNode(queue[i]);
newLi.append(newText);
display.append(newLi)
}
}

// 绑定事件
leftin.addEventListener('click',function(){
var number = inputText.value.trim();
if(veryfied(number)){
putLeftIn(number);
render();
}
})
rightin.addEventListener('click',function(){
var number = inputText.value.trim();
if(veryfied(number)){
putRightIn(number);
render();
}
})
leftout.addEventListener('click',function(){
if (queue.length){
putLeftOut();
render();
}

})
rightout.addEventListener('click',function(){
if(queue.length){
putRightOut();
render();
}
})


</script>

</html>

JS任务三:零基础JavaScript编码(三)

Lesson

Reference

Demo

Note

数组对象遍历、读写、排序等操作

  • 遍历
    Element.children和Element.childNodes都是子元素
    childNodes会把多余的空格或回车统计进去

  • 插入
    数组的尾部插入使用push,Node节点的内部插入使用append。

  • 排序
    采取sort方法。
    但因为sort默认按照字符串排序,所以应该让sort方法按照自定义方式排序。
    函数中如果返回值大于零则a排在b后面。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    [10111, 1101, 111].sort(function (a, b) {
    return a - b;
    })
    // [111, 1101, 10111]

    function sortAqiData(data) {
    return data.sort(function(a,b){
    return a[1] - b[1];
    })
    }
    //本例中需要用到二维数组的第二个数据

字符串处理操作

  • slice()
    slice方法用于从原字符串取出子字符串并返回,不改变原字符串。
    它的第一个参数是子字符串的开始位置,第二个参数是子字符串的结束位置(不含该位置)。
    ‘JavaScript’.slice(0, 4) // “Java”

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
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
</head>
<body>

<ul id="source">
<li>北京空气质量:<b>90</b></li>
<li>上海空气质量:<b>70</b></li>
<li>天津空气质量:<b>80</b></li>
<li>广州空气质量:<b>50</b></li>
<li>深圳空气质量:<b>40</b></li>
<li>福州空气质量:<b>32</b></li>
<li>成都空气质量:<b>90</b></li>
</ul>

<ul id="resort">
<!--
<li>第一名:北京空气质量:<b>90</b></li>
<li>第二名:北京空气质量:<b>90</b></li>
<li>第三名:北京空气质量:<b>90</b></li>
-->


</ul>

<button id="sort-btn">排序</button>

<script type="text/javascript">

/**
* getData方法
* 读取id为source的列表,获取其中城市名字及城市对应的空气质量
* 返回一个数组,格式见函数中示例
*/

function getData() {
/*
coding here
*/


/*
data = [
["北京", 90],
["北京", 90]
……
]
*/

var data = new Array;
var source = document.getElementById('source');
for( var i = 0; i<source.children.length; i++){
var city = source.children[i].innerText.slice(0,2);
var number = source.children[i].children[0].innerText;
var dataEach = new Array;
dataEach.push(city);
dataEach.push(number);
data.push(dataEach);
}

return data;

}

/**
* sortAqiData
* 按空气质量对data进行从小到大的排序
* 返回一个排序后的数组
*/

function sortAqiData(data) {
return data.sort(function(a,b){
return a[1] - b[1];
})
}

/**
* render
* 将排好序的城市及空气质量指数,输出显示到id位resort的列表中
* 格式见ul中的注释的部分
*/

function render(data) {
var resort = document.getElementById('resort');
var cnNo = ['一','二','三','四','五','六','七','八','九'];
for (var i=0;i<data.length;i++){
var city = data[i][0];
var number = data[i][1];
var newli = document.createElement('li');
var text = document.createTextNode('第'+cnNo[i]+'名:'+city+'空气质量:');
var newb = document.createElement('b');
var textb = document.createTextNode(number);
newb.append(textb);
newli.append(text);
newli.append(newb);
resort.append(newli);
}
}

function btnHandle() {
var aqiData = getData();
aqiData = sortAqiData(aqiData);
render(aqiData);
}

function init() {

// 在这下面给sort-btn绑定一个点击事件,点击时触发btnHandle函数

}

init();

</script>

</body>
</html>

JS任务一:零基础JavaScript编码(二)

Lesson

Reference

Demo

Note

生成节点的方法

  1. 通过document.createElement(‘div’)创建

    元素节点。

    1
    var newDiv = document.createElement('div');
  2. 通过document.createTextNode(‘Hello’)为元素节点创建内容。

    1
    2
    var newDiv = document.createElement('div');
    var newContent = document.createTextNode('Hello');
  3. 在元素节点内Element.appendChild()来添加刚刚创建的内容。

    1
    2
    3
    var newDiv = document.createElement('div');
    var newContent = document.createTextNode('Hello');
    newDiv.appendChild(newContent);

JavaScript

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
<script type="text/javascript">

var aqiData = [
["北京", 90],
["上海", 50],
["福州", 10],
["广州", 50],
["成都", 90],
["西安", 100]
];

(function () {

/*
在注释下方编写代码
遍历读取aqiData中各个城市的数据
将空气质量指数大于60的城市显示到aqi-list的列表中
*/

var aqList = document.getElementById('aqi-list');
for (var i=0;i<aqiData.length;i++){
var aqiCity = aqiData[i][0];
var aqiNumber = aqiData[i][1];
if (aqiNumber>60){
var newli = document.createElement('li');
var newlitext = document.createTextNode(aqiCity);
newli.appendChild(newlitext);
aqList.appendChild(newli);
}
}

})();

</script>

JS任务一:零基础JavaScript编码(一)

Lesson

Reference

Demo

Note

事件是什么?

Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example if the user clicks a button on a webpage, you might want to respond to that action by displaying an information box. In this final article we will discuss some important concepts surrounding events, and look at how they work in browsers.

DOM是什么?

DOM(Document Object Model——文档对象模型)是HTML 文件或 XML 文件渲染和交互的API(应用程序的编程接口)。DOM 是文档载入到浏览器之后文档的模型,它用节点树的形式来表现文档,每个节点代表文档的构成部分(例如: element——页面元素、字符串或注释等等)。

DOM 是Web——互联网上使用最多的API之一,因为它允许运行在Web浏览器中的程序访问文件中的节点。节点可以被创建,移动或修改。事件监听器可以被添加到节点上,一旦监听的事件发生时,事件侦听器就会被触发。

DOM 并不是浏览器出现时就规范好了,它是浏览器在实现JavaScript时才出现的。这个传统的 DOM 有时会被称为 DOM 0。现在, W3C领导着 DOM 规范,DOM 工作组正在制订第四版的规范。

DOM绑定事件的方式

  • 传统绑定
    只会在事件冒泡中运行;
    一个元素一次只能绑定一个函数。

    1
    2
    3
    element.onclick = function(e){
    // ...
    };
  • W3C绑定
    最后一个参数决定是冒泡还是捕获:false (冒泡) 或 true (捕获);
    可以为同一个元素绑定你所希望的多个事件,同时并不会覆盖先前绑定的事件;
    IE不支持

    1
    2
    3
    element.addEventListener('click', function(e){
    // ...
    }, false);
  • IE绑定

    1
    2
    3
    element.attachEvent('onclick', function(){
    // ...
    });

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function() {
/*
在注释下方写下代码
给按钮button绑定一个点击事件
在事件处理函数中
获取aqi-input输入的值,并显示在aqi-display中
*/
var display = document.getElementById('aqi-display');
var input = document.getElementById('aqi-input');
var btn = document.getElementById('button');
btn.addEventListener('click', function(e){
display.innerText = input.value;
},false)

})();