JavaScript基本语法（一）

最新推荐文章于 2024-08-19 15:26:06 发布

大图书馆的牧羊人

最新推荐文章于 2024-08-19 15:26:06 发布

阅读量141

点赞数 1

分类专栏： JavaScript 文章标签： javascript js html

本文链接：https://blog.csdn.net/qwqc262/article/details/117161623

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

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

大图书馆的牧羊人

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
JavaScript基本语法（一）

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"> <tit
复制链接

扫一扫

专栏目录