来调用函数或计算表达式
前端之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() - 关闭当前窗口
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
6.清除计时器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//他会不停的出现提示框。
定时器实例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
DOM
HTML文档的DOM树
DOM标准规定HTML文档中的每个成分都是一个节点(node):
- 文档节点(document对象):代表整个文档
- 元素节点(element 对象):代表一个元素(标签)
- 文本节点(text对象):代表元素(标签)中的文本
- 属性节点(attribute对象):代表一个属性,元素(标签)才有属性
- 注释是注释节点(comment对象)
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应