JS部分知识点

JavaScript简介

JavaScript是脚本语言；

JavaScript是一种轻量级的编程语言；交互的逻辑都是JavaScript驱动的；

ECMAScript标准就可以理解为JavaScript标准；

JavaScript的代码通常放在

标签中，也可以嵌在其他地方；

包裹的代码就是JavaScript代码，将直接被浏览器执行；

要把写的JS代码单独放在一个地方，然后在HTML中引入这个文件，这样做的便利之处：

1.比较便于进行代码的维护，可以多界面引用同一份JS代码；

2.可以在同一个界面引入多个JS文件；

3.在多次编写的情况下，浏览器依次执行；

4.script的标签type的默认就是JavaScript；

JavaScript的运行和调试

在HTML界面中引入JavaScript，这样浏览器在加载HTML文件的时候，就会执行JavaScript代码；

后面需要架设一个web服务器，用http：//开头的地址来正常执行所有的JavaScript代码；

可以利用F12打开浏览器的调试工具，点击控制台，然后在这里输入JavaScript代码，点击运行就可以得到变量的值;

JavaScript的基本语法

格式

语法上与java相似，每个语句以“；”结束，语句块用{ }。

格式： 定义变量 变量类型 变量名 = 变量值；

数据类型和变量

数值，文本，图形，音频，视频等都属于数据类型；

常见数据类型：

1,Number ：可以为整数，浮点数，科学计数法，负数，NAN无法表示的数，Infinity表示无限大的数；

2.字符串：用单引号和双引号括起来的任意文本，如果想要把引号也打出来，可以使用转义字符；

3.布尔值：true，false；

4.比较运算符：将Number作比较时，可以通过比较得到一个布尔值，“ = ”表示赋值，“ == ”表示等于（只要值一样就会被判断为true），“ === ”表示绝对等于（只有类型一样，值一样才会是true）；需要注意的是NaN不等于任何一个数，包括它自己；浮点数的比较要注意，比较的是两个无限循环小数的差是不是小于某个阈值；

5.null表示一个空的值，underfined表示值未定义，只在判断函数参数是否传递的情况下有用；

6.数组，JavaScript中的一个数组可以放多种类型，数组中的元素可以通过索引来访问，数组用 [ ]来表示，元素之间用，分隔 ；

7.对象，JavaScript中的对象是由一组键值对组成的无序集合，其中键都是字符串类型的，值可以使任意的数据类型，键又称对象的属性可以通过，对象.属性名来调用。

严格检查模式

使用var声明的变量不是全局变量，在strict模式下，强制通过var声明，没有使用var的会导致运行错误，启动strict的方法是在JavaScript代码的第一行写上‘use strict’ ；

字符串

1.转义字符\‘ ’，\n换行，\t table

2.多行字符串编写：”~“将多行字符串包裹；

3.模板字符串，相当于+，格式为${ 属性名 };

4.操作字符串：

（1）获得字符串的长度，属性名后面加上 .length;

(2)获取指定位置的字符，超出下标的话不会报错，一律返回underfined，字符串是不可以变得，但是如果对字符串的某个索引赋值，不会报错也不会有任何效果。

（3）字符串的大小写转换，toUpperCase（）方法全部变成大写，toLowerCase（）方法全部变成小写；

（4）获取字符串中指定字符第一次出现位置的下标，用indexOf（‘字符‘）方法，如果没有的话返回结果为-1；

（5）返回指定索引区间的字串，用substing（开始索引，结束索引）方法，

数组

（1）用.length直接获取长度，也可以给定数组的长度，给定数组长度如果较小的话，会导致元素的丢失，如果给定的数组长度过大的话，会补充为未定义的元素；

（2）通过索引可以单独改变某个元素的内容；

（3）indexOf方法可以用来搜索指定元素的位置（）；

（4）截取Array的一部分，返回一个新数组，slice（）方法的两种使用方式，第一种（开始索引，结束索引），第二种（开始索引），也可以利用这个方法进行复制一个新的数组；

（5）操作尾部元素，push方法是将数据添加到尾部，pop方法是将尾部的元素取出，如果不找承接的东西，相当于去除；

（6）操作头部元素，unshif方法是将数据添加到头部，shif是将头部的元素取出；

（7）sort（）方法可以修改当前Array中的元素位置，直接调用时，按照排序方式；

（8）用reverse（）方法可以将数组中的元素交换位置；

（9）splice（）方法可以删除若干元素，然后也可以添加若干元素，使用方法是splice（开始的索引，删除的元素个数，添加的内容）；

（10）数组的拼接，可以使用concat（）方法；

（11）连续符，使用join('指定字符')方法；

对象

（1）定义方法： var 对象名{ 键值对，键值对，键值对 }；

（2）获取对象的属性，直接用对象调用；

（3）以为JavaScript的对象是动态的，所以可以自由给对象添加或者删除一个属性，在对象前面加delete这个关键字；

（4）在属性和对象之间用关键字in判断这个属性是否存在；

（5）判断一个属性是自身拥有而不是继承得到的，可以使用hasOwnProperty()方法；

流程控制

输出语句相当于 console.log( ) ;

 

 数组也是一个对象，索引是它的属性；

Map和Set

Map用键值对的方式储存数据，初始化的时候需要一个二维数组，或者直接初始化一个空，一个key只能对应一个value值，添加键值对的时候，前面写名称，后面写值。

Set无序不重复的集合，用has(值)方法可以用来确定是否含有某个值。

lterator遍历Map和Set没办法使用下标。

需要注意的点

let声明的是块级作用域，var声明的是函数作用域和全局作用域；

let声明的变量不会声明提升，var会声明提升；

let不能声明同名变量，var可以；

在JS中函数的实例是对立的对象，可以有自己的方法和属性，可以作为参数传递；

在写HTML中写类似java的一些东西；

arguments是函数运行时的实参列表；

getElementByld返回的是ID相照应的标签；

getElementByTagName返回的是伪数组的形式；

方法里的属性引用基本上用单引号，想要直接输出的用到双引号；

先通过相应的方法得到之后，需要达到效果的时候，对相应的内容进行操作；

querySelector返回指定选择器中指定对象，如想要得到第一个就加上一个first，想得到所有就返回all，里面的选择器要加上符号；

获取body标签，可以直接方法到body，方法到HTML是用documentElement；

console既可以表示输出，又可以用来创建对象，创建对象的两种方式（对象名.uname）,(对象名[ 'uname' ])；

调用一些方法对象的时候同样可以用这两种方法；

也可以用new Object()方法创建对象，然后在利用等号赋值的方法 添加属性和方法；

innerText将元素的内容改变；

获取属性值和自定义属性值,getAttribute是获取属性值，setAttribute是设置属性值；

document.write()和element.innerHTML以及document.creatElement()的区别；

1.document.write是直接将内容写入界面的内容流，但文档执行完毕，它会导致文档界面全面重绘；

2.innerHTML是将内容写入某个DOM节点中，不会导致界面的全面重绘；

3.innerHTML创建多个效率更高（不要凭借字符串，要用数组的形式拼接），但结构会稍微复杂一些；

4.creatElement()创建多个元素效率稍低一点点，但是结构更加清晰；

JS中常见的事件

鼠标移动事件

onmousemove(event):在（event）前面写的是需要监听移动事件的对象；

onmouseover：鼠标悬停事件，当鼠标移上去之后会引发的事件，this写在那个标签里就代表那一个标签，调用样式表里的属性的时候，把中间的斜杠删掉；

onmouseout：鼠标移开事件，当空间从事件上移开的时候，展示出来的效果；

鼠标点击事件

onclick：当鼠标被点击之后会产生的效果；

 

加载与卸载事件

只能写在body或image里，加载事件（onload）在整个界面完毕之后发生，卸载事件（onunload）是在界面关闭时发生；

键盘事件

onkeypress按下键盘松开之后会发生的事件，onkeydown按下按钮发生，onkeyup松开按键；

提交和重置事件

提交事件（onsubmit，必须在表单中实现）是点击提交按钮后发生，重置事件（onreset）是点击重置按钮后发生；

选择与改变事件

onselect：只能用于输入框，当选择输入框中的文本时发生；

onchange：用于select和文本框，对于下拉框是在选项发生变化的时候发生，对于文本框是在文本框的内容发生变化并且失去焦点时发生。

DOM操作

创建

三种创建方式1.document.write；2.innerHTML；3.creatElement；

增

两种增加方式：1.appendChild；2.insertBefore；

删

一种删除方式：1.removeChild；

改

修改的是四部分：

1.修改元素属性：src；href；title等

2.修改普通元素内容：innerHTML，innerText；

3.修改表单元素：value，type，disbled等；

4.修改元素样式：style，className;

查

1.DOM提供的API方法：getELementByld，getElementsByTagName 古老方法不推荐使用；

2.H5提供的新方法：querySelector,querySelectorAll提倡；

3.利用节点操作获取元素：父（parentNode），子（children），兄（previousElementSibling，nextElementSibling）提供；

属性操作

主要针对自定义属性：

1.setAttribute：设置dom的属性值；

2.getAttribute：得到dom的属性值；

3.removeAttribute移除属性；

事件操作

给元素注册事件，采取 是事件源.事件类型 = 事件处理程序；

事件委托

addEventListener（）+e.targetd;

禁止右键，禁止全选，

常见的鼠标事件

图片跟着鼠标走

大体实现思路为设置绝对定位，获得图片的坐标，添加鼠标监听，然后将定位的位置随着鼠标移动而移动；

加监听格式为document.addEventListener（‘监听方式’，fuction(e)）;

循环播放图片

实现思路可以根据一段内容的变化设置循环；

设置倒计时

用到了查和改的内容；

clearinterval函数可以停止计时；

跳转界面

用到了form的action属性，将表单提供过去之后，要先去除问号，然后截取需要的代码；

history

控制是否为前进一页，是否为后退一页；

拖动窗口

事件冒泡和事件捕获

这两个概念是为了解决事件流，即事件发生顺序的问题；

事件冒泡的传播顺序是从最内层慢慢向外拓展，鱼吐出的泡泡慢慢向上漂；

事件捕获是从最外层开始，慢慢向里面延伸；

addEventListener方法用一个特定的元素绑定一个事件处理函数，有三个参数（event，funtion，useCapture），第一个参数时需要绑定的事件，第二个参数时触发事件后要执行的函数；第三个默认是为false，表示在事件冒泡的阶段调用事件处理函数，如果参数为true，那么就会在捕获的阶段处理函数；

阻止事件冒泡的两种方式，方式一：event.stopPropagationg() 方式二：return false;

两种方式都阻止了事件往上冒泡，return false同时阻止了事件本身；

如果两种方式同时存在于一个大盒子里面，那么事件捕获的优先级要比事件冒泡的优先级要高。

同为事件捕获的话，在外层的盒子效果先被触发；

同为事件冒泡的话，在内层的盒子效果先被触发。

闭包

访问变量的权利是由内到外的，闭包是为了解决不同函数中变量的调用问题，闭包的本质是在一个函数内部创建另外一个函数；

闭包的三个特性：

1.函数嵌套函数；

3. 参数和变量不会被垃圾回收机制回收。

2.函数内部可以引用函数外部的参数和变量；

私有变量可以用到闭包；

变量如果没有声明var关键字，那么该变量就是全局变量，即使是在函数内部定义的；

JavaScript内嵌函数，嵌套函数能够访问上一层的变量，如果我们能够访问到子类方法，那么我们就能够使用父类变量。

闭包是一种私有变量的保护机制，在函数执行时形成私有的作用域。

作用域

在JavaScript中，对象和函数也是变量；

作用域为可访问变量，对象，函数的集合；

作用域在函数内修改；

局部作用域

变量在函数内声明，变量为局部作用域；

局部变量，只能在函数内部访问；

局部变量在函数开始执行时创建，函数执行完之后局部变量自动销毁；

全局变量

网页中所有的脚本和函数均可以使用；

如果在函数内部没有声明var，那么这个变量为全局变量；

函数参数

函数参数只能在函数内起作用，是局部变量；

在HTML中，所有全局变量都会变成window变量；

全局变量，函数和局部变量能够与window对象的变量和函数相互覆盖；

this

关键看调用；

其中this指定的内容会随着执行环境的改变了发生变化；

在方法中，this表示该方法所属的对象；

如果单独使用的话，表示全局对象,在浏览器中window就是全局对象（object Window）,在严格模式下也是指向window；

在函数中，this表示全局对象；

在函数中，在严格模式下，this是未定义的（undefined）；

在事件中，this表示接收事件的元素；

类似call（）和apply（）可以将this引到任何对象；

JavaScript中函数也是方法，对象则有方法，apply和call就是函数对象的方法，他们允许切换函数执行的上下文环境，及this绑定的对象；

回调函数

有些库中的函数想要实现相关的功能，需要首先传过来一个函数，传过来这个函数就被称为回调函数；

两种回调方式，一种是阻塞式回调，一种是延迟式回调。