第2章 WEB02-CSS&JS篇-视频教程-第二部分

11-案例二：网站注册页面重新布局-代码实现

12-案例二：网站注册页面重新布局-扩展的属性及颜色介绍

13-案例三：使用JS完成页面表单的简单校验-需求分析及JS的概述

14-案例三：使用JS完成页面表单的简单校验-JS的数据类型、运算符和语句

15-案例三：使用JS完成页面表单的简单校验-JS的输出和步骤分析

16-案例三：使用JS完成页面表单的简单校验-代码实现

17-案例四：使用JS完成首页轮播效果-需求和分析

18-案例四：使用JS完成首页轮播效果-代码实现

19-今天内容总结

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

1.4.1 需求分析：

使用JS完成对注册页面进行简单的数据的非空校验。在提交表单的时候，不可以出现用户名，密码是空的情况。

1.4.2 分析：

1.4.2.1 技术分析：

HTML骨架，CSS美化，JS可以使页面动起来。

【JavaScript的概述】

• 什么是JavaScript：

运行在浏览器端的脚本语言.

JS的组成：

ECMAScript：语法，语句.

BOM：浏览器对象

DOM：Document Object Model 操作文档中的元素和内容.

• 在哪些地方使用JS

JS增加用户和网站交互

• 如何使用JS

语法：

• 区分大小写
• 语法要求不是特别严格
• 变量是弱变量类型
  • var s = “aa”;
  • var i = 3;
• JS代码需要写在<script></script>

【JS的数据类型】

• 原始类型：
• string
• number
• boolean
• undefined
• null
• 引用类型：

基于对象而不是面向对象.内置对象.对象类型的默认值是null.

【JS的运算符和语句】

运算符与Java中一致.

• 全等于 === ：类型和值都一致返回true

语句与Java一致：

【JS的输出】

• alert()

向页面中弹出一个提示框！！

• innerHTML:

向页面的某个元素中写一段内容，将原有的东西覆盖

• document.write();

向页面中写内容

1.4.2.2 步骤分析：

• JS都是由事件触发的，第一步确定事件。

on…

• JS的事件都会触发一个函数，编写一个函数。
• JS获得操作的对象的元素。

document.getElementById(“”);

• JS修改这个元素的属性或值。

1.4.3 代码实现：

		<script>
// 第一步确定事件：onsubmit
// 第二步编写触发函数：
function checkForm(){
// 第三步：通过ID获得元素
var uValue = document.getElementById("username").value;
// alert(uValue);
if(uValue == ""){
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("email").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
alert("邮箱格式不正确！");
return false;
}
}
</script>

1.5 使用JS完成首页上轮播图片效果：

1.5.1 需求分析：

在网站的首页上图片的轮播，现在页面中图片是静止的。让图片隔5秒自动切换。

1.5.2 分析：

1.5.2.1 技术分析：

【修改图片的路径】

获得图片，修改图片的src的属性。

document.getElementById("img1").src="2.jpg";

【JS中定时操作】

查看BOM中的window对象：

• setInterval() :隔多少毫秒之后，执行一段代码。重复执行。
• setTimeout() :隔多少毫秒之后，执行一段代码。

清除定时：

• clearInterval() :清除setInterval的定时操作。
• clearTimeout() : 清除setTimeout的定时操作。

示例代码：

function init(){
// window.setTimeout("alert('aaa')",5000);
window.setInterval("alert('bbb')",5000);
}

1.5.2.2 步骤分析：

• 步骤一：使用页面加载的事件触发一个函数
• 步骤二：在函数中设置定时：setInterval设置定时，5秒之后（切换图片-定义一个函数）
• 步骤三：编写切换图片的函数
• 步骤四：在函数中获得图片的元素
• 步骤五：修改图片的src的属性

1.5.3 代码实现：

<script>
function init(){
// 设置定时
setInterval("changeImg()",5000);
}
// 定义一个全局变量
var i = 1;
function changeImg(){
// 获得图片的元素：
var img1 = document.getElementById("img1");
if(i == 3){
i =1;
}else{
i++;
}
// 修改图片的src的属性
img1.src = "../img/"+i+".jpg";
}
</script>