JS的基础

JS基础知识

javascript是什么？JavaScript 的组成
javascript是一种基于对象和事件驱动的客户端脚本语言
ECMAScript (语法) DOM(文档对象模型) BOM（浏览器对象模型）

四种输出方式
1)打印到页面上
document.write(“输出的内容”); 识别HTML标签
2)在控制台中输出
console.log(“输出的内容”);
3）输出到浏览器的提示框
alert（“输出的内容”）;
4)输入到浏览器的输入提示框
prompt(“输入的内容”，默认值)

标识符的定义以及命名规则

1. 定义：标识符是指变量、函数、属性的名字，或者函数的参数
   2）命名规则：
   （1）标识符的组成：字母、数字、_ 、$,不能以数字开头
   （2）标识符不能是javascript保留字或关键字

什么是变量？如何声明变量？变量名的命名规则
变量：可变的量(变量是计算机内存储数据的标识符。我们可以通过变量获取存储的数据)
var 变量名=变量值
（1）变量的组成：字母、数字、_ 、$,不能以数字开头
（2）变量名不能是javascript保留字或关键字
（3）严格区分大小写

js的六种数据类型？
Number String Boolean Undefined Null Object

将某种数据类型转换为字符串类型的两种方法
内容.toSting()
String(内容)

将某种数据类型转换为数值类型的三种方法
Number()
parsetInt()
parsetFloat()

将某种类型的值转换成布尔值的函数是什么，其中有哪七个被转换成了
false。
Boolean()
0、-0、null、""、false、undefined 或 NaN

运算符的分类
按照功能分为：算术运算符、比较运算符、逻辑运算符、赋值运算符、条件运算符等
按照操作个数分为：一元运算符、二元运算符、三元运算符

前增量运算符（++a），后增量运算符（a++）的区别是什么？
当运算符在操作数之前，称为前增量运算符，他对操作数进行增量计算，并返回计算后的值。当运算符在操作数之后，称为后增量运算符，它对操作数进行增量计算，但返回未做增量计算的值。

++a，先对操作数进行增量计算，返回计算后的值 （先自增后运行）
a++, 后对操作数进行增量运算，返回未做增量计算的值（先运行后自增）

=,== 和 ===区别
= =、= = =运算符用于比较两个值是否相等。 如果相等返回true,否则返回false.
= = =严格相等/恒等 = = 相等 = 赋值
相等= =，允许进行数据类型转换，仅比较操作数的值是否相等
恒等= = =，不仅比较操作数的值，还比较操作数的数据类型

算术运算符、比较运算符、逻辑运算符、赋值运算符、条件运算符各包括哪
些
算术运算符：+ - * / % ++ –
比较运算符：> < >= <= == === != !==
逻辑运算符：逻辑与&& 逻辑或|| 逻辑非！
赋值运算符: = += -= *= /= %=
条件运算符： ？：
三元运算（三目运算）：根据不同的条件，多选一,返回不同的结果。
逗号运算符： ， 在一条语句中执行多个操作

break与continue的区别
continue与break语句非常类似，都是跳出循环，但break是退出循环，而continue是转而执行下一次循环。

请写出for循环三个条件分别是什么，并分析每个条件作用
初始化操作; 初始化计数器
循环条件判断; 控制循环次数
计数器变量的更新 计数器自增

什么是函数、函数的概念
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

数组的定义
数组是值的有序集合（一个数组可以存放多个值）。每个值叫做数组的的一个元素，每个元素在数组中都有一个位置。

ES3~5数组常见的方法：
1、concat( )：数组合并。
2、join( )：数组转字符串。
3、pop( )：删除最后一个元素。
4、push( )：数组向后添加。
5、unshift( )：数组向前添加。
6、reverse( )：数组翻转。
7、shift( )：删除第一个元素。
8、slice( )：数组元素的截取，返回一个新数组，新数组是截取的元素，可以为负值。
9、sort( )：对数组元素进行排序；
10、splice( )：删除元素，并向数组添加新元素；
11、toString( )：数组转字符串；
12、toLocaleString( )：将数组转换为本地数组。
13、forEach( )：数组进行遍历；
14、map( )：没有return时，对数组的遍历。有return时，返回一个新数组，该新数组的元素是经过过滤(逻辑处理)过的函数。
15、filter( )：筛选。
16、every( )：当数组中每一个元素在callback上被返回true时就返回true。（注：every其实类似filter，只不过它的功能是判断是不是数组中的所有元素都符合条件，并且返回的是布尔值）。
17、some( )：当数组中有一个元素在callback上被返回true时就返回true。（注：every其实类似filter，只不过它的功能是判断是不是数组中的所有元素都符合条件，并且返回的是布尔值）。
18、reduce( )：回调函数中有4个参数。prev（之前计算过的值），next（之前计算过的下一个的值），index，arr。

ES3~5字符串常见的方法：
1、chartAt( )：返回在指定位置的字符；
2、concat( )：字符串连接；
3、indexOf( )：检索字符串，找不到返回-1；
4、slice( )：提取字符串片段，并在新的字符串中返回被提取的部分；
5、split( )：字符串转数组；
6、substr( )：从起始索引号提取字符串中指定数目的字符；
7、substring( )：提取字符串中两个指定的索引号之间的字符；
8、toLowerCase( )：字符串转小写；
9、toUpperCase( )：字符串转大写；
10、valueOf( )：返回某个字符串对象的原始值；
11、trim( )：删除字符串两边的空格；

ES6数组的常用方法：
1、Array.from( )：将对象或字符串转成数组，注意得有length。
2、Array.of( )： 将一组值转换为数组。
3、copyWithin(target，start(可选)，end(可选))：数组内数据的复制替换
target：从该位置开始替换数据；
start：从该位置开始读取数据，默认为0；
end：到该位置停止数据的读取，默认为数组的长度
4、find( )：用于找出第一个符合条件的数组成员。
5、findIndex( )：返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
6、fill(value，start，end)：使用给定值，填充一个数组。
value：填充的值；
start：开始填充的位置；
end：填充结束的位置。
7、keys( )：对键名的遍历。
8、values( )：对键值的遍历。
9、entries( )：对键值对的遍历。
10、includes( )：数组原型的方法,查找一个数值是否在数组中，只能判断一些简单类型的数据，对于复杂类型的数据无法判断。该方法接受两个参数，分别是查询的数据和初始的查询索引值。
11、flat( )：用于数组扁平，数组去除未定义。
12、flatMap( )：对原数组的每个成员执行一个函数。
13、Map( )：是一组键值对的结构，具有极快的查找速度。
14、Set( )：Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。

Math 对象方法
max() 返回两个数当中的最大值
min() 返回两个数中的最小值
ceil() 对数字进行向上取整计算
floor() 对数字进行向下取整
round() 对数字进行四舍五入
random() 返回介于0-1之间的一个随机数 [0,1) 包括0，不包括1
随机数计算公式：Math.random(最大值-最小值+1)+最小值
abs() 返回数的绝对值
pow(x,y) 返回x的y次幂的值
sqrt()返回一个数的平方根，如果参数为负数，返回NaN.

日期对象的获取方法
getTime() 返回1970年1月1日至今的毫秒数
getFullYear() 返回一个表示年份的4位数字
getMonth() 返回表示月份的数字
getDate() 返回月份的某一天
getDay() 返回星期的某一天对应的数字
getHours() 返回时间的小时
getMinutes() 返回时间的分钟
getSeconds() 返回时间的秒
getMilliseconds 返回时间的毫秒

日期对象的设置方法
setTime() 返回1970年1月1日至今的毫秒数
setFullYear() 返回一个表示年份的4位数字
setMonth() 返回表示月份的数字
setDate() 返回月份的某一天
setDay() 返回星期的某一天对应的数字
setHours() 返回时间的小时
setMinutes() 返回时间的分钟
setSeconds() 返回时间的秒
setMilliseconds 返回时间的毫秒

什么是BOM？其核心对象是什么

访问和操作浏览器窗口的模型称为浏览器对象模型BOM；
核心对象是window

BOM属性对象方法

BOM，即 JavaScript可以进行操作的浏览器的各个功能部件的接口。
⑴window对象：
①window的方法：confirm(确认框)，open(url)打开新的窗口，close()关闭窗口；
②window的属性：closed，opener。
我们有的时候需要代开我们的子窗体，域名下面还有一个新的域名，也就是子域名，子网页 var myWindow = window.open(“xxx.html”); 我们打开一个子网页， 会返回给我们一个值的，这个值代表另一个页面的window属性可以通过myWindow.closed来查看另一个页面的是否关闭。

⑵Navigator对象(导航器对象)：
appCodeName：返回浏览器的代码名；
appName：返回浏览器名字；
appVersion：返回浏览器的平台和版本信息；
cookieEnabled：返回指明浏览器中是否启用cookie的布尔值；
platform：返回运行浏览器的操作系统平台；
userAgent：返回客户机发送服务器的user-agent头部的值；

⑶screen(显示器对象)：
avaiHeight：返回显示屏幕的可用高度；
availWidth：返回显示屏幕的可用宽度；
height：返回屏幕的像素高度；
width：返回屏幕的像素宽度；
colorDepth：返回屏幕颜色的位数；

⑷history(历史对象)：
back()：返回前一个URL；
forward()：返回下一个URL；
go()：返回某个具体页面；

⑸localtion(位置对象)：
hash：返回或设置从井号(#)开始的URL；
host：设置或返回主机名和当前URL的端口号；
href：设置或者返回完整的URL；
hostname：设置或返回当前URL主机名；
search：设置或者返回从问号(?)开始的URL；
port：设置或返回当前URL的端口号；

DOM能用来干什么
对html元素的样式(颜色、大小、位置等等)、内容、属性来进行动态的改变和操作。

DOM的核心是
document对象

document对象的属性和方法
获取元素的方法（4种）
document.getElementById() 返回拥有指定ID的第一个对象的引用
document.getElementsByTagName() 返回带有指定标签名的对象的集合
document.getElementsByName（）返回带有指定name名称的对象的集合
document.getElementsByClassName() 返回带有指定class名称的对象的集合
输出内容到页面的方法（2种）
document.write()
document.writeln()

对元素内容的操作（设置、获取内容）
对象.innerHTML 设置或获取对象起始和结束标签内的内容（识别标签）
对象.innerText 设置或获取对象起始和结束标签内的文字内容（不识别标签）
对象.value 仅作用于表单

画出DOM模型树

DOM节点有哪些
文档节点
标签节点
属性节点
文本节点
注释节点

节点的属性，节点之间的关系
通过节点的属性，能够获取到每个节点之间的关系，并且可以通过这种关系，准确快速的获取到相应节点的对象。
对象.parentNode 获取父节点
childNodes 获取子节点的集合
firstNode 获取第一个子节点
lastNode 获取最后一个子节点
previousSibling 获取前一个兄弟节点
nextSibling 获取下一个兄弟节点

节点的方法，创建节点、删除节点、添加节点、插入节点、克隆节点
1创建节点
document.createElement(新节点)
2删除节点
父节点.removeChild(子节点)
当前节点.remove()
3添加节点
父节点.appendChild(新的子节点)
4插入节点
父节点.insertBefore(新的子节点，指定的子节点)
5克隆节点
被克隆的对象.cloneNode(参数)

事件的概念
事件是文档或者浏览器窗口中发生的特定的交互瞬间。

事件流的概念
事件流描述的是从页面中接收事件的顺序。
IE的事件流是事件冒泡流，chrome和火狐的事件流是捕获流

事件冒泡与事件捕获
IE的事件流叫做事件冒泡，即事件开始时由最具体的元素（文档中嵌套最深的那个节点）接收，然后逐级向上（一直到文档）；
事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。事件捕获与事件冒泡事件流正好相反的顺序，事件捕获的事件流失最外层逐级向内传播。

DOM事件流
DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

DOM0级事件绑定的优缺点
优点
（1）非常简单和稳定，可以确保它在你使用的不同浏览器中运作一致
（2）处理事件时，this关键字引用的是当前元素
缺点
（1）传统方法只会在事件冒泡中运行，而非捕获和冒泡
（2）一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数
（3）事件对象参数(e)仅非IE浏览器可用

鼠标事件
click 单击
dblclick 双击
mouseenter 鼠标进入
mouseleave 鼠标离开
mouseover 鼠标移入元素
mouseout 鼠标移出元素
mousedown 鼠标按下
mouseup 鼠标弹起
mousemove 鼠标在元素内部移动

键盘事件
keydown 键盘按下任意键
keypress 键盘按下字符键
keyup 释放键盘上的键

表单事件
blur 失去焦点
focus 获得焦点
change 内容改变时
select 文本被选中
submit 点击提交按钮触发
reset 点击重置按钮触发

用户界面事件
load 页面完全加载完成后，立即执行
unload 事件在用户退出时发生
resize 事件在窗口或框架被调整大小时发生
scroll 用户滚动滚动条的元素中的内容时，在元素上触发

事件绑定
onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onerror 在加载文档或图像时发生错误。
onfocus 元素获得焦点。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
onreset 重置按钮被点击。
onresize 窗口或框架被重新调整大小。
onselect 文本被选中。
onsubmit 确认按钮被点击。

什么是事件委派
通俗的讲，事件就是onclick，onmouseover，onmouseout，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件
事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

事件委派的原理
利用冒泡的原理，把事件加到父级上，触发执行效果。

DOM2级事件绑定
addEventlistener();
包含三个参数：第一个参数为不加on的事件类型，第二个参数为事件函数，第三个参数为布尔值。
removeEventListener(); 删除事件处理程序----不能删除匿名函数添加的事件

优点
（1）该方法同时支持事件处理的捕获和冒泡阶段。事件阶段取决于addEventListener最后的参数设置：false (冒泡) 或 true (捕获)。
（2）在事件处理函数内部，this关键字引用当前元素。
（3）事件对象总是可以通过处理函数的第一个参数(e)捕获。
（4）可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的
事件

缺点
IE不支持，你必须使用IE的attachEvent()函数替代。 —删除事件用detachEvent();

event对象的相关属性

event.clientX 当前鼠标的x轴的坐标
event.clientY 当前鼠标的y轴的坐标
对象.clientWidth 当前对象的宽度 不包含左右边框
对象.clientHeight 当前对象的高度 不包含上下边框
对象.offsetWidth 当前对象的宽度 包含左右边框
对象.offsetHeight 当前对象的高度 包含上下边框
对象.offsetLeft 当前层距离左侧边缘距离
对象.offsetTop 当前层到浏览器顶端的距离
event.keyCode 获取键盘码

event对象的方法

event.stopPropagation() 阻止事件冒泡的方法
event.preventDefault() 取消事件的默认操作

拖拽需要几个事件

mousedown
mousemove
mouseup

style.width,clientWidth,offsetWidth区别

元素.style.width 只能设置或者获取元素的行内样式的宽
元素.clientWidth 设置或者获取元素的宽(不包含元素的边框)
元素.offsetWidth 设置或者获取元素的宽(包含元素的边框)

style.height,clientHeight,offsetHeight区别

元素.style.height 只能设置或者获取元素的行内样式的高
元素.clientHeight 设置或者获取元素的高(不包含元素的边框)
元素.offsetHeight 设置或者获取元素的高(包含元素的边框)

offsetLeft, offsetTop

offsetLeft获取元素的left值
offsetTop获取元素的top值

获取浏览器视口的宽高(可用兼容写法)

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;