前端学习笔记 - JS

---

JS简介

JS是什么

基于对象(object)和事件驱动(Event Driven)的, 安全性好的脚本语言
运行在客户端减轻服务器负担

特点
	向html中添加交互行为
	弱语言类型
	一般用来编写客户端脚本
	解释型语言, 无需另外编译

---

JS的用途

实现页面交互, 实现页面特效. 即js操作html的dom结构或操作样式
表单验证. 即在提交服务器前检查, 减轻服务器压力

---

JS的构成

DOM, BOM

---

变量

声明和定义

• 先声明后定义

var name;
name = 'yky';

console.log(name)

• 声明立刻定义

var name = 'yky';

console.log(name)

---

变量规范

1. 命名规则同python
2. 推荐驼峰命名

---

数据类型

基本数据类型

• number

var num = 123;
console.log(typeof num);

// typeof [变量名] 用来检查变量类型

• string

var str = '123';
console.log(typeof str);

• boolean

var bool = True;
console.log(typeof bool);

• null

var n = null;
console.log(typeof n);

• undefined

var a; // 仅声明, 未定义
console.log(typeof a);

引用数据类型

• function
• object
• array
• string
• date

---

运算符

赋值运算符

运算符	举例
=	a=1

算数运算符

var a = 5, b = 2
var c

运算符	举例	相当于	结果
=	a=b		a=2
+	c=a+b		c=7
-	c=a-b		c=3
*	c=a*b		c=10
/	c=a/b		c=2
%	c=a%b		c=1
++	a++	a=a+1	a=6
–	a–	a=a-1	a=4
+=	a+=b	a=a+b	a=7
-=	a-=b	a=a-b	a=3
*=	a*=b	a=a*b	a=10
/=	a/=b	a=a/b	a=2
%=	a%=b	a=a%b	a=1

比较运算符

运算符	描述	结果
==	等于, 比数值
===	等同于, 比数值和类型
!=	不等于
!==	不等同于
>	大于
<	小于
>=	大于等于
<=	小于等于

特殊

字符串拼接

1. 只能进行拼接, 不能进行运算
2. 只能+, 不支持*

var a = 'aa';
var b = 'bb';
var c = 3;

var d = a+b;
var e = a*c; 

console.log(d)
console.log(e)

---

数据类型转换

转成字符串

• String()

var a = 123;
var b = String(a);

console.log(typeof b)

• toString()

var a = 123;
var b = a.toString();

console.log(typeof b)

字符串转成数字类型

• Number()

var a = '33';
var b = Number(a);

console.log(b)

• parseInt()

  从字符串开头第一位寻找, 直到找到非数字. 若第一位不为数字, 返回NaN

var a = '33aa3';
var b = parseInt(a);

console.log(b)

任意类型转成boolean

非0即真

序列化

var o1 = {"name": "Tim", "age": 9000}
var s1 = JSON.stringify(o1)
typeof(s1)

var o2 = JSON.parse(s1)
typeof(o2)

---

流程控制

if 判断

var score = 90;

if(score >= 90){
	//执行操作
	console.log('优秀')
}else if(60 <= score < 90){
	//执行操作
	console.log('合格')
}else{
	//执行操作
	console.log('不合格')
}

---

逻辑与 & 逻辑或

var chinese_score = 90;
var math_score = 90;

// 如果有一个小于60 则判定重考
if(chinese_score < 60 || math_score < 60){
	console.log('重考')
}

// 如果两个都小于60 则判定重修
if(chinese_score < 60 && math_score < 60){
	console.log('重修')
}

---

switch

var score = 'good';

switch(score){
	case 'good':
	console.log('good');
	// break 表示退出循环
	break;
	case 'better':
	console.log('better');
	break;
	case 'best':
	console.log('best');
	break;

	default:
	console.log('exit');
}

---

while

1. 设定循环变量
2. 判断是否成立
3. 更新循环变量

// 设定循环条件
var i = 1;

// 判断是否成立
while(i<10){
	console.log(i);
	// 更新循环变量
	i++;
}

---

do_while

var i = 3;

do{
	console.log(i);
	i++;
}while(i<10)

---

for

for(var i = 1; i<10; i++){
	console.log(i)
}

---

常用内置对象

Array - 数组

数组的创建

var colors = ['red','yellow','green']

数组的赋值

var arr = []
// 通过下标赋值
arr[0] = 'red'
arr[1] = 'yellow'
arr[2] = 'green'

常用方法

方法	描述
concat()	把几个数组合并成一个
join()	把数组内元素按指定分隔符拼接, 并返回
pop()	移除数组最后一个元素
shift()	移除数组第一个元素
unshift()	开头添加一个新的元素, 返回长度
push()	末尾添加一个新的元素, 返回长度
slice(start,end)	返回一段数组
sort()	排序
reverse()	反转数组
length()	返回长度

---

String - 字符串

方法	描述
charAt()	返回指定索引位置的字符
replace(a,b)	使用b替换a
search()	如果找到, 返回索引位置, 如果没找到, 返回-1
split(‘a’,x)	以’a’分割, 返回数组, 第二个参数表示数组的前x个元素, 如果第一个元素为分隔符, 则返回的数组第一个元素为""
substr(start,end)	按索引截取, 左闭右开
toUpperCase()	返回新字符串, 字母变大写
toLowerCase()	返回新字符串, 字母变小写

---

Date - 日期

语法	含义

---

Math - 内置对象

方法	含义
Math.floor()	向下取整
Math.ceil()	向上取整
Math.max(a,b)	最大值
Math.min(a,b)	最小值
Math.random()	随机数, 默认0-1之前的随机数

---

函数和Object

函数的声明和调用

声明方式1

function funcA(x,y){
	// do sth.
}

声明方式2

var funcA = function(x,y){
	//do sth.
}

声明方式3

var add = (x,y)=>{
	//do sth.
}

调用

funcA(x,y)

入口函数

等待页面加载完成后执行

window.onload = function(){
	// do sth.
}

---

创建对象的几种常用方式

使用object创建对象

var student = new Object();
student.name = 'Tom';
student.age = 12;

使用字面量创建对象

适用于创建单个对象

var student = {
	name : 'Tom',
	age : 12,
}

工厂模式创建对象

批量创建同一类对象, 类似python中的class
关键字new写在函数内部
函数内部有return

function createStudent(name, age){
	var obj = new Object();
	obj.name = name;
	obj.age = age;
	return obj;
}
var student1 = createStudent('Tom',12);
var student2 = createStudent('Tim',13);
var student3 = createStudent('Jim',14);

构造函数模式创建对象

批量创建同一类对象
使用new关键字, 就是构造函数
函数内部不new Object()
函数内部没有return

function Student(name, age){
	// python中class静态属性
	this.name = name;
	this.age = age;
	// python中class动态属性
	this.alertname = alertName;
}

function alertName(){
	alert(this.name);
}

var student1 = new Student('Jim',14);

student1.alertname

原型模式创建对象

解决多个类公用方法的问题

function Student(name, age){
	this.name = name;
	this.age = age;
}

Student.prototype.alertName = function(){
	alert(this.name);
};

var stu1 = new Student('Tom',12);
var stu2 = new Student('Tim',13);

stu1.alertName();
stu2.alertName();

alert(stu1.alertName == stu2.alertName); 
// 结果为True, 两者共享一个函数

---

定时器

执行一次

setTimeOut()

---

周期执行

setInterval()
clearInetval()

function refresh(){
	console.log('调用1次')
}

setInterval('refresh()',5)

---

正则

js 正则脑图

---

DOM

在JS中, 所有的事物都是节点. 元素, 文本等都是节点
操作DOM的三步
	1. 事件源
	2. 事件
	3. 事件处理程序

获取DOM节点的方法

// 通过id获得
var oDiv = document.getElementById('box');

// 通过类名获得
var oDiv = document.getElementByClassName('box')[0];

// 通过标签名获得
var oDiv = document.getElementByTagName('div')[0];

---

常用的DOM节点

语法	含义
childNodes	获取所有子节点, 包括元素,文本
children	获取所有子节点, 不包括文本
parentNode	获取父节点
previousSiblint	获取上一个兄弟节点, 包含文本
previousElementSibling	获取上一个兄弟节点, 不包含文本
nextSibling	获取下一个兄弟节点, 包含文本
nextElementSibling	获取下一个兄弟节点, 不包含文本
firstchild	获取第一个兄弟节点, 包含文本
firstElementChild	获取第一个兄弟节点, 不包含文本
lastChild	获取最后一个兄弟节点, 包含文本
lastElementChild	获取最后一个兄弟节点, 不包含文本

---

节点的增删改查

<html>
	<body>
		<div>
			<h1> 标题1 </h1>
		</div>
		<div id='box'>
			<p>a</p>
			<p>b</p>
			<p>c</p>
			<p>d</p>
			<a>e</a>
		</div>
		<div>
			<h2> 标题2 </h2>
		</div>
	</body>

	<script type='text/javascript'>
		// 获取标签
		oDiv1 = document.getDlementById('box');
		oDiv2 = document.getElementByClassName('box')[0];
		oDiv3 = document.getElementByTagName('div')[0];
	</script>
</html>

在html页面中增加标签

// 创建元素节点
var obj = document.createElement('p')

// 设置obj的内容
	// 会渲染
	obj.innerHTML = "<p>新添加</p>";
	// 不会渲染
	obj.innerText = "<p>新添加</p>";

// 将建好的元素节点添加到指定元素的所有内容的后边
oDiv.appendChild(obj)

设置属性

id

obj.id = 'id_name'

类名

obj.className = 'classname1';
obj.className = 'classname2';

标签属性

obj.setAttribute('href','https://www.baidu.com');

---

获取内容

获取元素内所有内容

// 包括标签和文本
console.log(oDiv.innerHTML);

获取元素节点的标签名

// 只获取标签名, 返回值为大写
console.log(odiv.tagName);

获取文本

// 只获取文本, 不获取标签
console.log(oDiv.innerText);

获取标签属性

console.log(obj.getAttribute('class'));

---

删除

删除属性

obj.removeAttribute('href');

删除对象

oDiv.removeChild(obj);

---

复制

// 如果为true, 复制当前节点及其所有子节点

---

替换

// 使用新节点替换旧节点
父节点.replaceChild(new_node, old_node)

---

注意

一般情况下, 如果css样式中出现'-'号, 则对应的style属性是去掉'-', 改为驼峰命名

---

BOM