JavaScript学习

破烂儿

已于 2023-04-09 21:22:18 修改

阅读量77

点赞数

分类专栏： javaweb 文章标签： javascript 学习前端

于 2023-02-11 22:28:06 首次发布

本文链接：https://blog.csdn.net/weixin_45864704/article/details/128990025

版权

javaweb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript的基础知识，包括与HTML的结合使用、变量和数据类型（如number、string、object、boolean和function），关系和逻辑运算，以及数组和函数的定义。重点讲解了事件处理，如onclick、onblur、onchange等，事件的静态和动态注册，以及对象的创建。此外，还涉及了正则表达式在字符串验证中的应用，以及简单的验证提示效果实现。

摘要由CSDN通过智能技术生成

1、JavaScript介绍

2、JavaScript与HTML结合使用的第一种方式

2、JavaScript与HTML结合使用的第二种方式

3、变量和数据类型介绍

JavaScript的变量类型：

数值类型：number

字符串类型：string

对象类型：object

布尔类型：boolean

函数类型：function

JavaScript 里特殊的值：

undefined 未定义，所有 js 变量未赋于初始值的时候，默认值都是 undefined.

null 空值。

NaN 全称是：Not a Number。非数字。非数值。

JS 中的定义变量格式：

var 变量名;

var 变量名 = 值;

4、js的关系运算

<script type="text/javascript">
    var a = 12;
    var b = "12";
    alert(a==b);//true
    alert(a===b);//false
</script>

5、逻辑运算

①在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。
0、null、 undefined、””(空串) 都认为是 false

var a = 0;
if(a==true){
    alert("这是真的");
}else{
    alert("这是假的");
}

/*
&& 且运算。
有两种情况：
第一种：当表达式全为真的时候。返回最后一个表达式的值。
第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值
|| 或运算
第一种情况：当表达式全为假时，返回最后一个表达式的值
第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值
并且 && 与运算 和 ||或运算 有短路。
短路就是说，当这个&&或||运算有结果了之后 。后面的表达式不再执行
*/

**6、js中的数组（重点）

**7、函数（重点）

函数的两种定义方式

第一种，可以使用function关键字来定义函数。使用的格式如下：

function 函数名(形参列表){

函数体

}

无参函数：

带参函数：

带有返回值的函数：

函数的第二种定义方式，使用格式如下： var 函数名 = function(形参列表){函数体}

8、js中的函数不允许重载

*9、隐形参数arguments（没接触过，好好看一下）

就是在 function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。
隐形参数特别像 java 基础的可变长参数一样。
public void fun( Object ... args );
可变长参数其实是一个数组。
那么 js 中的隐形参数也跟 java 的可变长参数一样。操作类似数组。

<script type="text/javascript">
  //这个参数a不影响
    function fun(a){
      for(var i = 0;i<arguments.length;i++){
        alert(arguments[i]);
      }
    }
    fun(1,"2",3);

    //需求：编写一个函数，用于计算所有参数相加的和并返回。
    var total = 0;
    function sum(a,b){
      for(var i = 0;i<arguments.length;i++){
        if(typeof(arguments[i])=="number"){
            total+=arguments[i];
        }
      }
      return total;
    }
    alert(sum(1,2,3,4,5,"sum",6,7,8,9));
</script>

10、Object形式的自定义对象（未接触）

对象的定义：
  var 变量名 = new Object(); // 对象实例（空对象）
  变量名.属性名 = 值; // 定义一个属性
  变量名.函数名 = function(){} // 定义一个函数
对象的访问：
  变量名.属性 / 变量名.函数名();

11.花括号形式的自定义对象（未接触）

对象的定义：
var 变量名 = {
属性名：值, // 定义一个属性
属性名：值, // 定义一个属性
函数名：function(){} // 定义一个函数
};

<script type="text/javascript">
  var obj = {
    name:"小花",
    age:18,//每个属性之间有逗号
    func:function (){
      alert("姓名："+this.name+"，年龄："+this.age);
    }
  };
  obj.func();
  // alert(typeof(obj));
</script>

12、事件介绍

事件就是电脑输入设备与页面进行交互的响应

常用的事件

onload加载完成事件：页面加载完成之后常用于做页面js代码初始化操作

onclick单击事件：常用于按钮的点击响应事件

onblur失去焦点事件：常用于输入框失去焦点后验证其输入内容是否合法

onchange内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作

onsubmit表单提交事件：常用于表单提交前，验证所有表单项是否合法

**13、两种事件注册介绍（重点）

事件的注册又分为静态注册和动态注册两种：
什么是事件的注册（绑定）？
其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。 
静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。 
动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。
动态注册基本步骤：
1、获取标签对象
2、标签对象.事件名 = fucntion(){}

14、onload事件

可以看到这样写，代码很乱，一般情况下，静态注册事件是这样写的：

onload事件动态注册是固定的：

15、onclick事件（重点）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function myfunc() {
            alert("这是静态注册onclick事件");
        }

        //动态注册onclick事件
        //首先是固定写法
        window.onload = function () {
            //获取标签对象，document是js提供的一个对象（文档）：从id属性中获取元素（元素也就是标签）
            var i = document.getElementById("mybutton");
            alert(i);
            //绑定事件，通过对象名.事件名 = function(){}
            i.onclick = function () {
                alert("动态绑定onclick事件！");
            }
        }
    </script>
</head>
<body>
<button onclick="myfunc();">按钮1</button>
<button id="mybutton">按钮2</button>
</body>
</html>

16、onblur失去焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun1(){
        // console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出，用于测试使用
		// log() 是打印的方法
            console.log("静态注册失去焦点事件onblur");
        }
        window.onload = function (){
            //先获取标签对象
            var i = document.getElementById("myinput");
            //通过标签对象.事件名 = function(){}
            i.onblur = function (){
                alert("动态注册失去焦点事件");
            }
        }

    </script>
</head>
<body>
    <input onblur="fun1();"></br>
    <input id="myinput">
</body>
</html>

17、onchange事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function mychange(){
            alert("静态注册onchange事件");
        }
        //动态注册
        window.onload = function (){
            //1、获取标签对象
            var elementById = document.getElementById("nanshen");
            //标签对象名.事件名 = function(){}
            elementById.onchange = function(){
                alert("男神已经改");
            }
        }


    </script>
</head>
<body>
    <select onchange="mychange()">
        <option>--请选择你的女神--</option>
        <option>刘亦菲</option>
        <option>迪丽热巴</option>
        <option>啦啦</option>
    </select>
    <select id="nanshen">
        <option>--请选择你的男神--</option>
        <option>111</option>
        <option>222</option>
        <option>333</option>
    </select>
</body>
</html>

18、onsubmit事件

如果什么也不写，表单还是直接提交了，根本没有检查合不合法。

改为return false之后，就不会提交表单了，那么我们如何用函数来返回false。

接下来，我们写一个动态注册事件

**19、document对象概念介绍，主要是学习document对象方法（重点）

20、验证用户名是否有效（重点）

<head>
    <meta charset="UTF-8">
    <title>getElementById</title>
    <script>
        /*
            * 需求：当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。<br/>
            * 验证的规则是：必须由字母，数字。下划线组成。并且长度是 5 到 12 位。* */
        //动态注册事件
        window.onload = function(){
            var but1id = document.getElementById(`but1`);
            //but1的onclick事件
            but1id.onclick = function () {
                //当我们要操作一个标签的时候，一定要先获取这个标签对象。
                var usernameId = document.getElementById("username");
                var usernameText = usernameId.value;
                // 如何 验证 字符串，符合某个规则 ，需要使用正则表达式技术
                var patt = /^\w{5,12}$/;
                /*
                    * test()方法用于测试某个字符串，是不是匹配我的规则 ，
                    * 匹配就返回 true。不匹配就返回 false.
                    * */
                if(patt.test(usernameText)){
                    alert("用户名合法！");
                }else {
                    alert("用户名不合法");
                }
            }
        }
    </script>
</head>
<body>
    <input type="text" id="username" value="ax">
    <button id="but1">校验</button>
</body>

21、**正则表达式对象（重点）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Regexp</title>
    <script type="text/javascript">
        //1、
        // var patt = /e/;   //也是正则表达式对象,查看
        // var str = "hello";//匹配一下str1中是否包含e

        //2、
        // var patt = /[abc]/;     //表示要求的字符串中是否包含a或b或c的任意一个。
        // var str = "hbalo";

        //3、
        // var patt = /[a-z]/;     //表示要求的字符串中是否包含小写字母的任意一个。
        // var str = "1hbalo";

        //4、
        // var patt = /[a-z]/;     //表示要求的字符串中是否包含小写字母的任意一个。
        // var str = "1hbalo";

        //5、
        // var patt = /[0-9]/;     //表示要求的字符串中是否包含任何数字。
        // var str = "hbalo";

        //6、
        //重点
        // var patt = /\w/;            //表示要求的字符串是否包含 字母、数字、下划线
        // var str = "[][]1234ss";     //true

        //7、
        // var patt = /a+/;                //匹配包含至少一个a的字符串。
        // var str = "bsaa";

        //8、
        // var patt = /a*/;        //表示要求的字符串是否 *包含* 0个 或 多个a。包含是最小条件满足就停止检查
        // var str = "111bc";      //第一个不是a，也是true，第一个往后的就不检查了！

        //9、
        // var patt = /a?/;        //表示要求的字符串是否 包含 0个或1个a
        // var str = "123";        //true

        //10、
        // var patt = /a{3}/;      //表示要求的字符串是否 *包含* 3个连续的a
        // var str = "123aaa456";  //true;
        // str = "4aa56";            //false

        //11、
        // var patt = /a{3,5}/;         //表示要求的字符串是否 *包含* 3个 或 5个 连续的a。
        // //或者理解成要求的字符串是否包含3-5个连续的a，只要 *包含* 就行！
        // var str = "123aaa456";  //true
        // str = "123aa456";   //false
        // str = "123aaaaa456";   //true
        // str = "123aaaaaaaaa456";    //true

        //12、
        // var patt = /a{3,}/;      //表示至少匹配3个a，最多几个不管
        // var str = "123aaaaaa";  //true

        //13、
        // var patt = /a$/;        //表示要求的字符串是否以a结尾
        // var str = "hellao";      //false
        // str = "qwea";   //true

        //14、
        // var patt = /^a/;        //表示要求的字符串以a开头
        // var str = "helloaaa";   //flase
        // str = "ahello";     //true

        //15、
        // var patt = /^a{3,5}$/      //表示要匹配的字符串以a开头，包含3-5个连续的a必须以a结尾;或者说至少3个或最多5个
        // var str = "aaaa";  //4个a true
        // var str = "aaa";  //3个a true
        // str = "aaaaa4"; //false
        // str = "aaaaaaaaa"; //false

        //16、
        var patt = /^\w{5,12}$/
        var str = "hello[][]";  //false


        var result = patt.test(str);
        alert(result);
    </script>
</head>
<body>

</body>
</html>

22、两种常见的验证提示效果

1、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementById</title>
    <script>
        /*
            * 需求：当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。<br/>
            * 验证的规则是：必须由字母，数字。下划线组成。并且长度是 5 到 12 位。* */
        //动态注册事件
        window.onload = function(){
            var but1id = document.getElementById(`but1`);
            //but1的onclick事件
            but1id.onclick = function () {
                //当我们要操作一个标签的时候，一定要先获取这个标签对象。
                var usernameId = document.getElementById("username");
                var usernameText = usernameId.value;
                // 如何 验证 字符串，符合某个规则 ，需要使用正则表达式技术
                var patt = /^\w{5,12}$/;
                /*
                    * test()方法用于测试某个字符串，是不是匹配我的规则 ，
                    * 匹配就返回 true。不匹配就返回 false.
                    * */
                var usernameSpan = document.getElementById("usernameSpan");
                // innerHTML 表示起始标签和结束标签中的内容
                // innerHTML 这个属性可读，可写
                if(patt.test(usernameText)){
                    usernameSpan.innerHTML = "用户名合法";
                }else {
                    usernameSpan.innerHTML = "用户名不合法！";
                }
            }
        }
    </script>
</head>
<body>
    <input type="text" id="username" value="ax">
    <span id="usernameSpan" style="color:red;"></span>
    <button id="but1">校验</button>
</body>
</html>

2、调用两个图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementById</title>
    <script>
        /*
            * 需求：当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。<br/>
            * 验证的规则是：必须由字母，数字。下划线组成。并且长度是 5 到 12 位。* */
        //动态注册事件
        window.onload = function(){
            var but1id = document.getElementById(`but1`);
            //but1的onclick事件
            but1id.onclick = function () {
                //当我们要操作一个标签的时候，一定要先获取这个标签对象。
                var usernameId = document.getElementById("username");
                var usernameText = usernameId.value;
                // 如何 验证 字符串，符合某个规则 ，需要使用正则表达式技术
                var patt = /^\w{5,12}$/;
                /*
                    * test()方法用于测试某个字符串，是不是匹配我的规则 ，
                    * 匹配就返回 true。不匹配就返回 false.
                    * */
                var usernameSpan = document.getElementById("usernameSpan");
                // innerHTML 表示起始标签和结束标签中的内容
                // innerHTML 这个属性可读，可写
                if(patt.test(usernameText)){
                    // usernameSpan.innerHTML = "用户名合法";
                    usernameSpan.innerHTML = "<img src=\"right.png\" width=\"15px\" height=\"15px\">"

                    }else {
                    // usernameSpan.innerHTML = "用户名不合法！";
                        usernameSpan.innerHTML ="<img src=\"wrong.png\" width=\"15px\" height=\"15px\">"
                }
            }
        }
    </script>
</head>
<body>
    <input type="text" id="username" value="ax">
    <span id="usernameSpan" style="color:red;">

    </span>
    <button id="but1">校验</button>
</body>
</html>

3、onblur失去焦点事件

在text框输入完之后，鼠标点击空白区域，自动出现叉号或对号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementById</title>
    <script>
        /*
            * 需求：当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。<br/>
            * 验证的规则是：必须由字母，数字。下划线组成。并且长度是 5 到 12 位。* */
        //动态注册事件
        window.onload = function(){
            //第一种：点击事件

            var but1id = document.getElementById(`but1`);
            //but1的onclick事件
            but1id.onclick = function () {
                //当我们要操作一个标签的时候，一定要先获取这个标签对象。
                var usernameId = document.getElementById("username");
                var usernameText = usernameId.value;
                // 如何 验证 字符串，符合某个规则 ，需要使用正则表达式技术
                var patt = /^\w{5,12}$/;
                /*
                    * test()方法用于测试某个字符串，是不是匹配我的规则 ，
                    * 匹配就返回 true。不匹配就返回 false.
                    * */
                var usernameSpan = document.getElementById("usernameSpan");
                // innerHTML 表示起始标签和结束标签中的内容
                // innerHTML 这个属性可读，可写
                if(patt.test(usernameText)){
                    // usernameSpan.innerHTML = "用户名合法";
                    usernameSpan.innerHTML = "<img src=\"right.png\" width=\"15px\" height=\"15px\">"

                    }else {
                    // usernameSpan.innerHTML = "用户名不合法！";
                        usernameSpan.innerHTML ="<img src=\"wrong.png\" width=\"15px\" height=\"15px\">"
                }
            }

            //第二种：失去焦点事件
            var usernameId = document.getElementById("username");
            usernameId.onblur = function(){
                //当我们要操作一个标签的时候，一定要先获取这个标签对象。
                var usernameId = document.getElementById("username");
                var usernameText = usernameId.value;
                // 如何 验证 字符串，符合某个规则 ，需要使用正则表达式技术
                var patt = /^\w{5,12}$/;
                /*
                    * test()方法用于测试某个字符串，是不是匹配我的规则 ，
                    * 匹配就返回 true。不匹配就返回 false.
                    * */
                var usernameSpan = document.getElementById("usernameSpan");
                // innerHTML 表示起始标签和结束标签中的内容
                // innerHTML 这个属性可读，可写
                if(patt.test(usernameText)){
                    // usernameSpan.innerHTML = "用户名合法";
                    usernameSpan.innerHTML = "<img src=\"right.png\" width=\"15px\" height=\"15px\">"

                }else {
                    // usernameSpan.innerHTML = "用户名不合法！";
                    usernameSpan.innerHTML ="<img src=\"wrong.png\" width=\"15px\" height=\"15px\">"
                }
            }
        }
    </script>
</head>
<body>
    <input type="text" id="username" value="ax">
    <span id="usernameSpan" style="color:red;">

    </span>
    <button id="but1">校验</button>
</body>
</html>

23、getElementsByName()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementByName</title>
    <script type="text/javascript">
        window.onload=function (){
            var checkall = document.getElementById("checkall");
            var checkallno = document.getElementById("checkallno");
            var checkreverse = document.getElementById("checkreverse");

            //document.getElementsByName()；是根据制定的name属性查询返回多个 标签对象 集合
            //这个集合的操作和数组一样。
            var checkbox = document.getElementsByName("checkbox");
            var i;
            //全选
            checkall.onclick = function (){
                //集合中的每个元素都是dom对象
                //这个集合中的元素顺序是他们在html页面中从上到下的顺序。
                for(i=0;i<checkbox.length;i++)
                    //checked表示复选框的选中状态，如果选中则为true，不选中为false
                    //checked这个属性可读可写
                    checkbox[i].checked = true;
            }
            //全不选
            checkallno.onclick = function (){
                for(i=0;i<checkbox.length;i++)
                    checkbox[i].checked = false;
            }
            //反选
            checkreverse.onclick = function () {
                for(i = 0;i<checkbox.length;i++){
                    checkbox[i].checked = !checkbox[i].checked;
                    // if(checkbox[i].checked==false)
                    //     checkbox[i].checked=true;
                    // else
                    //     checkbox[i].checked=false;
                }
            }

        }
    </script>
</head>
<body>
    <input type="checkbox" name="checkbox">Java
    <input type="checkbox" name="checkbox">C++
    <input type="checkbox" name="checkbox">C
    <br/>
    <input type="button" value="全选" id="checkall">
    <input type="button" value="全不选" id="checkallno">
    <input type="button" value="反选" id="checkreverse">
</body>
</html>

24、getElementByTagName()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementByName</title>
    <script type="text/javascript">
        window.onload=function (){
            var checkall = document.getElementById("checkall");
            checkall.onclick = function () {
                // document.getElementsByTagName("input");是按照指定标签名进行查询，并返回该标签名的集合，集合中的每个元素都是一个input对象
                //这个集合的操作跟数组 一样，集合中都是dom对象
                //集合中元素顺序是他们在html页面中从上到下的顺序
                var elementsByTagName = document.getElementsByTagName("input");
                for(var i=0;i<elementsByTagName.length;i++)
                    elementsByTagName[i].checked=true;
            }
        }
    </script>
</head>
<body>
    <input type="checkbox" >Java
    <input type="checkbox" >C++
    <input type="checkbox" >C
    <br/>
    <input type="button" value="全选" id="checkall">

</body>
</html>