JS特点:脚本语言、基于对象、弱类型、事件驱动、跨平台性
JS 组成部分:BOM编程 、DOM编程 、ECMA
JS的引入方式
-
在页面中,通过一对script标签引入JS代码
-
script代码放置位置具备一定的随意性,一般放在head标签中居多
内部引用简单使用
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.but1{
width: 80px;
height: 40px;
background: blue;
color: aliceblue;
}
.d1{
text-align: center;
}
</style>
<script>
function aa(){
alert("你好,JAVASCript")
}
</script>
</head>
<body>
<div class="d1">
<button onclick="aa()" class="but1">点我</button>
</div>
</body>
效果
外部引用
<script src="js/button.js" type="text/javascript"></script>
JS的数据类型
数值类型
-
数值类型统一为 number,不区分整数和浮点数
字符串类型
-
字符串类型为 string 和JAVA中的String相似,JS中不严格区分单双引号,都可以用于表示字符串
布尔类型
-
布尔类型为boolean 和Java中的boolean相似,但是在JS的if语句中,非空字符串会被转换为'真',非零数字也会被认为是'真'
引用数据类型
-
引用数据类型对象是Object类型, 各种对象和数组在JS中都是Object类型
function类型
-
JS中的各种函数属于function数据类型
命名未赋值
-
js为弱类型语言,统一使用 var 声明对象和变量,在赋值时才确定真正的数据类型,变量如果只声明没有赋值的话,数据类型为undefined
赋予NULL值
-
在JS中,如果给一个变量赋值为null,其数据类型是Object, 可以通过typeof关键字判断数据类型
JS的变量
-
1 弱类型变量,可以统一声明成var
-
2 var声明的变量可以再次声明
-
3 变量可以使用不同的数据类型多次赋值
-
4 JS的语句可以以; 结尾,也可以不用;结尾
-
5 变量标识符严格区分大小写
-
6 标识符的命名规则参照JAVA
-
7 如果使用了 一个没有声明的变量,那么运行时会报uncaught ReferenceError: *** is not defined at index.html:行号:列号
-
8 如果一个变量只声明,没赋值,那么值是undefined
JS的运算符
这里的运算符和JAVA的基本一致
需要注意的是 == 和 === 差别 简单来说(==就是比较大小),(===就是比较数据类型)
-
== 符号,如果两端的数据类型不一致,会尝试将两端的数据转换成number,再对比number大小
-
=== 符号,如果两端数据类型不一致,直接返回false,数据类型一致在比较是否相同
注意
console.log(s1) //打印在控制台
document.write(s1) //打印在页面上
var v1=123
console.log(typeof v1) //查询v1的类型并打印在输出台 关键字typeof
JS的流程控制和函数
JS分支结构
if结构
-
这里的if结构几乎和JAVA中的一样,需要注意的是
-
if()中的非空字符串会被认为是true
-
if()中的非零数字会被认为是true
-
if('false'){// 非空字符串 if判断为true
console.log(true)
}else{
console.log(false)
}
if(''){// 长度为0字符串 if判断为false
console.log(true)
}else{
console.log(false)
}
if(1){// 非零数字 if判断为true
console.log(true)
}else{
console.log(false)
}
if(0){// 0 if判断为false
console.log(true)
}else{
console.log(false)
}
switch结构和JAVA的一致,这里就不细说了
JS循环结构
while结构和JAVA的一致
for循环和JAVA的一致
foreach循环
-
迭代数组时,和java不一样
-
括号中的临时变量表示的是元素的索引,不是元素的值,
-
()中也不在使用: 分隔,而是使用 in 关键字
-
var cities =["北京","上海","深圳","武汉","西安","成都"]
document.write("<ul>")
for(var index in cities){
document.write("<li>"+cities[index]+"</li>")
}
document.write("</ul>")
效果
JS函数声明
-
函数说明
-
函数没有权限控制符
-
不用声明函数的返回值类型,需要返回在函数体中直接return即可,也无需void关键字
-
参数列表中,无需数据类型
-
调用函数时,实参和形参的个数可以不一致
-
声明函数时需要用function关键字
-
J函数没有异常列表
-
/*
语法1
function 函数名 (参数列表){函数体}
*/
function sum(a, b){
return a+b;
}
var result =sum(10,20);
console.log(result)
/*
语法2
var 函数名 = function (参数列表){函数体}
*/
var add = function(a, b){
return a+b;
}
var result = add(1,2);
console.log(result);
JS的对象和JSON
创建对象
语法1 通过new Object()直接创建对象
var person =new Object();
// 给对象添加属性并赋值
person.name="张小明";
person.age=10;
person.foods=["苹果","橘子","香蕉","葡萄"];
// 给对象添加功能函数
person.eat= function (){
console.log(this.age+"岁的"+this.name+"喜欢吃:")
for(var i = 0;i<this.foods.length;i++){
console.log(this.foods[i])
}
}
//获得对象属性值
console.log(person.name)
console.log(person.age)
//调用对象方法
person.eat();
效果
语法2 通过 {}形式创建对象
-
语法为 var person ={"属性名":"属性值","属性名","属性值","函数名":函数}
var person ={
"name":"张小明",
"age":10,
"foods":["苹果","香蕉","橘子","葡萄"],
"eat":function (){
console.log(this.age+"岁的"+this.name+"喜欢吃:")
for(var i = 0;i<this.foods.length;i++){
console.log(this.foods[i])
}
}
}
//获得对象属性值
console.log(person.name)
console.log(person.age)
//调用对象方法
person.eat();
效果和上面的一样
JSON格式
-
JSON的语法
var obj="{'属性名':'属性值','属性名':{'属性名':'属性值'},'属性名':['值1','值1','值3']}"
- 通过JSON.parse()方法可以将一个JSON串转换成对象
- 通过JSON.stringify()方法可以将一个对象转换成一个JSON格式的字符串
JSON格式
var personStr ='{"name":"张小明","age":20,"girlFriend":{"name":"铁铃","age":23},"foods":["苹果","香蕉","橘子","葡萄"],"pets":[{"petName":"大黄","petType":"dog"},{"petName":"小花","petType":"cat"}]}'
前后端传递数据
JS常见对象
创建数组的四种方式
-
new Array() 创建空数组
-
new Array(5) 创建数组时给定长度
-
new Array(ele1,ele2,ele3,... ... ,elen); 创建数组时指定元素值
-
[ele1,ele2,ele3,... ... ,elen]; 相当于第三种语法的简写
-
在JS中,数组属于Object类型,其长度是可以变化的,更像JAVA中的集合
数组,Boolean对象,Date对象,Math,Number,String都是JS中常用的对象,里面的方法参考JAVA中的方法,方法有很多,需要的时候就百度查
事件的绑定
什么是事件
HTML 事件可以是浏览器行为,也可以是用户行为。 当这些一些行为发生时,可以自动触发对应的JS函数的运行,我们称之为事件发生.JS的事件驱动指的就是行为触发代码运行的这种特点
常见事件
鼠标事件
属性 | 描述 |
---|---|
onclick | 当用户点击某个对象时调用的事件句柄。 |
oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发 |
ondblclick | 当用户双击某个对象时调用的事件句柄。 |
onmousedown | 鼠标按钮被按下。 |
onmouseenter | 当鼠标指针移动到元素上时触发。 |
onmouseleave | 当鼠标指针移出元素时触发 |
onmousemove | 鼠标被移动。 |
onmouseover | 鼠标移到某元素之上。 |
onmouseout | 鼠标从某元素移开。 |
onmouseup | 鼠标按键被松开。 |
键盘事件
属性 | 描述 |
---|---|
onkeydown | 某个键盘按键被按下。 |
onkeypress | 某个键盘按键被按下并松开。 |
onkeyup | 某个键盘按键被松开。 |
表单事件
属性 | 描述 |
---|---|
onblur | 元素失去焦点时触发 |
onchange | 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) |
onfocus | 元素获取焦点时触发 |
onfocusin | 元素即将获取焦点时触发 |
onfocusout | 元素即将失去焦点时触发 |
oninput | 元素获取用户输入时触发 |
onreset | 表单重置时触发 |
onsearch | 用户向搜索域输入文本时触发 ( <input="search">) |
onselect | 用户选取文本时触发 ( <input> 和 <textarea>) |
onsubmit | 表单提交时触发 |
事件的绑定
通过属性绑定
<head>
<meta charset="UTF-8">
<title>小标题</title>
<script>
function testDown1(){
console.log("down1")
}
function testDown2(){
console.log("down2")
}
function testFocus(){
console.log("获得焦点")
}
function testBlur(){
console.log("失去焦点")
}
function testChange(input){
console.log("内容改变")
console.log(input.value);
}
function testMouseOver(){
console.log("鼠标悬停")
}
function testMouseLeave(){
console.log("鼠标离开")
}
function testMouseMove(){
console.log("鼠标移动")
}
</script>
</head>
<body>
<input type="text"
onkeydown="testDown1(),testDown2()"
onfocus="testFocus()"
onblur="testBlur()"
onchange="testChange(this)"
onmouseover="testMouseOver()"
onmouseleave="testMouseLeave()"
onmousemove="testMouseMove()"
/>
</body>
-
说明
-
通过事件属性绑定函数,在行为发生时会自动执行函数
-
一个事件可以同时绑定多个函数
-
一个元素可以同时绑定多个事件
-
方法中可以传入 this对象,代表当前元素
-
通过DOM编程绑定
window.onload //是一个事件,在html文档加载完成后能立即触发
in1.onchange=方法名 //绑定事件
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
var div1= document.getElementById("d1")
div1.onclick=function(){
div1.style.backgroundColor="red"
}
var but1= document.getElementById("but1")
but1.onclick=function(){
div1.style.backgroundColor="blue"
}
}
</script>
</head>
<body>
<div id="d1" style="background-color: blue; width: 400px; height: 400px;">
</div>
<button id="but1">点我</button>
</body>
BOM编程
-
BOM由一系列对象组成,是访问、控制、修改浏览器的属性和方法(通过window对象及属性的一系列方法 控制浏览器行为的一种编程)
-
BOM没有统一的标准(每种客户端都可以自定标准)。
-
BOM编程是将浏览器窗口的各个组成部分抽象成各个对象,通过各个对象的API操作组件行为的一种编程
-
BOM编程的对象结构如下
-
window 顶级对象,代表整个浏览器窗口
-
location对象 window对象的属性之一,代表浏览器的地址栏
-
history对象 window对象的属性之一,代表浏览器的访问历史
-
screen对象 window对象的属性之一,代表屏幕
-
navigator对象 window对象的属性之一,代表浏览器软件本身
-
document对象 window对象的属性之一,代表浏览器窗口目前解析的html文档
-
console对象 window对象的属性之一,代表浏览器开发者工具的控制台
-
localStorage对象 window对象的属性之一,代表浏览器的本地数据持久化存储
-
sessionStorage对象 window对象的属性之一,代表浏览器的本地数据会话级存储
-
-
window.alert("提示信息"); //普通提示框
confirm("确定要删除吗?"); //选择提示框
prompt("请输入昵称","例如:张三"); //输入框
// 通过BOM编程地址栏url切换
window.location.href="http://www.atguigu.com"
// 让浏览器存储一些会话级数据
window.sessionStorage.setItem("sessionMsg","sessionValue")
// 让浏览器存储一些持久级数据
window.localStorage.setItem("localMsg","localValue")
效果
通过BOM编程实现会话级和持久级数据存储
-
会话级数据 : 内存型数据,是浏览器在内存上临时存储的数据,浏览器关闭后,数据失去,通过window的sessionStorge属性实现
-
持久级数据 : 磁盘型数据,是浏览器在磁盘上持久存储的数据,浏览器关闭后,数据仍在,通过window的localStorge实现
-
可以用于将来存储一些服务端响应回来的数据,比如:token令牌,或者一些其他功能数据,根据数据的业务范围我们可以选择数据存储的会话/持久 级别
DOM编程
在整个文档范围内查找元素结点
功能 | API | 返回值 |
---|---|---|
根据id值查询 | document.getElementById(“id值”) | 一个具体的元素节 |
根据标签名查询 | document.getElementsByTagName(“标签名”) | 元素节点数组 |
根据name属性值查询 | document.getElementsByName(“name值”) | 元素节点数组 |
根据类名查询 | document.getElementsByClassName("类名") | 元素节点数组 |
在具体元素节点范围内查找子节点
功能 | API | 返回值 |
---|---|---|
查找子标签 | element.children | 返回子标签数组 |
查找第一个子标签 | element.firstElementChild | 标签对象 |
查找最后一个子标签 | element.lastElementChild | 节点对象 |
查找指定子元素节点的父节点
查找指定元素节点的兄弟节点
功能 | API | 返回值 |
---|---|---|
查找前一个兄弟标签 | node.previousElementSibling | 标签对象 |
查找后一个兄弟标签 | node.nextElementSibling | 标签对象 |
属性操作
需求 | 操作方式 |
---|---|
读取属性值 | 元素对象.属性名 |
修改属性值 | 元素对象.属性名=新的属性值 |
内部文本操作
需求 | 操作方式 |
---|---|
获取或者设置标签体的文本内容 | element.innerText |
获取或者设置标签体的内容 | element.innerHTML |
对页面的元素进行增删操作
API | 功能 |
---|---|
document.createElement(“标签名”) | 创建元素节点并返回,但不会自动添加到文档中 |
document.createTextNode(“文本值”) | 创建文本节点并返回,但不会自动添加到文档中 |
element.appendChild(ele) | 将ele添加到element所有子节点后面 |
parentEle.insertBefore(newEle,targetEle) | 将newEle插入到targetEle前面 |
parentEle.replaceChild(newEle, oldEle) | 用新节点替换原有的旧子节点 |
element.remove() | 删除某个标签 |
正则表达式
语法
var patt=new RegExp(pattern,modifiers);
或者更简单的方式:
var patt=/pattern/modifiers;
常用正则表达式
需求 | 正则表达式 |
---|---|
用户名 | /^[a-zA-Z ][a-zA-Z-0-9]{5,9}$/ |
密码 | /^[a-zA-Z0-9 _-@#& *]{6,12}$/ |
前后空格 | /^\s+|\s+$/g |
电子邮箱 | /^[a-zA-Z0-9 _.-]+@([a-zA-Z0-9-]+[.]{1})+[a-zA-Z]+$/ |
方法 | 描述 |
---|---|
compile | 在 1.5 版本中已废弃。 编译正则表达式。 |
exec | 检索字符串中指定的值。返回找到的值,并确定其位置。 |
test | 检索字符串中指定的值。返回 true 或 false。 |
toString | 返回正则表达式的字符串。 |
案例
//n位数字的正则
var targetStr="123456789";
var reg=/^[0-9]{0,}$/;
//或者 : var reg=/^\d*$/;
var b = reg.test(targetStr);//true
//数字+字母+下划线,6-16位
var targetStr="HelloWorld";
var reg=/^[a-z0-9A-Z_]{6,16}$/;
var b = reg.test(targetStr);//true
综合案例
登录页及校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.ht{
text-align: center;
color: cadetblue;
font-family: 幼圆;
}
.tab{
width: 500px;
border: 5px solid cadetblue;
margin: 0px auto;
border-radius: 5px;
font-family: 幼圆;
}
.ltr td{
border: 1px solid powderblue;
}
.ipt{
border: 0px;
width: 50%;
}
.btn1{
border: 2px solid powderblue;
border-radius: 4px;
width:60px;
background-color: antiquewhite;
}
#usernameMsg , #userPwdMsg {
color: rgb(230, 87, 51);
}
.buttonContainer{
text-align: center;
}
</style>
<script>
// 检验用户名格式是否合法的函数
function checkUsername(){
// 定义正则表示字符串的规则
var usernameReg= /^[a-zA-Z0-9]{5,10}$/
// 获得用户在页面上输入的信息
var usernameInput =document.getElementById("usernameInput")
var username = usernameInput.value
// 获得格式提示的框
var usernameMsg =document.getElementById("usernameMsg")
// 格式有误时,返回false,在页面上提示
if(!usernameReg.test(username)){
usernameMsg.innerText="用户名格式有误"
return false
}
// 格式OK,返回true 在页面上提示OK
usernameMsg.innerText="OK"
return true
}
// 检验密码格式是否合法的函数
function checkUserPwd(){
// 定义正则表示字符串的规则
var userPwdReg= /^[0-9]{6}$/
// 获得用户在页面上输入的信息
var userPwdInput =document.getElementById("userPwdInput")
var userPwd = userPwdInput.value
// 获得格式提示的框
var userPwdMsg =document.getElementById("userPwdMsg")
// 格式有误时,返回false,在页面上提示
if(!userPwdReg.test(userPwd)){
userPwdMsg.innerText="密码必须是6位数字"
return false
}
// 格式OK,返回true 在页面上提示OK
userPwdMsg.innerText="OK"
return true
}
// 表单在提交时,校验用户名和密码格式,格式OK才会提交
function checkForm(){
var flag1 =checkUsername()
var flag2 =checkUserPwd()
return flag1&&flag2
}
</script>
</head>
<body>
<h1 class="ht">欢迎使用日程管理系统</h1>
<h3 class="ht">请登录</h3>
<form method="post" action="/user/login" onsubmit="return checkForm()">
<table class="tab" cellspacing="0px">
<tr class="ltr">
<td>请输入账号</td>
<td>
<input class="ipt" type="text" id="usernameInput" name="username" onblur="checkUsername()">
<span id="usernameMsg"></span>
</td>
</tr>
<tr class="ltr">
<td>请输入密码</td>
<td>
<input class="ipt" type="password" id="userPwdInput" name="userPwd" onblur="checkUserPwd()">
<span id="userPwdMsg"></span>
</td>
</tr>
<tr class="ltr">
<td colspan="2" class="buttonContainer">
<input class="btn1" type="submit" value="登录">
<input class="btn1" type="reset" value="重置">
<button class="btn1"><a href="regist.html">去注册</a></button>
</td>
</tr>
</table>
</form>
</body>
</html>
注册页及校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.ht{
text-align: center;
color: cadetblue;
font-family: 幼圆;
}
.tab{
width: 500px;
border: 5px solid cadetblue;
margin: 0px auto;
border-radius: 5px;
font-family: 幼圆;
}
.ltr td{
border: 1px solid powderblue;
}
.ipt{
border: 0px;
width: 50%;
}
.btn1{
border: 2px solid powderblue;
border-radius: 4px;
width:60px;
background-color: antiquewhite;
}
.msg {
color: gold;
}
.buttonContainer{
text-align: center;
}
</style>
<script>
function checkUsername(){
var usernameReg = /^[a-zA-Z0-9]{5,10}$/
var usernameInput = document.getElementById("usernameInput")
var username = usernameInput.value
var usernameMsg = document.getElementById("usernameMsg")
if(!usernameReg.test(username)){
usernameMsg.innerText="格式有误"
return false
}
usernameMsg.innerText="OK"
return true
}
function checkUserPwd(){
var userPwdReg = /^\d{6}$/
var userPwdInput = document.getElementById("userPwdInput")
var userPwd = userPwdInput.value
var userPwdMsg = document.getElementById("userPwdMsg")
if(!userPwdReg.test(userPwd)){
userPwdMsg.innerText="格式有误"
return false
}
userPwdMsg.innerText="OK"
return true
}
function checkReUserPwd(){
var userPwdReg = /^\d{6}$/
// 再次输入的密码的格式
var reUserPwdInput = document.getElementById("reUserPwdInput")
var reUserPwd = reUserPwdInput.value
var reUserPwdMsg = document.getElementById("reUserPwdMsg")
if(!userPwdReg.test(reUserPwd)){
reUserPwdMsg.innerText="格式有误"
return false
}
// 获得上次密码,对比两次密码是否一致
var userPwdInput = document.getElementById("userPwdInput")
var userPwd = userPwdInput.value
if(reUserPwd != userPwd){
reUserPwdMsg.innerText="两次密码不一致"
return false
}
reUserPwdMsg.innerText="OK"
return true
}
function checkForm(){
var flag1 = checkUsername()
var flag2 = checkUserPwd()
var flag3 = checkReUserPwd()
return flag1 && flag2 && flag3
}
</script>
</head>
<body>
<h1 class="ht">欢迎使用日程管理系统</h1>
<h3 class="ht">请注册</h3>
<form method="post" action="/user/regist" onsubmit="return checkForm()">
<table class="tab" cellspacing="0px">
<tr class="ltr">
<td>请输入账号</td>
<td>
<input class="ipt" id="usernameInput" type="text" name="username" onblur="checkUsername()">
<span id="usernameMsg" class="msg"></span>
</td>
</tr>
<tr class="ltr">
<td>请输入密码</td>
<td>
<input class="ipt" id="userPwdInput" type="password" name="userPwd" onblur="checkUserPwd()">
<span id="userPwdMsg" class="msg"></span>
</td>
</tr>
<tr class="ltr">
<td>确认密码</td>
<td>
<input class="ipt" id="reUserPwdInput" type="password" onblur="checkReUserPwd()">
<span id="reUserPwdMsg" class="msg"></span>
</td>
</tr>
<tr class="ltr">
<td colspan="2" class="buttonContainer">
<input class="btn1" type="submit" value="注册">
<input class="btn1" type="reset" value="重置">
<button class="btn1"><a href="login.html">去登录</a></button>
</td>
</tr>
</table>
</form>
</body>
</html>