JavaScript的运用1

水深无声 2022-05-09 05:28 186阅读 0赞

# 一.JS的简介 #

js全称（javascript）中文是java脚本的意思 。它的由来（在互联网刚兴起的时候，网络速度比较慢，而体验又是放在服务器端的，所以用户体验度非常差，为了了解这一难题，网景公司发明了livescript liverscript主要把表单验证功能从后台提升到了前端，因为不依赖网络，所以用户体验比较好。但是由于知名度比较差，知道的人很少，后来由于sum公司的java语言一飞冲天，爆红编程世界，为了跟风，博取知名度，网景公司把livescript 改成javascript. 后来微软眼红网景公司的成就，就发明了jscript。但是正因为此，导致了js的标准不同，所以给个大浏览器厂家带来了很大的麻烦。为了有一个统一的标准，js被提交到一个ecma组织，也正因为此，后来的js都是采用ecma标准（ECMAScript））  
JavaScript 是属于网络的脚本语言！  
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。  
JavaScript 是因特网上最流行的脚本语言。  
JavaScript 很容易使用！你一定会喜欢它的！

## 注：JavaScript的一些基础知识 ##

**1.JavaScript用“//”表示注释，且每句话后用“；”分隔开**;  
**2.Js里面的数据类型:字符串、数字、布尔、数组、对象、Null、Undefined**；  
**3.其定义局部变量时，前面要加“var“做标注，没有var时，默认为全局变量**;  
**4.函数如何定义:**  
1） - 命名函数

function 函数名(){
                函数体
        }

2） 匿名函数

<div style="width: 100px; height: 100px; border: 1px solid red"   onclick="javascript:location.href='http://www.baidu.com'">  baidu

**5.alert(“要显示的内容")-------弹出一个警示框**;  
**向页面的指定位置写入内容**:  
`document.getElementById('userTip').inner HTML='<b style="color:red">用户名信息不能空</b>'`  
**6.用“===”表示两者相等**  
**用“==”时，会自动将字符串转换为整形进行比较**  
**7.三元比较符：“（条件语句）？（满足条件返回的值）：（不满足返回的值）“**  
**str.length-----求某字符串的长度**  
**8.BOM对象:**  
Windows: alert(), setInterval(), clearInterval()  
location: href() --(跳转到指定的页面)  
**9.DOM:**  
常用的事件: onsubmit(特殊点， 一定要有boolean类型的返回值), onclick， onfocus， onblur, onchange,

# 二.JS的常规应用 #

**10.节点**  
Document:整个html文件就称为一个document文档;  
Element: 所有的标签都是Element元素;  
Attribute: 标签里面的属性；

<input type='text'> --- type
        <a href="xxxx"> -- href
        <a style="color:red">   ---- style

Text：百度

## 1 ##

需求:  
1). 用户在注册的时候会输入一些信息， 但是用户输入的内容有可能不合法， 会导致服务器端压力过大;  
2). 当用户填写信息之后， 对填写的信息进行校验（前端校验， 只能防君子不能防小人）  
\-后台校验: 也是需要校验的；

需要掌握的技能:  
1). 如何在加载页面时执行指定函数?  
2). 如何获取指定元素对象?  
3). 如何弹出一个警告框?

实现过程：首先我们要建立标签实现登陆界面，其次就是要使用(script)标签实现需求，具体程序如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            window.onload = function () {
                // 1. 获取用户输入的用户名的标签对象;
                var uEle = document.getElementById('username');
                alert(uEle);
                // 2. 获取这个对象里面的值；
                var uValue = uEle.value;
                alert(uValue);
    //            弹出一个警示框
                alert("这是一个用户名!");
            }
        </script>
        
    </head>
    <body>
    <form action="#" method="get">
        
        用户名: <input type="text" name="username" placeholder="用户名" id="username"><br/>
        密码: <input type="password" name="passwd" placeholder="密码"><br/>
        <input type="submit" value="注册">
    
    </form>
    </body>

![在这里插入图片描述][70]

![在这里插入图片描述][70 1]  
![在这里插入图片描述][70 2]

## 2.验证用户名和密码的合法性 ##

**需求:**  
1). 判断用户名是否为空?  
2) 校验密码是否大于6位， 如果不满足则不合法?

**实现步骤:**  
1. 确定事件类型onsubmit(常见事件类型的网址: [http://www.w3school.com.cn/js/js\_htmldom\_events.asp][http_www.w3school.com.cn_js_js_htmldom_events.asp]);  
2. 对这个事件绑定一个函数(执行的操作写在函数里面);  
3. 函数的核心功能: 校验用户名是否为空?  
\- 1). 获取输入用户名标签提交的内容；  
\-2). if判断用户名是否为空?  
\- 3). 如果数据合法， 继续执行， 提交表单；  
\-4). 如果数据不合法， 不让表单提交? (显示弹出框报错) — alert

**onsubmit用法：**  
onsubmit 事件会在表单中的确认按钮被点击时发生。当该事件触发的函数中返回false时，表单就不会被提交。  
onsubmit经常用于表单验证，当"提交"按钮被点击时，依然会执行checkForm()函数，在checkForm()函数中，我们对表单输入框进行了空验证，如果用户名为空或密码不足六位，会弹出警告框，并return false,这样表单就不会提交（上面已经说到：当该事件触发的函数中返回false时，表单就不会被提交）。 同时，这里要注意οnsubmit=“return checkForm();”，不能掉了return，否则表单永远会提交。

具体程序如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        
        
        <script>
    //  *****************************1. 校验用户名是否为空? ***************************
            // 定义一个函数
            function checkForm() {
    //        1). 获取输入用户名标签提交的内容；
                var user = document.getElementById('username').value;
    //        2). if判断用户名是否为空?
    //        3). 如果数据合法， 继续执行， 提交表单；
    //        4). 如果数据不合法， 不让表单提交? (显示弹出框报错) --- alert
                if (user === '') {
                    alert("用户名不能为空!");
                    return false;
                }
    
    // ******************************2. 校验密码长度是否小于6 **************************
    //
              var passwdlen = document.getElementById('passwd').value.length;
    //            上边的方法是通过id来得到标签提交的内容，我们也可以通过name获得，不过相同name的可能存在多个，所以加上索引即可
    //            var passwdlen = document.getElementsByName('passwd')[0].value.length;
                if (passwdlen < 6){
                    alert("密码不合法: 长度小于6！");
                    return false;
                }
            }
        </script>
    </head>
    <body>
    <form action="#" method="get" onsubmit="return checkForm()">
        用户名: <input type="text" name="username" placeholder="用户名" id="username"><br/>
        密码: <input type="password" name="passwd" placeholder="密码" id="passwd"><br/>
        <input type="submit" value="注册">
    
    
    </form>
    </body>
    </html>

1.当输入用户名为空，密码不管是否合法，点击注册按钮，会弹出下列警告  
![在这里插入图片描述][70 3]![在这里插入图片描述][70 4]  
2.当输入用户名合法，密码不合法时，点击注册按钮，会弹出下列警告  
![在这里插入图片描述][70 5]![在这里插入图片描述][70 6]  
3.当输入用户名合法，密码合法时，点击注册按钮，不会出现警告

## 3.点击按钮时切换图片 ##

onclick事件表示当，当用户在元素上点击时，会改变其内容

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #sowing_map{
                width: 590px;
                height:500px;
                margin: 0 auto;
                text-align: center;
            }
        </style>
        
        <script>
            // 1. 定义一个变量， 控制图片的循环顺序;
            var i = 1;
            function  changeImg() {
                // 2. 当点击下一页时， i+1, 这个时候， 图片变成img2;
                i += 1;
                // 3.  修改img标签里面的src属性内容;
                document.getElementById('img').src = 'img/img' + i + '.jpg';
                // 4. 如果图片轮播结束， 从头开始轮播；
                if (i === 6){
                    i = 0;
                }
            }
    
        </script>
    </head>
    <body>
    
    
    <div id="sowing_map">
        <img src="img/img1.jpg" id="img">
        <input type="button" value="下一页" onclick="changeImg()">
    </div>
    </body>
    </html>

这里实现的效果是每点击一下“下一页”，会切换图片，切换完所有图片后会从头开始  
![在这里插入图片描述][70 7]

## 4.轮播图 ##

**需求：**  
实现界面的轮播图，即每隔固定时间换张图片  
**思路:**  
1. 确定事件类型为onclick事件；  
2. 并跟对应的函数changeImg绑定在一起；  
3. 实现函数功能；

具体程序如下：具体程序如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #sowing_map{
                width: 590px;
                height:500px;
                /*块级元素居中*/
                margin: 0 auto;
                /*行内元素居中*/
                text-align: center;
            }
        </style>
    
        <script>
            window.onload = function () {
                // 这里的时间单位是毫秒，每隔1s自动执行某一个函数，所以我们将器设置为100
                setInterval('changeImg()', 1000);
            };
            // 1. 定义一个变量， 控制图片的循环顺序;
            var i = 1;
            function  changeImg() {
                i += 1;
                // 2.  修改img标签里面的src属性内容;
                document.getElementById('img').src = 'img/img' + i + '.jpg';
                // 3. 如果图片轮播结束， 从头开始轮播；
                if (i === 6){
                    i = 0;
                }
            }
        </script>
    </head>
    <body>
    
    <div id="sowing_map">
        <img src="img/img1.jpg" id="img">
    </div>
    </body>
    </html>

这里实现的效果是每个1秒，会自动切换图片库中的图片，播完后会从头开始  
![在这里插入图片描述][70 8]

## 5.js的外部引入轮播图 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        
        <link href="css/main.css" rel="stylesheet">
        <script src="js/main.js" ></script>
    </head>
    <body>
    
    <div id="sowing_map">
        <img src="img/img1.jpg" id="img">
    </div>
    </body>
    </html>

"**css/main.css"** 中的内容：

#sowing_map{
        width: 590px;
        height:500px;
        margin: 0 auto;
        text-align: center;
    
    }

"**js/main.js**"中的内容：

## 6.定时弹出广告图片 ##

**需求:**  
实现网页定时弹出广告， 并定时取消弹出的广告;

**步骤:**  
1. 在页面设置一个隐藏的图片; style=“display: none”  
2. 确定事件类型为onload， 为其绑定一个函数;  
3. 设置定时执行显示图片的函数showAd();  
4. 编写定时任务里面的函数showAd()----  
\- 获取标签的样式display=‘block’;  
\- 清除显示广告的定时任务;  
\- 编写隐藏广告图片的定时任务;  
5. 实现定时任务里面的函数hiddenAd();  
\- 获取标签的样式display=‘none’;  
\- 清除隐藏广告的定时任务;

程序：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="css/main.css" rel="stylesheet">
        <script src="js/main.js" ></script>
    </head>
    <body>
    
    <div id="ad">
        <img src="img/img7_ad.jpg" id="ad_img" style="display: none">
    
    </div>
    </body>
    </html>

"**css/main.css"** 中的内容：

#ad{
        width: 1190px;
        height: 80px;
        margin: 0 auto;
        text-align: center;
    }

"**js/main.js**"中的内容：

实验结果为：加载该界面后，等待一秒后会出现下图，再过一秒会自动消失  
![在这里插入图片描述][70 9]

## 7.使用聚焦和离焦事件验证用户注册信息 ##

**需求：**  
当用户进行用户名和密码填写时，给出相应的提示，输入完毕后，不管是否合法，都对用户进行告知

**实现步骤:**  
1). 确定事件类型(onfocus-聚焦事件)， 并为其绑定一个函数;  
2). 确定事件类型(onblur-离焦事件)， 并为其绑定一个函数;  
具体程序：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function showUserTip() {
                // 1. 获取标签对象;
                document.getElementById('userTip').innerHTML = '<b style="color: lightgray;">用户名不能为空</b>';
            }
    
            function checkUser() {
                    //1. 离焦时判断用户名是否为空?
                var name = document.getElementById("user").value;
                // 2. 如果为空， 右边来一个红色的提示;
                // 3. 如果不为空， 则取消所有提示;
                if(name===""){
                    document.getElementById("userTip").innerHTML = '<b style="color: red">用户名不能为空</b>'
                }
                else {
                    document.getElementById("userTip").innerHTML = '<b style="color: green">ok</b>'
                }
            }
            function showPwdTip() {
                 document.getElementById('PwdTip').innerHTML = '<b style="color: lightgray;">密码不能少于六位</b>';
            }
            function checkPwd() {
    
                var passwd = document.getElementById("pwd").value;
                if(passwd.length<=6){
                    document.getElementById("PwdTip").innerHTML = '<b style="color: red">密码不能少于六位</b>'
                }
                else {
                    document.getElementById("PwdTip").innerHTML = '<b style="color: green">ok</b>'
                }
            }
    
        </script>
    </head>
    
    <body>
    <div id="bor">
    <form action="#" method="get">
        用户名：<input type="text" id="user" placeholder="输入用户名" name="username" onfocus=" showUserTip()" onblur="checkUser()">
        <span id="userTip"></span><br/>
    
        密码：<input type="password" id="pwd" placeholder="输入密码" name="password" onfocus=" showPwdTip()" onblur="checkPwd()">
        <span id="PwdTip"></span><br/>
        <input type="submit" value="注册">
    </form>
    </div>
    </body>
    </html>

实现结果：当鼠标点击“用户名“那一栏时，后面会出现提示，  
当鼠标点击到用户名栏外的地方，则会出现相应的结果提示。密码栏类似  
![在这里插入图片描述][70 10]

## 8.表格的全选和全不选 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <script>
            function checkAll() {
                //1. 获取全选框对象
            var checkAll_ = document.getElementById("checkAll");
            //判断该单选框是否被选中，
    //            2. 对编号前面的复选框的状态进行判断;
                //      - 如果状态为选中， 则设置所有的单选框为选中状态;
                //      - 如果状态为没有选中， 则设置所有的单选框为没有选中状态;
            if (checkAll_.checked){
                 var checkones = document.getElementsByName("checkOne");
                 for (var i=0;i<checkones.length;i++){
                     checkones[i].checked = true;
                 }
             }else{
                //- 如果状态为未选中， 则设置所有的单选框为未选中状态;
                    var checkones = document.getElementsByName("checkOne");
    //                 依次遍历所有的单选框， 设置状态为选中
                    for (var i=0;i<checkones.length;i++) {
    
                     checkones[i].checked = false;
                 }
             }
        }
    
    </script>
    </head>
    
    <body>
    <table width="60%;" border="1px" cellpadding="5px" cellspacing="5px" style="margin: 0 auto">
        <caption style="color: blue ;font-size: xx-large"><span>用户信息</span></caption>
    
        <tr>
            <th colspan="4" style="width:95% ;text-align: center">
                <input type="submit" value="增加">
                <input type="submit" value="删除"></th>
    
        </tr>
        <tr>
            <th style="width: 10%"><input type="checkbox" id="checkAll" onclick="checkAll()"></th>
            <th style="width: 30%">编号</th>
            <th style="width: 30%">姓名</th>
            <th style="width: 30%">年龄</th>
        </tr>
        <tr>
            <th><input type="checkbox" name="checkOne"></th>
            <th>1</th>
            <th>张三</th>
            <th>22</th>
        </tr>
        <tr>
            <th><input type="checkbox" name="checkOne"></th>
            <th>2</th>
            <th>粉带</th>
            <th>12</th>
        </tr>
        <tr>
            <th><input type="checkbox" name="checkOne"></th>
            <th>3</th>
            <th>粉条</th>
            <th>32</th>
        </tr>
        <tr>
            <th><input type="checkbox" name="checkOne"></th>
            <th>4</th>
            <th>粉丝</th>
            <th>18</th>
        </tr>
        <tr>
            <th><input type="checkbox" name="checkOne"></th>
            <th>5</th>
            <th>粉猪</th>
            <th>19</th>
        </tr>
    
    
    </table>
    </body>
    </html>

实验结果：左上角的选择按钮为全选或全不选框  
![在这里插入图片描述][70 11]

[70]: /images/20220509/a4c9db78cf4344e891a95b59eb14e708.png
[70 1]: /images/20220509/b91a7b08ae4b48838ddd297e623af155.png
[70 2]: /images/20220509/ed176542e98b4109a44e386764bcb5db.png
[http_www.w3school.com.cn_js_js_htmldom_events.asp]: http://www.w3school.com.cn/js/js_htmldom_events.asp
[70 3]: https://img-blog.csdn.net/20181001215833114?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZvcmV2ZXJfd2Vu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: /images/20220509/2755f395130b4863ac5dc13563f9c567.png
[70 5]: https://img-blog.csdn.net/20181001220208790?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZvcmV2ZXJfd2Vu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 6]: /images/20220509/deba0751e0974aca89e75070bf39c05e.png
[70 7]: /images/20220509/fad8805d94ca484e841a1047a7fa7298.png
[70 8]: /images/20220509/e18000d5e46a4b059774d5c667399647.png
[70 9]: /images/20220509/4240552e0a414e1b8d514d68053f0670.png
[70 10]: /images/20220509/1bed4f795c3d437da202df0d00067740.png
[70 11]: /images/20220509/dae8ed9ecda44037a564aa4b2d7da6b7.png