java web(四) JavaScript介绍

今日内容介绍:

1.使用JS完成简单的数据校验

2.使用JS完成图片轮播效果

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

4.使用JS完成表单校验

今日学习目标:

掌握JavaScript 的基本语法

掌握JavaScript的对象获取

掌握JavaScript标签的基本操作

使用JS可以获得指定元素

使用JS可以对元素的标签体进行操作

使用JS可以对指定元素的样式进行操作(获得或者修改)

使用JS可以编写定时程序

一般数据校验分为:前端校验与后端校验

就算HTML页面嵌入了JavaScript,也是一个静态页面,JavaScript不算一门编程语言,主要用于写在html中,JavaScript和java没有任何关系.

JavaScript 介绍:(可以让整个静态页面具有动态效果;并且是一门弱语言类型,不会提前编译,而是一行一行的执行代码)

JavaScript的核心是ECMAScript 描述了该语言的语法和基本对象:ECMAScript 包含:基本语法,变量,关键字,保留字,数据类型,语句,函数等等

DOM 描述了处理网页内容的方法和接口:文档对象模型:包含整个html页面的内容

BOM 描述了与浏览器进行交互的方法和接口:浏览器对象模型:包含整个浏览器相关的内容

ECMAScript 与java,C这些语言很类似

与java一样,变量,函数名,运算符以及其他一切东西都是区分大小写的,JavaScript赋值时:如果开始赋空值则没有任何类型(使用var初始化一个变量)

注:JavaScript语言对分号没有要求,但是有的浏览器会要求分号,所以最好在每一句末尾加上分号,以便浏览器执行,变量声明不是必须的

区别:判断两个值相等

var a = "66"

var b = 66

a==b  true       a===b  false  两个等号表示在判断之前会有一个尝试性转换,而三个等号会限制转化,直接开始匹配

获取元素:

document.getElementById("id名称");

获取元素里面的值

document.getElementById("id名称").value;

JavaScript事件:

表单提交事件:onsubmit

JavaScript的输出:

1.警告弹出框:alter();

2.向页面指定位置写入内容:document.getElementById("id").innerHTML="输入内容";

3.document.write("<p>输入的内容</p>");

案例一:表单校验

JavaScript表单校验开发常规操作:

第一步:确定事件(onsubmit) 并为其绑定一个函数

第二步:书写这个函数(获取哟用户输入的数据<获取数据时需要在指定位置定义一个id>)

第三步:对用户输入的数据进行判断

第四步:数据合法(让表单提交)

第五步:数据非法(不让表单提交并给出错误提示信息)

问题:如何控制表单提交?

关于事件onsubmit(该方法的位置与form同级):一般用于表单提交的位置,那么需要在定义函数时给出一个返回值,

onsubmit = return checkFrom(){提交}        return false{不提交}

JavaScript判断数据为空只能使用 if(a=""):使其等于一个空的字符串

校验代码片段:

<script>
			function checkForm() {
				//alert("hah");测试函数绑定是否成功
				/**校验用户名**/
				//1.获取用户输入的数据
				var uValue = document.getElementById("user").value;
				//alert(uValue);
				if(uValue == "") {
					//给出错误提示信息
					alert("用户名不不不为空");
					return false; //执行到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>

案例二:图片轮播图案例:

切换图片JavaScript部分代码:

<div>
			<input type="button" value="下一张" onclick="changeImg()"/>
			<img id="img1" src="../img/1.jpg"  width="100%" height="100%"/>
			
		</div>

<script>
		var i= 1;
			function changeImg () {
				i++;
				document.getElementById("img1").src="../img/"+i+".jpg"
				if (i==3){
					i=0;
				}
			}
		</script>

网页加载事件:(onload)

定时操作:setInterval("changeImg",3000);按指定周期调用函数,单位是毫秒

首页轮播图步骤分析:

第一步:确定事件(onload)并为其绑定一个函数

第二步:书写绑定函数

第三步:书写定时任务(setInterval)

第四步:书写定时任务里面的函数

第五步:通过变量的方式,进行循环(获取轮播图的位置,并设置src属性){在循环的时候要注意最后一张图片要重置}

注意:页面加载onload在body里书写,因为只有body是要显示的值

首页自动轮播图核心代码:

<script>
		var i = 1;
			function init () {
				//书写轮播图的定时操作
				window.setInterval("changeImg()",3000);//Window函数可以去掉window
			}
			function changeImg(){
				i++;
				//获取图片位置并设置src属性值
				document.getElementById("img1").src="../../img/"+i+".jpg";
				if(i==3){
					i=0;
				}
			}
</script>
//init方法只需要写在body里面的onload加载事件中即可

案例三:广告弹出页面定时关闭.

技术分析:

获取图片的位置(document.getElementById("图片id"));

隐藏图片:display:none

定时操作:setInterval("显示图片函数",3000);

步骤分析:

第一步:在界面指定位置隐藏一个广告图片(使用display属性的none值)

第二步:确定事件(onload)并为其绑定一个函数

第三步:书写这个函数(设置一个显示图片的定时操作)

第四步:书写定时器中的函数(获取广告图片的位置,并设置其属性style的display值:block)

第五步:清除显示图片的定时操作()

第六步:书写隐藏图片的定时操作

第七步:书写定时器的函数(获取广告图片的位置并设置属性style的display值none)

第八步:清除隐藏图片的定时操作()

onload事件只能绑定一次

核心代码:

<script>
			var i = 1;

			function init() {
				//书写轮播图的定时操作
				window.setInterval("changeImg()", 3000); //Window函数可以去掉window

				//1.设置显示广告图片的定时操作,该定时方法具有返回值,使后面的清除显示图片接收
				time = setInterval("showAd()", 3000);
			}

			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>

html代码:
<body onload="init()">
<!--定时弹出广告图片位置-->
<img id="img2" src="../../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;" />
<!--3.轮播图部分-->
<div id="">
<img id="img1" src="../../img/1.jpg" width="100%" />
</div>
</body>

js的两种引入方式:

内部引用:<script>js内容</script>

外部引用:<script src="js路径"></script>

window中 方法掌握七个:

alter():显示带有一段消息和一个确认按钮的警告框

setInterval():按照指定的周期(以毫秒计算)来调用函数的计算表达式:setInterval("显示图片函数",3000);定时操作并且可以返回一个参数,该参数由clearInterval接收并取消定时

clearInterval():取消由setInterval()设置的timeout.接收由Interval返回的参数

setTimeout():在指定的毫秒数后调用函数或计算表达式,它有一个返回值,提供给clearTimeout使用

clearTimeout():取消由setTimeout()方法设置的timeout.

confirm():显示带有一段消息以及确认按钮和取消按钮的对话框:confirm("您确定删除?");

prompt():显示可提示用户输入的对话框  prompt("请输入价格");

History对象掌握:

function fanhui() {
//				history.go(-1);返回上一个页面
//				history.go(-2);返回上上个页面
//				history.go(1);前往下一个页面
//				history.back();返回上一个页面
//				history.forward();前往下一个页面
			}

Location对象:包含当前URL的信息,location对象是window对象的一部分,可以通过window.location属性来访问.

案例四:注册页面表单校验完善

步骤分析:

第一步:鼠标点击确定事件(获取焦点事件)(onfocus)并为其绑定一个函数

第二步:书写绑定函数(在输入框的后面给出提示信息)

第三步:鼠标移开确定事件(onblur离焦事件)并为其绑定一个函数

第四步:书写函数(对数据进行校验并分别给出提示)

数据校验核心代码:

JavaScript代码
function showTips(id,info) {
				//显示获得焦点时的操作
				document.getElementById(id+"span").innerHTML = "&nbsp&nbsp&nbsp&nbsp&nbsp<font color='gray'>"+info+"必填!</font>";
			}

			function check(id,info) {
				//1.校验用户是否输入
				var uValue = document.getElementById(id).value;
				//2.进行校验
				if(uValue == "") {
					document.getElementById(id+"span").innerHTML = "&nbsp&nbsp&nbsp&nbsp&nbsp<font color='red'>"+info+"不能为空!</font>";
				} else {
					document.getElementById(id+"span").innerHTML = "&nbsp&nbsp&nbsp&nbsp&nbsp<font color='green'>"+info+"填写正确!</font>";
				}
			}
			function checkEmail (id,info) {
				//校验邮箱是否输入以及格式是否正确
				var eValue = document.getElementById(id).value;
				if(eValue==""){
					document.getElementById(id+"span").innerHTML = "&nbsp&nbsp&nbsp&nbsp&nbsp<font color='red'>"+info+"不能为空!</font>";
				}else if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
					document.getElementById(id+"span").innerHTML = "&nbsp&nbsp&nbsp&nbsp&nbsp<font color='red'>"+info+"格式不正确!</font>";
				}
				else{
					document.getElementById(id+"span").innerHTML = "&nbsp&nbsp&nbsp&nbsp&nbsp<font color='green'>"+info+"填写正确!</font>";
				}
			}

HTML代码
<td>用户名</td>
								<td>
									<font color="red">*</font><input type="text" name="user" id="user" value="" size="34px" onfocus="showTips('user','用户名')" onblur="check('user','用户名')" /><span id="userspan"></span>
                                                                </td>

<td>Email</td>
								<td>
									<input type="text" name="email" id="email" value="" size="34px"  onfocus="showTips('email','邮箱')" onblur="checkEmail('email','邮箱')"/><span id="emailspan"></span>
								</td>

今日内容回顾:

JavaScript简单介绍:

ECMAScript对象

1.语法:与java类似,但有一些区别

2.变量:只能使用var定义,如果在函数的内容使用var定义,那么它是一个局部变量,如果没有使用var它是一个全局变量,弱类型(可以在任一步进行赋值,并且直接转换类型)

3.数据类型:原始数据类型(undefined/null/string/number/Boolean)

4.语句:与java类似

5.运算符:与java类似(区别 ==与===的区别)

6.函数:两种写法(有命名称,匿名函数)

BOM对象

window对象:alter(),prompt(),confirm(),setInterval(),clearInterval(),setTimeout(),clearTimeout()

history对象:go(参数),back(),forward()

location对象:href属性

事件:

onsubmit()此事写在form标签中(决定是否提交表单),必须有返回值;

onload()此事件只能写一次并且放到body标签中

其他事件放到需要操作的元素位置(onclick,onfocus,onblur)

获取元素里面的值:

document.getElementById("id").value;

向页面输出:

弹框:alter()

向浏览器写入内容:documen.writet(内容);

向页面指定位置写入内容:innerHTML(document.getElementById(id+"span").innerHTML = "&nbsp&nbsp&nbsp&nbsp&nbsp<font color='green'>"+info+"填写正确!</font>";)