Javascript案例学习-CSDN博客

一、使用JS完成注册表单数据校验

1.需求分析

　　用户在进行注册的时候会输入一些内容，但是有些用户会输入一些不合法的内容，这样会导致服务器的压力过大，此时我们需要对用户输入的内容进行一个校验(前端校验和后台校验)，前端校验防君子不防小人。

2.技术分析

2.1 javasscript的介绍

Java与javascript有什么区别？

它们没有关系，雷锋和雷峰塔的关系。

2.2 javascript的作用？

HTML：它是整个网站的骨架。

CSS：它是对整个网站骨架的内容进行美化(修饰) Javascript：它能够让整个页面具有动态效果。

2.3 javascript的组成部分

ECMAScript:它是整个javascript的核心，包含(基本语法、变量、关键字、保留字、数据类型、语句、函数等等)

DOM：文档对象模型，包含(整个html页面的内容)、

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)并为其绑定一个函数

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

第三步：对用户输入的数据进行判断第四步：数据合法(让表单提交)

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

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

问题：如何控制表单提交？

关于事件onsubmit：一般用于表单提交的位置，那么需要在定义函数的时候给出一个返回值。 onsubmit = return checkForm()

4.代码实现

JS代码：

 1 <script type="text/javascript">
 2             function checkForm() {
 3                 //校验用户名
 4                 //1.获取用户的输入
 5                 var uValue = document.getElementById("user").value;
 6                 //2. 对用户输入的数据进行判断
 7                 if(uValue=="") {
 8                     //3. 给出错误提示信息
 9                     alert("用户名不能为空！");
10                     return false;
11                 }
12                 //校验密码
13                 var pValue = document.getElementById("password").value;
14                 if(pValue=="") {
15                     alert("密码不能为空");
16                     return false;
17                 }
18                 //校验确认密码
19                 var repValue = document.getElementById("repassword").value;
20                 if(pValue!=repValue) {
21                     alert("两次输入密码不一致!");
22                     return false;
23                 }
24                 //校验邮箱
25                 var eValue = document.getElementById("email").value;
26                 if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)) {
27                     alert("邮箱输入有误！");
28                     return false;
29                 }
30             }
31         </script>

Html部分：

<form action="#" method="get" name="regist" onsubmit="return checkForm()">

需要在指定位置添加id

二、使用JS完成首页轮播图效果案例

1.需求分析

我们希望在首页完成对轮播图的效果实现：

2.技术分析

获取元素 document.getElementById(“id名称”)

事件(onload) 定时操作：setInterval(“changeImg()”,3000);

3.步骤分析

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

第二步：书写绑定的这个函数

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

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

4.代码实现

JS代码：

 1 <script>
 2             function init() {
 3                 //轮换图的定时任务
 4                 setInterval("changeImg()", 3000);
 5             }
 6             var i = 0;
 7             //更换图片的方法
 8             function changeImg() {
 9                 //获取轮换图片img元素
10                 var imgEle = document.getElementById("changeImg");
11                 i++;
12                 //设置路径属性
13                 imgEle.src = "../img/" + i + ".jpg";
14                 if(i==3) {
15                     i=0;
16                 }    
17             }
18         </script>

HTML代码：

<body onload="init()">

<img src="../img/1.jpg" width="100%" id="changeImg" />

在指定位置添加id

三、使用JS完成页面定时弹出广告

1.需求分析

我们希望在首页中的顶部做一个定时弹出广告图片。其实现效果如下：

2.技术分析

获取图片的位置(document.getElementById(“”))

隐藏图片：display：none 定时操作：setInterval(“显示图片的函数”，3000);

3.步骤分析

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

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

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

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

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

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

第七步：书写定时器中的函数(获取广告图片的位置并设置属性style的display值none) 第八步：清除隐藏图片的定时操作()

4.代码实现

js代码：

 1 function init() {
 2     //轮换图的定时任务
 3     setInterval("changeImg()", 3000);
 4     
 5     //1. 设置显示广告的定时操作
 6     time = setInterval("showAd()", 3000);
 7 }
 8 var i = 0;
 9 //更换图片的方法
10 function changeImg() {
11     //获取轮换图片img元素
12     var imgEle = document.getElementById("changeImg");
13     i++;
14     //设置路径属性
15     imgEle.src = "../img/" + i + ".jpg";
16     if(i==3) {
17         i=0;
18     }    
19 }
20 
21 //2. 显示广告的方法
22 function showAd() {
23     //获取广告图片位置的元素
24     var imgAd = document.getElementById("imgAd")
25     //设置该元素的属性style的display值为block
26     imgAd.style.display = "block";
27     //3. 清除显示图片的操作
28     clearInterval(time);
29     //4. 隐藏图片的定时操作
30     time = setInterval("clearAd()", 3000);
31 }
32 
33 //5. 隐藏图片的方法
34 function clearAd() {
35     //获取广告图片位置的元素
36     var imgAd = document.getElementById("imgAd");
37     //设置该元素的属性style的display值为none
38     imgAd.style.display = "none";
39     
40     //6. 清楚隐藏图片的定时操作
41     clearInterval(time);
42 }

Html代码：

<body onload="init()">

广告图片部分

<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;" id="imgAd" />

5.总结

5.1 javascript的引入方式

内部引入方式

直接将javascript代码写到<script type=”text/javascript”></script>

外部引入方式

需要创建一个.js文件，在里面书写javascript代码，然后在html文件中通过script 标签的src属性引入该外部的js文件

5.2 BOM对象

BOM对象：浏览器对象模型(操作与浏览器相关的内容)

Window对象Window 对象表示浏览器中打开的窗口。

setInterval():它有一个返回值，主要是提供给clearInterval使用。

setTimeout():它有一个返回值，主要是提供给clearTimeout使用。

clearInterval():该方法只能清除由setInterval设置的定时操作 clearTimeout():该方法只能清除由setTimeout设置的定时操作

弹出框的几个方法：

//警告框

//alert("aaa");

//确认按钮

//confirm("您确认删除吗？");

//提示输入框

prompt("请输入价格：");

</script>

Location对象

Location 对象包含有关当前 URL 的信息。

href:该属性可以完成通过JS代码控制页面的跳转。

<html>

 <head>

  <meta charset="UTF-8">

  <title>location对象</title>

  <script>    function tiao(){

    window.location.href="http://www.itcast.cn";

   }

  </script>

 </head>

 <body>

  <a href="#" onclick="tiao()">跳转到传智播客首页</a>  </body>

</html>

History对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

历史页面：使用location页面(把href属性值改为当前的history)

History页面代码：

<input type="button"  value=" 返 回 上 一 个 页 面  
οnclick="javascript:history.back()"/>

go(参数)

参数：-1 返回上一个历史记录页面；-2返回上上一个历史记录页面，1进入下一个历史记录页面。

让按钮点击失效：

οnclick=”javascript:volid(0)”

Navigator对象

Navigator 对象包含有关浏览器的信息。(该对象开发中不怎么常用)

Screen对象

Screen 对象包含有关客户端显示屏幕的信息。(该对象开发中不怎么常用)

四、使用JS完成注册页面表单校验

1.需求分析

之前我们已经使用弹出框的方式实现了表单校验的功能，但是此种方式用户体验效果极差！我们希望做成如下这种效果：

2.技术分析

3.步骤分析

第一步：确定事件(onfocus聚焦事件)并为其绑定一个函数

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

第三步：确定事件(onblur离焦事件)并为其绑定一个函数

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

4.代码实现

Html代码：

<input type="text" name="user" size="34px" id="user" onfocus="showTip('user', '用户名必填！')" onblur="check('user', '用户名不能为空！')" />

JS代码：

 1 <script>
 2 //聚焦显示提示信息
 3             function showTip(id, info) {
 4                 document.getElementById(id +"Span").innerHTML = "<font color='grey'>" + info +"</font>";
 5             }
 6             //数据校验
 7             function check(id, info) {
 8                 var Value = document.getElementById(id).value;
 9                 if(Value=="") {
10                     document.getElementById(id + "Span").innerHTML = "<font color='red'>"+ info +"</font>";
11                 } else {
12                     document.getElementById(id + "Span").innerHTML = "";
13                 }
14             }
15             //确认密码的数据校验
16             function checkRePassword() {
17                 var repassword = document.getElementById("repassword").value;
18                 var password = document.getElementById("password").value;
19                 if(repassword!= password) {
20                     document.getElementById("repasswordSpan").innerHTML = "<font color='red'>两次输入的密码不一致！</font>";
21                 } else {
22                     document.getElementById("repasswordSpan").innerHTML = "";
23                 }
24             }
25             //邮箱的数据校验
26             function checkEmail() {
27                 var email = document.getElementById("email").value;
28                 if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email)) {
29                     document.getElementById("emailSpan").innerHTML = "<font color='red'>请输入正确的邮箱</font>";
30                 } else {
31                     document.getElementById("emailSpan").innerHTML = "";
32                 }
33             }
34         </script>