JavaScript入门基础速览

JavaScript

JavaScript 主要由三部分组成：

• BOM Browser Object Model：就是通过js代码控制浏览器的组件，比如历史记录，前进后退按键，滚动条。。。
• DOM Document Object Model：就是通过js代码控制页面源代码，html，css
• ECMAScript JS代码的书写规则，比如ES6

1. 数据类型

JavaScript 中数据类型分为了基本数据类型和引用数据类型

• 基本数据类型

  • 数值类型number ：整数，浮点数，科学计数法(2e5 表示 $2\times 10^5$)，十六进制(以0x开头)，八进制(以0o开头)，二进制(以0b开头)，常用方法：

    Math.random()	//返回[0,1)之间的一个随机小数
    Math.round(数字)	//对数字进行四舍五入取整
    Math.ceil(数字)		//对数字向上取整
    Math.floor(数字)		//对数字向下取整
    Math.pow(底数,指数)
    Math.sqrt(数字)		//开平方，返回那个正值
    Math.abs(数字)		// 返回绝对值
    Math.max(数字1,数字2...)
    Math.min(数字1,数字2...)
    

  • 单引号或者双引号包裹的内容都是字符串string ，并且不区分单双引号，常用方法：

    var str = "helloworld"
    res = str.charAt(index)
    str.toLowerCase()
    str.toUpperCase()
    str.replace(换下内容,换上内容)   // 将字符串内 第一个 满足换下内容的片段替换成换上内容
    str.trim()		// 去除字符串首尾的空格
    arr = str.split(分隔符)		// 切分后的字符串当做一个数组
    str.substr(start,num)	  // 开始索引，多少个
    str.substring(start,end)   // 开始索引，结束索引
    

  • 布尔类型boolean

  • 空类型：null (表示有值，有一个空值)；undefined (表示没有值)

• 引用数据类型

  • 对象数据类型object ：定义方式：var obj ={name:"ymy"}，每一个属性和值构成一组键值对和python 的字典非常相似，就不多赘述了。有两种方式访问其属性：obj.name 或者obj['name'] ，删除时使用关键字：delete obj.name

  • 数组类型Array ，就是python 中的list ，不过用 typeof 检测一个数组类型变量，得到的是 object ，常用方法：

    var arr = [111, true, 'hello']
    arr.push(数据)	// 在尾部追加
    tmp = arr.pop()		 // 弹出最后一个，并删除
    item = arr.shift()	 // 弹出第一个数据，并删除
    len = arr.unshift(数据)	// 将数据添加到数组的最前面，并返回新的数组的长度
    new_arr = arr.reverse()		// 将数组反转，返回新的数组
    res = arr.splice(start,num,data)  // 从start表示的索引位置开始，删除num个数据，并将data从start位置插入，返回值是被删除的数据组成的新数组。start默认为0，num默认为0，data默认为空，即不添加。 
    str = arr.join('/') // 返回值为：111/true/hello
    new_arr = arr.concat(其他数组)  // 拼接两个数组，返回新的数组
    new_arr = arr.slice(start, end)  // 和python切片一样，前闭后开，切出来的数据组成新的数组返回。start默认为0，end默认为数组长度
    index = arr.indexof(数据)		// 根据数据内容返回索引，若数组中有多个相同数据，则返回第一次出现的索引
    arr.forEach(function (item,index, arr){})   // 接收一个函数作为参数，对数组中的每个元素执行该函数，无返回值
    res = arr.map(function (item,index,arr){})  // 将数组每一个值通过函数映射到目标值，返回新的数组
    new = arr.filter(function (item,index,arr){return item>150})  //过滤数组，返回符合条件的值组成的新数组
    res = arr.every(function (item,index,arr){return item>150})   //判断数组中每个元素是否满足条件，若有一个不满足则返回false
    res = arr.some(function (item,index,arr){return item>150})   //判断数组中是否有一个元素满足条件，若有一个满足则返回true
    

  • 时间类型Date

    // 定义方法
    var time = new Date()	
    var time = new Date(年,月,日,时,分,秒)   // 月：0代表1月
    
    time.getFullYear()	// 获取年份
    time.getMonth()		// 获取月份,若返回0，表示1月
    time.getDate()			// 获取日期
    time.getHours()
    time.getMinutes()
    time.getSeconds()
    time.getDay()		//返回星期信息.0表示周日 1-6表示周一到周六
    time.getTime()		//获取时间戳  
    

    上面的方法只需要将名字中的get替换为set就换为了其对应的set方法，但是没有setDay这个方法，因为确定年月日后，星期就确定了

typeof 可以检测变量的类型。 Eg：typeof n1. 注意：null 类型的数据返回的数据类型是 object

• 数据类型转换

  • 转成number :

    • Number(要转换的内容);  // 如果不可以转换，则会得到一个NaN类型的数据
      

    • parseInt(要转换的内容);  
      

    这两者的区别在于：var s1 = ‘100abc’ ，如果要转换s1，Number方法会得到NaN，parseInt方法会得到100，后者是逐位进行判断的。

    • parseFloat(要转换的内容)  // 解析语法和parseInt一模一样，不过可以解析到小数部分
      

  • 转成string：

    • String(要转换的内容);	
      

    • 要转换的内容.toString();
      

  • 转成boolean：

    • Boolean(要转换的内容);
      

    只有6种情况会被转换成false：0 NaN ‘’ “” undefined null

• 运算符 大多数都没什么差别，只讲几点需要注意的。

  • + ：一般用于做数值计算，只要有一端是字符串，则变为字符串拼接处理
  • == 只比较值是否相等，不考虑数据类型；=== 必须要值和数据类型都相等才返回true
  • != 和 !== 就分别对应了上面的等于和全等于

2. 流程控制

这里的 if-else if ，switch-case 等结构都和java语法一样，就不赘述了。补充几点容易疏忽的点。

• switch-case 结构的穿透效果

var a = 40
switch(a){
   case 38:
      console.log("38匹配成功");
      
   case 40:
      console.log("40匹配成功");
   case 42:
      console.log("42匹配成功");
      break;
   default:
      console.log("默认");
}

如果每一个case代码块最后不写break ，则会从第一个匹配成功的选项开始，一路往下执行，不管是否满足条件都会执行，直到碰到break

3. BOM(Browser Object Model)

其实就是通过JS代码对浏览器进行控制以及各种操作。可视窗口：去掉页面头部和控制台

var w = window.innerWidth	  // 获取可视窗口宽度
var h = window.innerHeight   // 获取可视窗口高度

//浏览器弹出层
window.alert(提示信息)	// 提示框
res = window.confirm(提示信息)		//询问框会有确定和取消按钮，点确定res=true，点取消res=false
res = window.prompt(提示信息)		//输入框，输入的内容会返回给res，若不输入则res=null

//开启和关闭标签页
window.open('url')  //打开网页
window.close()		//关闭当前页，触发关闭时在哪个页面，关闭的就是哪个页面

//浏览器常见事件
window.onload = function (){}		//资源加载完毕事件，即页面中的所有图片，视频等资源加载好后会执行的功能就是function中写好的
window.onresize = function (){}	//可视窗口尺寸改变时会发生的事件
window.onscroll = function (){}	//滚动条位置变化触发事件

//浏览器历史记录操作
window.history.back()	//回退页面
window.history.forward()	//前进页面

//浏览器卷去尺寸
height = document.documentElement.scrollTop || document.body.scrollTop  //卷去高度
width = document.documentElement.scrollLeft || document.body.scrollLeft  //卷去宽度

//浏览器滚动到
window.scrollTo(left,top)	//left表示卷去宽度，top表示卷去高度。这种方式是瞬移
window.scrollTo({left:xx,top:yy,behavior:'smooth'}) //接收一个对象作为参数，这种方式滚动效果很平滑

4. 定时器

定时器分为：1.间隔定时器(按照指定间隔执行指定代码) 2.延时定时器(在固定的时间后执行一次指定代码)

间隔定时器

var timer = setInterval(function(){},时间)   //接收两个参数：一个函数，一个时间，单位为毫秒

延时定时器

var timer = setTimeout(function(){},时间)

两个函数的返回值都表示自己是页面中的第几个定时器，我们需要返回值来关闭定时器

关闭定时器

clearInterval(要关闭的定时器返回值)
clearTimeout(要关闭的定时器返回值)

其实这两个函数是不区分的，两个函数都可关闭两种定时器

5. DOM(Document Object Model)

一整套操作文档流相关内容的属性和方法

获取元素

var item = document.getElementById('id名称') //获取文档流中id对应的一个元素，如果没有返回null
var item = document.getElementsByClassName('元素类名') //返回符合类名的所有元素，一个伪数组
var item = document.getElementsByTagName('标签名')
var item = document.querySelector('选择器') //返回文档流中满足选择规则的第一个元素
var item = document.querySelectorAll('选择器') //返回文档流中满足选择规则的所有元素

操作元素内容

//文本内容
元素.innerText	// 获取
元素.innerText = '新内容'  // 设置,这个方法有一点不好，如果div内嵌套了别的标签，那么该方法就会直接覆盖所有嵌套内容

//超文本内容：就是标签内的一些嵌套标签之类的
元素.innerHTML	// 获取
元素.innerHTML = '<span>新内容</span>'	// 设置

操作元素属性

原生属性 就是标签自带的属性，比如：src，id，type

元素.属性名	//获取
元素.属性名 = '属性值'	 //设置

自定义属性 自己设置的，比如： <p id='a' hello='world'></p> 其中hello就是自定义属性

元素.getAttribute('属性名')	//获取
元素.setAttribute('属性名','属性值')	//设置
元素.removeAttribute('属性名')	//删除

以上方法一般不用于操作元素的类名和样式

//操作元素类名
元素.className	//获取
元素.className = '新类名'	 //设置

//操作元素行内样式
元素.style.样式名	//获取
元素.style.样式名 = '样式值'	 //设置，当样式名有中划线 background-color ，获取时改写为backgroundColor

//操作元素内联样式
window.getComputedStyle(元素).样式名		//获取。没有设置的方法，只能设置行内样式

节点操作

前面讲的DOM操作都是基于已经写好的h5和css3内容来进行处理，现在要讲的是如何用js代码生成新的h5，css3内容。

//创建节点
var item = document.createElement('标签名称')	//创建指定标签，但是还没插入到内容中

//插入节点
父节点.appendChild(子节点)	  //把子节点放在父节点的最后一个孩子位置
父节点.insertBefore(item1,item2)  //把item1放在父节点的内部，并且放在item2子节点的前面

//删除节点
父节点.removeChild(子节点)	 //从父节点内删除某一个子节点
节点.remove()	   //把自己直接删除

//替换节点
父节点.replaceChild(item1,item2)	 //用item2替换item1

//克隆节点
var node = 节点.cloneNode(true/false)	//true表示克隆其后代，false表示不克隆后代,发挥克隆好的新节点

//获取元素尺寸，参考下图
元素.offsetHeight	元素.offsetWidth 	//获取 content+padding+border 区域的尺寸
元素.clientHeight	元素.clientWidth 	//获取 content+padding 区域的尺寸

6. 事件

事件绑定

事件绑定三要素：1. 事件源：和谁绑定 2. 事件类型：绑定一个行为 3. 事件处理函数：当用户触发该行为的时候，执行什么代码

事件源.on事件类型 = function (){}				

常见事件类型

事件对象

可以理解为一个PCB对于一个进程的意义。事件对象就是记录一次事件的信息：比如事件源是谁，是什么行为，做了何种操作，何时触发的。。。

事件源.on事件类型 = function (e){}	//只需要在形参中写 e 就可以得到该事件对象

• 事件对象内常用信息——鼠标事件

  • offsetX offsetY 相对于触发事件的元素

---

• clientX clientY 相对于浏览器当前可视窗口

---

• pageX pageY 相对于页面文档流

---

• 事件对象内常用信息——键盘事件

事件对象.keyCode	//获取触发事件的键盘编码值

事件传播

假如我们有这样一个代码，那么呈现的效果如下：

为了更直观的看到，我们从侧面看：

当我们在inner上触发鼠标点击事件时，浏览器是如何捕获该行为的？

1. 目标元素就是我们触发事件的源，首先从最外层逐步向内扩散，这一步称为捕获阶段，不管在哪里触发事件，浏览器窗口都是最先知道的
2. 再从捕获的事件源，逐步向外扩散至最外层，这一步称为传播阶段 ，即使我们是点击了最内层，但是由于有传播，所以外层也都会触发他们自身绑定的点击事件。浏览器的默认机制就是在冒泡阶段 触发事件的，所以目标最先执行事件。

当我们在某个元素身上触发事件时，不想让其父级元素都受到牵连，就需要阻止事件传播

事件对象.stopPropagation()	//阻止事件传播

事件委托

利用事件冒泡的机制，把自己的事件委托给结构父级中的某一层。

var ul = document.querySelector('ul')
ul.onclick = function (e){
   if(e.target.TageName == 'LI'){
      //如果点击的是li，触发这里
   }else{
      //否则触发这里
   }
}

ES6 语法

1. let 定义变量； const 定义常量

	var	let，const
不同点	1.会预解析 2.可以定义重复变量名 3.没有块级作用域限制	1.不会预解析 2.不可以定义重复变量名 3.有块级作用域限制

	let	const
不同点	1.定义变量的时候可以不赋值 2.定义的变量的值可以被修改	1.定义变量的时候必须赋值 2.定义的变量的值一经给出就不可被修改

2. 箭头函数
   1. 对函数表达式（也叫做匿名函数 ）的简写，对于声明式函数不能使用。

函数表达式就是不需要单独定义函数，直接使用的位置。比如：

xxx.onclick = function (){}   //函数表达式
xxx.onclick = () => {}	//箭头函数，
//当且仅当形参只有一个的时候可以把 () 省略
//当且仅当代码只有一句的时候可以把 {} 省略

3. 解构赋值 就和python中的差不多

let [a, b, c] = ['hello', 123,  true]	//a=arr[0],b=arr[1],c=arr[2]；解构数组时用 []
let {name,age} = {name:'ymy', age:22}  //name=obj.name; age=obj.age 解构对象用 {}。 解构对象时用的变量名要和对象属性名一样，如果想不一样如下面一条语句
let {age:a} = {name:'ymy', age:22}  //令a=obj.age。给age去了一个别名a

4. 模版字符串 用一对反引号包裹

//可以换行
let s = `hello
world`

//可以直接在字符串中解析变量
let age = 18
let s1 = `我今年 ${age} 岁`

5. 展开运算符 展开数组的 []或者对象的 {}

let s = [100, 200, 300] 
console.log(s)			// [100, 200, 300]
console.log(...s)    // 100, 200, 300

//作用：可以一次合并多个数组
let a = [10, 20]
let b = [30, 40]
let c = [50, 60]
let d = [...a, ...b, ...c]

//作用：给函数传参数
Math.max(...d)

6. 类语法 这个和java 非常相似，很好理解

class Person {
   constructor (name, age){	//构造函数
      this.name = name
      this.age = age
   }
   static a = 100 //静态属性
   //静态方法
   static go () {
      console.log('mmm')
   }
   
   sayHi(){		//成员方法
      console.log("dwadada")
   }
}

let p = new Person('abc', 15)
p.sayHi()
Person.a
Person.go() 

前后端交互