JAVA12_13学习总结(JavaScript,dom编程)

五目炒饭

已于 2022-12-14 21:36:24 修改

阅读量118

点赞数

分类专栏： Java学习--二阶段文章标签：学习 java javascript 前端

于 2022-12-13 22:11:17 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_53118395/article/details/128308826

版权

Java学习--二阶段专栏收录该内容

17 篇文章

订阅专栏

今日内容

1. JavaScript自定义对象的方式

自定义对象的方式
    1)带形式参数创建--类似于Java中的有参构造
        格式
            function 对象(形式参数列表){
                this.属性名1 = 参数名1 ;
                this.属性名2 = 参数名2 ;
                this.方法名 = function(){
                    方法逻辑
                }
            }
            创建对象
                var 对象名 = new 对象(实际参数) ;
    2)不带形式参数的创建--类似于Java中的无参构造
        格式
            function 对象(){
            }
            创建对象
                var 对象名 = new 对象() ;
            this.属性名 = 值 ;
            this.方法名 = function(){
                方法逻辑
            }
    3)利用Object--所有对象的模板
    4)字面值方式--利用json字符串--最常用
        格式
            {"key":"value"}
        var 对象 = {"key1":"value1","key2":"value2"...}

2. JavaScript之DOM编程

Document Object Model
    基于文档对象编程
        操作思想
            1)获取指定的标签对象
                var 指定标签名 = document.getElementByID("id属性值") ;
            2)改变标签对象的属性

3. JavaScript之正则表达式

正则表达式
    X代表任意字符
数量词相关的
    X+:表示X字符出现一次或者多次 等价于{1,} 至少出现一次
    X*:表示X字符零次或多次  等价于{0,}。至少出现0次
    X?:表示X字符出现0次或者1次,等价于{0,1}:至少出现0次,不超过1次
范围:
    X{n}: 表示X字符恰好出现n次
    X{n,}:表示X字符串至少出现n次 等价于X+
    X{n,m}:表示X字符串至少n次,但是不超过m次 
其他语法:
    \d--- 等价于[0-9]匹配纯数字
    \w-- 等价于[A-Za-z0-9_]:匹配带有下划线的任何单词字符
邮箱里面--本身包含字符 
.---->必须转义 \.
正则表达式如何使用?
    1)创建正则表达式对象
        var 对象名 = /正则语法/ ;    
            -- 不推荐 "不完全匹配"
        var 对象名= /^ 正则语法 $/ ;
            -- 推荐
        边界匹配符号:
            ^:以...开头
            $:以...结尾
    2)var  flag = 通过正则表达式对象名.test(输入的字符串)
        flag--true,成功
        false,匹配失败

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>表单注册校验</title>
        <style>
            #all{
                width: 650px;
                height: 450px;
                background: peachpuff ;
                margin-top: 150px;
                margin-left: 450px;
            }
            #user{
                font-family: 楷体;
                font-size: 25px;
            }
            #username{
                width: 400px;
                font-family: 楷体;
                font-size: 25px;
            }
            #pwd{
                font-family: 楷体;
                font-size: 25px;
            }
            #password{
                width: 400px;
                font-family: 楷体;
                font-size: 25px;
            }
            #repwd{
                font-family: 楷体;
                font-size: 25px;
            }
            #repassword{
                width: 400px;
                font-family: 楷体;
                font-size: 25px;
            }
            #ema{
                font-family: 楷体;
                font-size: 25px;
            }
            #email{
                width: 400px;
                font-family: 楷体;
                font-size: 25px;
            }
            #num{
                font-family: 楷体;
                font-size: 25px;
            }
            #number{
                width: 400px;
                font-family: 楷体;
                font-size: 25px;
            }
            #sub{
                font-family: 楷体;
                font-size: 25px;
                margin-left: 300px;
            }
        </style>
    </head>
    <body>
        <div  id="all">
            <form action="#" method="get" onsubmit="submitxianzhi()">
                <div id="user">
                    用&ensp;户&ensp;名:<input type="text" id="username" onblur="checkUsername()"
                    placeholder="请输入6-10位用户名,仅限字母数字" /><span id="usernametip"></span>
                </div>
                <br />
                <div id="pwd">
                    密&ensp;&ensp;&ensp;&ensp;码:<input type="password" id="password" 
                    onblur="checkPassword()"/>
                    <span id="passwordtip"></span>
                </div>
                <br />
                <div id="repwd">
                    确认密码:<input type="password"/ id="repassword"
                    onblur="checkRepassword()" />
                    <span id="repasswordtip"></span>
                </div>
                <br />
                <div id="ema">
                    邮&ensp;&ensp;&ensp;&ensp;箱:<input type="email" id="email"
                    onblur="checkEmail()"/>
                    <span id="emailtip"></span>
                </div>
                <br />
                <div id="num">
                    电&ensp;&ensp;&ensp;&ensp;话:<input type="text" id="number"
                    onblur="checkNumber()"/>
                    <span id="numbertip"></span>
                </div>
                <br />
                <div id="sub">
                    <input type="submit"/ id="submit">
                </div>
            </form>
        </div>
    </body>
</html>
<script>
    //检查方法
    //检查用户名是否合格
    function checkUsername(){
        //获取用户输入的内容
        var username = document.getElementById("username").value ;
        //获取提示标签对象
        var usernametip = document.getElementById("usernametip") ;
        //定义正则规则
        var str = /^[A-Za-z0-9]{6,10}$/ ;
        //利用正则表达式
        if(str.test(username)){
            //满足,提示可用
            usernametip.innerHTML = "可用".fontcolor("green") ;
        }else{
            //不满足,提示不可用
            usernametip.innerHTML = "不可用".fontcolor("red") ;
        }
    }
    //检查密码
    function checkPassword(){
        //获取用户输入内容
        var password = document.getElementById("password").value ;
        //获取提示标签
        var passwordtip = document.getElementById("passwordtip") ;
        //定义正则规则
        var str = /^[A-Za-z0-9]{6,10}$/ ;
        //利用正则表达式
        if(str.test(password)){
            //满足,提示可用
            passwordtip.innerHTML = "可用".fontcolor("green") ;
        }else{
            //不满足,提示不可用
            passwordtip.innerHTML = "不可用".fontcolor("red") ;
        }
    }
    //检查重复密码
    function checkRepassword(){
        //获取用户输入内容
        var repassword = document.getElementById("repassword").value ;
        //获取提示标签
        var repasswordtip = document.getElementById("repasswordtip") ;
        //定义正则规则
        var str = /^[A-Za-z0-9]{6,10}$/ ;
        //利用正则表达式
        if(str.test(repassword)){
            //满足,提示可用
            repasswordtip.innerHTML = "可用".fontcolor("green") ;
        }else{
            //不满足,提示不可用
            repasswordtip.innerHTML = "不可用".fontcolor("red") ;
        }
    }
    //检查邮箱
    function checkEmail(){
        //获取输入内容
        var email = document.getElementById("email").valur ;
        //获取提示标签
        var emailtip = document.getElementById("emailtip") ;
        //书写正则规则
        var str = /^[A-Za-z0-9_]+@[A-Za-z0-9]+(\.[a-z]{2,3}){1,2}$/ ;
        //利用正则表达式
        if(str.test(email)){
            emailtip.innerHTML = "可用".fontcolor("green") ;
        }else{
            emailtip.innerHTML = "不可用".fontcolor("red") ;
        }
    }
    //检查电话
    function checkNumber(){
        //获取输入内容
        var number = document.getElementById("number").valur ;
        //获取提示标签
        var numbertip = document.getElementById("numbertip") ;
        //书写正则规则
        var str = /^[0-9]$/ ;
        //利用正则表达式
        if(str.test(email)){
            numbertip.innerHTML = "可用".fontcolor("green") ;
        }else{
            numbertip.innerHTML = "不可用".fontcolor("red") ;
        }
    }
    //提交限制
    function submitxianzhi(){
        if(checkUsername() && checkPassword() && checkRepassword() && checkEmail() && checkNumber()){
            //所有要求都满足在提交
            return true ;
        }else{
            return false ;
        }
    }
</script>