前端JavaScript基础

发布于:2025-04-15 ⋅ 阅读:(32) ⋅ 点赞:(0)

目录

1.JS引入方式

2.JS数据类型

3.JS类型转换

4.JS循环方式

5.json数据

6.JS三种弹出框

7.JS函数方法

 8.JS面向对象bom操作

9.JS的function函数

10.JSbom事件

11.JSdom操作

12.JSdom练习

13.JS属性节点

 14.QQ注册表单


1.JS引入方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Document</title>
		<!-- 3.外部引入js文件 -->
		<script src="default01.js" type="text/javascript"></script>
		<!-- 2.任意位置写入script标签内 -->
		<script type="text/javascript">
			// console.log('965')
			alert('965');
		</script>
	</head>
	<body>
		<!-- 1.行内样式 事件+内容 -->
		<button onclick="javascript:alert('Hello');"></button>
	</body>
</html>

2.JS数据类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<!-- <script src="default02.js" type="text/javascript"></script> -->
		<script type="text/javascript">
			let i = 1;
			let i2 = 1.1;
			let j = "10";
			let k = 'c';
			let s = true;
			let m = new Date();
			function n(){}
			//通过变量名判断数据类型
			console.log(typeof i);
			console.log(typeof i2);
			console.log(typeof s);
			console.log(typeof j);
			console.log(typeof k);
			console.log(typeof m);
			console.log(typeof n);
			console.log(typeof g);
			//类型转换
			//数值和字符串
			let d1 = "1.11";
			let d2 = "111";
			let d3 =parseInt(d2);
			console.log(typeof d3);
			console.log(d3)
			let d4 = parseFloat(d1);
			console.log(typeof d4);
			console.log(d4)
			i = i2;
			console.log(i);
			
		</script>
	</head>
	<body>
	</body>
</html>

3.JS类型转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<script type="text/javascript">
			let i = 1;
			let j = "1";
			// 判断值是否相同,跟数据类型无关
			console.log(i==j); //true
			// 同时判断值和数据类型,两者都相同返回true
			console.log(i===j); //false
			// 不全等
			console.log(i!==j); //true
			// 次方运算
			console.log(2**3); //8
			
			//delete
			let user = new Object();
			user.id = 10;
			user.name = "admin";
			console.log(user);//{id: 10, name: "admin"}
			delete user.id; 
			console.log(user);//{name: "admin"}
			delete user.name;
			console.log(user);//{}
			// delete user;
			// console.log(user);//{}
			
			//instanceof
			console.log(user instanceof Object);//true
			console.log(user instanceof Array);//false
		</script>
	</head>
	<body>
		
	</body>
</html>

4.JS循环方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<script type="text/javascript">
			let name = "admin";
			let array = ["zhangsan", "lisi", "wangwu"];
			//for i
			for (var i = 0; i < array.length; i++) {
				console.log(array[i]);
			}
			//for in
			for (var key in array) {
				console.log(key + "----" + array[key]);
			}
			//for of
			for (let objs of array) {
				console.log(objs)
			}
			//foreach
			array.forEach((items, key, array) => {
				console.log(items + "====" + key)
			})
			//创建对象
			let user = new Object();
			user.id = 1;
			user.name = "admin";
			for (var property in user) {
				console.log(property + "-----" + user[property]);
			}
			console.log("==========");
			var phone = {
				color: "红色",
				brand: "红米"
			};
			console.log(phone.color + "=======" + phone.brand);
		</script>
	</body>
</html>

5.json数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var phone = {color:"红色",brand:"红米"};
			console.log(phone.color+"======="+phone.brand);
			//json数据结构
			var list = [{brand:"apple",color:"白色",users:["zhang","wang","li"]},
						{brand:"华为",color:"金色",users:["zhao","qian","sun"]}];
						for (var i = 0; i < list.length; i++) {
							let p = list[i];
							console.log(p.brand+"----"+p.color+p.users);
						}
		</script>
	</body>
</html>

6.JS三种弹出框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// alert("请确认以下信息");//确认框
			// let flag = confirm("你确定要删除吗?");
			// if (flag) {
			// 	console.log("执行删除");
			// } else {
			// 	console.log("取消删除");
			// }
			let name = prompt("你录入你的姓名:" + "admin");
			console.log("你录入的是:" + name);
		</script>
	</body>
</html>

7.JS函数方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			let array = ["a", "b", "c"];
			let firstIndex = array.indexOf("a");
			console.log(firstIndex);
			let lastIndex = array.lastIndexOf("c");
			console.log(lastIndex);
			//数组转字符串
			console.log(array.toString());
			let str = "aaa-bbb-ccc";
			console.log(str);
			//字符串转数组
			let array2 = str.split("-")
			console.log(array2);
			//反转
			array2.reverse();
			console.log(array2);
			//拼接
			let str2 = array2.join("=");
			console.log(str2);
		</script>
	</body>
</html>

 8.JS面向对象bom操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var a = 1;

			function forward1() {
				history.forward();
			}

			function toPage() {
				location.href = "http://www.baidu.com";
			}

			function getScreen() {
				console.log(window.a);
				console.log(screen.availWidth);
				console.log(screen.availHeight);
				console.log(navigator.appName);
			}
		</script>
	</head>
	<body>
		<button onclick="forward1()">前进</button><br>
		<button onclick="toPage()">到baidu</button><br>
		<button onclick="getScreen()">获取屏幕和浏览器信息</button><br>
		<a href="index07函数方法.html" target="_self">到index</a>
	</body>
</html>

9.JS的function函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//声明函数
			function add() {
				let i = 1;
				let j = 2;
				console.log(i + j);
			}

			function add2(x, y) {
				return x + y;
			}
			var clickMe = function() {
				return 1 + 1;
			}
			//调用函数
			add();
			let sum = add2(1, 2);
			console.log(sum);
			console.log(clickMe());
		</script>
	</head>
	<body>
	</body>
</html>

10.JSbom事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<button onclick="click1()">click1</button><br />
		<button id="btn2">click2</button>
		<button id="btn3">click3

			cff</button>
		<script type="text/javascript">
			function click1() {
				console.log("--------");
			}
			//通过id获取指定元素
			var btn2 = document.getElementById("btn2");
			//监听btn2的点击事件
			btn2.onclick = function() {
				console.log("btn2被点击了")
			}
			//通过id获取指定元素
			var btn3 = document.getElementById("btn3");
			btn3.addEventListener('click', function() {
				console.log("btn3被点击。。。");
			});
		</script>
	</body>
</html>

11.JSdom操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div1">
			<font color="red">123</font>
		</div>
		<div class="c1"></div>
		<script type="text/javascript">
			//了解jsdom操作
			// document 文档节点
			//console.log(document);
			// 获取元素节点的几种方式
			//1.通过id属性值获取元素节点 单数
			var d1 = document.getElementById("div1");
			console.log(d1);
			//2.通过标签名获取元素节点  复数
			var divs = document.getElementsByTagName("div");
			console.log(divs[1]);
			//3.通过css选择器获取指定的元素节点 
			//获取单个节点 (第一个匹配的节点)|获取所有的匹配节点
			var d2 = document.querySelector("#div1");
			var d3 = document.querySelector(".c1");
			var d4 = document.querySelector("div");
			console.log(d2);
			console.log(d3);
			console.log(d4);
			var d13 = document.querySelectorAll(".c1");
			var d14 = document.querySelectorAll("div");
			console.log(d13);
			console.log(d14);
			//获取文本节点
			var t1 = d1.innerHTML;
			console.log(t1);
			var t2 = d2.innerText;
			console.log(t2)
			//修改文本节点
			d1.innerHTML = "你好";
			console.log(d1);
		</script>
	</body>
</html>

12.JSdom练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="#" method="get">
			用户名 <input type="text" name="username" placeholder="请输入用户名" />
			<span name="usernameMsg"></span><br />
			邮箱<input type="text" name="email" placeholder="请输入邮箱">
			<span name="emailMsg"></span><br />
		</form>
		<script type="text/javascript">
			var usernameInput = document.querySelector("input[name=username]");
			var usernameMsg = document.querySelector("span[name=usernameMsg]");
			usernameInput.onblur = function() {
				console.log(usernameInput);
				var username = usernameInput.value;
				//判断是否为空,是否满足条件
				if (username != null && username.length >= 3 && username.length <= 6) {
					usernameMsg.innerHTML = "验证成功!";
					usernameMsg.style.color = "green";
				} else {
					usernameMsg.innerHTML = "验证失败!"
					usernameMsg.style.color = "red";
				}
			}
			var emailInput = document.querySelector("input[name=email]");
			var emailMsg = document.querySelector("span[name=emailMsg]");
			const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
			emailInput.onblur = function() {
				var email = emailInput.value;
				if (emailRegex) {
					emailMsg.innerHTML = "验证成功!";
					emailMsg.style.color = "green";
				} else {
					emailMsg.innerHTml = "验证失败!"
					emailMsg.style.color = "red";
				}
			}
		</script>
	</body>
</html>

13.JS属性节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.c1 {
				height: 300px;
				width: 200px;
				background-color: aqua;
			}

			.c2 {
				height: 300px;
				width: 200px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<button class="c11">change</button>
		<button class="c22">remove</button>
		<div class="c1">

		</div>
		<script type="text/javascript">
			var button = document.querySelector(".c11");
			button.onclick = function() {
				var div = document.querySelector("div");
				var c = div.getAttribute("class");
				console.log(c)
				div.setAttribute("class", c == "c1" ? "c2" : "c1");
			}
			var button2 = document.querySelector(".c22");
			button2.onclick = function() {
				var div = document.querySelector("div");
				div.removeAttribute("class");
			}
		</script>
	</body>
</html>

 14.QQ注册表单

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>注册表单</title>
		<style>
			body {
				font-family: Arial, sans-serif;
				margin: 0;
				padding: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
				background: url("../img/background.png");
				background-position: center;
				background-repeat: no-repeat;
			}

			.form-container {
				background: rgba(255, 255, 255, 0);
				border-radius: 10px;
				box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
				padding: 20px;
				width: 350px;
				text-align: center;
			}

			.welcome-message {
				font-size: 24px;
				color: black;
				margin-bottom: 20px;
			}

			.form-group {
				margin-bottom: 20px;
				position: relative;
			}

			.form-group label {
				display: block;
				margin-bottom: 5px;
				color: #333;
			}

			.form-group input {
				width: 100%;
				padding: 10px;
				border: 1px solid #ccc;
				border-radius: 5px;
				box-sizing: border-box;
				transition: border-color 0.3s ease;
			}

			.form-group input:focus {
				border-color: #0085FF;
				outline: none;
			}

			.error {
				border-color: red !important;
			}

			.form-group .error-message {
				color: red;
				margin-top: 5px;
			}

			.submit-btn {
				background-color: #0085FF;
				color: white;
				border: none;
				padding: 10px 20px;
				border-radius: 5px;
				cursor: pointer;
				width: 100%;
				margin-top: 20px;
			}

			.submit-btn:hover {
				background-color: #1e50a2;
			}

			.checkbox-container {
				margin-top: 10px;
				text-align: left;
			}

			.checkbox-container label {
				color: #333;
			}

			a {
				color: #56ADFB;
				text-decoration: none;
			}

			a:hover {
				color: darkblue;
			}

			.a1 {
				font-size: 15px;
				color: black;
			}
		</style>
	</head>
	<body>
		<div class="form-container">
			<div class="welcome-message">
				欢迎注册QQ<br>
				<font class="a1">每一天,乐在沟通。</font>
			</div>
			<form id="registrationForm">
				<div class="form-group">
					<label for="username"></label>
					<input type="text" id="username" name="username" required placeholder="昵称">
					<div class="error-message" id="usernameError"></div>
				</div>
				<div class="form-group">
					<label for="password"></label>
					<input type="password" id="password" name="password" required placeholder="密码">
					<div class="error-message" id="passwordError"></div>
				</div>
				<div class="form-group">
					<label for="phone"></label>
					<input type="text" id="phone" name="phone" placeholder="+86" required placeholder="手机号码 (+86)">
					<div class="error-message" id="phoneError"></div>
				</div>
				<div class="checkbox-container">
					<input type="checkbox" id="terms" name="terms" required>
					<label for="terms">我已阅读并同意<a href="#">服务协议</a>和<a href="#">QQ隐私保护指引</a></label>
				</div>
				<button type="submit" class="submit-btn">立即注册</button>
			</form>
		</div>

		<script>
			var form = document.getElementById('registrationForm');
			form.addEventListener('submit', function(event) {
				event.preventDefault();
				const username = document.getElementById('username');
				const password = document.getElementById('password');
				const phone = document.getElementById('phone');
				const terms = document.getElementById('terms');

				const usernameError = document.getElementById('usernameError');
				const passwordError = document.getElementById('passwordError');
				const phoneError = document.getElementById('phoneError');

				[username, password, phone].forEach(function(input) {
					input.classList.remove('error');
				});
				usernameError.textContent = '';
				passwordError.textContent = '';
				phoneError.textContent = '';

				let hasErrors = false;

				// 验证昵称
				if (username.value.trim() === '') {
					usernameError.textContent = '昵称不能为空';
					username.classList.add('error');
					hasErrors = true;
				}

				// 验证密码
				if (!isValidPassword(password.value)) {
					passwordError.textContent = '密码不符合要求';
					password.classList.add('error');
					hasErrors = true;
				}

				// 验证手机号码
				if (!isValidPhone(phone.value)) {
					phoneError.textContent = '请输入有效的手机号码';
					phone.classList.add('error');
					hasErrors = true;
				}

				// 验证条款
				if (!terms.checked) {
					alert('请阅读并同意服务协议和隐私保护指引');
					hasErrors = true;
				}

				if (!hasErrors) {
					// 提交表单
					alert('注册成功!');
				}
			});

			function isValidPassword(password) {
				const regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).{8,16}$/;
				return regex.test(password);
			}

			function isValidPhone(phone) {
				const regex = /^\d{11}$/;
				return regex.test(phone);
			}
		</script>
	</body>
</html>