前言
JSP和JS的区别
1、JSP全称是java server page JS全称是javaScript
2、最主要的区别是运行位置不同。 JSP运行在后台服务器上，混合在HTML中的java程序段用于控制HTML的动态生成，并且通常负责调用后台数据库中的数据，形成能够根据使用情况的变化的，具有丰富数据交互效果的页面。 JavaScript 通常是运行在前台，即运行于用户浏览器的，通常不需要服务器的后台支持（AJAX交互例外），混合在HTML中的JavaScript脚本程序直接被浏览器解释执行，以提高页面的美观性和UI操作响应速度为基本目标。
3、JSP在HTML中用<%%>里面实现。
JS在html中用实现
学习路径
JavaScript包括三块：ECMAScript,DOM,BOM
ECMAScipt:js的核心语法（ES规范/ECMA-262标准）
DOM:Domcument Object Model（文档对象模型：对网页当中的节点进行增删改的过程。）HTML文档被当成你一课DOM树来看待。
var domObj = document.getElementById("id");BOM: Browser Object Model（浏览器对象模型）。关闭浏览器窗口，打开一个新的浏览器窗口，后退，前进，浏览器地址栏上的地址等，都是BOM编程。
一 HTML嵌入js的三种方式
1，第一种
1，要实现的功能：用户点击以下按钮，弹出消息框。
2，js是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。 在js中有很多事件，其中有一个事件叫做：:鼠标单击，单词: click。并且任何事件都会对应一个事件句柄做:onclick。【注意:事件和事件句柄的区别是:事件句柄是在事件单词前添加一个on。】，而事件句柄是以HTM标签的属性存在的。
3，οnclick="js代码"，执行原理是什么?
页面打开的时候，js代码并不会执行，只是把这段Js代码注册到按钮的click事件上了。等这个按钮发生click事件之后，注册在onclick后面的js代码会被浏览器自动调用。
4，怎么使用Js代码弹出消息框?
在Js中有一个内置的对象叫做window，全部小写，可以直接拿来使用，window代表的是浏览器对象。window对象有一个函数叫做:alert，用法是: window.alert("消息");这样就可以弹窗了。
5，js中的字符串可以使用双引号，也可以使用单引号。
6，js中的一条语句结束之后可以使用分号”;“，也可以不用
7，"window."可以省略
< input type="button" value="hello" onclick="window.alert('hello js')" />2，第二种（脚本块）
- JavaScript的脚本块在一个页面可以多次出现，没有要求。
- JavaScript的脚本块出现位置也没有要求，随意。
<script type="text/javascript">
window.alert("hello ...");
</script>3，第三种（引入js文件）
<script type="text/javascript" src="001.js"></script>二 变量
1, 变量的声明与赋值
//怎么声明变量
var 变量名;
//怎么赋值？
变量名 = 值;
//JavaScript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都可以。
var i = 100;
i = false;
i = "abc";
i = new Object();
i = 3.14;
//变量没有声明，无法访问
//变量默认值为undefined2, 函数的定义与调用
第一种方式：
function 函数名(形式参数列表){
函数体;
}
第二种方式：
函数名 = function(形式参数列表){
函数体;
}
//js中的函数不需要指定返回类型，返回什么类型都可以。3,局部变量与全局变量
全局变量：
在函数体之外声明的变量属于全局变量，全局变量的生命周期是：浏览器打开时声明，浏览器关闭时销毁，尽量少用。因为全局变量会一直在浏览器的内存当中，耗费内存空间。能使用局部变量尽量使用局部变量。
局部变量：
在函数体当中声明的变量，包括一个函数的形参都属于局部变量，局部变量的生命周期是：函数开始执行时局部变量的内存空间开辟，函数执行结束后，局部变量的内存空间释放。局部变量生命周期较短。
注意：
当一个变量声明的时候没有使用关键字var，那么不管这个变量在哪里声明，都是全局变量。
三 数据类型
1，数据类型
1，js中数据类型有：原始类型，引用类型。
原始类型：Undefined,Number,String,Boolean,Null
引用类型：Object以及Object的子类
2，在ES6之后，又加了一种新类型：Symbol
3，js中有一个运算符typeof，这个运算符可以在程序的运行阶段动态地获取变量的数据类型。
typeof运算符的语法格式：
typeof 变量名
typeof运算符的运算结果是以下6个字符串之一，注意字符串都是全部小写。
"undefined"
"number"
"string"
"boolean"
"object"
"function"4，在js中比较字符串是否相等使用"=="完成。没有equals。
2，Undefined类型
Undefined类型只有一个值，这个值就是undefined,当一个变量没有手动赋值，系统默认值undefined或者也可以给一个变量手动赋值undefined.
var i;
var k = undefined;
alert(i===k);//true
var y = "undefined";
alert(y==k);//false3，Number类型
1，Number类型包括哪些值：整数，小数，正数，负数，不是数字（NaN)，无穷大（Infinity）
2，isNaN()：结果是true表示不是一个数字，结果是false表示是一个数字。
3，parseInt()函数：取整数位
4，parseFloat()函数：
5，Math.ceil()函数：向上取整
3，Boolean类型
4，String类型
1，在js中字符串可以使用单引号，也可以使用双引号。
2，创建字符串。
第一种： var s = "abc";
第二种: var s2 = new String("abc");5，Object类型
四 js中的事件
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) mouseup鼠标弹起
(14) reset表 单重置
(15) select文本被选定
(16) submit表单提交
//任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。
//onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在）2，事件注册的两种方式
第一种方式：直接在标签中使用事件句柄。
<html>
<body>
<script type="text/javascript">
function sayHello(){
alert("hello js!");
}
</script>
<input type="buttom" value="hello" onclick="sayHello"/>
</body>
</html>
//代码含义：将sayHello函数注册到按钮上，等待click事件发生之后，
//该函数被浏览器调用。我们称这个函数为回调函数。第二种注册事件的方式，是使用纯js代码完成事件的注册。
<html>
<body>
<script type="text/javascript">
function doSome(){
alert("do some!");
}
</script>
<input type="buttom" value="hello2" id="mybtn"/>
//第一步：先获取这个按钮对象（document是全部小写，内置对象，可以直接用，document就代表整个HTML页面。）
var btnObj = document.getElementById("mybtn");
//第二步：给按钮对象的onclick属性赋值
btnObj.onclick = doSome;
//注意：不能加小括号。btnObj.onclick = doSome();是错误写法
/*
简写：常用
document.getElementById("mybtn").οnclick=function(){
alert("do some!");
}
*/
</body>
</html>3，代码的执行顺序
4，通过keydown事件演示回车键13，ESC键27
五 js运算符
六 js之控制语句
<html>
<head>
<meta charset="utf-8">
<title>js的控制语句</title>
</head>
<body>
<script type="text/javascript">
/*
1，if
2，switch
3，while
4，do...while
5，for循环
6，break
7，continue
8，for...in语句（了解）
9，with语句（了解）
*/
</script>
</body>
</html>七 内置对象
内置对象：Array,Date
八 BOM和DOM的区别与联系
- BOM的顶级对象是：window
- DOM的顶级对象是：document
- 实际上BOM是包括DOM的！
九 DOM编程案例
1，设置和获取文本框的value
<html>
<head>
<meta charset="utf-8">
<title>设置和获取文本框的value</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var btnElt = document.gerElementById("btn");
btnElt.onclick = function(){
//获取username的节点
var usernameElt = document.getElementById("username");
var username = usernameElt.value;
alert(username);
//修改value
//document.getElementById("username").value = "zhangsan";
}
}
</script>
<input type="text" id="username"/>
<input type="button" value="获取文本框的value" id="btn"/>
</body>
</html>1,innerHTML innerText操作div和span
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!--
innerText和innerHTML的区别：
相同点：都是设置元素内部的内容
不同点：
innerHTML会把后面的字符串当作一段HTML代码解释并执行。
innerText，即使后面是一段HTML代码，也只是当作普通字符串来看待。
-->
<script type="text/javascript">
window.onload = function(){
var btn = document.gerElementById("btn");
btn.onclick = function(){
var divElt = document.getElementById("div1");
divElt = usernameElt.value;
//divElt.innerHTML="fsdfasdfasf";
//divElt.innerHTML="<font color='red'>用户名不能为空!</font>"
divElt.innerText="<font color='red'>用户名不能为空!</font>";
}
}
</script>
<input type="button" value="设置div中内容" id="btn"/>
<div id="div1"></div>
</body>
</html>2,js的正则表达式
2.1 正则表达式概述
1，什么是正则表达式，有什么用？
正则表达式：Regular Expression
正则表达式主要用在字符串格式匹配方面。
2，正则表达式实际上是一门独立的学科，在Java语言中支持，C语言也支持，JavaScript也支持，大部分编程语言都支持。
3，正则表达式，对于JavaScript编程，需要掌握哪些内容？
- 常见的正则表达式符号要认识。
- 简单的正则表达式要会写。
- 他人编写的正则表达式能看懂。
- 在JavaScript中，如何创建正则表达式对象。
- 在JavaScript中，正则表达式对象有哪些方法？
- 能够快速的从网络上找到自己需要的正则表达式。并且测试其有效性。
2.2 常用的正则表达式符号
. 匹配除换行符以外的任意字符
\W 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束
* 重复0次或者更多次
+ 重复一次或更多次
? 重复0次或1次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次
\W 匹配任意不是字母，数字，下划线，汉字的字符
\S 匹配任意不是空白符的字符
\D 匹配任意非数字的字符
\B 匹配不是单词开头或结束的位置
[^x] 匹配除了x以外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符
正则表达式当中的小括号()优先级较高。
[1-9]表示1到9任意一个数字（次数是一次）
[A-Za-z0-9]表示A-Za-z0-9中任意一个字符
[A-Za-z0-9-]表示A-Z，a-z，0-9，-，以上任意字符中的任意一个字符。2,3 会写简单的正则表达式
QQ号的正则表达式：2,4 会创建js中的正则表达式对象
第一种创建方式：
var regExp = /正则表达式/；
第二种创建方式：使用内置支持类RegExp
var regExp = new RegExp("正则表达式")；2.5 会调用js中正则表达式对象的test()函数
正在表达式对象的test()方法：
true / false = 正则表达式对象.test(用户填写的字符串);
true :字符串格式匹配成功
false : 字符串格式匹配失败3,表单验证
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<style type="text/css">
span {
color: red;
font-size:12px
}
</style>
</head>
<body>
<script type="text/javascript">
/*
(1)用户名不能为空
(2)用户名必须在6~14位之间
(3)用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
(4)密码和确认密码一致，邮箱地址合法
(5)统一失去焦点验证
(6)错位信息提示统一在span标签中提示，并且要求字体12号，红色
(7)文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
(8)最终表单中所有项均合法方可提交
*/
window.onload = function(){
//获取username的span标签
var usernamrErrorSpan = document.getElementById("usernameError");
//给用户名文本框绑定blur事件
var usernameElt = document.getElementById("username");
usernameElt.onblur = function(){
//获取用户名
var username = usernameElt.value;
//去除前后空白
username = username.trim();
if(username ===""){
usernamrErrorSpan.innerText = "用户名不能为空";
}else{
//继续判断长度
if(username.length < 6 || username.length > 14){
usernameErrorSpan.innerText = "用户名长度必须在【6-14】之间";
}else{
//判断是否含有特殊符号
var regExp = /^[A-Za-z0-9]+$/;
var ok = regExp.test(username);
if(ok){
//用户名最终合法
}else{
//用户名中含有特殊符号
usernameErrorSpan.innerText = "用户名只能由数字和字母组成"；
}
}
}
}
//给username这个文本框绑定获得焦点事件
usernameElt.onfocus = function(){
//清空非法的value
if(usernameErrorSpan.innerText !=""){
usernameElt.value = "";
}
//清空span
usernameErrorSpan.innerText = "";
}
//获取密码提示错误的span标签
var pwdErrorSpan document.getElementById("pwdError");
//获取确认密码框对象
var userpwd2Elt = document.getElementById("userpwd2");
//绑定blur事件
userpwd2Elt.onblur = function(){
//获取密码和确认密码
var userpwdElt = document.getElmentById("userpwd");
var userpwd = userpwdElt.value;
var userpwd2 = userpwd2Elt.value;
if(userpwd != userpwd2){
//密码不一致
pwdErrorSpan.innerText = "密码不一致";
}else{
//密码一致
}
}
//绑定focus事件
userpwd2Elt.onfocus = function(){
if(pwdErrorSpan.innerText != ""){
userpwd2Elt.value = "";
}
pwdErrorSpan.innerText = "";
}
//获取email的span
var emailSpan = document.getElementById("emailError");
//给email绑定blur事件
var emailElt = document.getElementById("email");
emailElt.onblur = function(){
//获取email
var email = emailElt.value;
//编写email的正则
var emailRegExp = /正则表达式/;
var ok = emailRegExp.test(email);
if(ok){
//合法
}else{
//不合法
emailSpan.innerText = "邮箱地址不合法";
}
}
//给email绑定focus
emailElt.onfocus = function(){
if(emailSpan.innerText != ""){
emailElt.value = "";
}
emailSpan.innerText = "";
}
}
</script>
<!--这个表单提交应该使用post，这里为了检测，所以使用get。-->
<form action="http://localhost:8080/jd/save" method="get">
用户名<input type="text" name="username" id="username"/><span id="usernameError"></span><br>
密码<input type="text" name="userpwd" id="userpwd"/><br>
确认密码<input type="text" id="userpwd2"/><span id="pwdError"></span><br>
邮箱<input type="text" name="email" id="eamil"/><span id="emailError"></span><br>
<input type="submit" value="注册"/><br>
<input type="reset" value="重置"/>
</form>
</body>
</html>4,复选框全选和取消全选
5,获取下拉列表选中项的value
6,显示网页时钟
7,拼接HTML的方式，设置table的tbody
8.,学会使用浏览器的F12
十 BOM编程案例
1,window.open()和window.close()
<html>
<head>
<meta charset="utf-8">
<tile>BOM编程-open和close</title>
</head>
<body>
<!--
1，BOM编程中，window对象是顶级对象，代表浏览器窗口。
2，window有open和close方法，可以开启窗口和关闭窗口。
-->
<script type="text/javascript">
</script>
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com');"/>
</body>
</html>2,window.alert()和window.confirm()
3,如果当前窗口不是顶级窗口，将当前窗口设置为顶级窗口
4，历史记录
5,window.location.href
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
