【JAVA-WEB】JavaScript

前言：在Java或者类java的学习中，需要积累对象的属性以及方法。这对于如何使用JAVA对象使之为己所用是很有帮助的，尤其对于初学JAVA或者刚开始接触编程的小菜鸟来说是很重要的。毕竟在初学阶段我们不生产方法，只是方法的搬运工。

概述

网页脚本语言，由浏览器解释执行；
目的：校验表单数据，页面特效；嵌入HTML实现
嵌入HTML的方式：可以放在任何位置
方式一：内部，写在<script type””>
方式二：外部，JS单独写在一个文件被引用

定义变量

基本数据类型

原始数据类型（5种）

数字型Number、字符串型String、未定义类型undefuned、布尔型Boolean、空Null
查看原始数据类型：alert(typeof bianliangming);
NaN不是数字的数字类型

变量

JS是一门弱类型语言：定义变量时，不需要规定其数据类型。
定义变量的关键字：var
Es6中定义常量const

全局变量与局部变量

全局对象

函数体内的变量前不加var则是全局变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

局部对象

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。

全局作用域与函数作用域

全局变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

运算符

算术运算符、逻辑运算符、比较运算符、位运算符、三目运算符、赋值运算符
一元运算符： ++ – +(正) -(负)
比较运算符： > < >= <=
逻辑运算符：&& || !
算术运算符：+ - * / %
赋值运算符：= += …
三元运算符： 表达式 ? 值1 : 值2;
算术运算符：NaN
其他运算符：void拦截跳转页面void（跳转到新的执行）
语法格式：herf=”javascript:void()”
Delete运算符：删除对象中的属性，不能删除未定义的属性

数据类型的自动转换

当运算符期望值与实际值不同时，会发生数据类型转换；

NAN特性

任何类型与NaN的运算结果均为NaN
NaN参与的运算，结果都为fasle，除了(!=)
NaN 参与数学运算 结果都为NaN

其他类型转为number

字符串转成数字，可以转时会转成数字类型，否则转换成NaN
boolean： true为1 false 为0

其他类型转boolean

number：非0为true，0和NaN为false，
string: 除了空字符串("")，其他都是true
null 和 undefined:转为false
对象:所有对象都为true
字符串比较小大：如果长度一致按照字典顺序比较 长度不一致 那谁的长度长那就谁大
== 与===的区别
== ：会发生自动类型转换
=== ：会比较类型

对象

JS是一门基于对象的语言
基于对象：不能由原生的对象派生出新的对象。换句话说，不存在继承关系

关键字

保留关键字

Abstract\boolean\byte\char\conat\defualt\delete\

内置对象

带有属性和方法的特殊数据类型
Number\String\Date\Arrary\Boolean\Math\RegExp\Global

String

创建语法一：new String();
创建语法二：String();
创建语法三：var s=“”；
属性：length长度
方法：

CharAt();返回在指定位置的字符
charCodeAt();返回在指定的位置的字符的Unicode编码
concat();连接字符串
indexOf();检索字符串
lastInexOf();从后向前搜素字符串
substring() 提取字符串中两个指定的索引号之间的字符。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
mach();匹配正则表达式
replace();替换与正则表达式匹配的子串
split() 把字符串分割为字符串数组。
slice();提取片段，负值表示从后往前数
trim():去除字符串两端的空格
ES6拼串:string${var}${var}
node.JS封装了JS语言，可供前端人员做后台开发

Number

创建对象方式一：var name=new Number(100);
创建对象方式二**：var name=Number()；**
方法：

console();将数字转成字符串
toFixed;把数字转换为字符串，指定小数点的精确度，
toString() 把数字类型转成字符串类型
toPrecision() 把数字格式化为指定的长度。也就是小数后面保留几位返回字符串类型数字

Date日期

创建对象方式：var date=new Date();
方法：

toLocaleDateString()；将日期格式改为年/月/日 上午（下午）时：分：秒
toLocaleFormat(预设格式);仅支持火狐浏览器
getTime();获取从1970-01-0100:00:00当到前毫秒值

Math

该对象不需要创建 直接对象名点上方法
方法：

Math.random()；随机产生0----1 之间的随机数
Math.round(2.36); 对小数进行四舍五入 得到一个整数
Math.min(15,25); 取最小值
Math.max(15,25);取最大值
Math. abs(-2) 返回数的绝对值。
Math.floor(2.6);向下取整
Math.ceil(3.82);向下取整

数组对象

JS5没有集合概念（ES6有），但是长度可变，可充当集合
创建数组对象：arr=new Array(，，，);arr=[，，，]
属性：size,length
数组中没有角标越界，取不到时会返回undefined
数组中可以存储多种数据类型
方法：

concat();数组拼接
Join(拼接符)将数组一特定的格式转成字符串;
Pop();删除数组中最后一个元素
Push();向原数组末尾增加元素，可以一次添加多个
Reverse();反转数组
Sort();按ASCll码表排序
Sort(比较器—就是一个function);按照元素大小排列，需传一个比较器
Splice(要删除的索引开始位置，要删除的个数，添加的新元素从删除处开始[
可选]);

（ES6新增方法）

copyWithin(复制指定位置，起始复制位置，复制个数);
entries();返回一个数组的迭代对象
every();检测数组是否都符合条件
fill();
find();查找数，返回值
forEach();
from()==toCharArry();
forEach();
includes();==contains();
keys();从数组中创建一个包含数组的键的迭代对象
unshift();往前增加数据
isArray();判断是否为数组Arrary.isArrary(目标数组)；
map();指定函数处理数组每个元素，返回新数组
filter();过滤，返回符合条件的所有元素的数组，根据返回值过滤
reduce(起始值，元素);将数组元素计算为一个值
some()；检测数组中是否有符合条件的元素

ES6箭头语法：简写匿名函数（入表达式）指向父作用域的this

Boolean对象

函数

“函数”

Function(*****): 代表函数
JS核心，等同于Java中的类与方法
定义函数的语法一：new Function(‘形参’，‘方法体’);（用引号引起）；调用fun();
定义函数的语法二：function(canshu,…){方法体}参数无需数据类型；调用fun();
定义函数的语法三：funcation fangfaming(canshu ,…){fangfati }；调用fangfaming();
属性： length：形参的个数
使用： 函数名称(实参列表);
特点：
1.函数的调用，只与函数名称有关，与实参列表无关
2.函数内部有内置对象 arguments 封装实参数组

返回值

可以不用定义是否有返回值；也无需明确的返回类型
返回数据用return；

函数重载

同Java

参数

JS中传参无限制(小于25个)，按需拿取数据
Hanshu.length:获取形参的个数
Arguaments:参数对象，在函数内部的隐藏对象，接受函数的全部实参，实质为数组。
形参默认值，在定义出给形参赋值，调用时有传参就用传过来的，无传参是用默认值（ES6）
输出语句：document.writre();在页面上打印信息
**闭包closure:**在函数中可以访问到局部变量，利用返回值；
函数的嵌套会使闭包趋于复杂
Console.Log在控制台输出

全局方法对象

Global
特点：方法可以直接调用
方法：isNaN判断一个值是否是NaN
parseFloat();从第一个字符开始判断，遇到不是数字字符的位置就结束掉
从左向右依次查找，每一位是否是数字，直到遇到不是数字为止。将前边的值转为数字

RegExp

正则表达式对象定义方式一：var regx=/正则表达式/模式；（i不区分大小写的模式，g全文匹配）
正则表达式对象定义方式二：var regx=new RegExp(“正则表达式”，“模式“);
方法：

test();JS中行号敏感 需加开头^和结尾$，匹配
exec();截取符合条件的数据，需要全文匹配，否则每次都会从头开始匹配
replace();替换与正则表达式匹配的子串，替换选择全文匹配
split();把字符串分割为字符数组
search(正则或者字符串);==indexof();
match();找指定的值或正则，返回找到的串

两个思想

BOM

Browser Object Model浏览器对象模型，将浏览器的各个组成部分看作对象，当HTML文档加载进浏览器之后，浏览器就会创建这些对象
对象分类：

window对象
location地址栏对象
history历史记录对象
navigator浏览器对象
scream屏幕对象
availHeight 获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。 availWidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。 width 获取屏幕的水平分辨率。

Window 对象

**格式：**window.方法名（）；window可以省略
方法：

• 弹框
  alert();弹框
  Confirm()带有确认和取消按钮的弹框
  prompt(‘要显示的话’，默认文字) 显示可提示用户输入的对话框。

• 定时器
  SetInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。 循环执行
  clearInterval() 取消由 setInterval() 设置的 timeout。
  setTimeout() 在指定的毫秒数后调用函数或计算表达式。 只执行一次（ 参数：参数1：字符串(js语句)或者 函数对象、 参数2：毫秒值。）
  clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

• 打开与关闭
  open():打开新窗口（ 参数：打开目标的URL、返回值：返回新打开窗口的window引用）
  close():关闭窗口* 谁调用我 ， 我关谁

获取其他对象的属性：

history ：对 History 对象的只读引用。
location ：用于窗口或框架的 Location 对象。
Navigator 对 Navigator 对象的只读引用。
Screen 对 Screen 对象的只读引用。
ocument：对 Document 对象的只读引用。

Location对象

Location：地址栏对象、获取方式：可以用window对象中的属性获取
属性：

href：设置或获取当前的URL
history 对象
History：历史记录对象、获取方式：可以用window对象中的属性获取

**方法：**go:1:前进-1：后退

DOM

在JS部分编写代码，可以实现动态操作body部分
DOM: Document Objec Modle 文档对象模型:将HTML的各个组成部分看做一个对象
DOM组成部分:

Element 标签对象
Attribute 属性对象
Comment 注释对象
Text 文本对象
document 整个的HTML文档对象
Node:节点对象、
Doucument 文档对象

Document:window.document获取文档对象

属性：

body可以获取body标签对象
title 属性获取文档标题
lastModifile 文档最后一次修改时间
url 地址栏的地址

通过文档对象获取标签对象的几种方式：

document.body获取body标签
获取element对象：

getElementById();通过ID属性获取唯一的元素
getElementByTagment();通过标签名获取元素对象数组
getElementByName();通过name属性值获取元素对象数组
getElementByClassName();通过class属性值获取元素对象数组
getElementByName();针对表单标签的获取元素的方法，返回数组

动态创建元素：

.createElement();创建标签对象
.createTextNode();创建文本对象
.createAttribute();创建属性对象
.createComment();设置一行注释

属性：

A.appendChild(B);将B放入A中
A. setAttributeNode(B)；设置属性以及属性的值
.innerHTML;获取两个标签之间的内容，包括子标签
.innerText;获取两个标签之间的内容，只获取文本
.textContent;等同innerText
.style;给标签对象设置样式，样式中有-的需要去掉且首字母大写拼接在其后
.textCSS

删除元素：

A.removeChild(B);将A中的B删除
A．remove();删除A

获取属性：

getAttribute();获取属性值
. getAttributeNode();获取属性的对象
在原有的属性设置上再添加属性，使用+=

DOM树 父节点子节点所构成了一个DOM树

事件

概念：事件源，事件名，事件关联（2种方式），事件处理
事件的关联方式一：事件=“处理函数”
事件关联方式二：对象.事件.处理函数
Tips:善用this
给所有某对象关联事件：获得数组对象，遍历数组

JS中注册监听的方式

监听器：一个对象。当事件源上发生了事件，就执行对象中的某些方法
注册监听：将监听器绑定到事件源上，监听事件的发生
方式一：定义标签时添加事件
<标签 事件名=”函数”>
**方式二：**获取元素对象，动态添加对象
Document.getElementByXXX(“名字”)获取元素对象
元素对象.事件名=function（）{}

JS中常见事件

• 焦点事件：（针对表单验证）
  获取焦点：onfocus
  失去标点:onblur

• 点击事件：
  单击onclick
  双击ondblclick

• 键盘事件：
  某个键被按下onkeydown
  按下去的键被松开onkeyup
  某个键按下松开之后onkeypress

• 鼠标事件：
  鼠标按键按下onmousedown
  鼠标按键松开onmouseup
  鼠标移上onmouseover
  鼠标移开onmouseout
  鼠标移动onmousemove

• 表单事件：
  点击确认按钮onsubmit
  点击重置按钮onreset

• 加载与卸载事件：
  完成加载onload
  用户退出页面onunload
  其他事件：
  针对表单：域的内容被改变onchange
  文本被选中onselect

事件对象

Event由浏览器创建，在调用事件处理函数时传递给处理函数
属性：.keyCode获取按下键码
.witch获取鼠标的左中右键
.target获取实际触发该事件的元素对象
.currentTarget返回绑定触发事件监听器的元素,
Target与currentTarget的区别
Target获取的是实际触发项目
currentTarget获取的是绑定的，在层嵌套中存在
节点对象
节点的层叠关系：父子关系、兄弟节点
节点的类型：标签节点、注释节点、文本节点
节点对象的组成：
nodeType 节点类型 可返回节点的类型
nodeName 节点名称 属性含有某个节点的名称。
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

nodeValue	节点值
	对于文本节点，nodeValue 属性是所包含的文本。
	对于属性节点，nodeValue 属性是属性值。
	对于注释节点，nodeValue 属性注释内容。
	nodeValue 属性对于文档节点和元素节点是不可用的。

通过节点关系查找节点
document.all 获取文档中所有的节点
从一个节点出发开始查找：
parentNode 获取当前元素的父节点。被用来改变文档的结构。
childNodes 获取当前元素的所有下一级子元素。
firstChild 获取当前节点的第一个子节点。最普遍的用法是访问某个元素的文本：
lastChild 获取当前节点的最后一个子节点。
nextSibling 获取当前节点的下一个节点。（兄节点）
previousSibling 获取当前节点的上一个节点。（弟节点）
获取元素对象的属性
parentElement 获取当前元素的父元素对象(不会获取到空文本,或者注释)
firstElementChild 获取父元素的第一个标签对象(不会获取到空文本,或者注释)
lastElementChild 获取父亲元素的最后一个标签对象(不会获取到空文本,或者注释)
previousElementSibling; 获取上一个兄弟元素对象(不会获取到空文本,或者注释)
nextElementSibling 获取下一个兄弟元素对象(不会获取到空文本,或者注释)
自定义函数

事件的冒泡现象

事件冒泡：多个元素嵌套，给每个元素都绑定了事件时，在触发最里边的事件时
事件冒泡:当元素有了嵌套关系后,我们点击了最里层的元素后,外层的事件也会触发
可以用事件对象里面的方法来阻止冒泡行为
stopPropagation() 不再派发事件。/阻止冒泡行为
preventDefault() 通知浏览器不要执行与事件关联的默认动作。阻止元素自带的默认行为