JavaScript学习笔记

Posted on

概念： JavaScript是一门客户端脚本语言，运行在浏览器中，每个浏览器都有JavaScript的解析引擎，不需要编译，直接可以被浏览器解析执行了。

功能： 可以增强用户和html页面的交互功能，可以来控制html元素，让页面有一些动态效果，增加用户体验。

组成： JavaScript = ECMAScript + BOM(浏览器对象模型) + DOM(文档对象模型)

ECMAScript：客户端脚本语言标准

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
1.基本语法：
	1.与html结合的方式
		内部JS：定义<script>,标签内容就是js代码
		外部JS：定义<script>,通过src属性引入外部的js文件
	2.注释
		1.单行注释：//注释语句
		2.多行注释：/*注释语句*/
	3.数据类型
		原始数据类型：
			number：数字。整数/小数/NaN(Not a Number 不是一个数字的数字类型)
			string：字符串。"abc",'aaa'
			boolean：true和false
			null：一个对象为空的占位符
			undefined：未定义。如果一个变量没有初始化值，则默认值为undefined
		引用数据类型：对象
	4.变量
    	var 变量名 = 初始化值;
		typeof运算符：获取变量的类型
         	null运算后得到的是object
	5.运算符
    	正负号：非number类型会转化为数字
        	string转number：按照字面值转化，如果字面值不是数字，则转为NaN
            boolean转number：true转为1，false转为0
		比较：
        	==：比较双等号两端的值，只要值相同则为true 例如：123=="123"
        	===：先比较三等号两端的类型，若类型相等再比较值是否相等
		逻辑：
			JavaScript中没有'&'和'|'运算符
			!加在其他类型之前可以将其他类型转为boolean：
				1.number：0或NaN为假，其他为真
				2.string：除了空字符串，其他都是true
				3.null&undefined都是false
				4.对象：所有对象都为true
2.基本对象
	1.Function：函数(方法)对象
    	1.创建：
			1.var fun = new Function(形式参数列表,方法体)；
			2.function 方法名称(形式参数列表){方法体}
			3.var 方法名 = function(形式参数列表){方法体}
		2.属性：length：代表形参的个数
		3.特点：
			1.方法定义形参的类型不用写，返回值类型也不写。
			2.方法是一个对象，如果定义名称相同的方法，会覆盖
			3.在JS中，方法的调用只与方法的名称有关，和参数列表无关
			4.在方法声明中有一个隐藏的内置对象（数组），arguments封装所有的实参
	2.Array:数组对象
		1.创建：
			1.var arr = new Array(元素列表);
			2.var arr = new Array(默认长度);
			3.var arr = [元素列表];
		2.方法：
			join(参数)：将数组中的元素按照指定的分隔符拼接为字符串
			push()：像数组的末尾添加一个或更多元素，并返回新的长度
		3.属性
			length：数组的长度
		4.特点
			1.JS中，数组类型可变
			2.JS中，数组长度可变
	3.Date：日期对象
		1.创建：
			var date = new Date();
		2.方法：
			toLocaleString()：返回当前date对象对应的时间本地字符串格式
             getTime()：获取毫秒值。
	4.Math：数学对象
		1.方法：
			random():返回0~1之间的随机数。含0不含1
             ceil(x):对数进行向上取整
             floor(x):对数进行向下取整
             round(x):把数四舍五入为最接近的整数
		2.属性：
        	 PI
	5.RegExp：正则表达式对象
		1.正则表达式：定义字符串的组成规则。
			1.单个字符
             	\d:单个数字字符[0-9]
			   \w:单个单词字符[a-zA-Z0-9_]
			2.量词符号
			   ?:表示出现0次或1次
			   *:表示出现0次或多次
			   +:表示出现1次或多次
             3.开始结束符号
             	^:开始  $:结束
         2.正则对象
			1.创建
             	var reg = new RegExp("^正则表达式$");
			   var reg = /^正则表达式$/;
             2.方法
             	test(参数)：验证指定的字符串是否符合正则定义的规范。
	6.Global
		1.全局对象，不需要对象直接调用方法
		2.方法
            encodeURI():URL编码
            decodeURI():URL解码
            
            encodeURIComponent():URL编码，编码更多
            decodeURIComponent():URL解码
            
            parseInt():将字符串转为数字，逐一判断，直到不是数字为止，将前边的数字部分转为number
            isNaN():判断一个值是否是NaN
            eval():将字符串作为脚本代码来执行。

BOM:

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
1.概念 Browser Object Model 浏览器对象模型
2.Window:窗口对象
	1.创建 不用创建，直接使用window
	2.方法     
		1.与弹出框有关的方法：
			alert()：显示带有一段消息和一个确认按钮的警告框
			confirm()：显示带有一段信息以及确认按钮和取消按钮的对话框
            	点击确定返回true 点击取消返回false
			prompt()：显示可以提示用户输入的对话框
            	返回值：获取用户输入的值
		2.打开关闭有关的方法：
        	 close()：关闭浏览器窗口。谁调用关谁。
             open()：打开一个新的浏览器窗口返回新的window对象
		3.与定时器有关的方法：
			setTimeout()：在指定的毫秒数后调用函数或计算机表达式(调用一次)
			clearTimeout()：取消由setTimeout()方法设置的timeout
			setInterval()：在指定的毫秒数后调用函数或计算机表达式(调用多次)
			clearInterval()：取消由setInterval()方法设置的timeout
3.Location：地址栏对象
	1.获取
		window.location
		location
	2.方法
		reload() 重新加载当前的文档，刷新
	3.属性
		href  设置或返回完整的URL
4.History：历史纪录对象
	1.获取
		window.history
		history
	2.方法
		back()：加载history列表中的前一个URL
		forward()：加载history列表中的下一个URL
		go(参数)：加载history列表中的某个具体页面
	3.属性
		length 返回当前窗口历史列表中URL数量

DOM：

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
Document：文档对象
		1. 创建(获取)：在html dom模型中可以使用window对象来获取
			1. window.document
			2. document
		2. 方法：
			1. 获取Element对象：
				1. getElementById()	： 根据id属性值获取元素对象。id属性值一般唯一
				2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
				3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
				4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
			2. 创建其他DOM对象：
				createAttribute(name)
            	createComment()
            	createElement()
            	createTextNode()
		3. 属性
	Element：元素对象
		1. 获取/创建：通过document来获取和创建
		2. 方法：
			1. removeAttribute()：删除属性
			2. setAttribute()：设置属性
	Node：节点对象，其他5个的父对象
		特点：所有dom对象都可以被认为是一个节点
		方法：
			CRUD dom树：
				appendChild()：向节点的子节点列表的结尾添加新的子节点。
				removeChild()	：删除（并返回）当前节点的指定子节点。
				replaceChild()：用新节点替换一个子节点。
		属性：
			parentNode 返回节点的父节点。