JavaScript基础（二）： js引入方式

最新推荐文章于 2023-12-09 20:40:48 发布

转载最新推荐文章于 2023-12-09 20:40:48 发布 · 240 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/Agnes2017/blog/1810834

文章标签：

#javascript #python #ViewUI

本文介绍了如何在HTML中插入JavaScript代码以及如何引用外部JS文件。此外还探讨了JS代码在HTML不同位置的影响。

2019独角兽企业重金招聘Python工程师标准>>>

一、如何插入JS代码

方式：

使用 <script> 标签在 HTML网页中插入JavaScript代码。

注意:

<script> 标签要成对出现，并把JavaScript代码写在 <script></script>之间。如下图：输入图片说明

说明：

<script type="text/javascript"> 表示在 <script></script> 之间的是文本类型(text)，javascript是为了告诉浏览器里面的文本是属于JavaScript语言。

举例：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb18030">
        <title>插入js代码</title>
        
         <script>
               document.write("开启JS之旅!");
         </script>
     
    </head>
    <body>
    </body>
</html>

输入图片说明

二、引用 `JS` 外部文件

我们知道使用<script>标签在HTML文件中添加JavaScript代码，如图：

输入图片说明

Q1：JavaScript 代码只能写在 HTML 文件中吗?

A1：当然不是，我们可以把 HTML文件和 JS 代码分开,并单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js ，然后将JS代码直接写在JS文件中。

输入图片说明

注意:
在JS文件中，不需要 <script>标签，直接编写JavaScript代码就可以了。

1、引入方式：

JS 文件不能直接运行，需嵌入到HTML文件中执行，我们需在HTML中添加如下代码，就可将JS文件嵌入HTML文件中。

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

输入图片说明

2、举例：

script.js

document.write("引用JS文件!")

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引用JS文件</title>
    <script src="script.js"></script>
</head>
<body>

</body>
</html>