JAVAweb学习笔记——JS

1、JS

(1)核心语法

（a）引入方法

首先是内部脚本：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS学习</title>
    <script>
        // 弹窗
        alert("hello");
    </script>
</head>
<body>
<script>
    // 弹窗
    alert("hello world");
</script>
</body>
<script>
    // 弹窗
    alert("world");
</script>
</html>

会弹出3次！

外部引入：

创建一个后缀为js的文件：

复制代码

alert("hello world");

以下是全部代码：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS学习</title>
</head>
<body>
<!--<script>-->
<!--    // 弹窗-->
<!--    alert("hello world");-->
<!--</script>-->

<script src="js/learn.js"></script>
</body>

</html>

结果如下：

总结：

（b）变量

（c）数据类型

（d）函数

（e）自定义对象

复制代码

<script>
    let user={
        name:'张三',
        age: 18,
        sex:'男',
        sing(){
            alert(this.name+'会唱歌');
        }
    }
    user.sing();
</script>

（f）JSON

复制代码

将js对象转换成json字符串：

<script>
    let person={
        name:'张三',
        age: 18,
        sex:'男',
    }

    alert(JSON.stringify(person));
</script>

同理，如果想获取JSON下某个属性对应的值时，应该先将其转换成js对象，之后获取

（g）DOM

querySelector获取到的是匹配到的第一个对象：

复制代码

<body>
    <h1 id="test1">111</h1>
    <h1>222</h1>
    <h1>333</h1>

    <script>
        let h1=document.querySelector('#test1');
        // innerHTML:设置或返回元素的内容
        alert(h1.innerHTML);
        // 将上述id=test1的输入111改为了下面的内容
        h1.innerHTML="输入111";
    </script>
</body>

返回h1此时的内容

返回修改后的内容

使用querySelectorAll时表示选取的是数组，在下面调用的时候要用数组的格式

（h）事件监听

因此第二种方法不推荐，绑定同一事件容易被覆盖

习题：

复制代码

<script>
    let d=document.querySelectorAll('tr');
    //为每一个tr标签添加鼠标滑入事件
    for(let i=0;i<d.length;i++){
        d[i].addEventListener('mouseover',function (){
            d[i].style.backgroundColor='#f2e2e2';
        });
        //为每一个tr标签添加鼠标滑出事件
        d[i].addEventListener('mouseout',function (){
            d[i].style.backgroundColor='#fff';
        });
    }
</script>

结果和上图一样，鼠标到那一行哪一行就变为红色！

从js文件引入另一个js文件：

将引入的文件先要"暴露"

在要用的文件中进行引入

之后在html引入js时，需要将以上声明为模块化js: