JavaWeb--------JavaScript基础

已于 2023-08-15 21:52:59 修改
阅读量7.6k 收藏 1
点赞数
分类专栏： 编程 文章标签： javascript 开发语言 ecmascript
于 2018-03-06 22:14:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_41655101/article/details/79464625
版权

目录

一. JavaScript 概述

二. 基本语法

三. 案例及相关知识

 

一. JavaScript 概述

1.1 JavaScript简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。是一种轻量级的编程语言。可插入 HTML 页面的编程代码。插入 HTML 页面后，可由所有的现代浏览器执行。它是一种解释型语言，代码执行时不进行预编译。

JavaScript的组成：

ECMAScript核心，描述了该语言的语法、变量、关键字、保留字、数据类型、语句、函数、和基本对象等等
DOM 浏览器对象模型，描述了处理网页内容的方法和接口，包含整个HTML页面的内容
BOM 文档对象模型，操作文档中的元素和内容，描述了与浏览器进行交互的方法和接口，包含整个浏览器的内容。

1.2. JavaScript作用

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

HTML ,它是整个网站的骨架，好比一个素颜女人。

CSS ,对整个网站骨架中的内容进行修饰，好比一个化了妆打扮得漂漂亮亮的美女。

JavaScript,它能够使整个网站页面具有动态效果，好比一个化了妆打扮得漂漂亮亮的美女在翩翩起舞。注意，JS是使页面显示的内容有了动态效果，但它不属于动态页面的概念。动态页面，是指能够实时地从后台获取数据并展现在浏览器前端的页面。

Javascript与Java的关系：两者没有联系，好比雷锋和雷锋塔 

1.3 JavaScript的引入

日常开发中JavaScript的编辑工具，建议使用 HBuilder

在HTML文件中引入JS的方式有两种：内嵌式和外联式

内嵌式：在HTML文档中，通过<script></script>标签，直接嵌入javascript脚本。代码如下：

		<script type="text/javascript">
			//此处为JavaScript代码
		</script>

外联式：在HTML文档中，通过<script  src="">标签，链接外部javascript脚本。代码如下：

		<script src="1.js" type="text/javascript" charset="utf-8">
			 //上面的1.js为JavaScript文件
		</script>

小案例，如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
	
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
	
</body>
</html>

二. 基本语法

2.1 变量

区分大小写。是弱类型，如果没有给变量赋值，这个变量是不属于任何类型的，默认为undefined。如果一个变量前面没有加var则它是一个全局变量，如果加了var则它是一个局部变量。

2.2 数据类型

Undefined表示变量没有定义，而null表示变量根本不存在。

2.3 运算符

== 会尝试着将字符串类型转换成数字类型，而=== 不具备此功能。在JS中没有Java中有的equal()方法。

  

2.4 基本操作

三. 案例及相关知识

下面结合各个不同的具体例子来进一步了解JavaScript的相关知识

3.1 使用JS完成简单的数据检验

案例一，使用JS完成简单的数据检验，注册表的的校验。用户进行注册的时候，会输入一些内容，如果有些内容的输入不合法，会增加服务器的压力，我们需要对用户输入的信息进行校验（校验包括前端校验和后台校验，其中前端的校验防君子不防小人）。在本例中只对用户名、密码、确认密码、邮件 4个项进行了校验，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<script>
			function checkForm(){
				//alert("aa");
				/**校验用户名*/
				//1.获取用户输入的数据。如果Id是个字符串必须加引号，如果是个变量而不必加引号。
				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!=pValue){
					alert("两次密码输入不一致!");
					return false;
				}
				
				/*校验邮箱*/
				var eValue = document.getElementById("eamil").value;
				if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
					alert("邮箱格式不正确!");
					return false;
				}
				
			}
		</script>
	</head>
	<body>
		<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
			 
			<!--3.注册表单-->
			<tr>
				<td height="600px" background="../img/regist_bg.jpg">
					<!--嵌套一个十行二列的表格-->
					<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
						<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
							<tr height="40px">
								<td colspan="2">
									<font size="4">会员注册</font>    USER REGISTER 
								</td>
							</tr>
							<tr>
								<td>
									用户名
								</td>
								<td>
									<input type="text" name="user" size="34px" id="user"/>
								</td>
							</tr>
							<tr>
								<td>
									密码
								</td>
								<td>
									<input type="password" name="password" size="34px" id="password"/>
								</td>
							</tr>
							<tr>
								<td>
									确认密码
								</td>
								<td>
									<input type="password" name="repassword" size="34px" id="repassword"></input>
								</td>
							</tr>
							<tr>
								<td>
									Emaile
								</td>
								<td>
									<input type="text" name="email" size="34px" id="eamil"/>
								</td>
							</tr>
							<tr>
								<td>
									姓名
								</td>
								<td>
									<input type="text" name="username" size="34px"/>
								</td>
							</tr>
							<tr>
								<td>
									性别
								</td>
								<td>
									<input type="radio" name="sex" value="男"/>男
									<input type="radio" name="sex" value="女"/>女
								</td>
							</tr>
							<tr>
								<td>
									出生日期
								</td>
								<td>
									<input type="text" name="birthday" size="34px"/>
								</td>
							</tr>
							<tr>
								<td>
									验证码
								</td>
								<td>
									<input type="text" name="yzm" />
									<img src="../img/yanzhengma.png" />
								</td>
							</tr>
							<tr>
								<td colspan="2">
									<input type="submit" value="注册" />
								</td>
							</tr>
						</table>
					</form>
				</td>				
			</tr>  
			 
		</table>
	</body>
</html>如果Id是个字符串必须加引号，如果是个变量而不必加引号。
				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!=pValue){
					alert("两次密码输入不一致!");
					return false;
				}
				
				/*校验邮箱*/
				var eValue = document.getElementById("eamil").value;
				if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
					alert("邮箱格式不正确!");
					return false;
				}
				
			}
		</script>
	</head>
	<body>
		<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
			 
			<!--3.注册表单-->
			<tr>
				<td height="600px" background="../img/regist_bg.jpg">
					<!--嵌套一个十行二列的表格-->
					<form action="#" method="get" name="regForm" οnsubmit="return checkForm()">
						<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
							<tr height="40px">
								<td colspan="2">
									<font size="4">会员注册</font>    USER REGISTER 
								</td>
							</tr>
							<tr>
								<td>
									用户名
								</td>
								<td>
									<input type="text" name="user" size="34px" id="user"/>
								</td>
							</tr>
							<tr>
								<td>
									密码
								</td>
								<td>
									<input type="password" name="password" size="34px" id="password"/>
								</td>
							</tr>
							<tr>
								<td>
									确认密码
								</td>
								<td>
									<input type="password" name="repassword" size="34px" id="repassword"></input>
								</td>
							</tr>
							<tr>
								<td>
									Emaile
								</td>
								<td>
									<input type="text" name="email" size="34px" id="eamil"/>
								</td>
							</tr>
							<tr>
								<td>
									姓名
								</td>
								<td>
									<input type="text" name="username" size="34px"/>
								</td>
							</tr>
							<tr>
								<td>
									性别
								</td>
								<td>
									<input type="radio" name="sex" value="男"/>男
									<input type="radio" name="sex" value="女"/>女
								</td>
							</tr>
							<tr>
								<td>
									出生日期
								</td>
								<td>
									<input type="text" name="birthday" size="34px"/>
								</td>
							</tr>
							<tr>
								<td>
									验证码
								</td>
								<td>
									<input type="text" name="yzm" />
									<img src="../img/yanzhengma.png" />
								</td>
							</tr>
							<tr>
								<td colspan="2">
									<input type="submit" value="注册" />
								</td>
							</tr>
						</table>
					</form>
				</td>				
			</tr>  
			 
		</table>
	</body>
</html>

3.1.1 案例分析：

实现此功能，JavaScript的常规操作步骤为：

 

这里绑定函数的位置应该在表单处<form>标签里面，而不是在注册按钮处

获取元素：document.getElementById("user");  返回为一个object类型的数据。并在所要获取内容的元素处加上id属性。

获取元素里面的值：document.getElementById("user").value;  返回的是与这个内容一致的数据

onsubmit 事件，有返回值。

判断内容为空使用的是 ==“”，双引号里面的内容什么也没有。而不能使用== null。

3.1.2 相关的知识：

JS中正则匹配的方式有两种：使用String对象中的match()方法，使用正则对象中的test()方法。

JS中的函数编写方式为：

JS的输出：

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

3.2 使用JS完成图片轮播效果 

案例二，使用JS完成图片轮播效果：

1.）当点击按钮的时候页面中就显示出下一张图片。

2.）不做操作的时候，每隔2 秒，页面自动显示下一张图片。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>切换图片</title>
		<style>
			div{
				border: 1px solid white;
				width:500px ;
				height: 350px;
				margin: auto;
				text-align: center;
			}
		</style>
		<script>
			//点击按钮，触发事件，调用方法，显示下一张图片
			var i=1;
			function changeImg(){
				i++;
				document.getElementById("img1").src="../../img/"+i+".jpg";
				if(i==3){
					i=0;
				}
			}
			//每个3秒，触发事件，调用方法，自动显示下一张图片
			function init(){
				window.setInterval("changeImg2()",2000);
			}
			var m=1;
			function changeImg2(){
				m++;
				document.getElementById("img1").src="../../img/"+m+".jpg";
				if(m==3){
					m=0;
				}
			}
		</script>
	</head>
	<body onload="init()">
		<div>
			<input type="button" value="下一张" onclick="changeImg()"/>
			<img src="../../img/1.jpg" width="100%" height="100%" id="img1"/>
		</div>
	</body>
</html>

3.2.1 案例分析：

实现此功能，JavaScript的常规操作步骤为：

onload事件在一个HTML文档中只能出现一次。在实现此案例的效果时，要在<body>里面通过onload事件来绑定init()方法。开启计时器，每隔2000毫秒重新设置图片的src 属性。

在实现轮播图效果的时候，所引用的图片的名字必须包含一定顺序的数字。使用的循环方式，是通过触发事件的形式来实现的。触发一次事件调用一次方法，执行一次循环。当到了最后一张图片的时候需要进行重置。

3.2.2 相关的知识：

定时器 setInterval（多次反复执行）
在《w3school离线手册》中，点击 JavaScript ==> JS简介 ==> JavaScript实现 ==> JS参考手册下的JavaScript对象 ==> Window ==> setInterval

3.3 使用JS完成页面定时弹出广告

案例三，使用JS完成页面定时弹出广告。

我们平时浏览网页的时候会自动弹出一个广告，过了一小会广告又自动消失了。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<style>
			#father{
				border: 0px solid red;
				width: 1300px;
				height: 2170px;
				margin: auto;
			} 
		</style>
		 <script type="text/javascript">
			function init(){
				//书写轮图片显示的定时操作
				setInterval("changeImg()",3000);
				
				//1.设置显示广告图片的定时操作
				time = 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.设置隐藏图片的定时操作
				time = setInterval("hiddenAd()",3000);
			}
			//7.书写隐藏广告图片的函数
			function hiddenAd(){
				//8.获取广告图片并设置其style属性的display值为none
				document.getElementById("img2").style.display= "none";
				//9.清除隐藏广告图片的定时操作
				clearInterval(time);
			}
		</script> 
	</head>
	<body onload="init()">
		<div id="father">
			<!--定时弹出广告图片位置-->
			<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none" id="img2"/>
			
			<!--正常显示的logo部分-->
			<div id="logo">
				<div class="top">
					<img src="../img/logo2.png" height="46px"/>
				</div>
				<div class="top">
					<img src="../img/header.png" height="46px" />
				</div>
				<div class="top" id="top">
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div> 
		</div>
	</body>
</html>

3.3.1 案例分析：

实现此功能，JavaScript的常规操作步骤为：

3.3.2 相关的知识：

定时器的回调函数并不是相当于在时间到了就执行，而是有一个主JS执行进程，这个进程是页面刚加载的时候页面按照加载顺序执行的JS代码，此外还有一个需要在进程空闲的时候执行的代码队列，而我们所说的定时器的回调就是相当于在**ms之后把定时器回调放入到空闲队列中（注意，空闲队列有可能还有其它的代码，比如点击事件，因此定时器回调放入的位置不一定是空闲队列的开始位置！）。简单的可以理解位定时器和JS其他程序是并行执行的。setInterval有个很烦的地方就是当JS主程序空闲时候，执行代码队列里面的代码的时候，如果此时候我们有一个问题，定时器是等到回调执行完，才开始计时进行下次循环呢？还是只要一次计时完毕，插入回调之后不管回调执不执行就开始计时呢？答案显然是后者,当我们插入回调的 

settimeout和setinterval的区别：

1） setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。

2） setTimeout方法不会每隔**秒钟就执行一次showTime函数，它是在每次调用setTimeout后过**秒钟再去执行showTime函数。这意味着如果showTime函数的主体部分需要1秒钟执行完，那么整个函数则要每(**+1)秒钟才执行一次。而setInterval却没有被自己所调用的函数所束缚，它只是简单地每隔一定时间就重复执行一次那个函数。

JavaScript获得或修改样式

3.4 使用JS完成表单校验

案例四，案例一中当点击注册的时候如果输入不符合就马上弹出框，用户体验不好，需要完善。

代码如下 ：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<!--<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!=pValue){
					alert("两次密码输入不一致!");
					return false;
				}
				
				/*校验邮箱*/
				var eValue = document.getElementById("eamil").value;
				if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
					alert("邮箱格式不正确!");
					return false;
				}
				
			}
		</script>-->
		
		<script>
			/*function showTips(){ 这部分是完善过的，但是没有实现方法的重复利用
				document.getElementById("userspan").innerHTML="<font color='gray'>用户名必填！</font>";
			}
			
			
			function checkUser(){
				//1.获取用户输入的用户名数据
				var uValue = document.getElementById("user").value;
				//2.进行校验
				if(uValue==""){
					document.getElementById("userspan").innerHTML="<font color='red'>用户名不能为空!</font>";
				}else{
					document.getElementById("userspan").innerHTML="";
				}
			}*/
			/*这部分进行了完善，且方法实现了代码的重复利用*/
			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="";
				}
			}
		</script>
	</head>
	<body>
		<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
			<!--页面中其它内容部分-->
			<tr>
				<td>
				</td>				
			</tr>  

			<!--  注册表单-->
			<tr>
				<td height="600px" background="../img/regist_bg.jpg">
					<!--嵌套一个十行二列的表格-->
					<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
						<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
							<tr height="40px">
								<td colspan="2">
									<font size="4">会员注册</font>    USER REGISTER 
								</td>
							</tr>
							<tr>
								<td>
									用户名
								</td>
								<td>
									<input type="text" name="user" size="34px" id="user" onfocus="showTips('user','用户名必填！')" onblur="check('user','用户名不能为空！')"/><span id="userspan"></span>
								</td>
							</tr>
							<tr>
								<td>
									密码
								</td>
								<td>
									<input type="password" name="password" size="34px" id="password" onfocus="showTips('password','密码必填')" onblur="check('password','密码不能为空!')"/><span id="passwordspan"></span>
								</td>
							</tr>
							<tr>
								<td>
									确认密码
								</td>
								<td>
									<input type="password" name="repassword" size="34px" id="repassword"></input>
								</td>
							</tr>
							<tr>
								<td>
									Emaile
								</td>
								<td>
									<input type="text" name="email" size="34px" id="eamil"/>
								</td>
							</tr>
							<tr>
								<td>
									姓名
								</td>
								<td>
									<input type="text" name="username" size="34px"/>
								</td>
							</tr>
							<tr>
								<td>
									性别
								</td>
								<td>
									<input type="radio" name="sex" value="男"/>男
									<input type="radio" name="sex" value="女"/>女
								</td>
							</tr>
							<tr>
								<td>
									出生日期
								</td>
								<td>
									<input type="text" name="birthday" size="34px"/>
								</td>
							</tr>
							<tr>
								<td>
									验证码
								</td>
								<td>
									<input type="text" name="yzm" />
									<img src="../img/yanzhengma.png" />
								</td>
							</tr>
							<tr>
								<td colspan="2">
									<input type="submit" value="注册" />
								</td>
							</tr>
						</table>
					</form>
				</td>				
			</tr>  
		</table>
	</body>
</html> 这部分是之前案例一中没有完善的代码
			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!=pValue){
					alert("两次密码输入不一致!");
					return false;
				}
				
				/*校验邮箱*/
				var eValue = document.getElementById("eamil").value;
				if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
					alert("邮箱格式不正确!");
					return false;
				}
				
			}
		</script>-->
		
		<script>
			/*function showTips(){ 这部分是完善过的，但是没有实现方法的重复利用
				document.getElementById("userspan").innerHTML="<font color='gray'>用户名必填！</font>";
			}
			
			
			function checkUser(){
				//1.获取用户输入的用户名数据
				var uValue = document.getElementById("user").value;
				//2.进行校验
				if(uValue==""){
					document.getElementById("userspan").innerHTML="<font color='red'>用户名不能为空!</font>";
				}else{
					document.getElementById("userspan").innerHTML="";
				}
			}*/
			/*这部分进行了完善，且方法实现了代码的重复利用*/
			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="";
				}
			}
		</script>
	</head>
	<body>
		<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
			<!--页面中其它内容部分-->
			<tr>
				<td>
				</td>				
			</tr>  

			<!--  注册表单-->
			<tr>
				<td height="600px" background="../img/regist_bg.jpg">
					<!--嵌套一个十行二列的表格-->
					<form action="#" method="get" name="regForm" οnsubmit="return checkForm()">
						<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
							<tr height="40px">
								<td colspan="2">
									<font size="4">会员注册</font>    USER REGISTER 
								</td>
							</tr>
							<tr>
								<td>
									用户名
								</td>
								<td>
									<input type="text" name="user" size="34px" id="user" οnfοcus="showTips('user','用户名必填！')" οnblur="check('user','用户名不能为空！')"/><span id="userspan"></span>
								</td>
							</tr>
							<tr>
								<td>
									密码
								</td>
								<td>
									<input type="password" name="password" size="34px" id="password" οnfοcus="showTips('password','密码必填')" οnblur="check('password','密码不能为空!')"/><span id="passwordspan"></span>
								</td>
							</tr>
							<tr>
								<td>
									确认密码
								</td>
								<td>
									<input type="password" name="repassword" size="34px" id="repassword"></input>
								</td>
							</tr>
							<tr>
								<td>
									Emaile
								</td>
								<td>
									<input type="text" name="email" size="34px" id="eamil"/>
								</td>
							</tr>
							<tr>
								<td>
									姓名
								</td>
								<td>
									<input type="text" name="username" size="34px"/>
								</td>
							</tr>
							<tr>
								<td>
									性别
								</td>
								<td>
									<input type="radio" name="sex" value="男"/>男
									<input type="radio" name="sex" value="女"/>女
								</td>
							</tr>
							<tr>
								<td>
									出生日期
								</td>
								<td>
									<input type="text" name="birthday" size="34px"/>
								</td>
							</tr>
							<tr>
								<td>
									验证码
								</td>
								<td>
									<input type="text" name="yzm" />
									<img src="../img/yanzhengma.png" />
								</td>
							</tr>
							<tr>
								<td colspan="2">
									<input type="submit" value="注册" />
								</td>
							</tr>
						</table>
					</form>
				</td>				
			</tr>  
		</table>
	</body>
</html>

3.4.1 案例分析

实现此功能，JavaScript的常规操作步骤为：

3.4.2 相关的知识

3.5 对表格数据进行隔行操作

开发中，需要使用表格陈列数据，数据过多时不易查看，通常使用隔行换色进行表示

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格隔行换色</title>
		<script>
			window.onload = function(){
				//1.获取表格
				var tblEle = document.getElementById("tbl");
				//2.获取表格中tbody里面的行数(长度)
				var len = tblEle.tBodies[0].rows.length;
				//alert(len);
				//3.对tbody里面的行进行遍历
				for(var i=0;i<len;i++){
					if(i%2==0){
						//4.对偶数行设置背景颜色
						tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
					}else{
						//5.对奇数行设置背景颜色
						tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
					}
				}
			}
		</script>

	</head>
	<body>
		<table border="1" width="500" height="50" align="center" id="tbl">
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr >
					<td>1</td>
					<td>张三</td>
					<td>22</td>
				</tr>
				<tr >
					<td>2</td>
					<td>李四</td>
					<td>25</td>
				</tr>
				<tr >
					<td>3</td>
					<td>王五</td>
					<td>27</td>
				</tr>
				<tr >
					<td>4</td>
					<td>赵六</td>
					<td>29</td>
				</tr>
				<tr >
					<td>5</td>
					<td>田七</td>
					<td>30</td>
				</tr>
				<tr >
					<td>6</td>
					<td>汾九</td>
					<td>20</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

3.5.1 案例分析

实现此功能，JavaScript的常规操作步骤为：

3.5.2 相关的知识

如下表格，当鼠标移动到所对应的行时，行变为红色，移开是恢复白色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格隔行换色</title>
		<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>

	</head>
	<body>
		<table border="1" width="500" height="50" align="center">
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
					<td>1</td>
					<td>张三</td>
					<td>22</td>
				</tr>
				<tr onmouseover="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')">
					<td>2</td>
					<td>李四</td>
					<td>25</td>
				</tr>
				<tr onmouseover="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3','out')">
					<td>3</td>
					<td>王五</td>
					<td>27</td>
				</tr>
				<tr onmouseover="changeColor('tr4','over')" id="tr4" onmouseout="changeColor('tr4','out')">
					<td>4</td>
					<td>赵六</td>
					<td>29</td>
				</tr>
				<tr onmouseover="changeColor('tr5','over')" id="tr5" onmouseout="changeColor('tr5','out')">
					<td>5</td>
					<td>田七</td>
					<td>30</td>
				</tr>
				<tr onmouseover="changeColor('tr6','over')" id="tr6" onmouseout="changeColor('tr6','out')">
					<td>6</td>
					<td>汾九</td>
					<td>20</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

3.6 对表中的各行进行全选和全不选操作

在开发中，经常需要对数据进行“批量处理”，这种情况下要快速地对列表项进行操作。当选中第二行中前面的复选框时，下面所有的复选框都被选中；当不选中第二行中的复选框时，后面所有的复选框都处于未选中状态。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选和全不选</title>
		<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>
		
	</head>
	<body>
		<table border="1" width="500" height="50" align="center" >
			<thead>
				<tr>
					<td colspan="4">
						<input type="button" value="添加" />
						<input type="button" value="删除" />
					</td>
				</tr>
				<tr>
					<th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr >
					<td><input type="checkbox" name="checkOne"/></td>
					<td>1</td>
					<td>张三</td>
					<td>22</td>
				</tr>
				<tr >
					<td><input type="checkbox" name="checkOne"/></td>
					<td>2</td>
					<td>李四</td>
					<td>25</td>
				</tr>
				<tr >
					<td><input type="checkbox" name="checkOne"/></td>
					<td>3</td>
					<td>王五</td>
					<td>27</td>
				</tr>
				<tr >
					<td><input type="checkbox" name="checkOne"/></td>
					<td>4</td>
					<td>赵六</td>
					<td>29</td>
				</tr>
				<tr >
					<td><input type="checkbox" name="checkOne"/></td>
					<td>5</td>
					<td>田七</td>
					<td>30</td>
				</tr>
				<tr >
					<td><input type="checkbox" name="checkOne"/></td>
					<td>6</td>
					<td>汾九</td>
					<td>20</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

3.6.1 案例分析

实现此功能，JavaScript的常规操作步骤为：

 

3.6.2 相关的知识

Document:整个html文件都成为一个document文档
Element:所有的标签都是Element元素
Attribute：标签里面的属性
Text：标签中间夹着的内容为text文本

Node:document、element、attribute、text统称为节点node

Document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

后面两个方法获取之后需要遍历！
以下两个方法很重要，但是在手册中查不到！
创建文本节点：document.createTextNode()

创建元素节点：document.createElement() 

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

Attribute对象

我们所认知的html页面中所有标签里面的属性都是attribute

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态添加城市</title>
		<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>		
	</head>

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

3.7 省市二级联动

我们希望在注册页面中添加一个字段(籍贯)，当用户选择一个具体的省份，在后面的下拉列表中动态加载该省份下所有的城市。

代码如如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面重新布局</title>	

		<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>
		
	</head>
	<body>
		<div>  
			<!--注册表单部分div-->
			<div id="contanier">
				<div id="content">
					<table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">
						<form method="get" action="#" onsubmit="return checkForm()">
						<tr>
							<td colspan="2" align="center">
								<font size="5">会员注册</font>
							</td>
							
						</tr>
						<tr>
							<td>
								用户名
							</td>
							<td>
								<input type="text" name="username" id="username" onfocus="showTips('username','必须以字母开头')" onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>
							</td>
						</tr>
						<tr>
							<td>密码</td>
							<td>
								<input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位！')" onblur="check('password','密码不能为空！')" /><span id="passwordspan"></span>
							</td>
						</tr>
						<tr>
							<td>确认密码</td>
							<td>
								<input type="password" name="repassword" />
							</td>
						</tr>
						<tr>
							<td>email</td>
							<td>
								<input type="text" name="email" id="email" />
							</td>
						</tr>
						<tr>
							<td>姓名</td>
							<td>
								<input type="text" name="name" />
							</td>
						</tr>
						<tr>
							<td>籍贯</td>
							<td>
								<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>
							</td>
						</tr>
						<tr>
							<td>性别</td>
							<td>
								<input type="radio" name="sex" value="男"/>男
								<input type="radio" name="sex" value="女"/>女
							</td>
						</tr>
						<tr>
							<td>出生日期</td>
							<td>
								<input type="text" name="birthday" />
							</td>
						</tr>
						<tr>
							<td>验证码</td>
							<td>
								<input type="text" name="yanzhengma" />
								<img src="../img/yanzhengma.png" />
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<input type="submit" value="注册" />											
							</td>
						</tr>
						</form>
					</table>
				</div>
			</div> 
		</div>
	</body>
</html>

3.7.1 案例分析

实现此功能，JavaScript的常规操作步骤为：

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

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

3.7.2 相关的知识

<script>
	var str = "张三";
	//alert(encodeURI(str));//%E5%BC%A0%E4%B8%89
	//alert(encodeURIComponent(str));//%E5%BC%A0%E4%B8%89
	
	//alert(decodeURI(encodeURI(str)));//张三
	//alert(decodeURIComponent(encodeURIComponent(str)));//张三
	
	var str1 = "http://www.itheima.cn";
	//alert(encodeURI(str1));//http://www.itheima.cn
	//alert(encodeURIComponent(str1));//http%3A%2F%2Fwww.itheima.cn
	
	//alert(decodeURI(encodeURI(str1)));//http://www.itheima.cn
	//alert(decodeURIComponent(encodeURIComponent(str1)));//http://www.itheima.cn
	
	var str2 = "alert('abc')";
	//alert(str2);
	eval(str2);
	
</script>

-----------------------------------------------------------  我是低调的分隔线  -----------------------------------------------------------

 

                                                                                                             吾欲之南海，一瓶一钵足矣...

煜9527
关注
专栏目录
JavaWeb --- JavaScript
乌云的博客
03-03 1万+
JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。JS是Netcape网景公司的产品，最早取名为LiveScript；为了吸引更多java程序员。更名为 JavaScript
8.JavaScript（正则表达式）
子衿
10-04 429
## JavaScript： * 概念：一门客户端脚本语言 * 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎 * 脚本语言：不需要编译，直接就可以被浏览器解析执行了 * 功能： * 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。 * JavaScript发展史： 1. 1992年，N...
Java与JavaScript的区别
lino_yao的博客
03-13 470
Java与JavaScript的区别
JavaWeb--JavaScript
Eumenides_Suki的博客
02-23 5621
目标JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。JavaScript 是用来控制网页行为的，它能使网页可交互；那么它可以做什么呢？如改变页面内容、修改指定元素的属性值、对表单进行校验等，下面是这些功能的效果展示：改变页面内容当我点击上面左图的 按钮，按钮上面的文本就改为上面右图内容，这就是js 改变页面内容的功能。修改指定元
BOM浏览器对象模型
qq_54054566的博客
03-16 197
BOM浏览器对象模型 包含和浏览器相关内容 window对象: 该对象的属性和方法称为全局属性和全局方法, 访问时可以省略掉window. window对象中常见的方法 alert(“xxx”) 弹出提示框 confirm(“xxxx”) 弹出确认框 prompt(“xxx”) 弹出文本框 parseInt() 将字符串或小数转成整数 parseFloat() 将字符串转成整数或小数 isNaN() 判断变量是否是NaN console.log() 浏览器控制台输出 let timer
javaWeb-前端js基础
03-09
javaWeb-前端js基础
xinwenruyi-JavaWeb-master_HTML5_CSS3源码_
10-02
HTML5是超文本标记语言的最新版本，它在HTML4的基础上进行了许多改进和创新。这个版本强调了语义化标签，使得网页结构更加清晰，有利于搜索引擎优化和无障碍访问。新引入的元素如、、、和等，为构建现代网页提供了...
yolo开发t-JavaWeb-m笔记
最新发布
06-03
1. **Java基础知识**：包括语法、面向对象编程、异常处理、集合框架等，这些都是JavaWeb开发的基础。 2. **Servlet**：Servlet是JavaWeb中用于处理HTTP请求的服务器端组件，理解Servlet生命周期、服务方法、配置等...
JavaWeb-Vue
10-08
Vue.js是一个轻量级的JavaScript库，被广泛用于构建用户界面，尤其适用于单页面应用（SPA）。它以其易学易用、灵活和高性能的特点深受开发者喜爱。JavaWeb则是后端开发的重要组成部分，通常包括Servlet、JSP、Spring...
纯JavaWeb---学生信息管理系统，新手练手必备！.zip
03-05
5. **前端技术**：HTML、CSS和JavaScript是构建用户界面的基础，Bootstrap、jQuery等库可能被用来增强用户体验。 6. **人工智能集成**：如果涉及AI，可能会用到TensorFlow、Scikit-learn等库，实现数据预处理、模型...
JavaWeb—JavaScript
夏日漱石的博客
03-09 1284
JavaWeb—JavaScript
java web 和javascript_【Web前端基础】JavaScript和Java的区别是什么 - 收获啦
weixin_32311823的博客
02-24 2061
想必很多人在刚接触和认识Java的时候，都好奇它与JavaScript之间的关系，长得这么像，难道是出自同门的升级版？嗯，他们的发明者确实颇具渊源，而且客观来说，JS确实相较Java更加简洁大众，但它们本质上却仍然是两种完全不同的语言，那区别在哪呢？数据类型不同Java的数据类型分为8种，分别是：byte、short、int、long、float、double、char以及Boolean，而Jav...
jsp中把java的值传给js变量
ryan1214的专栏
06-03 2717
6、页面上java变量传入到js中 jsp中的java代码 String treeData="";  treeData=request.getAttribute("treedata").toString(); js中 var zNodes=; 注意①一定要给treeData初始化②有的时候需要给var zNodes=''加上单引号，试试就知道了，具体说不准
【Java 进阶篇】JavaScript 与 HTML 的结合方式
繁依Fanyi的博客
10-11 2399
JavaScript与HTML的结合使我们能够创建丰富的Web应用程序和网页。它允许我们添加交互性、动态性以及对用户行为的响应。通过了解JavaScript的嵌入方式、HTML事件处理和DOM操作，你可以更好地掌握这一强大的组合，为用户提供更好的在线体验。希望这篇博客对你有所帮助，祝你编写出出色的Web应用程序！
普通java web项目 引入vue.js 和elementui组件
qq445829096的博客
06-26 5472
通过vuecli框架构建前后端分离项目是目前主流的方式，但是普通web项目依然存在普通java web项目 引入vue.js 和elementui组件 vuecli前后端分离项目和普通web项目 html引入vuejs的区别 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，本身是一个nodejs项目 普通web项目引入vuejs就是只能使用vue的mvvm(双向绑定的功能)，什么router路由都是没有的 项目介绍：我这边是springboot项目 引入了thymele..
【Java原理系列】Java中ClassLoader原理用法示例中文源码分析
热门推荐
wang2leee的博客
10-15 5万+
**类加载器是负责加载类的对象**。ClassLoader类是一个**抽象类**。 给定类的二进制名称，类加载器应该尝试定位或生成构成该类定义的数据。典型的策略是将名称转换为文件名，然后从文件系统中读取该名称的“类文件”。
html,javascript,java的自我总结
dulixing0154084的博客
08-21 181
html是一种超文本标记语言，并非编程语言，无需编译器编译在浏览器解析后即可读取。 javascript是一种轻量级的编程语言，通常嵌入在html页面中实现界面中的一些交互行为。 java是一种强大的计算机编程语言，拥有跨平台、面向对象、泛型编程等特性。Java的运行一般是先将源码编译为字节码文件，然后依赖于各个平台的JVM机解释执行，即是所谓的一次编写，到处运行。...
html通过JavaScript调用java代码
n1007530194的博客
12-01 3万+
使用DWR实现JS调用服务端Java代码 1 DWR简介 DWR全称Direct Web Remoting，是一款非常优秀的远程过程调用(Remote Procedure Call)框架，通过浏览器提供的Ajax引擎实现在前端页面的JS代码中调用服务端Java代码。使用它我们可以非常方便的和服务端进行交互，轻松获取服务端返回的数据。  下面是DWR官方网站地址：  http://www.d
java和html_java和javascript有区别吗？
weixin_35665984的博客
02-19 227
Java和JavaScript看起来相似，其实这两者是两门不同的编程语言，他们之间没有任何的血缘关系，存在着差异。下面本篇文章就来给大家简单介绍一下java和javascript之间的区别，希望对大家有所帮助。Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。JavaScript是一种高级的...
JSP入门与实战：JavaWEB开发的关键技术解析
JavaWEB开发-JSP ppt 是一套针对初学者和高级开发者深入理解JSP技术的教程，由佟刚老师提供，通过北京传智播客教育平台发布。该课程旨在帮助学习者建立起对JSP的全面认识，主要内容涵盖了以下几个方面： 1. JSP入门...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值