2 JavaScript
2.1 介绍
完成页面的数据验证。运行在客户端,需要运行浏览器来解析执行的JavaScript代码。
特点
- 交互性
- 安全性
- 跨平台性
2.2 与HTML结合方式
第一种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
alert("hello world");
</script>
</head>
<body>
</body>
</html>
第二种方式
使用script标签引入单独的.js代码文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="1.js"></script>
</head>
<body>
</body>
</html>
2.3 数据类型
类型
类型 | 标签 |
---|---|
数值 | number |
字符串 | string |
对象 | object |
布尔 | boolean |
函数 | function |
特殊值
-
underfined:未赋初始值的数据默认值
-
null:空值
-
NAN:非数字
定义变量格式
var 变量名;
var 变量名 = 值;
等于与全等于
==:等于 简单的字面值的比较
===:全等于 除了字面值相等还需要数据类型相等
逻辑运算
且:&&
全为true,返回最后一个表达式的值
有false,返回第一个为false的表达式的值
或:||
全为false,返回最后一个表达式的值
返回第一个为true的值
取反:!
重点:在JS中所有变量都可以作为一个boolean变量去使用
0、null、undefined、""(空串)
认为是false
2.4 数组(重点)
同样具有java中的length属性
根据最大下标值自动扩容,未赋值的值=undefined
var 数组名 = []; //空数组
var 数组名 = [true,12,"abc"];
//遍历操作
for(var i = 0;i<arr.length;i++){
alert(arr[i]);
}
2.5 函数(重点)
定义方式
方式一
//函数
function 函数名(形参){
函数体;
}
//带返回值的函数
function 函数名(形参){
函数体;
return 返回值;
}
方式二
var 函数名 = function(形参){
函数体;
}
注意:js不允许函数重载,若重载会直接覆盖掉上一次的定义。
函数的arguments隐形参数
类似Java的可变参数
Object …args
可以用arguments[]调用出来
2.6 自定义对象
Object形式的自定义对象
//定义
var 变量名 = new Object();
变量名.属性名 = 值;
变量名.函数名 = function(){};
//访问
变量名.属性/函数();
{}花括号定义方式
var 变量名= {
属性名:值,//用逗号分隔
函数名:function(){}
};
2.7 事件
常见事件
- onload 加载完成事件:用于页面初始化
- onclick 单击事件:常用于按钮点击响应
- onblur 失去焦点事件:常用于失去焦点后验证其输入内容是否合法
- onchange 内容发生改变事件:常用于下拉列表和输入框内容发生改变事件
- onsubmit 表单提交事件:常用于表单提交前的验证
事件的注册
告诉浏览器事件发生后要执行哪些操作代码
静态注册:通过html标签事件属性直接赋予代码
动态注册:通过js代码得到标签dom对象,再通过dom对象.事件名赋予事件响应后的代码。
动态注册步骤
- 获取标签对象
- 标签对象.事件名 = function(){}
onload事件
静态注册
//直接写在body标签
<body onload="alert('静态注册onload事件');">
</body>
//写在script标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function onloadFun(){
alert('静态注册onload事件');
}
</script>
</head>
<body onload ="onloadFun();">
</body>
</html>
动态注册
//动态注册
window.onload = function(){
alert('动态注册onload事件');
}
onclick事件
静态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function onclickFun(){
alert('静态注册onclick事件');
}
</script>
</head>
<body>
<button onclick="onclickFun();">按钮</button>
</body>
</html>
动态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
//1.获取对象
var btnobj = document.getElementById("btn01");
//2.定义事件
btnobj.onclick = function(){
alert("动态注册onclick事件");
}
}
</script>
</head>
<body>
<button id="btn01">btn01</button>
</body>
</html>
onblur事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type = "text/javascript">
//静态注册onblur
function onblurFun(){
//console是控制台对象,用于打印
//log()用于答应输出
console.log("静态注册失去焦点事件");
}
//动态注册onblur
window.onload = function(){
var passwordObj = document.getElementById("password");
passwordObj.onblur = function(){
console.log("动态注册失去焦点事件");
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"><br/>
密码:<input id="password" type="text" ><br/>
</body>
</html>
onchange事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function onchangeFun(){
alert("静态注册女神改变");
}
window.onload = function(){
var selObj = document.getElementById("select01");
selObj.onchange= function(){
alert("动态注册男神改变");
}
}
</script>
</head>
<body>
请选择你心中的女神:
<!-- 静态注册onchange事件 -->
<select onchange="onchangeFun();">
<option>-女神-</option>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
请选择你心中的男神:
<!-- 动态注册onchange事件 -->
<select id="select01">
<option>-男神-</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</body>
</html>
onsubmit事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function onsubmitFun(){
alert("静态注册表单提交事件-发现不合法");
return false;
}
window.onload = function(){
var formObj = document.getElementById("form01");
formObj.onsubmit = function(){
alert("动态注册表单提交事件----发现不合法");
}
//return false可以阻止表单提交
return false;
}
</script>
</head>
<body>
<!-- return false 可以阻止表单提交 -->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" id="form01">
<input type="submit" value="动态注册"/>
</form>
</body>
</html>
2.8 DOM模型
DOM全称Document Object Model文档对象模型,就是把文档中的标签、属性、文本,转换为对象来管理
Document对象(重点)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZHjPciTI-1645450167284)(C:\Users\Tao\AppData\Roaming\Typora\typora-user-images\image-20210923191526607.png)]
- Document管理了所有的HTML文档内容
- 树形结构,有层级关系
- 所有标签都对象化
- 我们可以通过document访问所有标签对象
标签对象化:用一个类来解释一个标签
Document对象的方法(重点)
getElementById()
返回指定id的第一个对象的引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
当用户点击了校验按钮,获取输入框中的内容,然后校验其是否合法
校验规则:必须由字母、数字、下划线组成,并且长度是5到12位
*/
window.onload = function(){
var check = document.getElementById("button01");
check.onclick = function(){
// 先获取需要验证的对象
var usernameObj = document.getElementById("username");
// 获取要验证的属性
var usernameText = usernameObj.value;
// 正则表达式
var patt = /^\w{5,12}$/;
// test()方法用于测试某个字符串是否符合规则
if(patt.test(usernameText)){
alert("用户名合法!");
}else alert("用户名不合法!");
}
}
</script>
</head>
<body>
用户名:<input id="username" type="text" value="123"/>
<button id="button01">校验</button>
</body>
</html>
常见的验证提示效果
文字与图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
当用户点击了校验按钮,获取输入框中的内容,然后校验其是否合法
校验规则:必须由字母、数字、下划线组成,并且长度是5到12位
*/
window.onload = function(){
var check = document.getElementById("button01");
check.onclick = function(){
// 先获取需要验证的对象
var usernameObj = document.getElementById("username");
// 获取要验证的属性
var usernameText = usernameObj.value;
// 正则表达式
var patt = /^\w{5,12}$/;
var usernameSpanObj = document.getElementById("usernameSpan");
// test()方法用于测试某个字符串是否符合规则
if(patt.test(usernameText)){
// usernameSpanObj.innerHTML="用户名合法";
usernameSpanObj.innerHTML="<img src=\"r.jpg\" width=\"18\" height=\"18\">";
}else usernameSpanObj.innerHTML="用户名不合法!";
}
}
</script>
</head>
<body>
用户名:<input id="username" type="text" value="user"/>
<span id="usernameSpan" style="color: red;"></span>
<button id="button01">校验</button>
</body>
</html>
getElementsByName()
返回带有指定名称的对象集合
勾选多项时,全选全不选反选的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function checkAll(){
var hobbies = document.getElementsByName("hobby");
for(var i=0;i<hobbies.length;i++){
hobbies[i].checked=true;
}
}
function checkNone(){
var hobbies = document.getElementsByName("hobby");
for(var i=0;i<hobbies.length;i++){
hobbies[i].checked=false;
}
}
function checkReverse(){
var hobbies = document.getElementsByName("hobby");
for(var i=0;i<hobbies.length;i++){
hobbies[i].checked=!hobbies[i].checked;
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="cpp">C++
<input type="checkbox" name="hobby" value="java">Java
<input type="checkbox" name="hobby" value="js">JavaScript
<br/>
<button onclick="checkAll();">全选</button>
<button onclick="checkNone();">全不选</button>
<button onclick="checkReverse();">反选</button>
</body>
</html>
getElementByTagname()
根据标签名获得集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function checkAll(){
var inputs = document.getElementsByTagName("input");
for(var i =0;i<inputs.length;i++){
inputs[i].checked = true;
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" value="cpp">C++
<input type="checkbox" value="java">Java
<input type="checkbox" value="js">JavaScript
<br/>
<button onclick="checkAll();">全选</button>
</body>
</html>
注
- document三种查询方法优先级:Id/Name/TagName
- 以上方法都要在页面加载完成后运行才可以查询到
节点的属性和方法
节点就是标签对象
方法
getElementByTagName()
获取当前节点的指定标签子节点
appendChild(oChildNode)
添加一个子节点
属性
- childNodes:获取所有子节点
- firstChild
- lastChild
- parentNode
- nextSibling:获取当前节点的下一个节点
- previousSibling:获取当前节点的上一个节点
- className:获取或设置标签的class
- innerHTML:获取内容
- innerText:获取文本