JavaWeb企业级开发---JavaScript

jianglin_78

755人浏览 · 2025-12-14 19:33:19

jianglin_78 · 2025-12-14 19:33:19 发布

记录在听黑马课的时候的笔记以及课堂上练习的代码，文章图源于我在听课的时候所截的屏，所以有些不清晰，请见谅。下面是课程链接，可点击自行跳转。

【黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）】 https://www.bilibili.com/video/BV1m84y1w7Tb/?share_source=copy_web&vd_source=d521b664e1113402904fa9336bd1d0ac

介绍

引入方式

JS的内部脚本和外部脚本实现：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS引入方式演示</title>
    <!-- 内部脚本 -->
    <!-- <script>
    alert("hello JS!");
  </script> -->
    <!-- 外部脚本 -->
    <script src="js/demo.js"></script>
  </head>
  <body>

  </body>
</html>

<!--demo.js-->
alert("hello JS!");

基础语法

书写语法

JS三种输出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS基础语法输出语句</title>
</head>
<body>
    <script>
        /* alert("Hello,JS!"); */
        //浏览器弹出警告框
        window.alert("Hello,JS!");
        //写入HTML，在浏览器中展示
        document.write("Hello,JS!");
        //写入浏览器控制台
        console.log("Hello,JS!");
    </script>
</body>
</html>

变量

变量的定义方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS基础语法变量</title>
</head>
<body>
    <script>
        /* var a = 10; //使用var关键字声明变量a，并赋值为10
        a = "张三"; //变量a重新赋值为字符串"张三"
        alert(a); //弹出警告框，显示变量a的值 */
        //作用域比较大，为全局变量，可以重复定义的
        /* {
            var a = 20;
            var a = "李四";
        }
        alert(a); //弹出警告框，显示变量a的值 */
        //let 局部变量不能重复定义
/*         {
            let b = 30;
            //let b = "王五"; //报错，不能重复定义变量b
            alert(b); //弹出警告框，显示变量b的值
        } */
        //const 声明常量，不能修改
        const c = 40;
        c = 50; //报错，不能修改常量c的值
        alert(c); //弹出警告框，显示常量c的值
    </script>
</body>
</html>

数据类型&运算符

JS数据类型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS基础语法数据类型</title>
</head>
<body>
    <script>

        //原始数据类型
        alert(typeof 3);//number 数字类型
        alert(typeof 3.14);//number 数字类型

        alert(typeof "A");//string 字符串类型
        alert(typeof 'Hello');//string 字符串类型

        alert(typeof true);//boolean 布尔类型
        alert(typeof false);//boolean 布尔类型

        alert(typeof null);//object 对象类型（特殊的原始数据类型，表示空值）

        var a ;
        alert(typeof a);//undefined 未定义类型

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

JS运算符：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS基础语法运算符</title>
</head>
<body>
    <script>
        // var age = 20;
        // var _age = "20";
        // var $age = 20;

        // alert(age == _age);//true
        // alert(age === _age);//false
        // alert(age === $age);//true

        // 类型转换 - 其他类型转为数字
        alert(parseInt("12")); //12
        alert(parseInt("12A45")); //12
        alert(parseInt("A45")); //NaN

        // 类型转换 - 其他类型转为boolean
        // if(0){
        //      alert("0 转换为false");
        // }
        // if(NaN){
        //      alert("NaN 转换为false");
        // }
        // if(-1){
        //      alert("除0和NaN其他数字都转为 true");
        // }

        // if(""){
        //      alert("空字符串为 false，其他都是true");
        // }

        // if(null){
        //      alert("null 转化为false");
        // }
        // if(undefined){
        //      alert("undefined 转化为false");
        // }

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

函数

但只取前面所需要的参数个数。

JS函数实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS函数</title>
</head>
<body>
    <script>
        //定义函数 -1
        /* function add(a,b){
            return a + b;
        } */
        //定义函数 -2
        var add = function(a,b){
            return a + b;
        }
        //调用函数
        var result = add(3,5);
        alert(result); //8
    </script>
</body>
</html>

对象

Array数组

JS数组创建以及相关操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS对象定义Array数组</title>
</head>
<body>
    <script>
        //定义数组 - 方式1
        /* var arr1 = new Array();
        arr1[0] = "张三";
        arr1[1] = 20;
        arr1[2] = true;
        alert(arr1[0]); //张三
        alert(arr1.length); //3 */

        //定义数组 - 方式2
        /* var arr2 = ["李四",25,false];
        alert(arr2[1]); //25
        alert(arr2.length); //3

        //数组长度可变，类型可变
        arr2[10] = 10;
        alert(arr2.length); //11
        alert(arr2[5]); //undefined
        alert(arr2[10]); //10 */

        //for获取数组元素
        var arr3 = ["苹果","香蕉","橘子"];
        // arr3[9] = "葡萄";
        // for (let i = 0; i < arr3.length; i++) {
        //     const element = arr3[i];
        //     console.log(element);
        // }
        // //forEach遍历有数值的元素
        // arr3.forEach(function(element) {
        //     console.log(element);
        // });
        // //箭头函数遍历有数值的元素 (...)=>{...}
        // arr3.forEach(element => 
        //     console.log(element)
        // );
        //push 添加元素至数组末尾
        arr3.push("草莓");
        console.log(arr3);
        console.log("========");
        //splice 添加/删除元素
        //arr3.splice(1,0,"葡萄");//在索引1位置添加元素葡萄，不删除元素
        arr3.splice(2,1);//从索引2位置删除1个元素
        console.log(arr3);
        console.log("========");
        //pop 删除数组末尾元素
        arr3.pop();
        console.log(arr3);
        console.log("========");
        //shift 删除数组开头元素
        arr3.shift();
        console.log(arr3);
        console.log("========");
        //unshift 添加元素至数组开头
        arr3.unshift("西瓜");
        console.log(arr3);
        
    </script>
</body>
</html>

字符串

JS字符串：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS对象String字符串</title>
</head>
<body>
    <script>
        //创建字符串对象
        var str = new String("Hello, World!");
        console.log(str); //输出字符串对象
        var str2 = "Hello, JavaScript!";
        console.log(str2); //输出字符串字面量
        //字符串长度 length 属性
        console.log(str.length); //13
        console.log(str2.length); //18
        //charAt() 方法 获取指定位置的字符
        console.log(str.charAt(7)); //W
        console.log(str2.charAt(6)); //J
        //indexOf() 方法 查找子字符串首次出现的位置
        console.log(str.indexOf("o")); //4
        console.log(str2.indexOf("o")); //4
        //trim() 方法 去除字符串两端的空格
        var str3 = "   Hello, Trim!   ";
        console.log(str3.trim()); //Hello, Trim!
        //substring() 方法 提取字符串的子字符串 参数：起始位置，结束位置（不包含）
        console.log(str.substring(0,5)); //Hello
        console.log(str2.substring(7,17)); //JavaScript
    </script>
</body>
</html>

JSON

JSON对象的创建以及转换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS对象JSON</title>
</head>
<body>
    <script>
        // JSON对象
        /* var jsonObj = {
            "name": "张三",
            "age": 20,
            "isStudent": false,
            "greet": function() {
                console.log("Hello, " + this.name);
            }           
        };
        console.log(jsonObj);
        // 访问属性
        console.log(jsonObj.name);
        console.log(jsonObj["age"]);
        // 修改属性
        jsonObj.age = 21;
        console.log(jsonObj);
        // 添加属性
        jsonObj.gender = "男";
        console.log(jsonObj);
        // 删除属性
        delete jsonObj.isStudent;
        console.log(jsonObj);
        // 调用方法
        jsonObj.greet(); */

        var jsonstr = '{"name":"Jens","age":27,"isStudent":false}';
        // JSON字符串转换为JS对象
        var jsonObj = JSON.parse(jsonstr);
        alert(jsonObj.name);
        // JS对象转换为JSON字符串
        var jsonstr2 = JSON.stringify(jsonObj);
        alert(jsonstr2);
    </script>
</body>
</html>

BOM

概念：Browser Object Model（浏览器对象模型），允许 JavaScript 与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象。

组成：

Window：浏览器窗口对象

Navigator：浏览器对象

Screen：屏幕对象

History：历史记录对象

Location：地址栏对象

Window和LocationBOM对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS对象BOM</title>
</head>
<body>
    <script>
        //获取
        // window.alert("Hello BOM");
        // alert("Hello BOM Window");
        //方法
        //confirm - 弹出一个确认对话框 -- 确认 true 取消 false
        // var res = confirm("你确定要删除吗？");
        // alert(res);
        //定时器 -- 在指定的毫秒数后调用函数或计算表达式 setInterval/setTimeout
        // var i = 0 ;
        // setInterval(function(){
        //     i++;
        //     console.log("定时器执行了"+i+"次");
        // },2000);
        //setTimeout -- 只执行一次
        // setTimeout(function(){
        //     alert("定时器只执行我一次");
        // },5000);
        //location -- 获取或设置当前页面的URL
        alert(location.href);
        location.href = "https://www.baidu.com";
        
    </script>
</body>
</html>

DOM

DOM对象实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS对象DOM获取元素</title>
</head>
<body>
    <img id="h1" src="img/off.gif"> <br><br>
    <div class="cls">Love yourself</div> <br>
    <div class="cls">and love what you love</div> <br>
    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>
<script>
    //1. 获取Element元素
    //1.1 获取元素-根据ID获取
    var img1 = document.getElementById("h1");
    alert(img1.src);
    //1.2 获取元素-根据标签获取
    var imgs = document.getElementsByTagName("img");
    alert(imgs[0].src);
    //1.3 获取元素-根据name属性获取
    var hobbies = document.getElementsByName("hobby");
    alert(hobbies[0].checked);
    //1.4 获取元素-根据class属性获取
    var cls = document.getElementsByClassName("cls");
    alert(cls[0].innerHTML);
    //2. 查询参考手册，属性、方法
    //修改Love yourself为Hello World
    cls[0].innerHTML = "Hello World";
    alert("修改后的内容是："+cls[0].innerHTML);
</script>
</html>

DOM操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS对象DOM案例</title>
</head>
<body>
    <img id="h1" src="img/off.gif"> <br><br>
    <div class="cls">传智教育</div> <br>
    <div class="cls">黑马程序员</div> <br>
    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>
<script>
    //1. 点亮灯泡 : src 属性值
    var img = document.getElementById('h1');
    img.src = "img/on.gif";

    //2. 将所有div标签的内容后面加上: very good (红色字体) -- <font color='red'></font>
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        const div = divs[i];
        div.innerHTML += "<font color='red'>very good</font>";
    }

    //3. 使所有的复选框呈现选中状态
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        const check = ins[i];
        check.checked = true;//选中
    }
</script>
</html>

事件监听

事件绑定

事件绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-事件绑定</title>
</head>
<body>
    <input type="button" id="btn1" value="事件绑定1" onclick="on()">
    <input type="button" id="btn2" value="事件绑定2">
</body>
<script>
    function on(){
        alert("按钮1被点击了...");
    }

    document.getElementById('btn2').onclick = function(){
        alert("按钮2被点击了...");
    }
</script>
</html>

事件监听：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-常见事件</title>
</head>
<body onload="load()">

    <form action="" style="text-align: center;" onsubmit="subfn()">
        <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
        <input id="b1" type="submit" value="提交">
        <input id="b1" type="button" value="单击事件" onclick="fn1()">
    </form>

    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr>
        <tr align="center">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
    </table>

</body>
<script>
    //onload : 页面/元素加载完成后触发
    function load(){
        console.log("页面加载完成...")
    }

    //onclick: 鼠标点击事件
    function fn1(){
        console.log("我被点击了...");
    }

    //onblur: 失去焦点事件
    function bfn(){
        console.log("失去焦点...");
    }

    //onfocus: 元素获得焦点
    function ffn(){
        console.log("获得焦点...");
    }

    //onkeydown: 某个键盘的键被按下
    function kfn(){
        console.log("键盘被按下了...");
    }

    //onmouseover: 鼠标移动到元素之上
    function over(){
        console.log("鼠标移入了...")
    }

    //onmouseout: 鼠标移除某元素
    function out(){
        console.log("鼠标移出了...")
    }

    //onsubmit: 提交表单事件
    function subfn(){
        console.log("表单被提交了...");
    }
</script>
</html>

Vue

Vue快速入门：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-快速入门</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>
</html>

常用指令

Vue指令v-bind和v-model：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-bind</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>
        <input type="text" v-model="url">
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            url: "https://www.baidu.com"
        }
    })
</script>
</html>

Vue指令v-on：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-on</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="点我一下" v-on:click="handle()">
        <input type="button" value="点我一下" @click="handle()">
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
        },
        methods: {
            handle: function(){
                alert("你点我了一下...");
            }
        }
    })
</script>
</html>

Vue指令v-if与v-show：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-if与v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age <= 35">年轻人(35及以下)</span>
        <span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
        <span v-else>老年人(60及以上)</span>

        <br><br>

        年龄<input type="text" v-model="age">经判定,为:
        <span v-show="age <= 35">年轻人(35及以下)</span>
        <span v-show="age > 35 && age < 60">中年人(35-60)</span>
        <span v-show="age >= 60">老年人(60及以上)</span>
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            age: 20
        },
        methods: {
        }
    })
</script>
</html>

Vue指令v-for：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="addr in addrs">{{addr}}</div>
        <hr>
        <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            addrs:["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {
        }
    })
</script>
</html>

案例

通过Vue完成表格数据的渲染展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-案例</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(user,index) in users">
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">男</span>
                    <span v-if="user.gender == 2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>

    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
</script>
</html>

生命周期

vue生命周期：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>
</html>

这篇文章就先更到这里，接下来的内容可查看我的下一篇博客，感谢观看，希望对你有帮助。

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

【AI】-7 从知识库到 AI Agent -进阶

AI Agent技术社区

AI Agent 面试题 353：A2A协议的服务发现和注册机制详解

A2A 协议是 AI Agent 技术体系中的重要组成部分。简单来说，它涉及到 Agent 如何在工具使用与函数调用层面实现智能化的行为和决策。在实际应用中，A2A 协议的核心目标是让 Agent 能够更加高效、准确地完成特定任务。这需要我们深入理解其底层原理和实现机制。从学术角度来看，A2A 协议的研究可以追溯到人工智能的早期阶段。早在 1950 年代，Alan Turing 就提出了