JavaScript基本语法（一）

最新推荐文章于 2025-12-08 09:18:56 发布

原创最新推荐文章于 2025-12-08 09:18:56 发布 · 252 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js #html

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了浏览器上输出、弹出消息框、以及如何正确加载JS并避免空对象错误。通过实例解析了外部脚本加载顺序、window.onload事件和DOMContentLoaded事件的应用，确保了JavaScript在操作DOM时的正确性。

1.浏览器上输出

<!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>1.html</title>
    <script>
        // // 浏览器上输出
        document.write("js输出：hello world")
</head>
<body>
</body>
</html>

结果
浏览输出结果

2.弹出消息框

<!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>1.html</title>
    <script>
        // 弹出消息框
        window.alert("弹出消息框")
    </script>
</head>
<body>
</body>
</html>

结果
浏览器输出结果
3.外部加载js，并解决相关js与页面加载先后的问题
由于网页页面是从上往下加载的，因此当js文件或代码需要操作html的boy中的html标签，且js代码或文件比这些标签先出现（即位于这些标签代码的上面）,就会报空对象（null）错误，如下:
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>1.html</title>
    <!-- 加载外部脚本文件 -->
    <!-- <script src="js/hello.js"></script> -->
</head>
<body>
    <div id="div1"></div>
</body>
</html>

外部js文件hello.js：(也可以是内部或嵌入式的js)

// 编写脚本程序
 //第一步：找到id为div1的标签
 //let 定义一个变量
 let div1 = document.querySelector("#div1");
 //第二步：设置标签包裹的数据
 //设置id为div1的标签的内容
 div1.innerHTML = "hello world";
// 控制台输出
console.log(div1)

报错
在这里插入图片描述
解决方法一: 将js文件或js代码写在所操作html标签的后面，因为js代码可以出现在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>1.html</title>
</head>
<body>
    <div id="div1"></div>
</body>
</html>
<!-- 加载外部脚本文件 -->
<script src="js/hello.js"></script>

结果正确：
在这里插入图片描述

解决方法二：
可以先等页面加载后再执行js文件，页面加载完毕会触发load事件，load事件只能注册一个，如果有多个，执行最后一个。
外部js文件hello.js：

window.addEventListener('load',function(){// 或简写成window.onload = function(){}
    let div1 = document.querySelector("#div1");
    div1.innerHTML = "hello world";
})

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>1.html</title>
    <!-- 加载外部脚本文件 -->
    <script src="js/hello.js"></script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>