JavaScript学习笔记

最新推荐文章于 2024-05-25 13:46:03 发布

初级炼丹师Yiky--1229

最新推荐文章于 2024-05-25 13:46:03 发布

阅读量68

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44524687/article/details/117118793

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaScript 高级

文章目录

JavaScript 高级
- 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>

初级炼丹师Yiky--1229

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记

JavaScript 高级文章目录JavaScript 高级JavaScript高级1.面向对象1.1 面向对象的介绍1.2 类的定义和使用1.3 继承2.Js内置对象2.1 Number2.2 Math2.3 Date2.4 String2.5 Array2.6 了解的内置对象3.表单校验3.1 正则表达式3.2 完成表单校验的功能JavaScript高级1.面向对象1.1 面向对象的介绍在java中咱们已经学习了面向对象，核心思想就是万物都是对象。在JavaScript中同样也有面
复制链接

扫一扫