STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

历史回顾

表单：form ( action | method <get | post> | enctype )

作用：收集并发送数据。

input type = ：

text 文本框 | password 密码框 | number 数字框 | date 日期框 | radio 单选按钮 | checkbox 复选框 | file 文件上传框 | email 邮件输入框 | button 普通按钮 | submit 提交按钮 | reset 重置按钮 | hidden 隐藏输入框

select > optgroup > option | 下拉列表框

textarea | 文本域

div 块级布局标签（最使用的布局标签）

span 行级布局标签（一般用来包含文字内容）

CSS （Cascading style sheet）层叠样式表

三种引入方式：行内样式 > ( 内部样式 | 外链样式 )

外链样式: <link rel = ”stylesheet” href = ”***.css”>

三种选择器： id选择器（#） > 类选择器(.) > 标签选择器

常见CSS样式：

width 设置宽 | height 高 | background-color 背景色 | color 字体颜色

font-family 字体样式 | font-size 字体大小 | font-weight 字体加粗

border-color 边框颜色 | border-radius 设置边框角度 | align 设置位置

line-height 设置行高 | vertical-align 设置上下位置 | cursor 设置光标样式

background-image：url(图片地址) 设置背景图 | background-size 背景大小

附加：background-repeat 设置图片重复 | background-position 定位图片

盒模型

overflow : hidden 清除浮动

margin ：外边距

padding ：内边距

JavaScript简介&语法

一个脚本语言。用来给HTML网页实现一些动态效果及标签对象的操作。

注意：js是基于对象操作，但是不面向对象。

STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

JavaScript组成

三部分组成：

ECMAScript | JS的基础语法规则

DOM（Document Object Model） | 文档对象模型

BOM（Browser Object Model ） | 浏览器对象模型

ECMAScript：声明当前JS的基本语法及简单的操作。

DOM：对当前标签（元素<element>）进行操作（取值 | 赋值 | 属性操作 | 样式操作...）

BOM：针对浏览器及全局进行操作。

JavaScript使用方式|引入方式

两种引入方式

第一种：外链使用 定义 ***.js 文件

<script type="text/javascript" src="js/index.js" ></script>

第二种：内部使用 直接写在当前网页中

STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

ECMAScript基础语法

在JS中，声明变量用var（variable）

var 变量名 = 变量值； STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

在JS中所有的类型接收的时候都是var

在JS中声明方法

function xxx (){ } STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

命名规则

1、不准使用关键字如： JavaScript，method，action等

2、不允许数字开头

3、名称可以使用字母、下划线、数字。中间不能有空格

4、严格区分大小写

ECMAScript 数据类型

undefined | 未定义当变量为初始化的时候返回未定义。是从null中派生出来的。如果使用 == 进行比较， undefined = null。使用alert()弹窗时如果只定义了变量而未初始化就会显示undefined

null | 空

Number类型：数字类型。 var i = 10;

Boolean 布尔类型： true | false 。 var f = true;

String 字符串类型。 var s = ”hello script”;

引用类型：var m = obj; obj是一个对象。

JS的运算符同java一样。

DOM案例：表单的数据验证

表单提交的过程中需要进行一次验证在进行提交，如果验证的过程中发现表单中的数据不符合规范，那么需要提醒一下。当表单完善之后在进行提交操作。

STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

技术点

弹窗操作

alert(”弹窗显示的内容”); 注意：如果括号内是要显示的内容的话括号内要有引号，如果是变量不带引号

手动绑定按钮事件

STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

获取当前元素（标签）对象并且读取当前输入框中是否有值

var uname = document.getElementById("ID");

STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

通过JS进行表单提交

STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

重点注意： radio 和 checkbox这两个标签在获取值的时候，如果没有默认设置value值，返回on

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单注册</title>
		
		<script>
			
			//定义一个校验的方法
			function vlidate(){
				
				//标记
				var f = true;
				
				var name = document.getElementById("name").value;
				var username = document.getElementById("username").value;
				var pwd = document.getElementById("pwd").value;
				
				var sex = document.getElementsByName("sex");
				//循环sex
				for(var i = 0 ; i < sex.length ; i ++){
					alert(sex[i].value);
				}
				
				if(name == null || name == ""){
					alert("姓名不能为空");
					f = false;
				}
				if(username == null  || username == ""){
					alert("用户名不能为空");
					f = false;
				}
				if(pwd == null  || pwd == ""){
					alert("密码不能为空");
					f = false;
				}
				
				//提交表单
				if(f == true){
					document.getElementById("dbf4").submit();
				}
			}
			
		</script>
		
	</head>
	<body>
		<center>
			<form id="dbf4" action="index.html" method="get">
				
				<table border="0px" cellpadding="8px" width="700px" cellspacing="0px" bgcolor="lightyellow">
					<tr>
						<td width="30%" align="right">名称：</td>
						<td><input type="text" id="name" name="name" /></td>
					</tr>
					<tr>
						<td width="30%" align="right">账号：</td>
						<td><input type="text" id="username" name="username" /></td>
					</tr>
					<tr>
						<td width="30%" align="right">密码：</td>
						<td><input type="password" id="pwd" name="pwd" /></td>
					</tr>
					<tr>
						<td width="30%" align="right">性别：</td>
						<td>
							男<input disabled="disabled" type="radio" name="sex" value="男" />
				 			女<input type="radio" checked="checked" name="sex" value="女" />
						</td>
					</tr>
				</table>
			</form>
		</center>
	</body>
</html>

STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

JS中错误调试

STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

BOM案例：图片轮播特效

STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

思路：先设定一个固定的img、然后在通过脚本动态操作src属性。

知识点

通过JS动态操作SRC属性

STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

自动加载执行图像切换操作

STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

周期定时器

window.setInterval(show, 1000*3);

这个定期器是周期性执行，有两个基本的参数，第一个参数是执行的方法、第二个是执行间隔。

方法调用有两种书写方式

window.setInterval(show, 1000*3);

window.setInterval(”show()”, 1000*3); 方法带括号的话要用引号包起来

时间单位为:毫秒

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//就绪函数-网页加载完成之后自动调用
			window.onload = function(){
				
				window.setInterval(show, 1000*3);
				
			}
			
			var i = 1;
			//定时器需要定时执行的方法
			function show(){
				i ++;
				//先获取当前img对象
				var img = document.getElementById("imgs");
				img.src = "img/"+i+".jpg";
				
				if(i == 6){
					i = 0;
				}
			}
		</script>
	</head>
	<body>
		<center>
			<h5>葬爱出征，寸草不生...</h5>
			<img id="imgs" src="img/1.jpg" width="542px" /><br>
		</center>
	</body>
</html>

案例：广告弹窗效果

知识点

调整图片位置

STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

如果设置里绝对定位，图片的位置使用 top | left | right | bottom 直接控制即可。

定时器（只执行一次）

window.setTimeout(参数1,参数2);

参数1：设置调用的方法。

参数2：设置时间

使用JS操作CSS样式：要先调用style才能使用display属性

STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
			.show{
				width: 200px;
				height: 200px;
				
				border: 4px solid deeppink;
				color: deeppink;
				font:20px Courier New;
				cursor: pointer;
				border-radius:100px ;
				text-align: center;
				
				/* 设定上下居中,必须使用这两个属性 */
				line-height: 200px;
                vertical-align: middle;
				
				background-image: url("img/pipixia.jpg");
				background-size: 400px 400px;
				background-repeat: no-repeat; /* 设置不重复 */
				
				/** CSS调整图片定位 */
				position:absolute;  /* 声明绝对定位,没有margin和padding */
				bottom: 0px;
				right: 0px;
				display:none ; /* 图片的隐藏 */
				
			}
		</style>
		
		<script>
			window.onload = function(){
				window.setTimeout("showDiv()",1000*5);
				//方式一：
				//window.setTimeout("hideDiv()",1000*10);
			}
			
			//显示图片
			function showDiv(){
				var div = document.getElementById("show");
				div.style.display = "block";
				//方式二：
				window.setTimeout("hideDiv()",1000*5);
			}
			//隐藏图片
			function hideDiv(){
				var div = document.getElementById("show");
				div.style.display = "none";
			}
			
		</script>
		
	</head>
	<body>
		<div id="show" class="show">嘚~驾~</div>
	</body>
</html>

STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

案例：完善表单校验

STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

技术点

给非输入标签填充内容的时候使用

innerText以纯文本的形式填充内容 STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

innerHTML以HTML格式进行填充内容 STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

JS中正则表达式的写法

/正则表达式主体/修饰符(可选)  其中修饰符是可选的。

实例：var reg = /runoob/i

比较一个值是否符合正则表达式用test()方法，如reg.test(name)返回值是一个boolean值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单注册</title>
		
		<style>
			span{
				font-family: "微软雅黑";
				font-size: 12px;
				color: red;
			}
			
		</style>
		
		<script>
			
			//定义一个校验的方法
			function vlidate(){
				
				//清空提示
				document.getElementById("name_span").innerText="*";
				document.getElementById("username_span").innerText = "*";
				document.getElementById("pwd_span").innerText = "*";
				
				//标记
				var f = true;
				
				var name = document.getElementById("name").value;
				var username = document.getElementById("username").value;
				var pwd = document.getElementById("pwd").value;
				
				//*进行验证
				if(name == null || name == ""){
					document.getElementById("name_span").innerHTML = "<a href='案例：图片轮播.html'>名称不能为空！</a>";
					f = false;
				}else{
					var reg = /^[a-zA-Z]{6,12}$/;
					if(reg.test(name)== false){
						document.getElementById("name_span").innerText = "请输入6~12位字母！";
						f = false;
					}
				}
				if(username == null || username == ""){
					document.getElementById("username_span").innerText = "账号不能为空！";
					f = false;
				}else{
					var reg = /^[[email protected]]{6,12}$/;
					if(reg.test(username)== false){
						document.getElementById("username_span").innerText = "请输入6~12位字母、数字的账号！";
						f = false;
					}
				}
				if(pwd == null || pwd == ""){
					document.getElementById("pwd_span").innerText = "密码不能为空！";
					f = false;
				}else{
					var reg = /^[[email protected]]{6,12}$/;
					if(reg.test(pwd)== false){
						document.getElementById("pwd_span").innerText = "请输入6~12位字母、数字的密码！";
						f = false;
					}
				}
				
				//提交表单
				if(f == true){
					document.getElementById("dbf4").submit();
				}
			}
			
		</script>
		
	</head>
	<body>
		<center>
			<form id="dbf4" action="index.html" method="get">
				
				<table border="0px" cellpadding="8px" width="700px" cellspacing="0px" bgcolor="lightyellow">
					<tr>
						<td width="30%" align="right">名称：</td>
						<td><input type="text" id="name" name="name" /> <span id="name_span">*</span>  </td>
					</tr>
					<tr>
						<td width="30%" align="right">账号：</td>
						<td><input type="text" id="username" name="username" /> <span id="username_span">*</span></td>
					</tr>
					<tr>
						<td width="30%" align="right">密码：</td>
						<td><input type="password" id="pwd" name="pwd" /> <span id="pwd_span">*</span></td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<input type="button" value="注册" onclick="vlidate()"  />&nbsp;&nbsp;&nbsp;
							<input type="reset" value="重置" />
						</td>
					</tr>
				</table>
			</form>
		</center>
	</body>
</html>

STAGE2-DAY03-JavaScript简介&语法，表单的数据验证，图片轮播特效，广告弹窗效果，完善表单校验

自由移动效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自有移动</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				overflow:  hidden;/*禁用滚动条,边框不会颤动*/
			}
			div{
				width: 200px;
				height: 200px;
				border: 2px solid blue;
				background-image: url("img/timg.jpg");
				background-size: 400px;
				background-repeat: no-repeat;
				color: red;
				background-position: center;
				border-radius: 100px;
				text-align: center;
				line-height: 200px;
				vertical-align: middle;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			var pin=window.innerWidth;//屏幕宽度
			var pin2=window.innerHeight;
			var a=0;//右边界
			var b=pin-200;//右边界空余距离
			var c=0;
			var d=pin2-200;
			var ball;
			window.onload=function(){
				window.setTimeout(run1,1);
				window.setTimeout(run3,1);
				ball=document.getElementById("haha");
			}
			function run1(){
				a++;
				if(a < b){
					ball.style.left=a+"px";//绝对定位可以直接写距离左右的距离，相对定位要写marginLeft
					window.setTimeout(run1,1);//递归
				}else{
					run2();
				}
			}
			function run2(){
				a--;
				if(a > 0 ){
					ball.style.left=a+"px";
					window.setTimeout(run2,1);//递归
				}else{
					run1();
				}
			}
			function run3(){
				c++;
				if(c<d){
					window.setTimeout(run3,1);
					ball.style.top=c+"px";
				}else{
					window.setTimeout(run4,5);
				}
			}
			function run4(){
				c--;
				if(c>0){
					window.setTimeout(run4,1);
					ball.style.top=c+"px";
				}else{
					window.setTimeout(run3,3);
				}
			}
		</script>
	</head>
	<body>
		<div id="haha">hahaha</div>
	</body>
</html>

总结

JavaScript

分类：

ECMAScript （JS基本语法）

DOM（Document Object Model） document.get....

BOM(Browser Object Model ) window.

从属关系为dom其实也是bom的一部分。

JS引入方式

两种：内部、外链

基本数据类型

undefined | null | Number | String | boolean | 对象（引用类型）

弹窗 alert()

根据ID获取对象   document.getElementById();

获取对象的值对象.value;

一堆事件 onclick | onchange

window.onload = function(){}; //就绪函数

周期定时器

window.setInterval(参数1,参数2);
一次性定时器

window.setTimeout(参数1,参数2);

参数1：调用的方法

参数2：延迟的时间单位：毫秒

JS操作标签（元素）属性

对象.属性名 = ?;

JS操作CSS样式

对象.style.样式名称 = ?;

标签的相对定位于绝对定位

相对定位：position:relative; 调整距离使用 margin | padding

绝对定位：position:absolute; 调整位置的时候使用 top | right | bottom | left

隐藏标签的CSS

display ：   none(隐藏) | block (块级显示) | inline (行级元素显示)

设置非输入标签的内容：

对象.innerText    以文本形式填充内容

对象.innerHTML    以HTML形式填充内容