Javaweb基础——javascript

「已注销」

于 2019-04-17 17:19:31 发布

阅读量168

点赞数

分类专栏： Java

Java 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

百度百科上关于JavaScript的描述是：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。说的通俗一点就是它是一种功能强大的语言，用于开发交互式的web页面，它不需要进行预编译，而是直接嵌入到HTML中，由浏览器执行；JS被设计来想HTML添加交互行为，是一种脚本语言，直接嵌入到HTML中的解释型语言；

JS有三部分组成：ECMAScript（核心，语法语句），BOM（浏览器对象模型），DOM（文档对象模型）

对于学习一项新的技术，我们一般分为三步，这个东西是什么？能做什么？怎么做的？下面让我们看一下JS的作用

JS的作用：添加页面的动画效果以及提供用户操作体验，主要应用：嵌入动态文本，检验用户提交的数据，对浏览事件做出响应、读取HTML、检验访客的浏览信息；

引入JS有两种方式：一种是内嵌式，一种是外联式的；

所有的变量使用var来定义，在JS的数据类型中，有原始数据类型和引用数据类型；分别位于计算机的堆栈中；

原始数据类型分为五种，分别是number，Boolean，string，null（对象不存在）,undefined（对象没有实现初始化）;

引用数据类型：存在很多种，每一种都是object对象；

可以使用typeof查看数据类型，使用insinstanceof判断数据类型；

这些细节性的知识点我们在这里就不做更多的介绍，下面让我们来实现几个简单的功能，通过功能来理解一些基本的知识：

有这样一个场景，就是我们都知道你在一个登陆或者注册信息的时候都会在框内填自己的信息，但是一般会有不合法数据的输入，那么这样就需要进行数据合法性的一个校验，这时候我们通过使用JS来完成。首先我们来看它是如何实现的：

<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="exaile"/>
</td>
</tr>

假如它所作用出来的效果是这样的：

下面我们需要的就是对这表里面的数据进行校验，我们的这部分数据在form表单中，所以我们需要在form中加一个事件：如

<form action="#" method="get" name="regForm" οnsubmit="return checkForm()">中的onsubmit事件，所有的onsubmit事件都有返回值，接下来我们就需要写JS部分啦，具体实现如下：

<script>
			function  checkForm(){
				var uValue = document.getElementById("user").value;
				//用来验证用户名是否合法
				if(uValue==""){
					alert("用户名不能为空！！");
					return false;
				}
				//用来验证密码是否合法
				var kValue = document.getElementById("password").value;
				if(kValue==""){
					alert("密码不能为空");
					return false;
				}
				//用来检验两次输入的密码是否相同
				var rkValue = document.getElementById("repassword").value;
				if(rkValue!=kValue){
					alert("两次输入密码不一致！");
					return false;
				}
				var emailValue = document.getElementById("exaile").value;
				if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(emailValue)){
					alert("你所输入的邮箱格式错误");
					return false;
				}
			}
		</script>

在JS部分我们需要注意以下几点：第一就是我们需要获取到指定位置的数据来进行校验，这里获取位置通过document.getElementById("repassword").value事项，引号里面的内容通过在输入框里面的ID来实现，前后要保持一致；之后就是简单的校验问题，完成见得if条件句即可；

另一个就是用实现图片的轮播效果，平时在我们访问一个网页的时候，有的部分的图片是自动的进行更换的，这个功能也是通过我们的JS来实现的；如下：

我们在浏览网页的时候，通常会遇见一个网页中弹出来某一个广告，那么这个广告是怎么实现的？下面这个广告是怎么实现的：

<script>
			function init(){
				setInterval("changeImage()",2000);/*设置轮播时间*/
				time = setInterval("showAd()",2000);/*第一步*/
			}
			var i = 0;
			function changeImage(){
				i++;
				document.getElementById("image1").src=src="../img/"+i+".jpg";
				if(i==3){
					i=0;
				}
			}
			//2.书写显示广告的函数：
			function showAd(){
				//3获取广告图片的位置
				var adEle = document.getElementById("image2");
				//4修改广告图片元素里面的属性让其显示
				adEle.style.display = "block";
				//5清除显示图片的定时操作
				clearInterval(time);
				//6设置隐藏图片的定时操作
				time = setInterval("hiddenAd()",3000);
			}
			//7书写隐藏广告图片的函数
			function hiddenAd(){
				//8修改广告图片元素里面的属性让其显示,修改display的属性为none
				document.getElementById("image2").style.display="none";
				//9清除隐藏广告图片的定时操作：
				clearInterval(time);
			}
		</script>

body里面的设置如下：<body οnlοad="init()">在对应的id中也应该设置对应的id,这样便于对数据的获取,并且需要在img标签中声明一下图片为隐藏值，具体实现步骤如上图：确定一个事件，init（），之后在初始化事件中进行设置轮播时间，书写显示广告的函数，获取广告的位置，修改广告图片元素的属性让其显示，清除显示图片的定时操作，设置隐藏图片的定时操作，书写隐藏图片的函数，修改广告图片元素里面的元素让其显示，修改display值为none；清除隐藏广告图片的定时操作。

如果想要实现上面这种功能，需要通过确定一个onfocus()事件，<input type="text" name="user" size="34px" οnfοcus="showTio()"/><span id="userspan"></span>，对该事件进行函数的书写

更加完善的写法可以是下面这样，首先点击输入框之后，含有一个提示（用户名必填，或者密码必填），当我们不填的时候，会有一个提示我们用户名或者密码不能为空，而填写内容则不提示，具体实现如下：

<tr>
								<td>
									用户名
								</td>
								<td>
									<input type="text" name="user" size="34px" id="user" onfocus="showTio('user','用户名必填')" onblur="checkUser('user','用户名不能为空')" /><span id="userspan"></span>
								</td>
							</tr>
							<tr>
								<td>
									密码
								</td>
								<td>
									<input type="password" name="password" size="34px" id="pwd" onfocus="showTio('pwd','密码必填')" onblur="checkUser('pwd','密码不能为空')"/><span id="pwdspan"></span>
								</td>
							</tr>

具体的效果图如下：

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javaweb基础——javascript

百度百科上关于JavaScript的描述是：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。说的通俗一点就是它是一种功能强大的语言，用于开发交互式的web页面，它不需要进行预编译，而是直接嵌入到HTML中，由...
复制链接

扫一扫