JavaScript入门--数据校验 轮播图 定时弹出广告 表单校验
JavaScript入门基础知识：
JS组成：
- ECMAScript(核心) ：JS语法 语句
- 文档对象模型（DOM）：操作文档中的元素和内容
- 浏览器对象模型（BOM）：浏览器对象
JS的作用：
使用JS添加页面动态效果，提供用户操作体验。主要应用有嵌入动态文本于HTML页面，对浏览器事件做出相应，读写HTML元素，验证提交数据，检测访客浏览器信息
JS基本语法：
1.变量
1.1 命名规范：
1.2 变量声明
1.3 变量赋值
2.数据类型
2.1基本数据类型：undefined null Number boolean string object
2.2引用数据类型：引用类型通常叫做类，遇到值引用值，所处理的就是对象
JS是基于对象，而不是面向对象，对象类型的默认值维null
JS提供了众多的预定义引用类型
3.运算符
1.算术运算符
2.赋值运算符
3.比较运算符
4.逻辑运算符
4.基本操作
alert()：向页面中弹出一个提示框
innerHTML：向页面的某个元素写一段话，将原有内容覆盖
document.write()：向页面中写内容
JavaScript入门案例：
- 使用JS完成简单的数据校验
- 使用JS完成图片轮播效果
- 使用JS完成页面定时弹出广告
- 使用JS完成表单校验
案例：
1.用户提交表单时需要对用户填写的数据进行校验。
步骤一：表单<form>中添加提交事件：<form action="#" onsubmit="return check()">
步骤二：编写 check()函数进行校验
<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>
2.在首页中提供一张图片进行显示，将一个图片换成几张图片轮换显示
window.setInterval(code,millsec)：按照指定的周期来执行函数或者代码片段
code：执行的函数名或者执行的代码或者字符串
millsec：时间间隔，单位：毫秒
步骤一：为轮播图img标签调价id属性
步骤二：编写JS代码，页面加载触发指令函数
<script>
function init(){
//书写轮图片显示的定时操作
setInterval("changeImg()",3000);
}
//书写函数
var i=0
function changeImg(){
i++;
//获取图片位置并设置src属性值
document.getElementById("img1").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
3.平时浏览网页时，页面打开5秒显示广告，5秒后隐藏
setTimeOut()在指定的毫秒后调用函数或者执行代码片段
setInterval()以指定周期执行函数或者代码片段
clearInterval()取消由setInterval()设置的timeout
clearTimeout()取消由setTimeOut()设置的timeout
步骤一：在页面中，添加广告为div，并设置页面加载时间
步骤二：编写JS实现
<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>
4.完善注册表单校验，将错误信息提示在对应的表单元素后面，将重复代码复用，校验不通过的在当前标签后面，红色字体提示，对于需要校验的表单项进行全部校验，第一个不通过校验的元素获得焦点
innerHTML 在指定元素后面添加文本信息
onsubmit 提交按钮被点击
onblur 元素失去焦点
onfocus 元素获得焦点
步骤一：添加错误信息提示显示区域<span id ="usernameMsg"></span>
步骤二：表单元素id属性
步骤三：校验不同，给span显示错误信息
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=""; } }
步骤四：第一个不通过的获得焦点
方法二：
步骤一：确定事件并为其绑定一个函数
步骤二：书写绑定函数（在输入框的后面给出提示信息）
步骤三：确定离焦事件并为其绑定一个函数
步骤四：书写函数，对数据校验并给出提示信息
ECMAScript
1.语法
2.变量：只能使用var定义，如果在函数的内容使用var定义，那么它是一个局部变量，如果没有使用var它是一个全局的。弱类型！
3.数据类型：原始数据类型(undefined/null/string/number/boolean)
4.语句：
5.运算符：==与===的区别
6.函数：两种写法(有命名称，匿名的)
BOM对象
window:alert(),prompt(),confirm(),setInterval(),clearInterval(),setTimeout(),clearTimeout()
history:go(参数)，back(),forward()
location: href属性
事件：
onsubmit()此事件写在form标签中，必须有返回值。
onload()此事件只能写一次并且放到body标签中
其它事件放到需要操作的元素位置。(onclick、onfocus、onblur)
获取元素：
document.getElementById("id")
获取元素里面的值:
document.getElementById("id").value
向页面输出
弹窗：alert();……
向浏览器中写入内容：document.write(内容)；
向页面指定位置写入内容,innerHTML
浙公网安备 33010602011771号