JavaScript学习

概念

JavaScript 是脚本语言，是一种解释性脚本语言(代码不进行预编译)
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行

快速入门

数据类型

number
js不区分小数和整数，统一用Number

123	//整数
123.1	//小数
1.123e3	//科学计数法
-99	//负数
NaN	//not a number 不是一个数字
Infinity	//无限大

字符串

"abc","def"

布尔值
true false

逻辑运算
&& 双与
|| 双或
！非

比较运算符

= 
==	等于（类型不一样，值一样，也会判断为true）
===	绝对等于（类型一样，值一样，结果为true）

null和undefined
null 空
undefined 未定义

数组

对象

对象是大括号，都是键值对 （属性值：属性值），数组是中括号

严格检查模式strict

数据类型

1. 字符串

1. 正常字符串我们使用单引号，或者双引号包裹

2. 多行字符串编写
   

3. 模板字符串
   

4. 字符串的长度
   str.lenth

5. 字符串的可变性，不可变
   

2. 数组

1. Array可以包含任意的数据类型
2. 长度，假如给数组arr.length赋值，数组大小就会改变，如果赋值长度小于原有长度，元素将会丢失
3. indexOf，通过元素获得下标索引
4. slice（3）截取Array的一部分，返回一个新数组（截取长度为3， 含头不含尾）
5. push（）：压入到尾部
6. pop（）：弹出尾部的一个元素
7. 排序sort（）

3.对象

JavaScript中的所有键都是字符串，值是任意对象

1. 对象赋值

person.name = "张三"
直接赋值

2. 使用一个不存在的对象属性时，不会报错，会返回undefined

person.age(这个属性如果在对象里不存在会返回undefined)

3. 动态的删减属性

delete.person.name
true(返回true则删除成功)

4. 动态的添加属性

person.age = 18
直接赋值

5. 判断属性值是否存在这个对象

'age' in person
判断age属性在person对象中是否存在

对象名.hasOwnProperty('age')
判断这个属性是不是对象自身拥有的

6. 集合
   
7. iterator
   

函数

1. 定义函数

java里
public 返回值类型 方法名(){
	return 返回值;
}

绝对值函数
function  函数名(x){
	if(x>=0){
		return x;
	}else{
		return -x;	
	}
}

定义方法，在浏览器控制台调用 abs() 方法传值

假设参数不存在，如何规避
2. 变量作用域

在JavaScript中，函数查找变量从自身函数开始，由 内向外 查找

局部函数

全局函数

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没找到，就会报错RefrenceError
alert()本身也是一个window变量

规范

由于所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，就会冲突------>怎么减少冲突？

局部作用域

方法

apply在js中可以控制this的指向

内部对象

1.Date

2.JSON

JSON是一种轻量级的数据交换格式，任何js支持的类型都可以用JSON来表示

JSON 和JS对象的区别

	var obj = { a:'hello',age:18}

	var json ='{ "a":"hello","b":"world" }'	//json

面向对象

1. Class继承

class关键字在ES6引入的

2. 继承

操作BOM对象

BOM：浏览器对象模型
location代表当前页面的URL信息

host: "www.baidu.com"  //代表主机
hostname: "www.baidu.com"
href: "https://www.baidu.com/" //钩子
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:"  //协议
replace: ƒ replace() //重新加载

操作DOM对象（重点）

**核心：**整个浏览器网页就是一个Dom树形结构

1. 要想操作Dom节点，就必须获取到这个Dom节点
   
   获取父节点中的子节点
   
2. 更新节点
   
3. 删除节点
   输出节点的步骤：先获取父节点，在通过父节点删除自己
   
   
4. 插入节点
   我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素，但是这个DOM节点已经存在元素就不能这么做了，会覆盖调整个节点的内容
   追加
   
   

jQuery