javaweb基础 JavaScript-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52550495/article/details/136077483

本文介绍了JavaScript的引用方式、基础语法，包括变量声明、JSON使用以及与BOM和DOM的关系，展示了如何通过DOM操作改变网页元素，以及HTML事件监听的两种绑定方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS引用方式

script标签可以出现多次且可以出现在任意位置（内部脚本），不可自闭和

外部脚本：将JS单独放在一个文件里，（像之前css的一个格式模板一样）

JS基础语法

区分大小写
结尾分号可有可无
注释和c一样，单行// 多行/* */
变量无类型，直接用关键字var声明（定义的是全局变量，可重复定义），可存放不同类型的值

JS对象

自定义对象
JSON（多用于作数据载体）
var user='{"name":"WangYuanzi","age":22}'

将JSON字符串转为对象

var obj = JSON.parse(user);
alert(obj.name);

　3.BOM和DOM

BOM

window浏览器窗口对象

新建一个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-对象-BOM</title>
</head>
<body>

</body>
<script>
    /* window.alert("hello")
    alert("w") */
    confirm("您确认退出吗？")
</script>
</html>

Location

显示、返回域名：

DOM

JS通过DOM和网页监听机制控制网页行为

DOM案例

<!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-对象-BOM</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">电影<!-- checkbox复选框 -->
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戏

</body>
<script>
    //1.点亮灯:改变src属性值
    var img = document.getElementById('h1');//调取元素对象
    img.src="img/on(1).gif"

    //2.
    var divs = document.getElementsByTagName('div');
    for(let i = 0;i<divs.length;i++){
        const div = divs[i];
        div.innerHTML += "<font color = 'red'>very good";
    }

    //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>
    //方式1 HTML标签的事件属性
    function on(){
        alert("lalala");
    }
    //方式2 DOM元素属性
    document.getElementById('btn2').onclick = function(){
        alert("lalalala");
    }
</script>
</html>