JavaWeb——JavaScript

目录

1.JavaScript引入方式

2.JavaScript基础语法

2.1书写语法、输出语句

2.2变量

2.3数据类型

2.4运算符

2.5函数

3.JavaScript常用对象

         3.1Array

3.2String

3.3自定义对象

​​4.BOM

4.1Window

定时器

4.2History

4.3 Location​

5.DOM

5.1获取Element对象

5.2常见HTML Element对象的使用

6.事件监听

6.1事件绑定

6.2常见事件

7.案例——表单验证

         正则表达式 ​


1.JavaScript引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--外部脚本-->
<script src="../js/demo.js"></script>

<!--内部脚本-->
<script>
    alert("Hello JS 02")
</script>

</body>
</html>


2.JavaScript基础语法

2.1书写语法、输出语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    window.alert("hello JS 01");//弹出警告框
    document.write("hello JS 02");//写入HTML
    console.log("hello JS 03");//写入控制台
</script>

</body>
</html>


2.2变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    var test = 20;
    test="张三";
    alert(test);

    {
        var test ="李四";//可以重复定义
    }
    alert(test);//可以找到变量

    {
        let age = 30;
        alert(age);
    }
    alert(age);//找不到变量

    const age2=90;//不能修改
    alert(age2)

</script>

</body>
</html>

2.3数据类型

2.4运算符


2.5函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //方式一
    function add(a, b) {
        return a + b;
    }
    var result = add("hello", " world");
    alert(result);

    //方式二
    var add = function(a, b){
       return a + b;
    }
    let result2 = add(2,3);
    alert(result2);

</script>
</body>
</html>


3.JavaScript常用对象

3.1Array


3.2String

 


3.3自定义对象




4.BOM

4.1Window

定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    window.alert("abc");
    alert("abc");

    var flag = window.confirm("你是否确定删除")
    if(flag){
        //删除逻辑
    }

    window.setTimeout(function () {
        alert("hhhhhhhh")
    },3000)//3s后执行一次

    window.setInterval(function () {
        alert("hhh")
    },1000)//每隔1s执行一次

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<img id="light">

<script>
    function on() {
        document.getElementById('light').src="../img/on.gif";
    }

    function off() {
        document.getElementById('light').src="../img/off.gif";
    }

    var x = 0;
    window.setInterval(function () {
        if (x % 2 == 0) {
            on();
        } else {
            off();
        }
        x++;
    }, 1000)

</script>
</body>
</html>

4.2History

4.3 Location

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    document.write('三秒跳转到百度...')
    setTimeout(function () {
        location.href="https://www.baidu.com/"
    },3000)
</script>

</body>
</html>


5.DOM

5.1获取Element对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<img src="../img/on.gif" id="on">
<img src="../img/off.gif" id="off">

<div>张三</div>
<div>李四</div>

<span class="day">星期一</span>
<span class="day">星期二</span>
<span class="day">星期三</span>

<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">跑步
<input type="checkbox" name="hobby">摄影

<script>
    
    document.getElementById("on");

    var divs= document.getElementsByTagName("div");

    var hobbys=document.getElementsByName("hobby");

    var days=document.getElementsByClassName("day");

</script>

</body>

5.2常见HTML Element对象的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<img src="../img/off.gif" id="light">

<div>张三</div>
<div>李四</div>

<span class="day">星期一</span>
<span class="day">星期二</span>
<span class="day">星期三</span>
<br>

<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">跑步
<input type="checkbox" name="hobby">摄影

<script>

    var img = document.getElementById("light");
    setTimeout(function () {
        alert("开灯");
        img.src="../img/on.gif";
    },2000);

    var divs= document.getElementsByTagName("div");
    setTimeout(function () {
        alert("变色");
        divs[0].style.color='red';
        divs[1].style.color='blue';
    },4000);

    var hobbys=document.getElementsByName("hobby");
    setTimeout(function () {
        alert("选中");
        hobbys[0].checked=true;
        hobbys[1].checked=true;
        hobbys[2].checked=true;
    },6000);

    var days=document.getElementsByClassName("day");
    setTimeout(function () {
        alert("背景色");
        days[0].style.backgroundColor="pink";
        days[1].style.backgroundColor="pink";
        days[2].style.backgroundColor="pink";
    },8000);

</script>

</body>

</html>


6.事件监听

6.1事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="button" value="点我" id="btn"><!--方式1-->
<input type="button" value="再点我" onclick="on()"><!--方式2-->

<script>

    document.getElementById("btn").onclick=function () {
        alert("我被点了")
    }//方式1

    function on(){
        alert("我又被点了")
    }//方式2

</script>
</body>
</html>


6.2常见事件

JavaScript HTML DOM 事件 (w3school.com.cn)https://www.w3school.com.cn/js/js_htmldom_events.asp

7.案例——表单验证

正则表达式 

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值