JAVA-Web端学习2 JS

人生最怯懦的时候就是不敢作出决定自己命运的选择。

JS概念

JavaScript（简称 JS）是一种轻量级的解释型编程语言，主要用于为网页添加交互性和动态效果。

JS语法引入方式

其定义在script结构中，通常在body内，存在内部实现和外部实现两种方式

<!-- 内部实现 -->
<script>
  alter("Now is JS!");
</script>

<!-- news.js内实现 -->
alter("Now is JS!");

<!-- 外部实现 -->
<script src="news.js"></script>

js变量和常量

使用let修饰定义变量，使用const修饰定义常量

JS中使用let和const来声明变量，其为弱语言，可存放不同数据类型的值

<body>
    <script>
        let a=10;
        a="Now is OK";
        a=3.14;
        a=true;
        alert(a);//可赋值为不同数据类型

        const b="Now is const."
        alter(b);

    </script>
</body>

输出方法

alert(a); //弹出警告框 （常用）
console.log(a); //控制台查询 （常用）
document.write(a); //HTML的body中查询 （常用）

效果如下所示：

JS数据类型

JS声明为弱语言不代表JS不存在数据类型

使用typeof可以查看数据类型

<script>
      console.log(typeof 5);
      console.log(typeof 5.0);
      console.log(typeof true);
      console.log(typeof "Now is OK");
      console.log(typeof 'a');
      let a=50;
      console.log(typeof a);
  </script>

JS格式化字符串输出

JS输出也可以像是C++的printf一样采用格式化输出，不过格式略有不同

<script>
    let b="bushi";
    let c=50;
    console.log(`${b} is ${c}`);
</script>

JS定义函数

JS定义函数分为两类，具名函数和匿名函数，后者又分为定义函数表达式和箭头表达式

注意，由于JS本身为弱语言，因此定义函数时，形参和返回值均无需制定数据类型

<script>
    function add1(a,b) { //定义具名函数
        let tmp=a+b;
        return `${a} + ${b} = ${tmp}`;
    }

    let add2=function (a,b){ //定义匿名函数的函数表达式
        let tmp=a+b;
        return `${a} + ${b} = ${tmp}`;
    }
    let add3=(a,b)=>{ //定义匿名函数的箭头表达式
        let tmp=a+b;
        return `${a} + ${b} = ${tmp}`;
    }
    let a=50;
    let b=30;
    console.log(add1(a,b));
    console.log(add2(a,b));
    console.log(add3(a,b));
</script>

JS自定义对象

<script>
    let NowUser = {
        id:50,
        name:"Tom",

        Calc1:function (NowScore){//定义内部方法
            let TmpResult = NowScore*2.0;
            return `Now ${this.name} calcResult1 is ${TmpResult}`;
        },
        Calc2(NowScore) {//简洁定义
            let TmpResult = NowScore*2.0;
            return `Now ${this.name} calcResult2 is ${TmpResult}`;
        },
    }
    console.log(NowUser.Calc1(20.2));
    console.log(NowUser.Calc2(20.3));
</script>

值得注意的是，JS自定义对象中定义方法时尽量不要使用箭头表达式，容易出现问题

JSON

JSON（JavaScript Object Notation）是一种轻量级、易于读写的文本数据交换格式‌，广泛用于前后端数据传输、API接口通信和配置文件存储。它以简洁的语法结构，实现了跨语言、跨平台的数据交换，已成为现代互联网应用中的“通用语言” 。

<!-- JSON对象 -->
let NowUser = {
    id:50,
    name:"Tom",
}

<!-- JSON文本 -->
let NowUser = {
    "id":50,
    "name":"Tom",
}

使用JSON.stringify()将JSON对象转化为JSON文本

<script>
    let NowUser = {
        id:50,
        name:"Tom",
    }
    alert(NowUser);
    alert(JSON.stringify(NowUser));
</script>

可以看出alert(NowUser)无法输出具体信息，而使用alert(JSON.stringify(NowUser))转化为JSON对象后可以查看具体信息

使用JSON.parse是反操作，将JSON文本转化为JSON对象

<script>
    let NowUser2 = '{"id":50,"name":"Tome"}';
    alert(JSON.parse(NowUser2).name);
    alert(JSON.parse(NowUser2).id);
</script>

DOM

‌DOM（Document Object Model，文档对象模型），其将标记语言的各个组成部分封装成为对应的对象。JS通过DOM就能够对HTML进行操作。

DOM操作

DOM操作核心为两步：①查找对应的元素 ②进行操作

接下来介绍两个常见DOM操作document.querySelector 和document.querySelectorAll

<body>
    <h1 id="title1"> A</h1>
    <h1> B</h1>
    <h1> C</h1>
    <script>
        let hs=document.querySelector("#title1"); //查找ID对应的元素
        hs.innerHTML='D';
    </script>
</body>

<body>
    <h1 id="title1"> A</h1>
    <h1> B</h1>
    <h1> C</h1>
    <script>
        let hs2=document.querySelectorAll("h1"); //查找全部的元素
        hs2[0].innerHTML='E'; //修改第一个
    </script>
</body>

事件和事件监听

事件：HTML事件是指发生在HTML上的事件，比如按钮被点击，鼠标移动到元素上，按动键盘

事件监听：JAVAScript可以在事件触发时立刻做出一个函数响应，也就是事件绑定或者注册事件

事件监听

语法：事件源.addEventListener('事件类型',事件触发执行的函数);

事件监听三要素：

事件源：哪个dom操作触发了事件，要获取dom元素
事件类型：用什么方式触发，比如：鼠标单击click
事件触发执行的函数：执行什么操作

<body>
    <input type="button" id="btn1" value="click please">
    <input type="button" id="btn2" value="click please">
    <script>
        document.querySelector('#btn1').addEventListener('click',()=>{
            console.log("Now we click!");
        })
        document.querySelector('#btn2').addEventListener('click',()=>{
            console.log("Now we click , too!");
        })
    </script>
</body>

执行点击之后在控制台出现输出信息

注意，使用addEventListener多次绑定同一事件，那么都会执行

<body>
    <input type="button" id="btn1" value="click please">
    <input type="button" id="btn2" value="click please">
    <script>
        document.querySelector('#btn1').addEventListener('click',()=>{
            console.log("Now we click!");
        })
        document.querySelector('#btn1').addEventListener('click',()=>{
            console.log("Now we click , too ,yeahyeah!");
        })
    </script>
</body>

JS模块优化

如果将全部的JS代码都定义在同一个HTML中，随着功能的不断扩展会导致代码过于冗余，所以我们采用面向对象的思想进行模块化编程

原代码：

<body>
    <input type="button" id="btn1" value="click please">
    <input type="button" id="btn2" value="click please">
    <script>
        document.querySelector('#btn1').addEventListener('click',()=>{
            console.log("Now we click!");
        })
        document.querySelector('#btn1').addEventListener('click',()=>{
            console.log("Now we click , too ,yeahyeah!");
        })
    </script>
</body>

模块化后的优化代码：

//function.js 用于封装输出操作
export function printLog(msg) {
    console.log(msg)
}

//JSDemo.js 用于封装事件监听
import {printLog} from "./function"; //特定格式导入封装函数

document.querySelector('#btn1').addEventListener('click',()=>{
    printLog("Now we click!");
})
document.querySelector('#btn1').addEventListener('click',()=>{
    printLog("Now we click , too ,yeahyeah!");
})

//HTML正文
<body>
    <input type="button" id="btn1" value="click please">
    <input type="button" id="btn2" value="click please">
    <script src="JSDemo.js" type="module"> </script> //采用模块化编程 必须添加type="module"
</body>

posted @ 2026-03-16 21:38 tcswuzb 阅读(5) 评论(0) 收藏举报

刷新页面返回顶部

tcswuzb

致我们疯狂而又稚嫩的青春