Web学习笔记day3-JavaScript

最新推荐文章于 2024-09-13 14:30:21 发布

原创最新推荐文章于 2024-09-13 14:30:21 发布 · 121 阅读

CC 4.0 BY-SA版权

这篇博客介绍了如何使用JavaScript实现网页交互，包括注册页面的表单验证，利用setTimeout实现定时广告的显示与隐藏，以及省市二级联动的功能。文章详细讲解了JavaScript的基本语法，如变量、数据类型和运算符，并提供了具体的案例代码，展示了如何在HTML中内嵌和外联JavaScript脚本，以及如何操作DOM元素。此外，还涵盖了JavaScript定时器的使用和数组及元素操作的方法。

前言:笔记整理,主要用于自我复习

1.使用JS完成注册页面的校验

1.1相关知识点

1.1.1 JavaScript的概述

JavaScript是web上⼀种功能强大的编程语言，用于开发交互式的web页面。它不需要进行编译，而是直接嵌入在HTML页面中，由浏览器执行。
- JavaScript被设计用来向HTML页面添加交互行为。
- JavaScript是⼀种脚本语言（脚本语言是⼀种轻量级的编程语言）。
- JavaScript由数行可执行计算机代码组成。
- JavaScript通常被直接嵌入HTML页面。
- JavaScript是⼀种解释性语言（就是说，代码执行不进行预编译）。

JavaScript的组成：
- 核心（ECMAScript）
- 文档对象模型（DOM）
- 浏览器对象模型（BOM）
- ECMAScript：语法，语句
- BOM：浏览器对象
- DOM：Document Object Mode，操作文档中的元素和内容

JavaScript的作用：
使用JavaScript添加页面动画效果，提供用户操作体验。主要应用有：嵌入动态文本于HTML页面、对浏览器事件做出相应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。

JavaScript的引入：
在HTML文件中引入JavaScript有两种方式，⼀种是在HTML文档直接嵌入JavaScript脚本，称为内嵌式，另⼀种是链接外部JavaScript脚本文件，称为外联式。

内嵌式:在HTML文档中，通过 <script> 标签引入

		<script type="text/javascript">
			arr1=new Array(5);
			console.log(arr1);
		</script>

外联式:在HTML文档中，通过 <script src=""> 标签引入 .js 文件

	<script>
		console.log("hello js");
		alert("这是一个弹窗");
	</script>
	<script src="js/myjs.js"></script>

1.1.2基本语法

变量
在使用JavaScript时，需要遵循以下命名规范：
- 必须以字母或下划线开头，中间可以是数字、字符或下划线
- 变量名不能包含空格等符号
- 不能使用JavaScript关键字作为变量名，如：function
- JavaScript严格区分大小写
  变量的声明:
  var 变量名;
  变量的赋值:
  var 变量名 = 值;
数据类型
1. 基本类型
  - Undefined，Undefined类型只有⼀个值，即undefined。当声明的变量未初始化时，该变量的默认值是undefined。
  - Null，只有⼀个专用值null，表示空，⼀个占位符。值undefined实际上是从值null派生来的，因此ECMAScript把他们定义为相等的。
    alert(null == undefined); // 输出“true”，尽管这两个值相等，但它们的含义不同。
  - Boolean，有两个值true和false
  - Number，表示任意数字
  - String，字符串由双引号（"）或单引号（’）声明的。JavaScript没有字符类型
2. 引用类型
  - 引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象。
  - JavaScript是基于对象而不是面向对象。对象类型的默认值是null。
  - JavaScript提供众多预定义引用类型（内置对象）。
运算符
JavaScript运算符与Java运算符基本⼀致。

1.2 案例实现

部分代码

<script>
		window.onload=function(){
			usernameInput=document.getElementById("username");
			usernameInput.onblur=checkUsername;
			passwordInput=document.getElementById("password");
			passwordInput.onblur=checkPassword;
			confPasswordInput=document.getElementById("confPassword");
			confPasswordInput.onblur=checkConfPassword;
			}
			function checkUsername(){
				 username=usernameInput.value;
				 reg=/^[a-zA-Z]\w{7,17}$/;
				 spanMsg1=document.getElementById("spanMsg1");
				if(!reg.test(username)){
					spanMsg1.innerHTML="<font color='red'>用户名应该是长度为8-16位,由下字母,数字,下划线组成.</font>";
					return false;
				}else{
					spanMsg1.innerHTML="";
					return true;
				}
			}
			·
			·
			·
			function check(){
				return checkUsername()&&checkPassword()&&checkConfPassword();
			}	

		</script>
		<body>
			<form onsubmit="return check();" aciton="#" method="get" enctype="multipart/form-data">
			<table  border="0" cellspacing=0 cellpadding=10 
		       align="center" width="600" height="300">
				<tr>
					<td align="center" width="30%"><font color="blue" size="4">会员注册</font></td>
					<td colspan="2"><font><b>USER_REGISTER</b></font></td>
				</tr>
				·
				·
				·
				<tr>
					<td colspan="3" align="center"><input type="submit" name="" id="submit"/></td>
				</tr>
			</table>
			</form>
		</body>

实现效果

2.定时广告

2.1相关知识点

2.1.1 JavaScript定时器：setTimeout

setTimeout(code, millisec) ：在指定的毫秒数后调用函数或执行代码片段。
- 参数1：code必须。要调用的函数或要执行的代码字符串。
- 参数2：millisec必须。在执行代码前需等待的毫秒数。
setInterval() ：以指定周期执行函数或代码片段。
clearInterval() ：取消由setInterval() 设置的timeout。
clearTimeout() ：取消由setTimeout() 设置的timeout。

2.1.2 JavaScript样式获得或修改

obj.style.属性，获得指定“属性”的值。
obj.style.属性 = 值，给指定“属性”设置内容。

2.2 案例实现

<head>
		<meta charset="utf-8">
		<title>首页</title>
		<style>
		#header{
			height: 53px;
		}
		·
		·
		·
		</style>
		<script>
		onload=function(){
			setTimeout("showAd()",1000);
		}
		function showAd(){
			var ad=document.getElementById("ad");
			ad.style.display="block";
			setTimeout("hideAd()",5000);
		}
		function hideAd(){
			var ad=document.getElementById("ad");
			ad.style.display="none";
		}
		</script>
</head>
<body>
		<form>
		·
		·
		·
		</form>
</body>

实现效果
广告出现一秒后消失

3. 省市⼆级联动

3.1相关知识点

3.1.1数组：Array

new Array();
new Array(size); // size 数组元素个数，数组成员默认值 undefined
new Array(element0, element1, ..., elementn); // 参数列表，为数组初始化数据

数组中的每⼀个成员没有类型限制，即可以存放任意类型
数组的长度可以自动修改，类似Java中的List集合等。

3.1.2 元素操作：createElement、appendChild

document.createElement(); // 创建元素节点
ele.appendChild(); // 向标签体末尾添加新的⼦节点

3.2案例实现

<head>
		<meta charset="utf-8">
		<title>省份</title>
		<script>
		var cities=[
			["杭州市","宁波市","温州市","嘉兴市"],
			["福州市","厦门市","莆田市","泉州市","漳州市"],
			["南京市","无锡市","徐州市"]
		];
		function selectCity(obj){
			var citySelect=document.getElementById("city");
			var cityList=cities[obj.value];
			citySelect.innerHTML="<option>---请选择---</option>";
			if(cityList){
				for(i=0;i<cityList.length;i++){
					var option=document.createElement("option");
					option.innerHTML=cityList[i];
					console.log(option);
					citySelect.appendChild(option);
				}
			}
		}
		</script>
</head>
		<body>
		<select onchange="selectCity(this)">	
			<option>---请选择---</option>
			<option value="0">浙江省</option>
			<option value="1">福建省</option>
			<option value="2">江苏省</option>
		</select>
		<select name="city" id="city">
			<option >---请选择---</option>
		</select>
	</body>