前端之JavaScript
JavaScript概念
什么是JavaScript
- 核心
- 文档对象模型(DOM)
- 浏览器对象模型(BOM)
JS的引入方式
1
2
3
4
5
6
7
|
#script标签引入JS代码
<script>
//JS代码
</script>
#引入额外的JS文件
<script src=
"myscrpits.js"
></script>
|
JS代码的注释
1
2
3
4
5
6
7
|
#单行注释
//这是单行注释
#多行注释
/*
这是多行的注释
*/
|
注意:JavaScript中的语句要以分号(;)为结束符。
JS的变量声明
1
2
|
var
name =
"shier"
var
age =
"16"
|
JS的数据类型
1
2
3
|
var
x;
// 此时x是undefined
var
x = 1;
//此时x是数字
var
x =
"shier"
//此时x是字符串
|
2.JS的数字类型
1
2
3
4
5
6
7
8
9
10
11
|
var
b = 12.34;
var
c = 20;
var
c = 12e5;
//在JS中不分整型和浮点型、只有一种数字类型。
//在JS中海油一种NaN、表示不是一个数字(Not a Number)
parseInt(
"133"
)
//如果为数字返回数字否则返回NaN
133
parseInt(
"AAA"
)
NaN
parseFloat(
"123123.123123"
)
123123.123123
|
3.在JS中拼接字符串一般使用"+"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
string.slice(start, stop)和string.substring(start, stop):
两者的相同点:
如果start等于end,返回空字符串
如果stop参数省略,则取到字符串末
如果某个参数超过string的长度,这个参数会被替换为string的长度
substirng()的特点:
如果 start > stop ,start和stop将被交换
如果参数是负数或者不是数字,将会被0替换
silce()的特点:
如果 start > stop 不会交换两者
如果start小于0,则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0,则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)
|
4.JS的字符串
1
2
3
4
5
6
7
8
|
var
a =
"Hello"
undefined
var
b =
"shier"
undefined
var
c = a + b
undefined
console.log(c)
//得到字符串拼接的结果
Helloshier
|
JS字符串的常用方法:
方法 | 说明 |
.length | 返回长度 |
.trim() | 移除空白 |
.trimLeft() | 移除左边的空白 |
.trimRight() | 移除右边的空白 |
.charAt(n) | 返回第n个字符 |
.concat(value, ...) | 拼接 |
.indexOf(substring, start) | 子序列位置 |
.substring(from, to) | 根据索引获取子序列 |
.slice(start, end) | 切片 |
.toLowerCase() | 小写 |
.toUpperCase() | 大写 |
.split(delimiter, limit) | 分割 |
5.JS的布尔类型
1
2
|
var
a =
true
;
var
b =
false
;
|
(空字符串)、0、null、undefined,NaN都是false。
6.JS的数组
1
2
3
4
|
var
a = [123,
"abc"
]
undefined
console.log(a)
[123,
"abc"
]
|
数组常用的方法:
方法 | 说明 |
.length | 数组的大小 |
.push(ele) | 尾部追加元素 |
.pop() | 获取尾部的元素 |
.unshift(ele) | 头部插入元素 |
.shift() | 头部移除元素 |
.slice(start, end) | 切片 |
.reverse() | 反转 |
.join(seq) | 将数组元素连接成字符串 |
.concat(val, ...) | 连接数组 |
.sort() | 排序 |
关于sort排序的问题:
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
|
/*如果调用sort方法时没有传入参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。
如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:
若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。
*/
// 根据上面的规则自行实现一个排序函数:
function
sortNumber(a,b) {
return
a - b
}
// 调用sort方法时将定义好的排序函数传入即可。
stringObj.sort(sortNumber)
//例如
var
list = [3,4,65,123,4,3,2]
undefined
list.sort()
[123, 2, 3, 3, 4, 4, 65]
//未传入函数的排序
list.sort(sortNumber)
[2, 3, 3, 4, 4, 65, 123]
//传入函数之后的排序
|
遍历数组中的元素:
1
2
3
4
5
6
7
8
9
|
var
a = [10,20,30,40];
for
(
var
i=0;i<a.length;i++) {
console.log(i);
}
>>
0
1
2
32
|
8.JS的类型查询
1
2
3
4
5
6
7
8
|
typeof
"abc"
//string
"string"
typeof
null
//object
"object"
typeof
true
//boolean
"boolean"
typeof
123
//number
"number"
|
- undefined - 如果变量是 Undefined 类型的
- boolean - 如果变量是 Boolean 类型的
- number - 如果变量是 Number 类型的
- string - 如果变量是 String 类型的
- object - 如果变量是一种引用类型或 Null 类型的
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
|
3 + 3
6
6 - 3
3
6 * 3
18
6 / 3
2
6 % 3
0
6 % 2
0
6 % 4
2
#
var
a = 1
a ++
1
a ++
2
a ++
3
a ++
4
a ++
//自增
#
var
a = 5
a --
5
a --
4
a --
3
a --
//自减
2
|
2.比较运算
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var
a = 3
var
b = 2
a > b
true
a < b
false
a != b
true
a == b
false
a === b
false
a !== b
true
|
需要注意的是:
1
2
3
4
|
1 ==
"1"
true
1 ===
"1"
false
|
3.逻辑运算
1
2
3
4
5
6
7
8
|
true
&&
false
false
true
||
false
true
!
true
false
!
false
true
|
4.赋值运算
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//+=
var
a = 1
a +=3
4
a +=3
7
//-=
var
a = 3
a -= 2
1
//*=
var
a = 3
a *= 3
9
// /=
var
a = 4
a /= 2
2
|
5.流程控制
switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。
6.for循环
7.while循环
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var
i=0;
while
(i<10) {
console.log(i);
i++;
}
VM83:2 0
VM83:2 1
VM83:2 2
VM83:2 3
VM83:2 4
VM83:2 5
VM83:2 6
VM83:2 7
VM83:2 8
VM83:2 9
9
|
8.三元表达式
JS中的函数
JS函数的作用域
JS词法分析
JS的内置对象和方法
1.自定义对象
2.Date对象
JS之Json对象
JS的正则
math对象
BOM
window对象
- window.innerHeight - 浏览器窗口的内部高度
- window.innerWidth - 浏览器窗口的内部宽度
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
6.清除计时器
//他会不停的出现提示框。
定时器实例:
DOM
HTML文档的DOM树
DOM标准规定HTML文档中的每个成分都是一个节点(node):
- 文档节点(document对象):代表整个文档
- 元素节点(element 对象):代表一个元素(标签)
- 文本节点(text对象):代表元素(标签)中的文本
- 属性节点(attribute对象):代表一个属性,元素(标签)才有属性
- 注释是注释节点(comment对象)
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应