javascript导入方式

JavaScript 导入方式

常见导入方式

1. 内联脚本

  • 直接写在页面中的 <script> 标签里。
  • 可以写在 head 中，也可以写在 body 中。
1
2
3
4
<script>
  console.log("Hello");
  alert("Hello");
</script>

2. 外部脚本

  • 通过 <script src="..."></script> 引入外部 .js 文件。
  • 适合项目开发和脚本复用。
1
<script src="./js/myscript.js"></script>

课堂完整示例代码

HTML 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS 导入方式</title>

    <script>
        console.log('Hello, head标签的内联样式');
        alert('Hello, head标签的内联样式弹窗');
    </script>
    <script src="./js/myscript.js"></script>
</head>
<body>
    <h1>JS 导入方式</h1>
    <script>
        console.log('Hello, body标签的内联样式');
        alert('Hello, 内联样式弹窗');
    </script>
</body>
</html>

外部 JS 文件

1
2
console.log("Hello,外联样式");
alert("Hello,外联样式");

知识点总结

  • JavaScript 可以通过内联和外链两种常见方式导入。
  • script 标签可以写在 head 中，也可以写在 body 中。
  • 外部脚本更适合维护和复用。

复习表达

JavaScript 常见的导入方式有两种，一种是直接写在页面中的 script 标签里，另一种是通过 script 标签的 src 属性引入外部 .js 文件。实际开发中，外部脚本方式更常见，因为更方便管理和复用代码。