【前端】JavaScript

最新推荐文章于 2024-04-27 08:52:05 发布

红枫忆梦

最新推荐文章于 2024-04-27 08:52:05 发布

阅读量271

点赞数

分类专栏： Java Web 文章标签：前端 JavaScript

Java Web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、使用JS完成注册表单数据校验

1、需求分析

用户在进行注册的时候会输入一些内容，但是有些用户会输入一些不合法的内容，这样会导致服务器的压力过大，此时我们需要对用户出入的内容进行一个校验（前端校验和后台校验），前端校验防君子不防小人。
在这里插入图片描述

2、技术分析

2.1 JavaScript的介绍

什么是JavaScript？

JavaScript被设计用来向HTML页面添加交互行为。
JavaScript是一种脚本语言（脚本语言是一种轻量级的编程语言）。
JavaScript由数行可执行计算机代码组成。
JavaScript通常被直接嵌入HTML页面。
JavaScript是一种解释性语言（就是说，代码执行不进行预编译）。
所有的人无需购买许可证均可使用JavaScript。
Java 与 JavaScript没有关系。

2.2 JavaScript的作用

HTML：它是整个网站的骨架。
CSS：它是对整个网站骨架的内容进行美化（修饰）。
JavaScript：它能够让整个页面具有动态效果。

2.3 JavaScript的组成部分

在这里插入图片描述

ECMAScript：它是整个JavaScript的核心，包含（基本语法、变量、关键字、保留字、数据类型、语句、函数等等）。
DOM：文档对象模型，包含（整个html页面的内容）。
BOM：浏览器对象模型，包含（整个浏览器相关内容）。

2.4 JavaScript语法

区分大小写；
变量是弱类型（String str=“aaa”, var str=“123”?；
$\color{red}{每行结尾的分号可有可无（建议写上分号）}$ ；
$\color{red}{变量不一定要初始化，声明变量不是必须的}$ ；
注释与Java、php等语言相同。

2.5 JavaScript的变量

变量可以不用声明，变量是弱类型。统一使用var来定义！定义变量的时候不要使用关键字和保留字。

2.6 JavaScript数据类型

JavaScript数据类型分为原始数据类型和引用数据类型。
原始数据类型：string、number、boolean、null、undefined；
引用数据类型：Array、Boolean、Date、Math、Number、String、ReReqExp。

2.7 JavaScript运算符

其他运算符与Java大体一致，需要注意其等性运算符。
== 它在做比较的时候会进行自动转换。
=== 它在作比较的时候不会进行自动转换。

2.8 JavaScript语句

所有语句与Java大体一致。

2.9 获取元素内容

获取元素：document.getElementById(“id名称”); 批注：如果id是一个字符串，那么必须加上引号，如果是一个变量那么不需要。
获取元素里面的值：document.getElementById("id名称“).value;

2.10 JavaScript事件

表单提交事件：onsubmit

2.11 JavaScript的输出

警告框：alert();
向页面指定位置写入内容：innerHTML(属性)
向页面写入内容：document.write("");

3、步骤分析

第一步：确定事件（onsubmit）并为其绑定一个函数；
第二步：书写这个函数（获取用户输入的数据<获取数据时需要在指定位置定义一个id>）；
第三步：对用户输入的数据进行判断；
第四步：数据合法（让表单提交）；
第五步：数据非法（给出错误提示信息，不让表单提交）；

问题：如何控制表单提交？
关于事件onsubmit：一般用于表单提交的位置，那么需要在定义函数的时候给出一个返回值。onsubmit = return checkForm()

4、代码实现

JS代码：

<script>
	function checkForm(){
	//alert(“aa”);
	/**校验用户名**/
	//1、获取用户输入的数据
	var uValue = document.getElementById(“user”).value;
		//alert(uValue);
		if(uValue==""){
			//2、给出错误提示信息
			alert("用户名不能为空！");
			return false;
		}
	
		//校验密码
		var pValue = document.getElementById("password").value;
		if(pValue==""){
			alert("密码不能为空！");
			return false;
		}
	
		//校验确认密码
		var rpValue = document.getElementById("repassword").value;
		if(rpValue==""){
			alert("两次密码输入不一致！");
			return false;
		}
	
		/*校验邮箱*/
		var eValue = document.getElementById("email").value;
		if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
			alert("邮箱格式不正确！");
			return false;
		}
	}
	}
</script>

HTML部分：

<form action="#" method="get" name="regform" onsubmit="return checkForm()">
需要在指定位置添加id

二、使用JS完成首页轮播图效果案例

1、需求分析

我们希望在首页完成对轮播图的效果实现：
在这里插入图片描述

2、技术分析

获取元素document.getElementById(“id名称”)
事件（onload）
定时操作：setInterval(“changeImg()”,3000);

3、步骤分析

第一步：确定事件（onload）并为其绑定一个函数；
第二步：书写绑定的这个函数
第三步：书写定时任务（setInterval）
第四步：书写定时任务里面的函数
第五步：通过变量的方式，进行循环（获取轮播图的位置，并设置src属性）；批注：在循环的时候需要注意，到了最后一张图片的时候要重置。

4、代码实现

JS代码

<script>
	function init(){
		//书写轮图片显示的定时操作
		window.setInterval("changeImg()",3000);
	}

	//书写函数
	var i=0;
	function changeImg(){
		i++;
		//获取图片位置并设置src属性值
		document.getElementById("img1").src="../img/"+i+".jpg";
		if(i==3){
			i=0;
		}
	}
</script>

HTML部分

<body onload=”init()”>
在指定位置定义id。

三、使用Js完成页面定时弹出广告

1、需求分析

我们希望在首页中的顶部做一个定时弹出广告图片。其实现效果如下：
在这里插入图片描述

2、技术分析

获取图片的位置（document.getElementById(“”)）
隐藏图片：display：none
定时操作：setInterval(“显示图片的函数”,3000);

3、步骤分析

第一步：在页面指定位置隐藏一个广告图片（使用display属性的none值）
第二步：确定事件（onload）并为其绑定一个函数
第三步：书写这个函数（设置一个显示图片的定时操作）
第四步：书写定时器中的函数（获取广告图片的位置并设置属性style的display值block）
第五步：清除显示图片的定时操作（）
第六步：书写隐藏图片的定时操作
第七步：书写定时器中的函数（获取广告图片的位置并设置属性style的display值none）
第八步：清除隐藏图片的定时操作（）

4、代码实现

JS代码

<script>
	function init(){
		//书写轮图片显示的定时操作
		window.setInterval("changeImg()",3000);

		//1、设置显示广告图片的定时操作
		time = window.setInterval("showAd()",3000);
	}

	//书写函数
	var i=0;
	function changeImg(){
		i++;
		//获取图片位置并设置src属性值
		document.getElementById("img1").src="../img/"+i+".jpg";
		if(i==3){
			i=0;
		}
	}

	//2、书写显示广告图片的函数
	function showAd(){
		//3、获取广告图片的位置
		var adEle = document.getElementById("img2");
		//4、修改广告图片元素里面的属性让其显示
		adEle.style.display = "block";
		//5、清除显示图片的定时操作
		clearInterval(time);
		//6、设置隐藏图片的定时操作
		setInterval("hiddenAd()",3000);
	}

	//7、书写隐藏广告图片的函数
	function hiddenAd(){
		//8、获取广告图片并设置其style属性的display值为none
		document.getElementById("img2").style.display= "none";
		//9、清除隐藏广告图片的定时操作
		clearInterval(time);
	}
</script>

HTML部分

<body onload=”init()”>
<!—定时弹出广告图片位置-->
<img src=”../img/789.jpg” width=100% style=”display:none” id=”img2”>

5、总结

5.1 JavaScript的引入方式

内部引入方式
直接将JavaScript代码写到
外部引入方式
需要创建一个.js文件，在里面书写javascript代码，然后在html文件中通过script标签的src属性引入该外部的js文件。

5.2 BOM对象

BOM对象：浏览器对象模型（操作与浏览器相关的内容）

window对象
window对象表示浏览器中打开的窗口。
**setInterval()?*它有一个返回值，主要是提供给clearInterval使用。
**setTimeout()?*它有一个返回值，主要是提供给clearTimeout使用。
**clearInterval()?*该方法只能清除由setInterval设置的定时操作。
**clearTimeout()?*该方法只能清除由setTimeout设置的定时操作。

弹出框的几个方法：

<head>
<script>
	//警告框
	//alert(“aaa”);
	//确认按钮
	//confirm(“您确认删除吗？”);
	//提示输入框
	prompt(“请输入价格：”);
</script>
</head>

Location对象
Location对象包含有关当前URL的信息。

href：该属性可以完成通过JS代码控制页面的跳转。

<html>
	<head>
		<meta charset=”UTF-8”>
		<title>location对象</title>
		<script>
			function tiao(){
	window.location.href=www.baidu.com;
}
</script>
	</head>
	<body>
	   <a href=”#” onclick=”tiao()”>跳转到百度首页</a>
	</body>
</html>

History对象
History对象包含用户（在浏览器窗口中）访问过的URL。

历史页面：使用location页面（把href属性值改为当前的history）

History页面代码：

<input type=”button” value=”返回上一个页面” onclick=”javascript:history.back()”>

go（参数）
参数：-1返回上一个历史记录页面；-2返回上上一个历史记录页面；1进入下一个历史记录页面。
让按钮点击失效：

onclick=”javascript:void(0)”

Navigator对象
Screen对象

四、使用JS完成注册页面表单校验

1、需求分析

之前我们已经使用弹出框的方式实现了表单校验的功能，但是此种方式用户体验效果极差！我们希望做成如下这种效果：
在这里插入图片描述

2、技术分析

3、步骤分析

第一步：确定事件（onfocus聚焦事件）并为其绑定一个函数
第二步：书写绑定函数（在输入框的后面给出提示信息）
第三步：确定事件（onblur离焦事件）并为其绑定一个函数
第四步：书写函数（对数据进行校验，分别给出提示）

4、代码实现

HTML代码

<input type="text" name="user" size="34px" id="user" onfocus="showTips('user','用户名必填！')" onblur="check('user','用户名不能为空！')"><span id="userspan"></span>

JS代码

function showTips(id,info){
			document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
		}

		function check(id,info){
			//1、获取用户输入的用户名数据
			 var uValue = document.getElementById(id).value;
			 //2、进行校验
			 if(uValue==""){
			 	document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>"
			 }else{
			 	document.getElementById(id+"span").innerHTML="";
			 }
		}

JavaScript简单介绍

ECMAScript

语法
变量：只能使用var定义，如果在函数的内容使用var定义，那么它是一个局部变量，如果没有使用var，那么它是一个全局的，弱类型！
数据类型：原始数据类型（undefined/null/string/boolean）
语句：
运算符：与=
函数：两种写法（有命名称，匿名的）

BOM对象

window:alert(),prompt(),confirm(),setInterval(),clearInterval(),setTimeout(),clearTimeout()
history:go(参数)，back(),forward()
location:href属性

事件

onsubmit()此事件写在form标签中，必须有返回值。
onload()此事件只能写一次并且放到body标签中
其他事件放到需要操作的元素位置。（onclick、onfocus、onblur）

获取元素

document.getElementById(“id”)

获取元素里面的值

document.getElementById(“id”).value

向页面输出

弹窗：alert();
向浏览器中写入内容：document.write(内容)；
向页面指定位置写入内容：innerHTML

五、使用JS完成表格的一个隔行换色

1、需求分析

我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息，显示效果如下：
在这里插入图片描述

2、技术分析

新标签的学习

<thead>
	<tr>
	    <td></td>
	</tr>
</thead>
<tbody>
	<tr>
	    <td></td>
	</tr>
</tbody>

确定事件(页面加载事件onload)
获取元素：获取表格（document.getElementById()）,最终是为了获取表格中tbody里面的行数（长度）。
tbody里面的行数（rows.length）
JS的遍历（for循环）
获取奇数行和偶数行（对遍历中角标对2取余）
设置背景颜色（.style.backgroundColor）

3、步骤分析

第一步：确定事件（onload）并为其绑定一个函数
第二步：书写函数（获取表格）
第三步：获取tbody里面的行数
第四步：对tbody里面的行进行遍历
第五步：获取奇数行和偶数行（角标对2取余）
第六步：分别对奇数行和偶数行设置背景颜色

4、代码实现

JS代码

<script>
	function changeColor(id,flag){
		if(flag=="over"){
			document.getElementById(id).style.backgroundColor="red";
		}else if(flag=="out"){
			document.getElementById(id).style.backgroundColor="white";
		}	
	}
</script>

HTML代码

<tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
<tr onmouseover="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')">

5、实现一个表格的高亮显示

分析：
第一步：确定事件（onmouseover和onmouseout）并分别为其绑定一个函数
第二步：获取鼠标移上去的那行，对其设置背景色

6、总结

回顾之前已经使用过的事件
（onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout）
在这里插入图片描述

onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适
onclick/ondbclick:鼠标单击和双击事件
onkeydown/onkeypress:搜索引擎使用较多
onload：页面加载事件，所有的其他操作（匿名方式）都可以放到这个绑定的函数里面去。如果有名称，那么在html页面中只能写一个。
onmouseover/onmouseout/onmousemove:购物网站商品详情页。
onsubmit:表单提交事件
onchange:当用户改变内容的时候使用这个事件（二级联动）

六、使用JS完成全选和选不选操作

1、需求分析

我们希望在后台系统实现一个批量删除的操作（全选所有的复选框），显示效果如下：
在这里插入图片描述

2、技术分析

确定事件（鼠标单击事件onclick）,事件绑定到编号前面的复选框里面
获取编号前面的复选框的状态（是否选中）
1.获取复选框：Document.getElementById(“id”)
2.获取复选框的状态：checkAllEle.checked?
获取下面所有的复选框：Document.getElementByName(“name”);

3、步骤分析

第一步:确定事件（onclick）并为其绑定一个函数
第二步：书写函数（获取编号前面的复选框，获取其状态）
第三步：判断编号前面复选框的状态（如果未选中，获取下面所有的复选框，并将其状态置为未选中）

4、代码实现

JS部分代码

<script>
	function checkAll(){
		//1、获取编号前面的复选框
		var checkAllEle = document.getElementById("checkAll");
		//2.对编号前面的复选框的状态进行判断
		if(checkAllEle.checked==true){
			//3、获取下面所有的复选框
			var checkOnes = document.getElementsByName("checkOne");
			//4、对获取的所有复选框进行遍历
			for(var i=0;i<checkOnes.length;i++){
				//5、拿到每一个复选框，并将其状态置为选中
				checkOnes[i].checked=true;
			}
		}else{
			//6、获取下面所有的复选框
			var checkOnes = document.getElementsByName("checkOne");
			//7、对获取的所有复选框进行遍历
			for(var i=0;i<checkOnes.length;i++){
				//8、拿到每一个复选框，并将其状态置为未选中
				checkOnes[i].checked=false;
			}
		}
	}
</script>

HTML代码
复选框前面的：

<th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>

下面所有的复选框：

<td><input type="checkbox" name="checkOne"/></td>

5、总结

5.1 Javascript的DOM操作

在这里插入图片描述

Document:整个HTML文件都成为一个document文档
Element：所有的标签都是Element元素
Attribute:标签里面的属性
Text：标签中间夹着的内容为text文件
Node：document、element、attribute、text统称为节点node。

Document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
在这里插入图片描述
后面两个方法获取之后需要遍历！
以下两个方法很重要，但是在手册中查不到！
$\color{red}{创建文本节点：document.createTextNode()}$
$\color{red}{创建元素节点：document.createElement()}$

Element对象
我们所认知的html页面中所有的标签都是Element元素

element.appendChild() 向元素添加新的子节点，作为最后一个子节点。
element.firstChild 返回元素的首个子节点。
element.getAttribute() 返回元素节点的指定属性值。
element.innerHTML 设置或返回元素的内容
element.insertBefore() 在指定的已有的子节点之前插入新节点。
element.lastChild 返回元素的最后一个子元素。
element.setAttribute() 把指定属性设置或更改为指定值。

Attribute对象
我们所认知的html页面中所有标签里面的属性都是attribute
在这里插入图片描述

5.2 DOM练习

在页面中使用列表显示一些城市

<ul>
	<li>北京</li>
	<li>上海</li>
	<li>广州</li>
</ul>

我们希望点击一个按钮实现动态添加城市。

分析：

事件（onclick）
获取ul元素节点
创建一个城市的文本节点
创建一个li元素节点
将文本节点添加到li元素节点中去
使用element里面的方法appendChild（）来添加子节点

JS代码

<script>
	window.onload = function(){
		document.getElementById("btn").onclick = function(){
			//1、获取ul元素节点
			var ulEle = document.getElementById("ul1");
			//2、创建城市文本节点
			var textNode = document.createTextNode("深圳");//深圳
			//3、创建li元素节点
			var liEle = document.createElement("li");//<li></li>
			//4、将城市文本节点添加到li元素节点中去
			liEle.appendChild(textNode);//<li>深圳</li>
			//5、将li添加到ul中去
			ulEle.appendChild(liEle);
		}
	}
</script>

HTML代码

<input type="button" value="添加城市" id="btn">
<ul id="ul1">
	<li>北京</li>
	<li>上海</li>
	<li>广州</li>
</ul>

七、使用JS完成省市二级联动

1、需求分析

我们希望在注册页面中添加一个字段（籍贯），当用户选择一个具体的省份，在后面的下拉列表中动态加载该省份下所有的城市，显示效果如下：
在这里插入图片描述

2、技术分析

事件（onchange）
使用一个二维数组来存储省份和城市（二维数组的创建？）
获取用户选择的省份（使用方法传参的方式：this.value）
遍历数组（获取省份与用户选择的省份比较，如果相同了，继续遍历省份下所有的城市）
创建文本节点和元素节点并进行添加操作

createTextNode()
createElement()
appendChild()

3、步骤分析

第一步：确定事件（onchange）并为其绑定一个函数
第二步：创建一个二维数组用于存储省份和城市
第三步：获取用户选择的省份
第四步：遍历二维数组中的省份
第五步：将遍历的省份与用户选择的省份比较
第六步：如果相同，遍历该省份下所有城市
第七步：创建城市文本节点
第八步：创建option元素节点
第九步：将城市文本节点添加到option元素节点中去
第十步：获取第二个下拉列表，并将option元素节点添加进去
第十一步：每次操作前清空第二个下拉列表的option内容

4、代码实现

JS代码

<script>
	//1、创建一个二维数组用于存储省份和城市
	var cities = new Array(3);
	cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
	cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
	cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
	cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");

	function changeCity(val){
		//7、获取第二个下拉列表
		var cityEle = document.getElementById("city");

		//9、清空第二个下拉列表的option内容
		cityEle.options.length=0;
		

		//2、遍历二维数组中的省份
		for(var i=0;i<cities.length;i++){
			//注意，比较的是角标
			if (val==i) {
				//3、遍历用户选择的省份下的城市
				for(var j=0;j<cities[i].length;j++){
					// alert(cities[i][j]);
					// 4、创建城市的文本节点
					var textNode = document.createTextNode(cities[i][j]);
					//5、创建option元素节点
					var opEle = document.createElement("option");
					//6、将城市的文本节点添加到option元素节点
					opEle.appendChild(textNode);
					//8、将option元素节点添加到第二个下拉列表中去
					cityEle.appendChild(opEle);
				}
			}
		}
	}
</script>

HTML代码

<!--2.确定事件，通过函数传参的方式拿到改变后的城市-->
<select onchange="changeCity(this.value)">
	<option>--请选择--</option>
	<option value="0">湖北</option>
	<option value="1">湖南</option>
	<option value="2">河北</option>
	<option value="3">河南</option>
</select>
<select id="city">	
</select>

5、总结

5.1 JavaScript内置对象

在这里插入图片描述

Array对象
数组的创建：
在这里插入图片描述
数组的特点：
长度可变！数组的长度=最大角标 + 1

Boolean对象
对象创建：
在这里插入图片描述
如果value不写，那么默认创建的结果为false

Date对象
getTime()返回1970年1月1日至今的毫秒数
解决浏览器缓存问题

Math和Number对象
与java里面的基本一致

String对象

match() 找到一个或多个正则表达式的匹配。
substr() 从起始索引提取字符串中指定数目的字符。
substring() 提取字符串中两个指定的索引号之间的字符。

例子：

<script>
	var str = "-a-b-c-d-e-f-";
	var str1 = str.substr(2,4);//-b-c
	//alert(str1);
	var str2 = str.substring(2,4);//-b
	alert(str2);
</script>

RegExp对象
正则表达式对象
test 检索字符串中指定的值，返回true或false。

5.2 全局函数

全局属性和函数可用于所有内键的JavaScript对象
在这里插入图片描述

红枫忆梦

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【前端】JavaScript

一、使用JS完成注册表单数据校验1、需求分析用户在进行注册的时候会输入一些内容，但是有些用户会输入一些不合法的内容，这样会导致服务器的压力过大，此时我们需要对用户出入的内容进行一个校验（前端校验和后台校验），前端校验防君子不防小人。2、技术分析2.1 JavaScript的介绍什么是JavaScript？JavaScript被设计用来向HTML页面添加交互行为。JavaScrip...
复制链接

扫一扫