JavaScript详解

àì夳堔傛蜴生んèń 2024-03-27 08:58 72阅读 0赞

**目录**

一、什么是JavaScript？

二、JavaScript的引入方式

三、JavaScript的基础语法

3.1 书写语法

3.2 输出语句

3.3 变量

3.4 数据类型

3.5 运算符

3.6 流程控制语句

3.7 函数

四、JavaScript对象

4.1 Array对象

4.2 String对象

4.3 自定义对象

五、BOM对象

5.1 window对象

5.2 history对象

5.3 location对象

六、DOM对象

七、事件监听

八、案例——表单验证

九、正则表达式

--------------------

## 一、什么是JavaScript？ ##

JavaScript是一门跨平台、面向对象的脚本语言（不需要编译，直接解释运行即可），来控制网页的行为，它能使网页可交互

W3C标准：网页主要由三部分构成

*  结构：HTML
 *  表现：CSS
 *  行为：JavaScript

JavaScript和Java是完全不同的语言，不论是概念还是设计。但是在基础语法上类似。

JavaScript（简称：JS）在1995年由Brendan Eich发明，并于1997年成为一部ECMA标准。

ECMAScript 6（ES6）是最新的JavaScript版本（发布于2015年）

## 二、JavaScript的引入方式 ##

1.内部脚本：将JS代码定义在HTML页面中

在HTML中，JavaScript代码必须位于<sctipt>与</sctipt>标签之间

提示：

*  在HTML文档中可以在任意地方，放置任意数量的<script>
 *  一般把脚本置于<body>元素的底部，可改善显示速度，因为脚本执行会拖慢显示

2.外部标签：将JS代码定义在外部JS文件中，然后引入HTML页面中

外部文件：demo.js

alert("hello js");

引入外部js文件:

注意：

1.  外部文件不能包含<script>标签
2.  <script>标签不能自闭合，必须写成<script></script>

## 三、JavaScript的基础语法 ##

### 3.1 书写语法 ###

1.  区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
2.  每行结尾的分号可有可无
3.  注释：单行注释：//注释内容 多行注释：/\*注释内容\*/
4.  大括号表示代码块
    
        if(count == 3){
            alter(count);
        }

### 3.2 输出语句 ###

### ![783a5f6db0a44135ba0a4fc3d31c3871.png][] 3.3 变量 ![9d377a1f725d409b877e50e0f48815fd.png][] ###

### 3.4 数据类型 ###

![76dd557436b74652b5afd7bb198304c5.png][]

### 3.5 运算符 ###

### ![c2c17a47fee14f93b91d343ca7219f50.png][]![e64559b37c62402db41920864a328e91.png][] ###

### 3.6 流程控制语句 ###

*  if判断
 *  switch选择
 *  for循环
 *  while循环
 *  do...while循环

### 3.7 函数 ###

![a9da26b4161f4fd2b68a097f4918ed91.png][]

![63f0b19ce0e849139be13b402c69183a.png][]

## 四、JavaScript对象 ##

### 4.1 Array对象 ###

![cfeaa557cc8b4aac87a388395b9901cf.png][]

### ![3f3434650211450f92622d9c23ffecbb.png][]4.2 String对象 ###

![20a0c682b6fd422e8c16c21dbd6c54a7.png][]

trim():去除字符串前后两端的空白字符

### 4.3 自定义对象 ###

![8e7e2042026d46d4b023d9245a695e81.png][]

## 五、 BOM对象 ##

### ![0f081c94d8384df6a6d7098ad8f649cd.png][] ###

### 5.1 window对象 ###

### ![3e077e8298c74124b40b086e7dc1fba9.png][] ###

![a7f95297b8534d1491f83fd8d77ec980.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title></title>
    </head>
    <body>
    
    <input type="button" onclick="on()" value="开灯">
    <img id="myImage" border="0" src="../imgs/off.gif" style="text-align:center;">
    <input type="button" onclick="off()" value="关灯">
    
    <script>
    
      function on(){
        document.getElementById('myImage').src='../imgs/on.gif';
      }
    
      function off(){
        document.getElementById('myImage').src='../imgs/off.gif'
      }
    
      var x = 0;
      //定时器
      //根据一个变化的数字，产生固定个数的值：2种可能 x % 2
      setInterval(function (){
    
        if(x%2 == 0){
          on();
        }else{
          off();
        }
        x++;
      },1000);
    </script>
    
    </body>
    </html>

### 5.2 history对象 ###

![3edba740423a415f87933c047e11dccb.png][]

### 5.3 location对象 ###

![9f5f7c74be50479295019cc9dcb11f7d.png][]

## 六、 DOM对象 ##

![b97567cbca27445693839b2a8a7b651b.png][]

![c64fa97a38ad4c84b2a5c5af064e31c0.png][] ![d3bf65e926b044c48635f1ff1ed62974.png][]

![186a784aee0d4d6b94c354f2e9146f31.png][]

> 修改 img 对象的 src 属性来改变图片
> 
>  style:设置元素css样式  
>  innerHTML：设置元素内容
> 
> 通过将 复选框（checkbox） 元素对象的 checked 属性值设置为 true 来改变复选框的选中状态

## 七、事件监听 ##

![8630912572f64e1284777ed6c2c8d9ea.png][]

## ![2a9f9d50b7eb41819b16103fefb5470c.png][] 八、案例——表单验证 ##

![5ad80065f1834fbf87672124383c238b.png][]

![0be9505768fa45e7a388b27500b61dba.png][] HTML源代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎注册</title>
        <link href="../css/register.css" rel="stylesheet">
    </head>
    <body>
    
    <div class="form-div">
        <div class="reg-content">
            <h1>欢迎注册</h1>
            <span>已有帐号？</span> <a href="#">登录</a>
        </div>
        <form id="reg-form" action="#" method="get">
    
            <table>
    
                <tr>
                    <td>用户名</td>
                    <td class="inputs">
                        <input name="username" type="text" id="username">
                        <br>
                        <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                    </td>
    
                </tr>
    
                <tr>
                    <td>密码</td>
                    <td class="inputs">
                        <input name="password" type="password" id="password">
                        <br>
                        <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                    </td>
                </tr>
    
    
                <tr>
                    <td>手机号</td>
                    <td class="inputs"><input name="tel" type="text" id="tel">
                        <br>
                        <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                    </td>
                </tr>
    
            </table>
    
            <div class="buttons">
                <input value="注 册" type="submit" id="reg_btn">
            </div>
            <br class="clear">
        </form>
    
    </div>
    
    
    <script>
    
        //1. 验证用户名是否符合规则
        //1.1 获取用户名的输入框
        var usernameInput = document.getElementById("username");
    
        //1.2 绑定onblur事件 失去焦点
        usernameInput.onblur = checkUsername;
    
        function checkUsername() {
            //1.3 获取用户输入的用户名
            var username = usernameInput.value.trim();
    
            //1.4 判断用户名是否符合规则：长度 6~12,单词字符组成
            var reg = /^\w{6,12}$/;
            var flag = reg.test(username);
    
            //var flag = username.length >= 6 && username.length <= 12;
            if (flag) {
                //符合规则
                document.getElementById("username_err").style.display = 'none';
            } else {
                //不合符规则
                document.getElementById("username_err").style.display = '';
            }
    
            return flag;
        }
    
    
        //1. 验证密码是否符合规则
        //1.1 获取密码的输入框
        var passwordInput = document.getElementById("password");
    
        //1.2 绑定onblur事件 失去焦点
        passwordInput.onblur = checkPassword;
    
        function checkPassword() {
            //1.3 获取用户输入的密码
            var password = passwordInput.value.trim();
    
            //1.4 判断密码是否符合规则：长度 6~12
            var reg = /^\w{6,12}$/;
            var flag = reg.test(password);
    
            //var flag = password.length >= 6 && password.length <= 12;
            if (flag) {
                //符合规则
                document.getElementById("password_err").style.display = 'none';
            } else {
                //不合符规则
                document.getElementById("password_err").style.display = '';
            }
    
            return flag;
        }
    
    
        //1. 验证手机号是否符合规则
        //1.1 获取手机号的输入框
        var telInput = document.getElementById("tel");
    
        //1.2 绑定onblur事件 失去焦点
        telInput.onblur = checkTel;
    
        function checkTel() {
            //1.3 获取用户输入的手机号
            var tel = telInput.value.trim();
    
            //1.4 判断手机号是否符合规则：长度 11，数字组成，第一位是1
    
            //var flag = tel.length == 11;
            var reg = /^[1]\d{10}$/;
            var flag = reg.test(tel);
            if (flag) {
                //符合规则
                document.getElementById("tel_err").style.display = 'none';
            } else {
                //不合符规则
                document.getElementById("tel_err").style.display = '';
            }
    
            return flag;
        }
    
    
        //1. 获取表单对象
        var regForm = document.getElementById("reg-form");
    
        //2. 绑定onsubmit 事件
        regForm.onsubmit = function () {
            //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false
    
            var flag = checkUsername() && checkPassword() && checkTel();
    
            return flag;
        }
    
    </script>
    </body>
    </html>

* {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    .reg-content{
        padding: 30px;
        margin: 3px;
    }
    a, img {
        border: 0;
    }
    
    body {
        background-image: url("../imgs/reg_bg_min.jpg") ;
        text-align: center;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    td, th {
        padding: 0;
        height: 90px;
    
    }
    .inputs{
        vertical-align: top;
    }
    
    .clear {
        clear: both;
    }
    
    .clear:before, .clear:after {
        content: "";
        display: table;
    }
    
    .clear:after {
        clear: both;
    }
    
    .form-div {
        background-color: rgba(255, 255, 255, 0.27);
        border-radius: 10px;
        border: 1px solid #aaa;
        width: 424px;
        margin-top: 150px;
        margin-left:1050px;
        padding: 30px 0 20px 0px;
        font-size: 16px;
        box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);
        text-align: left;
    }
    
    .form-div input[type="text"], .form-div input[type="password"], .form-div input[type="email"] {
        width: 268px;
        margin: 10px;
        line-height: 20px;
        font-size: 16px;
    }
    
    .form-div input[type="checkbox"] {
        margin: 20px 0 20px 10px;
    }
    
    .form-div input[type="button"], .form-div input[type="submit"] {
        margin: 10px 20px 0 0;
    }
    
    .form-div table {
        margin: 0 auto;
        text-align: right;
        color: rgba(64, 64, 64, 1.00);
    }
    
    .form-div table img {
        vertical-align: middle;
        margin: 0 0 5px 0;
    }
    
    .footer {
        color: rgba(64, 64, 64, 1.00);
        font-size: 12px;
        margin-top: 30px;
    }
    
    .form-div .buttons {
        float: right;
    }
    
    input[type="text"], input[type="password"], input[type="email"] {
        border-radius: 8px;
        box-shadow: inset 0 2px 5px #eee;
        padding: 10px;
        border: 1px solid #D4D4D4;
        color: #333333;
        margin-top: 5px;
    }
    
    input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {
        border: 1px solid #50afeb;
        outline: none;
    }
    
    input[type="button"], input[type="submit"] {
        padding: 7px 15px;
        background-color: #3c6db0;
        text-align: center;
        border-radius: 5px;
        overflow: hidden;
        min-width: 80px;
        border: none;
        color: #FFF;
        box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
    }
    
    input[type="button"]:hover, input[type="submit"]:hover {
        background-color: #5a88c8;
    }
    
    input[type="button"]:active, input[type="submit"]:active {
        background-color: #5a88c8;
    }
    .err_msg{
        color: red;
        padding-right: 170px;
    }
    #password_err,#tel_err{
        padding-right: 195px;
    }
    
    #reg_btn{
        margin-right:50px; width: 285px; height: 45px; margin-top:20px;
    }

## 九、正则表达式 ##

![d4cf90bfb1d2489a87b2297fb4f928fe.png][]

[783a5f6db0a44135ba0a4fc3d31c3871.png]: https://img-blog.csdnimg.cn/783a5f6db0a44135ba0a4fc3d31c3871.png
[9d377a1f725d409b877e50e0f48815fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/5a87d055db96455496b1b320695293ea.png
[76dd557436b74652b5afd7bb198304c5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/600d61da41414b3c96cbbe60bac368f9.png
[c2c17a47fee14f93b91d343ca7219f50.png]: https://img-blog.csdnimg.cn/c2c17a47fee14f93b91d343ca7219f50.png
[e64559b37c62402db41920864a328e91.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/4b16709b50a94c8dbae3173dbc79f191.png
[a9da26b4161f4fd2b68a097f4918ed91.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/0ba65ef360fd407dafda9628923c86a5.png
[63f0b19ce0e849139be13b402c69183a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/60500945f7c8481a981ab0fbf8c6dcfb.png
[cfeaa557cc8b4aac87a388395b9901cf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/f16272b46c0e43e78480f510d4a67f6d.png
[3f3434650211450f92622d9c23ffecbb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/0b106186d3784426a57a670e14bd944f.png
[20a0c682b6fd422e8c16c21dbd6c54a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/c5c891e239ed4b52b662dbaf7696e9cd.png
[8e7e2042026d46d4b023d9245a695e81.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/46b0f51935f449b68b50dd121b3f85bb.png
[0f081c94d8384df6a6d7098ad8f649cd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/9271d2c1a69d426ea9d099ab9d9c206c.png
[3e077e8298c74124b40b086e7dc1fba9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/87ee9c10408346f286777365cf3ad461.png
[a7f95297b8534d1491f83fd8d77ec980.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/43745a101c4147b2be71384d0214a3cb.png
[3edba740423a415f87933c047e11dccb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/30fb75aacdd447d08cb3df844ed4b937.png
[9f5f7c74be50479295019cc9dcb11f7d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/21b0b74c63664db1a66bf010df8990f2.png
[b97567cbca27445693839b2a8a7b651b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/a03a2d49ae2342fa83985ded16ff3d24.png
[c64fa97a38ad4c84b2a5c5af064e31c0.png]: https://img-blog.csdnimg.cn/c64fa97a38ad4c84b2a5c5af064e31c0.png
[d3bf65e926b044c48635f1ff1ed62974.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/059b43abbd7341e5a2a5546aee18025a.png
[186a784aee0d4d6b94c354f2e9146f31.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/9c0f16b4b144481b81b2789fd10082de.png
[8630912572f64e1284777ed6c2c8d9ea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/114bf2276e8b4569ae990f85f6856e83.png
[2a9f9d50b7eb41819b16103fefb5470c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/9528ce29e6e14c979897bea1e1150101.png
[5ad80065f1834fbf87672124383c238b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/3538601347714bcc95bc09fd07dac851.png
[0be9505768fa45e7a388b27500b61dba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/94da51f519974672b5fdb2bbba6fc693.png
[d4cf90bfb1d2489a87b2297fb4f928fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1eaa59b8be7a4c2883f6b7c89ddf61e4.png