javascript学习

于 2022-04-07 14:38:02 发布
阅读量727 收藏
点赞数
文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/M_ming666/article/details/124016088
版权

JavaScript 事件处理 正则表达式 表单验证 数据类型
关键词由CSDN通过智能技术生成

嵌入JS的三种方式

  1. onclick(js代码)
  2. 通过脚本块
  3. 引入外部文件
<!--
	直接嵌入
-->
<body>
<input type="button" value="按钮" onclick="alert('hello test1');
                                           alert('hello test2');">
</body>

<!--
	通过脚本块嵌入
-->
<body>
<script type="text/javascript">		//脚本块会，自上而下，自动执行
    alert("hello");
</script>
<input type="button" value="按钮2">
</body>

<!--
	外部文件
-->
<body>
<script type="javascript" src="#"></script>		
</body>

JS变量

  • 若变量只声明没赋值，则系统默认赋值undefined
  • 若变量没声明，直接使用会报错

JS的数据类型

1. 类型分类

  • 原始类型：Undefined Number String Boolean Null
  • 引用类型：Object 以及其子类
  • Symbol

2. Number类型

  1. 类型
    • 所有数字
    • NaN：当运算的结果应该是数字，可结果不是数字时为NaN
    • Infinity：无穷大(除数为0)
  2. 常用函数
  • isNaN()：当结果为true时，表示不是一个数字；当结果为false时，表示是一个数字
  • Math.ceil()：向上取整
  • parseInt()：将字符串转化为数字，并取整数位
  • parseFloat()：将字符串转化为数字

3. Boolean类型

  1. 其结果只能为true/false

  2. Boolean(数据)：此函数自动将数据转化为true/false "有"则true，"无"则false

    Boolean(1)	//true
Boolean(0)	//false
    
Boolean("")	//false
Boolean("test")	//true

Boolean(null)	//false
Boolean(NaN)	//false
Boolean(undefined)	//false

4. null undefined NaN的区别

  1. 数据类型不同
  2. null==undefined

5. == 和=== 的区别

  1. ==：等同运算符，只判断值是否相同。
  2. ===：全等运算符，既判断值，又判断类型。

4. typeof运算符（获取变量的数据类型）

  1. 用法：typeof x
  2. 结果都是字符串，用 == 比较
    • “undefined” “number” “string” “boolean” “object” “function”
    • null 属于 Null 类型，但 typeof 的结果是 “object”

JS常用事件

  1. blur：失去焦点 focus：获得焦点
  2. click：鼠标单击 dblclick：鼠标双击
  3. keydown：键盘按下 keyup：键盘弹起
  4. mousedown：鼠标按下 mouseover：鼠标经过 mousemove：鼠标移动 mouseup：鼠标弹起 mouseout：鼠标离开
  5. reset：表单重置 submit：表单提交
  6. change：下拉列表选中项或文本框内容改变
  7. select：文本被选定
  8. load：整个页面全部加载完成

注册事件的两种方式

<input type="button" onclick="test01()">

<script type="text/javascript">
    function test01() {
        alert("doSome");
    }

<input type="button" id="myButton">

<script type="text/javascript">
    document.getElementById("myButton").onclick=doSome;		//doSome不能加 ()
    
    function doSome() {
        alert("doSome");
    }
</script>

获取用户输入

<script type="text/javascript">
    window.onload=function () {
        document.getElementById("myButt").onkeydown=function (e) {
            if(e.keyCode === 13)		//获取用户输入的键值
                alert("ok");
        }
    }
</script>
<input type="test" id="myButt" >

void运算符

<a href="javascript:void(0)" onclick="test()">保留超链接样式，点击之后执行代码，却不跳转</a>

<script type="text/javascript">
    function test() {
        alert("ok");
    }
</script>

正则表达式

主要用于字符串格式匹配

  1. 常见正则表达式符号
    • . 匹配除换行符以外所有字符
    • \w 匹配字母、数字、下划线、汉字
    • \s 匹配任意空白字符
    • \d 匹配数字
    • \b 匹配单词开始或结束
    • ^ 匹配字符串的开始
    • $ 匹配字符串的结束
    • *重复至少零次
    • +重复至少一次
    • ？ 重复0/1次
    • {n} 重复n次
    • {n,}重复至少n次
    • {n,m}重复n~m次
  2. 创建正则表达式
    • var regRep = /正则表达式/;
    • 使用内置支持类RegExp：var regRep = new RegExp(“正则表达式”);
    • 邮箱正则表达式：1+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$
  3. 正则表达式用法
    • regExp.test(用户填写的字符串) :返回true/false
<input type="text" id="email" onfocus="test02()"/>
<span id="emailMes"></span>
<br>
<input type="button" value="格式验证" onclick="test()"/>


<script type="text/javascript">
    function test() {
        var email = document.getElementById("email").value;
        var regRep = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;	//验证用户输入是否合法
        if(!regRep.test(email)){
            document.getElementById("emailMes").innerText="邮箱地址不合法";
        }
    }
    
    function test02() {
        document.getElementById("emailMes").innerText="";		//重新获得焦点时提示信息消失
    }
</script>

trim函数（清空字符串前后空白）

表单验证

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title</title>

</head>
<body>

<form action="www.baidu.com" method="get" id="form1">
    用户名：<input type="text" name="userName" id="userName"/>  <span id="userNameError" style="color: red"></span><br>
    密码：<input type="password" name="pwd" id="pwd1"/>    <span id="pwdError1" style="color: red"></span><br>
    确认密码<input type="password" id="pwd2"/>  <span id="pwdError2" style="color: red"></span><br>
    Email：<input type="text" name="email" id="email"/>  <span id="emailError" style="color: red"></span><br>
    手机号码：<input type="text" name="phone" id="phone"/><span id="phoneError" style="color: red"></span><br>
    <input type="checkbox" id="box">协议<span id="boxError" style="color: red"></span><br>
    <input type="button" value="提交" id="btn"/>
    <input type="reset" value="重置"/>
</form>


<script type="text/javascript">


    /*
   * 提交按钮绑定事件
   */
    var btnEle = document.getElementById("btn");
    btnEle.onclick = function () {
        if(checkUserName() && checkPwd1() && checkPwd2() && checkEmail() && checkPhone() && testBox() ){
            document.getElementById("form1").submit();
        }
    }


    /*
    * 用户名失去焦点事件
    */
    var userNameEle = document.getElementById("userName");
    var userNameErrorEle = document.getElementById("userNameError");

    userNameEle.onblur = checkUserName;
        function checkUserName(){
        var userName = userNameEle.value;
        userName = userName.trim();
        if(userName.length === 0){
            userNameErrorEle.innerText = "用户名不能为空";

        }else {
            if(userName.length>6){
                userNameErrorEle.innerText = "用户名长度小于6";

            }else {
                var regRep = /^[0-9a-zA-Z]+$/;
                if(!regRep.test(userName)){
                    userNameErrorEle.innerText = "用户名由字母或数字组成";
                }else {
                    return true;
                }
            }
        }

        return false;
    }


    /*
    * 用户名获得焦点事件
    */
    userNameEle.onfocus = function () {
        //清空非法value
        if(!checkUserName()){
            userNameEle.value = "";
        }
        //清空span
        userNameErrorEle.innerText = "";
    }


    /*
    * 密码框失去焦点事件
    */
    var pwdEle1 = document.getElementById("pwd1");
    var pwdEle2 = document.getElementById("pwd2");
    var pwdErrorEle1 = document.getElementById("pwdError1");
    var pwdErrorEle2 = document.getElementById("pwdError2");

    pwdEle1.onblur = checkPwd1;
        function checkPwd1() {
        var pwd1 = pwdEle1.value.trim();
        if(pwd1.length===0){
            pwdErrorEle1.innerText = "密码不能为空";
        }else {
            if(pwd1.length>19){
                pwdErrorEle1.innerText = "密码长度小于20位"
            }else {
                //密码为八位及以上并且字母数字特殊字符三项都包括
                if(/^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{8,}$/.test(pwd1)){
                    pwdErrorEle1.innerText = "密码强度：强";
                }
                //密码为八位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
                else {
                    if(/^(?=.{8,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[a-z])(?=.*\\W))|((?=.*[0-9])(?=.*\\W))|((?=.*[A-Z])(?=.*\\W))).*$/.test(pwd1)){
                        pwdErrorEle1.innerText = "密码强度：中";
                    }else{
                        pwdErrorEle1.innerText = "密码强度：低";
                    }
                }

                return true;
            }
        }

        return false;
    }

    /*
    * 密码框获得焦点事件
    */
    pwdEle1.onfocus = function(){
        //清空密码框和span
        if(!checkPwd1()){
            pwdEle1.value = "";
        }
        pwdErrorEle1.innerText = "";

    }

    /*
    * 确认密码框失去焦点事件
    */
    pwdEle2.onblur =checkPwd2;
        function checkPwd2() {
        var pwd1 = pwdEle1.value.trim();
        var pwd2 = pwdEle2.value.trim();
        if(pwd2.length===0){
            pwdErrorEle2.innerText = "确认密码不能为空";
        }else{
            if(pwd1!==pwd2){
                pwdErrorEle2.innerText = "两次密码不一致";
            }else {
                return true;
            }
        }
        return false;
    }

    /*
    * 确认密码框获得焦点事件
    */
    pwdEle2.onfocus = function(){
        //清空密码框和span
        if(!checkPwd2()){
            pwdEle2.value = "";
        }
        pwdErrorEle2.innerText = "";
    }


    /*
    * email获得焦点事件
    */
    var emailEle = document.getElementById("email");
    var emailError = document.getElementById("emailError");
    emailEle.onblur = checkEmail;
    function checkEmail() {
        var email = emailEle.value.trim();
        if(email.length === 0){
            emailError.innerText = "邮箱不能为空";
        }else{
            var regRep = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            if(!regRep.test(email)){
                emailError.innerText  = "邮箱格式不正确";
            }else {
                return true;
            }
        }
        return false;
    }

    /*
    * email框获得焦点
    */
    emailEle.onfocus = function () {
        if(!checkEmail()){
            emailEle.value = "";
        }
        emailError.innerText = "";
    }


    /*
    * phone框失去焦点
    */
    var phoneEle = document.getElementById("phone");
    var phoneEleErrorEle = document.getElementById("phoneError");
    phoneEle.onblur = checkPhone;
    function checkPhone(){
        var phone = phoneEle.value.trim();
        if(phone.length === 0){
            phoneEleErrorEle.innerText= "手机号码不能为空";
        }else{
            var ok = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
            if(!ok.test(phone)){
                phoneEleErrorEle.innerText = "手机号码格式不正确";
            }else {
                return true;
            }
        }
        return false;

    }

    /*
    * phone框获得焦点
    */
    phoneEle.onfocus = function () {
        if(!checkPhone()){
            phoneEle.value = "";
        }
        phoneEleErrorEle.innerText = "";
    }

    /*
    * 协议是否同意
    */
    function testBox() {
        if (document.getElementById("box").checked){
            return true;
        }
        document.getElementById("boxError").innerText = "请同意协议";
        return false;
    }

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

BOM编程

  1. window.open()和window.close()
  2. window.alert()和window.confirm()
<input type="button" value="消息框" onclick="mes()"/>
<input type="button" value="确认框" onclick="confir()"/>

<script type="text/javascript">
    
    function mes() {
        alert("消息框");
    }
    
    function confir() {				
        if(confirm("确定吗？")){		//confirm()返回值：true/false
            alert("确认");
        }else {
            alert("取消");
        }
    }

</script>

  1. a-zA-Z0-9_- ↩︎

Ming_不想秃头
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值