Web前端-JavaScript
目录
1 概述
2 HTML嵌入JS代码三种方式
2.1 第一种方式
2.2 第二种方式
2.3 第三种方式
3 变量
4 数据类型
4.1 概述
4.2 Number数据类型
4.3 几个值得注意的函数
4.4 Boolean数据类型
4.5 String数据类型
4.6 关于Object类型
4.7 NaN、undefined、null的区别
4 函数
5 事件
5.1 JS中有哪些常用的事件
5.2 重点说说onload事件
5.3 捕捉回车键
6 DOM编程
6.1 根据id获取元素
6.2 获取文本框value
6.3 innerHTML、innerText
7 正则表达式
8 表单验证
9 复选框全选与取消全选
10 周期函数
11 BOM相关
12 JSON
1 概述
JavaScript是一种脚本语言，缩写为JS
HTML、CSS、JS他们的关系?
HTML是主体。
CSS是用来修饰HIML的。
JS是用来操作HTML和CSS的,修改HTML中的元素,修改CSS样式,达到网页的动态效果。
JavaScript包含三大块：
- ECMAScript：JS的核心语法（ES规范/ECMA-262标准）
- DOM：Document Object Model（文档对象模型：对网页当中的节点进行增删该的过程。）HTML文档被当做一颗DOM树来看待，var domObj = document.getElementById("id");
- BOM:浏览器对象模型，关闭浏览器窗口、打开一个新的窗口、后退、前进、浏览器地址栏上的地址等，都是BOM编程。
DOM和BOM的区别和联系：BOM的顶级对象是：window；DOM的顶级对象是：document。实际上BOM是包含DOM的。
2 HTML嵌入JS代码三种方式
2.1 第一种方式
javascript是一种基于事件驱动型的编程语言，一 般都是依靠事件来触发JS代码执行的。
例如:鼠标单击事件click。鼠标双击事件: dblclick。获取焦点事件: focus。失去焦点事件: blur
在JS当中任何一个事件都有对应的一个事件句柄。所有的事件句柄都是在事件名称前面添加on，例如:
click对应的事件句柄onclick
dblclick对应的事件句柄ondblclick
focus对应的事件句柄是: onfocus
blur对应的事件句柄是: onblur
注意:所有的事件句柄都是以“标签的属性”形式存在。
onclick后面的js代码什么时候执行呢?
不会在页面打开的时候执行，只有当鼠标单击click事件发生之后才会执行这个JS代码。
在JS中有一个内置的隐含对象:window，全部小写。window代表的是浏览器窗口对象。可以直接拿来使用。window对象有一个alert方法/函数，他可以完成弹窗操作。
2.2 第二种方式
脚本块，没有位置限制，没有个数限制。
在script标签内部的代码会遵循自上而下的顺序依次逐行执行，并且在script标签内部的JS代码会在页面打开的时候执行,并不需要事件的发生.
2.3 第三种方式
独立创建一个js文件然后引入到html文件中
js文件：
alert("hello")
alert("hello1")
alert("hello2")html文件：
3 变量
JS定义变量使用var定义，变量可以赋任何值。
变量没有赋值的时候默认值是undefined，undefined是JS中的一个具体存在的值.
以下的这行代码表示将数据输出到控制台.上. (控制台怎么调出来? F12)
全局变量和局部变量
这个学过java也很好理解，在函数定义一个变量那自然就是局部变量，在函数之外自然就是全局变量。但是JS有个诡异的语法，因为定义变量不一定需要用var定义，直接这样username = "zahngsan";就可以，当我们在函数中这样定义的时候，这时变量就是全局变量了。
4 数据类型
4.1 概述
虽然JS中的变量声明不需要指定数据类型，但是在赋值，每一个数据还是有类型的。JS中包含哪些数据类型？
- 原始类型：Undefined、Number、String、Boolean、Null
- 引用类型:Object以及Object的子类
- 在ES6之前是这六种，在ES6以及之后还有一个Symbol类型，一共七种
问题来了，JS中是不区分数据类型的，按理说我们往一个函数传任何值都可以，但是当我们就想往函数中传入的是数字该怎么办？
JS中有一个运算符叫做typeof，这个运算符可以在程序的运行阶段动态的获取变量的数据类型，typeof的语法格式：typeof 变量名
typeof运算符的运算结果是以下6个字符串之一（全部小写）："undefined"、"number"、"string"、"boolean"、"object"、"function"
如下就可以做到指定别人传什么内容：
4.2 Number数据类型
当两个变量进行运算，结果不是数字的时候结果为NaN；数字和字符串相加还是字符串，这和java一样；除数为0结果为Infinity；除不尽会保留好多位小数，合理。
4.3 几个值得注意的函数
isNaN函数
它的意思是，如果不是数字则返回true（狗吧设计，绕死人），使用它也可以进行数字限制如下：
function sum(a,b){
if(isNaN(a) || isNaN(b)){
//运行到这a或b一定有不是数字的，因为不是数字是true，
//只有都是数字为false才不会运行到这
alert("必须都是数字")
return;
}
return a+b
}
alert(sum(1,"nih"))parseInt函数：转为int类型（向下取整） parseFloat函数：转为浮点数 Math.ceil函数：向上取整
alert(parseInt(3.14))
alert(parseInt("3.999"))
alert(parseFloat("3.24"))
alert(Math.ceil(3.14))
4.4 Boolean数据类型
它可以将内容转为boolean也就是true或者false，那么什么内容转为true什么内容转为false呢？一般是有就为true，没有就为false，如下：注意，当使用if语句或者while语句，可以直接在里面写数字字符串之类的，它会自动转为boolean类型
alert(Boolean(3.14))//true
alert(Boolean(0))//false
alert(Boolean("nihao"))//true
alert(Boolean(""))//false
alert(Boolean(null))//false
alert(Boolean(undefined))//false
alert(Boolean(NaN))//false
alert(Boolean(Infinity))//true4.5 String数据类型
注意一下string有两种属性一种为传统String，一种为Object；length可以测量字符串长度；
var s = new String();
var s2 = "你好啊"
alert(typeof s)//object
alert(typeof s2)//string
alert(s2.length) //3注意区分substring和substr方法的区别：
alert("abcdefg".substr(2,4))//cdef
alert("abcdefg".substring(2,4))//cdsubstr是输出从下标为2的开始输出四个下标，而substring是从下标为2的输出到下标为4的
4.6 关于Object类型
Object的定义和函数的定义一模一样，只不过根据调用方式来判断是函数还是类，如下：
function student(){
alert("student...")
}
//这样就是调用函数
student();
//这样就是创建类
var stu = new student();JS中new对象和java不能说一模一样只能说照搬过来，不过属性不用在外面定义，直接用即可，如下：
function student(name,age){
/* this表示当前对象 */
this.name = name;
this.age = age;
}
/* new 一个新的对象 */
var stu1 = new student("王德发",34);
alert(stu1.name)
alert(stu1.age)prototype属性可以用来给任意一个类型扩展函数：
function product(name,price){
this.name = name;
this.price = price;
this.getName = function(){
return name;
}
}
var xigua = new product("西瓜",4.0);
alert(xigua.name)
alert(xigua.getName())
//给product类扩展函数
product.prototype.getPrice = function(){
return this.price
}
alert(xigua.getPrice())
//给字符串扩展函数
String.prototype.suiyi = function(){
alert("给string类型扩展一个函数叫suiyi")
}
"abc".suiyi();4.7 NaN、undefined、null的区别
alert(typeof null)//object
alert(typeof undefined)//undefined
alert(typeof NaN)//number
alert(null == undefined)//true
alert(null == NaN)//false
alert(NaN == undefined)//false值得注意的是JS中有“===”这种运算符，它的意思是判断值相等并且类型相等才会返回true
4 函数
如果定义多个函数，名称相同，后面定义的会覆盖前面定义的
5 事件
5.1 JS中有哪些常用的事件
( 1 ) blur失去焦点
( 2 ) change下拉列表选中项改变，或文本框内容改变
( 3 ) click鼠标单击
( 4 ) dblclick鼠标双击
( 5 ) focus获得焦点，
(6)keydown键盘按下
( 7 ) keyup键盘弹起
( 8 ) load页面加载完毕
( 9 ) mousedown鼠标按下
(10)mouseover鼠标经过
( 11 ) mousemove鼠标移动
( 12 ) mouseout鼠标离开
( 13 ) mTouseup鼠标弹起
( 14 ) reset表单重置
( 15 ) select文本被选定
( 16) submit表单提交
change事件：
dbclick事件：
focus事件：
keydown和keyup事件：
mouse相关事件：
5.2 重点说说onload事件
因为JS代码是自上而下执行，假如有这样的代码：
在上面获取id，但是id在下面，这样是获取不到的，那怎么解决呢，将input语句放到上面即可，但是这样又太呆了，这时就可以使用onload事件，它的作用是整个页面加载完毕才会执行，改造如下：
onload后面跟函数，也就是说onload加载完成才会继续执行后面函数，也就是说整个页面加载完成后面的函数才会执行，以后我们都按这个格式写。
5.3 捕捉回车键
JS中input标签有个属性onkeydown它可以检测到键盘，也就是说只要按动键盘任意一个键，它就会检测到。而每一个键都是有对应编号的，回车对应的是13，有个属性keyCode可以检测到键盘每个键的值，这样就能判断我按得键是什么键了：
6 DOM编程
6.1 根据id获取元素
6.2 获取文本框value
原理就是先获取到一个文本框的id，然后就可以获取到它的value了，我们还可以修改value：
这样我们可以做出这样一个效果：两个文本框，在一个文本框输入内容，点击按钮，让这个文本框的内容转移到另一个文本框：
文本框1：
文本框2：6.3 innerHTML、innerText
innerHTML有两个作用：一是可以拿出元素里的内容，二是可以给元素赋值
innerText和innerHTML的区别是，Text显示的是纯文本，不管你输入的是什么，都将原样显示，而HTML会识别出是否是HTML语言，会做相应显示
演示：
7 正则表达式
建议直接看网站上写好的：正则表达式30分钟入门教程
常见的正则表达式符号：
常用的元字符：
| . | 匹配除换行符以外的任意字符 |
| \w | 匹配字母或数字或下划线或汉字 |
| \s | 匹配任意的空白符 |
| \d | 匹配数字 |
| \b | 匹配单词的开始或结束 |
| ^ | 匹配字符串的开始 |
| $ | 匹配字符串的结束 |
常用的限定符：
| 代码/语法 | 说明 |
|---|---|
| * | 重复零次或更多次 |
| + | 重复一次或更多次 |
| ? | 重复零次或一次 |
| {n} | 重复n次 |
| {n,} | 重复n次或更多次 |
| {n,m} | 重复n到m次 |
常用的反义代码：
| 代码/语法 | 说明 |
|---|---|
| \W | 匹配任意不是字母，数字，下划线，汉字的字符 |
| \S | 匹配任意不是空白符的字符 |
| \D | 匹配任意非数字的字符 |
| \B | 匹配不是单词开头或结束的位置 |
| [^x] | 匹配除了x以外的任意字符 |
| [^aeiou] | 匹配除了aeiou这几个字母以外的任意字符 |
正则表达式中的小括号优先级较高
[1-9]表示1到9的任意1个数字（次数一次）
[A-Za-z0-9]表示A-Za-z0-9的任意一个字符
简单的正则表达式要会写：
QQ号：^[1-9][0-9]{4,}$
在JS中创建正则表达式在正则表达式前后加个“/”即可，然后得到表达式后使用test()方法验证。
验证邮箱是否填写正确:
补充trim函数，它可以去掉字符串前后的所有空白
8 表单验证
要求如下：
注意：表单有个函数叫submit()，也就是说，使用表单可以直接提交表单，不用input标签中的submit也可以，这点很重要，因为我们以后就不用input标签提交了，经典白学，代码如下：
这样的表单验证肯是不完善的，可以继续改进，但也挺不错了。
9 复选框全选与取消全选
抽烟
喝酒
烫头
蹦迪
睡觉
10 周期函数
11 BOM相关
window.location可以获取到当前页面的地址栏地址，当然也可以随意修改这个地址，接着就会跳转到对应页面：
history.back()可以实现后退，不过只能实现当前页面，如果跳转到新的页面自然无法后退，就和浏览器的左上角的后退功能一样：
进入一个页面 我是新页面
window.open("url")可以打开一个页面；window.alert('")会弹出消息框，window.confirm("")也是弹出消息框，不过它可以进行确认和取消操作，确认返回true取消返回false：
以下代码可以用来将一个窗口转为顶级窗口，什么意思呢，就是这个页面可能是嵌在一个页面里的，我想让它出来并且是在最上面的页面：
if(window.top != window.self){
window.top.location = window.self.location
}12 JSON
什么是JSON，有什么用？
JavaScript Object Notation（JavaScript对象标记），是一种数据交换格式。比如系统A和系统B交换格式可以使用JSON，它的特点是体积小，易解析
在实际开发中有两种交换格式，其一是JSON，其二是XML。XML体积较大，解析麻烦，但是它语法严谨，通常银行相关业务使用XML。
JSON语法格式非常简单，如下：JSON就是一种对象
//创建一个student对象
var studentObj = {
"sno":"110",
"name":"王德发",
"sex":"男"
}
alert(studentObj.name)
//创建student数组
var students = [
{"sno":"110","sname":"张麻子","sex":"男"},
{"sno":"120","sname":"马邦德","sex":"男"},
{"sno":"114","sname":"黄四郎","sex":"男"}
]
for(var i = 0;i < students.length ;i++){
var stuObj = students[i]
alert(stuObj.sname)
}既然JSON是一种对象，当然也可以像java那样套娃
eval函数：
它可以将字符串当做一段JS代码解析并执行
window.eval("var i = 100")
alert(i)
//上面两行就 相当于下面两行
var j = 100;
alert(j)那么这玩意到底有什么用呢？当我们使用java连接数据库得到数据并将数据拼接成JSON格式的“字符串”，将JSON格式字符串响应到浏览器。也就是说，java响应到浏览器的上的仅仅是字符串，还不是JSON对象。可以用eval函数将JSON格式的字符串转为JSON对象
//java程序发来的JSON格式的字符串,要将双引号转义，因为html双引号里面不能再有双引号
var fromJava = "{\"sno\":\"110\",\"sname\":\"张麻子\",\"sex\":\"男\"}"
window.eval("var jsonObj =" + fromJava )
alert(jsonObj.sno + "," + jsonObj.sname)访问JSON还有另一种方式：
alert(jsonObj["sex"])在JS中[]和{}有啥区别，中括号是数组，大括号是JSON
下面模拟如何将java获取到的数据显示到浏览器上
员工编号
员工姓名
员工工资
总共0条数据