javaweb--JavaScript

一：简介

JavaScript 是一门跨平台、面向对象的脚本语言，用来控制网页行为的，它能使网页可交互

JavaScript 和 Java 是完全不同的语言，不论是概念还是设计，只是名字比较像而已，但是基础语法类似

JavaScript （简称： JS ）在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。 ECMAScript 6 ( 简称 ES6) 是最新的 JavaScript 版本（发布于 2015 年 )

二：JavaScript引入方式

1.内部脚本：

2.外部脚本：

三：JavaScript基础语法

1.书写语法

2.输出语句

<script>
    window.alert("hello js");//写入警告框
    document.write("hello js");//写入html页面
    console.log("hello js");//写入浏览器的控制台
</script>

3.变量

4.数据类型

5.运算符

 /*
        ==:
            1. 判断类型是否一样，如果不一样，则进行类型转换
            2. 再去比较其值

        ===:全等于
            1. 判断类型是否一样，如果不一样，直接返回false
            2. 再去比较其值

     */
    var age1 = 20;
    var age2 = "20";

    // alert(age1 == age2);// true
    // alert(age1 === age2);// false

 /*
        类型转换：
            * 其他类型转为number：
                1. string: 按照字符串的字面值，转为数字.如果字面值不是数字，则转为NaN。一般使用parseInt
                2. boolean: true 转为1，false转为0

            * 其他类型转为boolean：
                1. number:0和NaN转为false，其他的数字转为true
                2. string:空字符串转为false，其他的字符串转为true
                3. null:false
                4. undefined:false


     */

    var str = +"20";//表示转换

    var str = "20";
    alert(parseInt(str) + 1);   //  21


    var flag = +false;
    alert(flag);    //  1

    var str = "abc";    //转为true
     var flag = 3;  //转为false
    var flag = "";  //无内容，转为false
    var flag = undefined;  //转为false

    if(flag){
        alert("转为true");
    }else {
        alert("转为false");
    }



    //健壮性判断
    //if(str != null && str.length > 0){
    if(str){
        alert("转为true");
    }else {
        alert("转为false");
    }

6.流程控制语句


    //1. if
    var count = 3;
    if (count == 3) {
        alert(count);
    }*/



    //2. switch
    var num = 3;
    switch (num) {
        case 1: {
            alert("星期一");
            break;
        }

        case 2: {
            alert("星期二");
            break;
        }

        case 3: {
            alert("星期三");
            break;
        }

        case 4: {
            alert("星期四");
            break;
        }

        case 5: {
            alert("星期五");
            break;
        }

        case 6: {
            alert("星期六");
            break;
        }

        case 7: {
            alert("星期日");
            break;
        }

        default: {
            alert("输入的星期有误");
            break;
        }
    }



    // 3. for
    var sum = 0;
    for (let i = 1; i <= 100; i++) {
        sum += i;
    }
    alert(sum);



   // 4. while
    var sum = 0;
    var i = 1;
    while (i <= 100) {
        sum += i;
        i++;
    }
    alert(sum);



   // 5. do...while
    var sum = 0;
    var i = 1;
    do {
        sum += i;
        i++;
    }
    while (i <= 100);
    alert(sum);

7.函数

（1）方式一

function add(a,b){
       return a + b;
   }


   var result = add(1,2);

   alert(result);

（2）方式二

 var add = function (a,b){
       return a + b;
   }

   var result = add(1,2);   //3
   alert(result);

   var result1 = add(1,2,3); //3
    alert(result1)

   var result2 = add(1);    //NAN
   alert(result2);

四：JavaScript常用对象

1.Array对象

<script>

    //定义数组
    // 方式一
    var arr = new Array(1,2,3);
    alert(arr);
    // 方式二
    var arr2 = [1,2,3];
    alert(arr2);

    // 访问
    arr2[0] = 10;
    alert(arr2)


    // 特点：JavaScript数组相当于Java中集合。变长变类型

    // 变长
    var arr3 = [1,2,3];
    arr3[10] = 10;
    alert(arr3[10]);   //数组长度只有3，但可以访问10
    alert(arr3[9]);

    // 变类型
    arr3[5] = "hello";
    //alert(arr3[5]);   //不同类型可以在同一个数组中
    //alert(arr3);


    // 属性：length：数组中元素的个数
    var arr4 = [1,2,3];
    for (let i = 0; i < arr4.length; i++) {
        alert(arr4[i]);
    }

    // 方法：
       push:添加方法
    var arr5 = [1,2,3];
    arr5.push(10);
    alert(arr5);

       splice:删除元素
    arr5.splice(0,1);
    alert(arr5);

</script>

2.String对象

<script>
    //定义
    //方式一
    var str1 = new String("abc");
    //方式二
    var str2 = "abc";
    var str3 = 'abc';


    //length
     alert(str3.length);   //3


    // trim():去除字符串前后两端的空白字符
    var str4 = '  abc  ';
    alert(1 + str4 + 1);    //1  abc  1
    alert(1 + str4.trim() + 1);    //1abc1

</script>

3.自定义对象

五：BOM

1.window

<script>

    // alert
     window.alert("abc");
     alert("bbb");   //两者皆可


    // confirm，点击确定按钮，返回true，点击取消按钮，返回false
    var flag = confirm("确认删除？");

    alert(flag);
    if(flag){
        //删除逻辑
    }


    // 定时器
    //setTimeout(function,毫秒值): 在一定的时间间隔后执行一个function，只执行一次
      setTimeout(function (){
          alert("hehe");
      },3000);


    //setInterval(function,毫秒值):在一定的时间间隔后执行一个function，循环执行
      setInterval(function (){
          alert("hehe");
      },2000);

</script>

2.History

3.Location

<script>

    alert("要跳转了");
    location.href = "https://www.baidu.com";


    //3秒跳转到首页
    document.write("3秒跳转到首页...");
    setTimeout(function (){
        location.href = "https://www.baidu.com"
    },3000);

</script>

六：DOM

1.概述

DOM ： Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为：

Document ：整个文档对象

Element ：元素对象

Attribute ：属性对象

Text ：文本对象

Comment ：注释对象

作用：JavaScript 通过 DOM，就能够对 HTML进行操作了；改变 HTML 元素的内容；改变 HTML 元素的样式（CSS）；对 HTML DOM 事件作出反应；添加和删除 HTML 元素

DOM 相关概念：

DOM 是 W3C （万维网联盟）定义了访问 HTML 和 XML 文档的标准。

该标准被分为 3 个不同的部分：

1. 核心 DOM ：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准

Document：整个文档对象

Element：元素对象

Attribute：属性对象

Text：文本对象

Comment：注释对象

2. XML DOM ：针对 XML 文档的标准模型

3. HTML DOM ：针对 HTML 文档的标准模型

该标准是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象

例如： <img> 标签在浏览器加载到内存中时会被封装成 Image 对象，同时该对象也是 Element 对象。

例如： <input type='button'> 标签在浏览器加载到内存中时会被封装成 Button 对象，同时该对象也是Element 对象

2.获取Element对象

HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。

Document 对象中提供了以下获取 Element 元素对象的函数

getElementById() ：根据 id 属性值获取，返回单个 Element 对象

getElementsByTagName() ：根据标签名称获取，返回 Element 对象数组

getElementsByName() ：根据 name 属性值获取，返回 Element 对象数组

getElementsByClassName() ：根据 class 属性值获取，返回 Element 对象数组

七：事件监听

HTML 事件是发生在 HTML 元素上的 “ 事情 ” 。比如：页面上的按钮被点击、鼠标移动到元素之上，按下键盘按键等都是事件。

事件监听是 JavaScript 可以在事件被侦测到时 执行一段逻辑代码。

1.事件绑定

2.常见事件

查看文档，查询事件；

八：表单验证

需求：

1. 当输入框失去焦点时，验证输入内容是否符合要求

2. 当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不合符则阻止表单提交

<!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>

九：正则表达式

// 规则：单词字符，6~12
//1,创建正则对象，对正则表达式进行封装
var reg = /^\w{6,12}$/;
var str = "abcccc";

//2,判断 str 字符串是否符合 reg 封装的正则表达式的规则
var flag = reg.test(str);
alert(flag);