第三章 WEB03_JS篇
今日任务
使用JS完成简单的数据校验(document对象、事件、函数)
使用JS完成图片轮播效果(事件、定时操作)
使用JS完成页面定时弹出广告(总结BOM对象以及JS的引入方式)
使用JS完成表单的校验(总结常用事件)
教学导航
| 教学目标 |
掌握JS的基本语法,数据类型,能够使用JS完成简单的页面交互. 掌握JS中的BOM对象以及JS的引入方式 掌握JS中的常用的事件 掌握JS中的常用DOM操作 了解JS中的内置对象和全局函数 |
| 教学方法 |
案例驱动法 |
一、使用JS完成注册表单数据校验
1.需求分析
用户在进行注册的时候会输入一些内容，但是有些用户会输入一些不合法的内容，这样会导致服务器的压力过大，此时我们需要对用户输入的内容进行一个校验(前端校验和后台校验)，前端校验防君子不防小人。
2.技术分析
2.1 javasscript的介绍
Javascript与java没有关系(雷锋和雷峰塔)，它不是编程语言(脚本语言)
2.2 javascript的作用？
HTML：它是整个网站的骨架。
CSS：它是对整个网站骨架的内容进行美化(修饰)
Javascript：它能够让整个页面具有动态效果。
2.3 javascript的组成部分
ECMAScript:它是javascript的核心(语法、变量、数据类型、语句、函数……)
DOM:document object model 整个文档对象
BOM:浏览器对象
2.4 javascript语法
区分大小写
变量是弱类型的(String str=”aaa” ,var str=”123”;)
每行结尾的分号可有可无(建议大家写上)
注释与java、php等语言相同。
2.5javascript的变量
变量可以不用声明，变量是弱类型。统一使用var来定义！定义变量的时候不要使用关键字和保留字。
2.6 javascript数据类型
Javascript数据类型分为原始数据类型和引用数据类型
原始数据类型：
string、number、boolean、null、undefined
引用数据类型：
2.7 javascript运算符
其它运算符与java大体一致，需要注意其等性运算符。
== 它在做比较的时候会进行自动转换。
=== 它在做比较的时候不会进行自动转换。
2.8 javascript语句
所有语句与java大体一致。
2.9 获取元素内容
获取元素
document.getElementById(“id名称”);
获取元素里面的值
document.getElementById(“id名称”).value;
2.10 javascript事件
表单提交事件：onsubmit
2.11 javascripte的输出
警告框：alert();
向页面指定位置写入内容：innerHTML(属性)
向页面写入内容：document.write(“”);
3.步骤分析
第一步：确定事件(onsubmit)并为其绑定一个函数
第二步：书写这个函数(获取用户输入的数据)
第三步：对输入的数据进行判断(非空)
第四步：如果输入的内容为空，给出错误提示信息(alert),不让表单提交
第五步：如果输入的内容合法，让表单提交。
4.代码实现
Html部分代码：
为表单绑定一个事件
<form action="#" method="get" onsubmit="return checkForm()">
对需要校验的输入项目定义id
<input type="text" name="user" id="user" />
Javascript部分代码
| <script type="text/javascript"> function checkForm(){ /*校验用户名*/ //alert("aa"); //获取用户输入的数据 var uValue = document.getElementById("user").value; //alert(uValue); if(uValue==""){ //给出错误提示信息 alert("用户名不能为空！"); return flase; }
/*校验邮箱*/ 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> |
二、使用JS完成首页轮播图效果案例
1.需求分析
我们希望在首页完成对轮播图的效果实现：
2.技术分析
获取元素 document.getElementById(“id名称”)
事件(onload)
定时操作：setInterval(“changeImg()”,3000);
3.步骤分析
第一步：确定事件(页面加载事件onload)并为其绑定一个函数
第二步：书写这个函数(设置一个定时操作);
第三步：书写定时操作里面的函数
第四步：获取图片的位置
第五步：为该图片设置src属性值。
4.代码实现
Javascript部分代码
| <script> function init(){ setInterval("changeImg()",3000); }
var i=1; function changeImg(){ i++; var imgEl = document.getElementById("img1"); imgEl.src="../img/"+i+".jpg"; if(i==3){ i=0; } }
</script> |
Html部分代码
确定事件：onload 加在body里面！
<body onload="init()">
给指定的图片位置定义一个id
<img src="../img/1.jpg" width="1300px" id="img1"/>
三、使用JS完成页面定时弹出广告
1.需求分析
我们希望在首页中的顶部做一个定时弹出广告图片。其实现效果如下：
2.技术分析
获取图片的位置(document.getElementById(“”))
隐藏图片：display：none
定时操作：setInterval(“显示图片的函数”，3000);
3.步骤分析
第一步：确定事件(页面加载事件onload)并为其绑定一个函数init()
第二步：在init函数中设置一个显示图片的定时操作。
第三步：书写显示图片的函数(获取图片元素，设置其display属性为block)
第四步：设置一个隐藏图片的定时操作
第五步：书写隐藏图片的函数(获取图片元素，设置其display属性为none)
最低0.47元/天 解锁文章
3241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
