JavaWeb系列三: JavaScript学习下

~ 小团子

已于 2024-08-16 14:14:44 修改

阅读量950

点赞数 22

分类专栏： JavaWeb 文章标签： javascript 学习开发语言

于 2024-08-14 14:04:15 首次发布

本文链接：https://blog.csdn.net/qq_18817831/article/details/141067618

版权

JavaWeb 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

在这里插入图片描述

⬅️ 上一篇: JavaWeb系列三: JavaScript学习上

🎉 欢迎来到 JavaWeb系列三: JavaScript学习下 🎉

在本篇文章中，我们将继续深入学习 JavaScript，探索更多高级特性和实用功能。通过进一步学习 JavaScript，您可以更加灵活地实现网页的动态效果和交互功能。

🔧 本篇需要用到的项目: javascript-demo项目

数组学习

数组定义

1.应用实例, 创建array_define.html, 演示js数组定义使用的4种方式.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组定义</title>
    <script type="text/javascript">
        //数组定义的第一种方式
        var car = ["奔驰", 100, "奥迪", true, "宝马", 300.24];
        console.log("car=", car);
        console.log("car[0]", car[0]);//表示访问car数组的第一个元素, 0代表索引, 索引从0开始
        //数组定义的第二种方式
        var car = [];//空数组(但是在java中要指定大小)
        //添加元素
        car[0] = "奔驰";
        car[1] = "宝马";
        car[2] = "奥迪";
        console.log("car=", car);
        console.log("car[1]", car[1]);
        console.log("car[2]", car[2]);
        console.log("car[10]", car[10]);//访问第11个元素, 如果该元素不存在, 返回undefined
        //数组定义的第三种方式
        var car = new Array("奔驰", "宝马", "比亚迪");
        console.log("car=", car);
        //数组定义的第四种方式
        var car = new Array();
        console.log(typeof car);//object
        car[0] = "奔驰";
        car[1] = "宝马";
        console.log("car=", car);
        car[1] = "比亚迪";//相当于数组替换
        car[2] = "奥迪";//相当于数组扩容
        car[7] = "红旗";//扩容, 如果跳过了中间的下标索引, 进行扩容, 那么中间未定义的值为undefined
        console.log("car[3]", car[3]);//undefined
        console.log("car=", car);//car= Array(8) [ "奔驰", "比亚迪", "奥迪", <4 empty slots>, "红旗" ]
    </script>
</head>
<body>

</body>
</html>

数组使用和遍历

1.应用实例创建traversal-array.html, 演示js的数组遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组遍历(traversal)和使用</title>
    <script type="text/javascript">
        var car = ["奔驰", 60000.00, "宝马", true, "奥迪", null];
        //数组遍历
        console.log("数组car的长度=", car.length);//6
        for (var i = 0; i < car.length; i++) {
            console.log("car[" + i + "]=" + car[i]);//log()方法会自动换行
        }
    </script>
</head>
<body>

</body>
</html>

js函数快速入门

一句话: 函数是由事件驱动的, 或者当它被调用时, 执行的可重复使用的代码块.

需求: 演示js函数的基本使用

应用案例
创建 simple_function.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js函数入门</title>
    <script type="text/javascript">
        //定义一个简单的函数
        //如果不去调用函数, 那么该函数是不会被执行的
        //在js中如果要执行函数, 有两种方式, 1.主动调用hi(); 2.事件触发
        function hi() {
            console.log("hello, 你好");
        }
        hi();
    </script>
</head>
<body>
<!--
    这里表示给这个button绑定了一个onclick事件
    当用户点击了该button, 就会触发hi()函数
-->
<button onclick="hi()">点击这里, 触发函数</button>
</body>
</html>

函数定义方式

方式1: function关键字定义函数

1.基本语法
function 函数名(形参列表) {
函数体
return 表达式
}
//调用函数名(参数列表);

2.应用实例创建 1.function-use.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js函数定义方式一</title>
    <script type="text/javascript">
        //1.定义没有返回值的函数
        function f1() {
            console.log("f2() 被调用...")
        }
        f1();
        //2.定义有形参的函数
        //这里的形参不需要指定类型, name的数据类型是由实参决定的
        function f2(name) {
            console.log(typeof name);//number, object, null, string
            console.log("f2() 被调用...", name);
        }
        f2();
        //3.定义有形参和返回值的函数, 不需要指定返回类型, 返回类型由返回的数据决定
        //js函数的调用机制和java一样
        function f3(n1, n2) {
            return n1 + n2;
        }

        console.log("f3(10, 20)结果=", f3(10, 20));
    </script>
</head>
<body>

</body>
</html>

方式2: 将函数赋给变量

1.基本语法
var 函数名 = function(形参列表) {
函数体
return 表达式
}
//调用函数名(实参列表);

2.应用实例 2.function-use.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js函数使用方式二</title>
    <script type="text/javascript">
        var f1 = function () {
            console.log("f1函数被调用...");
        }
        console.log(typeof f1);//function
        f1();//调用函数
        var f2 = f1;
        f2();
        var f3 = function (name) {
            console.log("f3(name)=", name)
        }
        f3("赵志伟");
        var f4 = function (n1, n2) {
            return n1 + n2;
        }
        console.log("f4(1, 2)结果=", f4(1, 2));
    </script>
</head>
<body>

</body>
</html>

js函数注意事项和细节

1.js中, 函数的重载会覆盖掉上一次的定义.

2.函数的arguments隐形参数(作用于在function函数内).

(1)隐形参数: 在function函数中不需要定义, 可以直接来获取所有参数的变量.

(2)js中的隐形参数特别像java的可变参数一样, 操作类似数组.

3.应用实例创建function-detail.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数使用注意事项和细节</title>
    <script type="text/javascript">
        //1.js中函数的重载会覆盖掉上一次的定义
        //解读
        //(1)js中函数的重载会覆盖掉上一次的定义
        //(2)当你调用f1()时, 其实调用的是f1(name)这个方法
        //(3)调用f1(name)时, 如果你没有传入实参, 那么这个name就是undefined
        function f1() {
            console.log("f1()")
        }
        function f1(name) {
            console.log("f1(name)=", name)
        }
        f1();
        //2.函数的arguments隐形参数(作用域在function函数内)
        //(1)隐形参数: 在function函数中不需要定义, 可以直接用来获取所有参数的变量.
        function f2() {
            //(2)遍历: 函数的arguments 隐形参数
            //(3)注意 arguments 是数组
            //(4)提示: 如果我们希望通过console.log输出对象的数组, 使用逗号连接, 而不是+
            console.log(arguments);//可以
            console.log("arguments=", arguments);//可以
            console.log("arguments=" + arguments);//这里不能使用+连接
            //(5)可以把arguments参数当作数组来使用
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
        }
        f2(1, 2.5, "me");
        //3.小细节
        //(1)如果我们的函数有形参, 在传入实参的时候, 仍然按照顺序匹配
        //(2)如果匹配上, 就赋给它, 如果没有匹配上, 也无所谓
        //(3)最后仍然会把所有的实参, 赋给 arguments
        //(4)如果形参个数大于了实参个数, 则该形参的值为 undefined
        function f3(n) {
            console.log("n=", n);//100
            console.log("arguments=", arguments);//arguments= Arguments { 0: 100, 1: 200, 2: 300, … }
        }
        f3(100, 200, 300);
    </script>
</head>
<body>

</body>
</html>

js函数练习

1.需求: 编写一个函数, 用于计算所有参数相加的和并返回, 如果实参不是number, 就过滤掉.

2.提示: 使用typeof(变量)来判断参数类型

3.应用实例创建function-exercise.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js函数练习</title>
    <script type="text/javascript">
        function getSum() {
            var sum = 0;//变量初始化
            for (var i = 0; i < arguments.length; i++) {
                console.log("arguments[i]=", arguments[i], typeof (arguments[i]));
            }

            for (var i = 0; i < arguments.length; i++) {
                if (typeof (arguments[i]) == "number") {
                    sum += arguments[i];
                }
            }
            return sum;
        }
        var sum = getSum("房子", 10000, "车子", 30000, "电脑", 5000);
        console.log("sum=", sum);
    </script>
</head>
<body>

</body>
</html>

js自定义对象

方式1: Object形式

1.对象的定义
var 对象名 = new Object();//对象实例(空对象)
对象名.属性名 = 值;//定义一个属性
对象名.函数名 = function() {}//定义一个函数

2.对象访问
对象名.属性
对象名.函数名()

3.应用实例创建1.object_difine.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义对象方式一</title>
    <script type="text/javascript">
        //自定义对象方式一
        //person是一个空对象, 没有自定义的函数和属性
        var person = new Object();//built-in
        console.log("person类型=", typeof person);//object
        //增加一个属性
        person.name = "赵志伟";
        //增加一个属性age
        person.age = 23;
        //增加一个函数
        person.hi = function () {
            //这里的this就是当前的person
            console.log("person信息 ", this.name, this.age);
        };
        //访问属性
        console.log("person.name=", person.name);
        //访问方法
        person.hi();

        //小细节: 如果没有定义某个属性, 直接使用, 就会出现, 变量提升(专业术语), 显示undefined
        console.log("person.address=", person.address);//undefined
        //方法不能提升
        console.log("person.say=", person.say());
    </script>
</head>
<body>

</body>
</html>

方式2: {}形式

1.对象的定义
var 对象名 = {
        属性名: 值,//定义属性
        属性名: 值,//定义属性注意有,号
        函数名: function() {}//定义函数
}

2.对象访问
对象名属性
对象名.函数名()

3.应用实例创建2.function_define.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义对象方法二</title>
    <script type="text/javascript">
        //演示自定义对象方法二
        var person = {
            name: "赵志伟",//多个属性之间用,隔开
            age: 23,
            hi: function () {
                console.log("person信息=", this.name, this.age);
            },
            sum: function (n1, n2) {
                return n1 + n2;
            }
        };
        //使用
        console.log("person=", person);
        console.log("person.name=", person.name + ", person.age=", person.age);
        person.hi();
        console.log("person.sum(10,20)=", person.sum(10, 20));
    </script>
</head>
<body>

</body>
</html>

事件

基本介绍

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

2.事件通常与函数配合使用, 这样就可以通过发生的事件来驱动函数执行.

3.js事件文档地址: https://www.w3school.com.cn/js/js_events.asp

4.事件一览表

在这里插入图片描述

事件分类

在这里插入图片描述
1.事件的注册(绑定)
事件注册(绑定),当事件响应(触发)后要浏览器执行哪些操作代码,叫做事件注册或事件绑定;

2.静态注册事件
通过html标签的事件属性直接赋予事件响应后的代码,这种方式叫做静态注册;

3.动态注册事件(dom)
通过 js 代码得到标签的 dom 对象,然后再通过 dom 对象.事件名 = function () {} 这种形式叫做动态注册

4.动态注册事件步骤
(1)获取标签对象dom对象;
(2dom对象.事件名 = function() {}

onload加载完成事件

1.onload: 某个页面或图像被完成加载.

2.应用实例创建 onload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加载完成事件</title>
    <script type="text/javascript">
        //定义一个函数
        function hi() {
            console.log("静态注册 通过onload事件");
        }
        //1.在js中, 将页面窗口映射成window的dom对象
        //2.window对象有很多函数和属性, 以供程序员使用
        //3.window.onload 表示页面被加载完毕
        //4.后面的 function() {} 表示页面加载完毕后要执行的函数/代码
        window.onload = function () {
            console.log("动态注册 onload事件");
        };
    </script>
</head>
<!--静态注册-->
<!--<body οnlοad="hi()">-->
<body>
页面加载
</body>
</html>

onclick单击事件

1.onclick: 鼠标点击某个对象

2.应用实例创建onclick.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onclick 单击事件</title>
    <script type="text/javascript">
        function hi() {
            console.log("点击了hi()按钮");
        }
        //当页面加载完毕后, 我们再进行动态绑定
        //基本概念和机制一定要清楚
        window.onload = function () {
            //动态注册 onclick事件
            //1.得到 id=btn01 的button标签对应的dom对象
            //2.通过dom对象动态地绑定onclick事件
            //3.通过document的getElementById()获取对应的dom对象
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                console.log("点击了btn01按钮");
            }
        }
    </script>
</head>
<body>
<!--静态注册 onclick事件-->
<button onclick="hi()">hi()按钮-静态注册</button><br/>
<button id="btn01">hi()按钮-动态注册</button>
</body>
</html>

onblur失去焦点事件

1.onblur: 元素失去焦点

2.应用实例创建onblur.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onblur 失去焦点事件</title>
    <script type="text/javascript">
    //动态注册(绑定)
    //onload 加载完成事件 window表示当前窗口的dom对象
    //表示当前窗口加载完成后
    window.onload = function () {
        var btn01 = document.getElementById("btn01");
        btn01.onblur = function () {
            this.value = this.value.toUpperCase()
        }
    }
    function hi() {
        var btn02 = document.getElementById("btn02");
        btn02.value = btn02.value.toUpperCase();
    }
    </script>
</head>
<body>
输入英文单词(动态注册):
<input type="text" id="btn01"/><br/>
输入英文单词(静态注册):
<input type="text" id="btn02" onblur="hi()">
</body>
</html>

onchange内容发生改变事件

1.onchange: 域的内容被改变

2.应用实例创建onchange.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容发生改变事件</title>
    <script type="text/javascript">
        function salLevel() {
            console.log("工资变化了");
        }
        window.onload = function () {
            var mySports = document.getElementById("mySports");
            mySports.onchange = function () {
                console.log("你喜欢的运动变了");
            }
        }
    </script>
</head>
<body>
你当前的工资水平(静态注册):
<select onchange="salLevel()">
    <option selected>--工资范围--</option>
    <option>under 10k</option>
    <option>10k to 30k</option>
    <option>upper 30k</option>
</select><br/>
你当前擅长的运动(动态注册):
<select id="mySports">
    <option selected>--运动类型--</option>
    <option>篮球</option>
    <option>足球</option>
    <option>乒乓球</option>
</select>
</body>
</html>

onsubmit表单提交事件

1.需求: 注册按钮被点击, 提交表单. 如果用户名或密码为空, 不能提交表单.

2.应用实例创建onsubmit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onsubmit 表单提交事件</title>
    <script type="text/javascript">
        function register() {
            var username = document.getElementById("username");
            var password = document.getElementById("password");
            if (username.value == "" || password.value == "") {
                alert("用户名或密码为空, 不能提交表单(静态注册).");
                return false;
            }
        }
        //等页面window加载完成, 调用function函数
        window.onload = function () {
            var registerForm = document.getElementById("registerForm");
            registerForm.onsubmit = function () {
                var address = document.getElementById("address");
                var email = document.getElementById("email");
                if (address.value == "" || email.value == "") {
                    alert("地址或邮件为空, 不能提交表单(动态注册).");
                    return false;
                }
            }
        }
    </script>
</head>
<body>
<h1>用户(静态)注册</h1>
<form action="onblur.html" onsubmit="return register()">
    username:<input type="text" name="username" id="username"/><br/><br/>
    password:<input type="password" name="password" id="password"/><br/><br/>
    <input type="submit" value="静态注册">
</form>
<h1>用户(动态)注册</h1>
<form action="onblur.html" id="registerForm">
    address:<input type="text" name="address" id="address"/><br/><br/>
    email:<input type="text" name="email" id="email"/><br/><br/>
    <input type="submit" value="动态注册">
</form>
</body>
</html>

表单作业

1.obsubmit: 注册按钮被点击, 提交表单, 要求如下

在这里插入图片描述

2.应用实例创建 onsubmit-作业.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单作业</title>
    <script type="text/javascript">
        window.onload = function () {
            var registerForm = document.getElementById("registerForm");
            registerForm.onsubmit = function () {
                var username = document.getElementById("username");
                var password = document.getElementById("password");
                var confirm = document.getElementById("confirm");
                var email = document.getElementById("email");

                var usernameReg = /^\w{4,6}$/;
                if (!usernameReg.test(username.value)) {
                    alert("用户名长度不对, 请重新输入");
                    return false;
                }
                var passwordReg = /^\w{6}$/;
                if (!passwordReg.test(password.value)) {
                    alert("密码长度不对, 请重新输入");
                    return false;
                }
                if (password.value != confirm.value) {
                    alert("两次密码不一致, 请重新输入");
                    return false;
                }
                var emailReg = /^\w+@\w+\.\w$/;
                if (!emailReg.test(email.value)) {
                    alert("邮件格式不对, 请重新输入");
                    return false;
                }
            }
        }
    </script>
</head>
<body>
<h1>用户(动态)注册</h1>
<form action="onblur.html" id="registerForm">
    用户名:<input type="text" name="username" id="username"/>长度(4-6)<br/>
    密码:<input type="password" name="password" id="password"/>长度(6)<br/>
    确认:<input type="password" name="confirm" id="confirm"/>长度(6)<br/>
    邮件:<input type="text" name="email" id="email"/>满足基本格式<br/>
    <input type="submit" value="动态注册"/>
</form>
</body>
</html>