JavaScript简单总结

一、了解JavaScript

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

二、JavaScript总结

2.1、JavaScript的使用

在页面头部（里面）或者尾部(后面);
方法一：直接把js代码写在html页面中
<script type="text/javascript">js内容</script>
方法二：在页面中进行引入js文件
<script type="text/javascript" src="js文件地址"></script>

注释:
单行注释 //
多行注释 /* */

2.2、JavaScript中变量的定义

变量就是指可变的量。
语法：var 变量名=变量值。

变量的命名规则：
（1）变量的组成：字母、数字、_ 、$,不能以数字开头；
（2）变量名不能是javascript保留字或关键字；
（3）严格区分大小写。

变量声明的三种方式：
（1）先声明，后赋值；
（2）边声明边赋值；
（3）一次声明多个变量，中间用逗号隔开。

2.3、数据类型与表达式运算符

6种基本数据类型：
Number（数值类型）
String （字符串类型）
Boolean （布尔类型）
Undefined （未定义）
Null （空）
Object （对象类型）

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

2.4、分支语句、循环语句

在我看来javascript程序无非就是一系列可执行语句的集合。

if语句：
语法结构：
If（条件判断）{ 条件为真执行的代码}
If（条件判断）{ 条件为真执行的代码}else{条件为假执行的代码}
If(条件1判断){当条件1为真执行的代码}else if(条件2判断){当条件2为真执行的代码}…

switch语句：
语法结构：
switch(n){
case 1:
//代码块1
break;
case 2:
//代码块2
break;
default:
//…
break;
}
按照“===”运算符进行比较的

for循环语句：
语法结构：
For（初始化操作;循环条件判断；计数器变量的更新）
{
需要执行的代码
}

While语句：
语法结构：
While(条件表达式){
语句组
}
使用while(true)将会创建一个死循环。

· break语句将无条件跳出并结束当前的循环结构 ；
· continue语句的作用是忽略其后的语句并结束此轮循环和开始新的一轮循环；
· continue与break语句非常类似，都是跳出循环，但break是退出循环，而continue是转而执行下一次循环。

2.5、函数数组

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

创建函数
（1）函数声明
语法： function functionName（参数1,参数2）{
函数体
}
（2）函数表达式
语法： var functionName=function(参数1，参数2){
函数体
}
这种形式看起来像是常规的变量赋值语句，即创建一个函数并将他赋值给变量functionName。这种情况下创建的函数叫匿名函数，因为function关键字后面没有标识符。

调用
函数定义好后，是不能自动执行的，需要调用它,直接在需要的位置写函数名。
A.在script标签中函数名（）
B.在Html标签中通过事件调用 οnclick=函数名（）

参数
形参 在定义函数的时候，函数括号中定义的变量叫做形参。用来接受实参的。
实参 调用函数的时候，在括号中传入的变量或值叫做实参。用于传递给形参。
· 形参就是函数定义时候用的，实参是在函数调用时候用的。

return语句
通过return 语句给函数一个返回值，停止并且跳出当前的函数
return语句的用法
– 在return 语句后面的函数体内所有内容都不会输出。
– 在函数体内可以有多个return语句，但是只会执行一个。(判断语句)
return语句的返回值
– 返回值可以是任何的数据类型
– 只能返回一个返回值。
– 如果函数没有返回值，那么这个函数的值就会自动的赋值为undefined

continue语句
continue语句的作用是忽略其后的语句并结束此轮循环和开始新的一轮循环。

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

2.6、数组

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

数组创建
· var arr=[];
· var arr1=new Array();

数组元素的读写
数组名[索引值] 访问
数组名[索引值]=值 修改
索引值从0开始

· 通过length属性可以获取数组的长度

数组中常用的方法
Push() 在数组的末尾添加一个或者多个元素，返回新数组的长度
Unshift() 在数组的开头添加一个或者多个元素，返回新数组的长度
Pop() 删除数组的最后一个元素返回删除的元素
Shift() 删除数组的第一个元素返回删除的元素
Reverse 将数组中元素的顺序颠倒返回逆序的数组。
join()方法将数组中所有元素都转化为字符串并且连接在一起，返回最后生成的字符串。
Sort（）将数组中的元素进行排序，并且返回排序后的数组。
concat() 方法合并两个数组，并返回合并后的新数组。
slice()方法返回指定数组的一个片段或子数组，它的两个参数分别指定片段的开始和结束的位置（不 包含该元素）。
splice() 方法用于插入、删除或替换数组的元素。并返回删除的部分数组。

2.7、字符串与Math对象

字符串创建方式
（1）var str=”hello world”
（2）var str=String（“hello world”）
（3）var str=new String（“hello world”） 返回的是String对象

·length 长度属性,返回字符串的长度

字符串的方法
charAt() 返回指定位置的字符
字符串中第一个字符的下标是0，如果参数index不在0与string.length之间，则返回一个空字符串
charCodeAt( )返回指定位置的字符串的Unicode编码。
fromCharCode() 接收一个指定的Unicode值，返回一个字符串。
replace() 用于在字符串中用一些字符替换另外一些字符（首次出现的字符）
search() 检索字符串中指定的子字符串在字符串中的起始位置
match() 在字符串中检索指定的值，返回的是一个数组

截取字符串的三种方法：
slice(start,end) 从start开始，到end结束
substr(start,length) 从start下标开始的指定书目的字符
substring(start,end)介于两个下标之间的字符，参数能为负数

字符串—数组
split() 字符串分割成字符串数组
字符串连接
concat() 连接两个或多个字符串
indexOf() 返回某个指定的字符串在字符串中首次出现的位置
lastIndexOf() 返回指定的字符串最后出现的位置。
toLowerCase（） 转为小写
toUpperCase( ) 转为大写

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

2.8、BOM对象

什么是BOM？
BOM：浏览器对象模型
访问和操作浏览器窗口的模型称为浏览器对象模型BOM；
描述了浏览器和用户交互的接口和方法
核心对象是window

BOM的核心对象
Window对象、location对象、Screen对象、navigator对象、History对象

Window： 窗口对象（窗口的宽高、inner、outer）
History： 从窗口被打开起的历史记录
Location : 当前窗口中加载的文档有关的信息
Navigator : 浏览器本身的信息，浏览器的版本、名称等等
Screen : 有关客户端屏幕的信息

Window的三个系统对话框
alert()：弹出框(window对象是全局的，加不加window都可使用)
prompt() ：输入框
confirm()：确认框

2.9、日期对象

日期对象的创建
var date = new Date();
var d = new Date(“2019”);
Js原生日期对象，new 构造函数生成一个日期对象

日期对象转字符串的方法
toString(); 转换为字符串
valueOf();转换为字符串
toLocaleString(); 转换为本地时间
ToLocaleDateString();
toLocaleTimeString

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

日期对象的设置方法
setTime() 以毫秒数设置Date对象
setFullYear() 设置年份
setMonth() 设置月份
setDate() 设置一个月的某一天
setHours() 设置时间的小时字段
SetMinutes() 设置时间的分钟字段
SetSeconds(); 设置时间的秒字段

2.10、DOM对象

什么是DOM
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
DOM是“Document Object Model”（文档对象模型）的首字母缩写。
· 核心是document对象

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

document对象的属性和方法

（1）获取元素的方法（4种）
getElementById(idname) 返回拥有指定ID的第一个对象的引用
getElementsByTagName(tagname) 返回带有指定标签名的对象的集合
getElementsByName（name） 返回带有指定name名称的对象的集合
getElementsByClassName() 返回带有指定class名称的对象的集合

（2）输出内容到页面的方法（2种）
document.write()
document.writeln()

DOM模型（model）
HTML文档中的所有结点组成了一个文档树模型，HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。这些节点相互联系，相互影响，构成一个完整的页面，我们称之为模型。

节点
HTML文档中的每个成分都是一个节点。

·整个文档是一个文档节点
·每个HTML标签是一个元素节点
·包含在HTML元素中的文本是文本节点
·每一个HTML属性是一个属性节点
·注释属于注释节点

2.11、事件流 事件绑定

事件的概念
事件是文档或者浏览器窗口中发生的，特定的交互瞬间。
DOM的事件流：
DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

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

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

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

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

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

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

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

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

2.12、事件委派

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

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

事件委派的优点
（1）提高性能
（2）动态添加元素还会有之前的事件

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

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

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

2.13、event对象

event对象
event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！

事件句柄

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

鼠标 / 键盘属性
altKey： 返回当事件被触发时，“ALT” 是否被按下。
button： 返回当事件被触发时，哪个鼠标按钮被点击。
clientX： 返回当事件被触发时，鼠标指针的水平坐标。
clientY： 返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey： 返回当事件被触发时，“CTRL” 键是否被按下。
metaKey： 返回当事件被触发时，“meta” 键是否被按下。
relatedTarget： 返回与事件的目标节点相关的节点。
screenX： 返回当某个事件被触发时，鼠标指针的水平坐标。
screenY： 返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey： 返回当事件被触发时，“SHIFT” 键是否被按下。

IE属性
cancelBubble： 如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
fromElement： 对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。
keyCode： 对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
offsetX,offsetY： 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue： 如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。
srcElement： 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement： 对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。
x,y： 事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。

标准 Event 属性
bubbles： 返回布尔值，指示事件是否是起泡事件类型。
cancelable： 返回布尔值，指示事件是否可拥可取消的默认动作。
currentTarget： 返回其事件监听器触发该事件的元素。
eventPhase： 返回事件传播的当前阶段。
target： 返回触发此事件的元素（事件的目标节点）。
timeStamp： 返回事件生成的日期和时间。
type： 返回当前 Event 对象表示的事件的名称。

标准 Event 方法
下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：

initEvent()： 初始化新创建的 Event 对象的属性。
preventDefault()： 通知浏览器不要执行与事件关联的默认动作。
stopPropagation()： 不再派发事件。

上面有2 级 DOM 事件标准定义的方法，IE 的事件模型不支持这些方法。

2.14、拓展

JavaScript预解析顺序
一、<script></script>块依次解析。
二、解析代码运行的环境。
三、对标识符(关键字)(var function )进行解析，解析到相应的环境下。
四、如果还有<script></script>块再按照上面的步骤依次解析。