JavaScript 高级
文章目录
JavaScript高级
1.面向对象
1.1 面向对象的介绍
在java中咱们已经学习了面向对象,核心思想就是万物都是对象。在JavaScript中同样也有面向对象。
1.2 类的定义和使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类的定义和使用</title>
</head>
<body>
<button onclick="f()">123</button>
</body>
</html>
<script type="text/javascript">
//定义一个User类
class User{
//构造方法
constructor(name,age) {
this.name=name;
this.age=age;
}
//普通方法
showme(){
document.write(this.name+","+this.age);
}
}
function f(){
var u = new User("张三",18)
u.showme();
}
</script>
1.3 继承
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类的定义和使用</title>
</head>
<body>
<button onclick="f()">123</button>
</body>
</html>
<script type="text/javascript">
//定义一个User类
class User{
//构造方法
constructor(name,age) {
this.name=name;
this.age=age;
}
//普通方法
showme(){
document.write(this.name+","+this.age);
}
}
class emp extends User{
constructor(name,age,deptname) {
super(name,age)
this.deptname=deptname;
}
showme(){
document.write(this.name+","+this.age+","+this.deptname);
}
}
function f(){
var e = new emp("张三",18,"研发部");
e.showme()
}
</script>
2.Js内置对象
2.1 Number
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1.parseFloat
var i = Number.parseFloat("3.1415")
document.write(typeof(i))
//2.parseInt
var j = Number.parseInt("100")
document.write(typeof(j))
//从数字开始转换 直到遇到非数字
var x = Number.parseInt("123avc123")
document.write(x)
</script>
2.2 Math
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
document.write(Math.ceil(4.4)+"<br/>")
document.write(Math.floor(4.1)+"<br/>")
document.write(Math.round(4.1)+"<br/>")
document.write(Math.random()+"<br/>")
</script>
2.3 Date
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//构造方法1 获取当前时间对象
let d1 = new Date();
document.write(d1+"<br />")
//构造方法2 获取1970 1 1 过了多少毫秒的时间对象
let d2 = new Date(10000)
document.write(d2+"<br />")
//构造方法3 指定时间字段获取时间对象 月份0-11
let d3 = new Date(2021,4,20,17,11,11)
document.write(d3+"<br />")
//成员方法
document.write(d3.getFullYear()+":")
document.write(d3.getMonth()+1+":")
document.write(d3.getDate()+"<br />")
document.write(d3.toLocaleString())
</script>
2.4 String
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//创建String对象
let s1 = new String("zhangsan")
document.write(s1)
let s2 = "lisi";
document.write(s2+"<br />")
//属性
document.write(s1.length+"<br />")
//成员方法
//charAt(index) 根据索引获取指定位置的字符
document.write(s1.charAt(2)+"<br />")
//indexOf(value) 获取字符第一次出现的索引位置
document.write(s1.indexOf("a")+"<br />")
//subString(start ,end) 截取字符串 包前不包后
document.write(s1.substring(2,4)+"<br />")
//substr(start,length) 截取字符串 从start位置开始截取length长度
document.write(s1.substr(2,3)+"<br />")
//split(value) 切割字符串 转换成了数组
document.write(s1.split("a")+"<br />")
//replace(old,new) 替换第一个出现old的字符
document.write(s1.replace("a","xxx"))
</script>
2.5 Array
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
let arr = [1,2,8,4,5,6]
//添加元素到位置
arr.push(6)
document.write(arr+"<br />")
//删除尾部的元素
arr.pop()
document.write(arr+"<br />")
//删除首部的元素
arr.shift()
document.write(arr+"<br />")
//判断数组中是否包含某个元素
document.write(arr.includes(8)+"<br />")
//反转数组
arr.reverse()
document.write(arr+"<br />")
//排序
arr.sort()
document.write(arr+"<br />")
</script>
2.6 了解的内置对象
Set:集合。 元素唯一的。存储是有序的。
添加元素 add()
获取长度 size 属性
遍历set需要迭代器
let st = s.keys();
for(let i=0;i<s.size;i++){
st.next().value
}
删除元素:delete(元素)
map:K/V key唯一的。存储有序的。
3.表单校验
3.1 正则表达式
介绍:是一种对字符串进行匹配的规则
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
// /^规则$/
// [123] 可以匹配1,2,3一次
// [0-9] 可以匹配0到9一次
// [0-9] {n} 匹配前面的规则n次
// [A-Z] {n,m} 匹配前面的规则最少n次 最多m次
// [A-Z]{n,} 匹配前面的规则最少n次
//手机号的正则
let reg = /^[1][358][0-9]{9}$/
document.write(reg.test("18612751174")+"<br />")
//用户名的正则
// 字母 数字 下划线组成 长度4到8位
let reg2=/^[a-zA-Z0-9_]{4,8}$/
document.write(reg2.test("za123_15689")+"<br />")
let reg3=/^\D+$/
document.write(reg3.test("a"))
let reg4=/^[A-Z]{1}[0-9]{4,}[a-Z]{3,}$/
</script>
3.2 完成表单校验的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="f1" action="#">
用户名:<input type="text" id="name" /><span hidden="hidden" id="namespan">用户名不合法</span><br />
密码:<input type="password" id="pwd" />
再次输入密码:<input type="password" id="pwd2" />
<span hidden="hidden" id="pwdspan">密码不合法</span><span hidden="hidden" id="pwdspan2">密码不一致</span><br />
身份证号:<input type="text" id="card" /><span hidden="hidden" id="cardspan">身份证号不合法</span><br />
性别:<input type="radio" value="男" name="sex" />男 <input type="radio" value="女" name="sex"/>女<br />
<input type="reset" value="重置" /><input type="submit" value="提交" />
</form>
</body>
</html>
<script type="text/javascript">
document.getElementById("f1").onsubmit=function(){
//获取用户名查看是否合法
let name = document.getElementById("name").value;
//字母数字下划线组成 首字母大写 长度4到8
let reg = /^[A-Z][A-Za-z0-9_]{3,7}$/
let nameflag = reg.test(name)
let namespan = document.getElementById("namespan")
if(!nameflag){
namespan.removeAttribute("hidden");
namespan.style.color="red";
}else{
namespan.setAttribute("hidden","hidden")
}
//获取两个密码查看是否合法
let pwd = document.getElementById("pwd").value;
let pwd2 = document.getElementById("pwd2").value;
let pwdspan2 = document.getElementById("pwdspan2");
let pwdspan = document.getElementById("pwdspan");
let pwdreg=/^[a-zA-Z0-9_]{6}$/
if(pwd==pwd2){
pwdspan2.setAttribute("hidden","hidden")
//两次密码一致
let pwdflag = pwdreg.test(pwd)
if(pwdflag){
pwdspan.setAttribute("hidden","hidden")
}else{
pwdspan.removeAttribute("hidden");
pwdspan.style.color="red";
}
}else{
pwdspan2.removeAttribute("hidden");
pwdspan2.style.color="red";
}
//得到身份证的数据
let card = document.getElementById("card").value
let cardreg = /^(1[1-5]|2[1-3]|3[1-7]|4[1-6]|5[0-4]|6[1-5]|71|8[1-2])[0-9]{4}(19[0-9]{2}|20[0-1][0-9]|202[0-1])(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])[0-9]{3}[0-9|X]$/
}
</script>