JavaScript基础-Js的引入方式

Oh...Yeah！！！

于 2024-07-04 19:41:34 发布

阅读量318

点赞数 3

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/2302_79020600/article/details/140188106

版权

引入方式

同样，js代码也是书写在html中的，那么html中如何引入js代码呢？主要通过下面的2种引入方式：

**第一种方式：**内部脚本，将JS代码定义在HTML页面中

JavaScript代码必须位于<script></script>标签之间
在HTML文档中，可以在任意地方，放置任意数量的<script>
一般会把脚本置于<body>元素的底部，可改善显示速度

例子：

<script>
    alert("Hello JavaScript")
</script>

**第二种方式：**外部脚本将， JS代码定义在外部 JS文件中，然后引入到 HTML页面中

外部JS文件中，只包含JS代码，不包含&ltscript>标签
引入外部js的<script>标签，必须是双标签

例子：

<script src="js/demo.js"></script>

注意：demo.js中只有js代码，没有<script>标签

接下来，我们通过VS Code来编写代码，演示html中2种引入js的方式

第一步：在VS Code中创建名为 10.JS-引入方式.html 的文件

第二步：按照上述第一种内部脚本的方式引入js，编写如下代码：

<!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>
    <!-- 内部脚本 -->
    <script>
        alert('Hello JS');
    </script>
</head>
<body>
</body>
</html>

第三步：浏览器打开效果如图所示：

在这里插入图片描述

第四步：接下来演示外部脚本，注释掉内部脚本，然后在css目录同级创建js目录，然后创建一个名为demo.js的文件：

在这里插入图片描述

第五步：在demo.js中编写如下js内容：

alert('Hello JS2');

第六步：注释掉之前的内部脚本代码，添加<script>标签来引入外部demo.js文件,具体代码如下：

<!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>
    <!-- 内部脚本 -->
    <!-- <script>
        alert('Hello JS');
    </script> -->

    <!-- 外部脚本 -->
    <script src="js/demo.js"></script>
</head>
<body>

</body>
</html>

第七步：浏览器刷新效果如图：

在这里插入图片描述

Oh...Yeah！！！

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础-Js的引入方式

同样，js代码也是书写在html中的，那么html中如何引入js代码呢？**第二种方式：**外部脚本将， JS代码定义在外部 JS文件中，然后引入到 HTML页面中。接下来，我们通过VS Code来编写代码，演示html中2种引入js的方式。第一步：在VS Code中创建名为 10.JS-引入方式.html 的文件。**第一种方式：**内部脚本，将JS代码定义在HTML页面中。注意：demo.js中只有js代码，没有标签。
复制链接

扫一扫