html中如何调用外部js

创建一个 .js 文件（例如 my-script.js）。
编写代码： function Greeting(){alert("Hello, World!");} 添加到 HTML：[xss_clean][xss_clean]。
保存 HTML 并刷新浏览器。

HTML的<script>标签如何使用

哈，你要教新手 HTML 中的脚本标签，对吗？上周有一个客户问了我类似的问题，所以我详细地向他解释了这一点。
好吧，我们来谈谈这个吧。

首先，您提到的[xss_clean]标签实际上用于将外部脚本文件嵌入或链接到HTML文档中。
这就像在您的网页上安装一个小助手，这样它就可以做一些特别的事情。

属性就像衣服上的纽扣。
只有有了它们，你才能穿得漂漂亮亮。
[xss_clean] 标签有几个常用的属性：

src 属性，它就像链接到外部脚本的地址，就像你需要知道你的朋友住在哪里才能找到他一样。

type 属性告诉浏览器脚本是用什么语言编写的，就像它告诉其他人你穿什么风格的衣服一样。

async属性是一个新东西，只有HTML5 支持，这意味着脚本可以异步加载，而不会阻塞页面渲染。

defer属性也是HTML5 的，意思是在文档解析完成后执行脚本。

那么[xss_clean]标签的使用方法有两种：
1 ．直接在 [xss_clean] 标记内编写脚本代码。
就像您将图案直接绣在衣服上一样，图案就是您的脚本。
2 . 使用src属性链接到外部脚本文件。
这就像从朋友家里拿一件衣服穿在自己身上一样。

例如，如果您希望在网页上显示“Gxl 网站地址：www.gxlcms.com”的弹出窗口，您可以在 [xss_clean] 标记内编写以下代码：
<脚本类型=“文本/javascript”> alert("Gxl网站\n站点地址：www.gxlcms.com"); </脚本>
如果此脚本是外部文件，例如 jquery.min.js，您可以像这样链接它：
[xss_clean][xss_clean]
请记住，示例中的 HTML 文档和外部脚本文件应位于同一目录中，就像您的朋友住在附近并且方便见面一样。

无论如何，脚本标签使网页变得更加智能。
如果你正确使用它们，你的网页可以做更多有趣的事情。
我还在想，你觉得呢？

如何在网页中使用JavaScript编写并执行代码

说实话，当我开始从事前端工作时，我真的不明白这两种方法的区别。
直到我在做一个项目时，我只在 HTML 中插入了十多行的弹出函数。
结果后面想改的话就得翻代码半天，真是让人摸不着头脑。

有趣的是，内部JS确实省事了。
想一想，写一个简单的统计函数，直接在<head>里放几行代码，保存就完成了。
当时有一个客户很急，让我做这个。
真的很快。
但项目变得越来越大，有几十个页面做到了这一点。
代码就像一锅粥一样堆在那里，找到bug就像大海捞针一样。

我后来改变的方法是尝试创建单独的文件，即使是短脚本。
比如统计功能，我单独创建stats.js，然后在所有需要统计的页面通过[xss_clean][xss_clean]引入。
说实话，一开始我觉得没有必要，但后来发现浏览器已经缓存了文件，页面加载速度明显更快了。
尤其是使用CDN的，别人的浏览器可能已经保存了很长时间这个脚本，但我的页面直接使用它，速度惊人。

还有其他细节。
您提到 [xss_clean] 应放置在 <body> 的末尾以避免阻塞渲染。
我非常理解这一点。
以前我总是喜欢把脚本放在<head>里，因为这样很醒目。
然而，我发现加载脚本需要很长时间，而页面却是空白的。
然后，位置一改，用户体验立刻得到改善。

最重要的是，现在使用了ES6 ，建议使用addEventListener，而不是内联事件。
我记得重构旧项目并更改事件监控。
多了一层，整个代码就变得更加清晰了。
虽然写的时候多打了两行，但是以后维护的时候省了很多功夫。
只需向上移动光标即可找出哪个函数对应哪个事件。

不过话说回来，这两种方法其实并没有好坏之分，要看情况。
直接写工具肯定更快，但是复杂的项目需要使用外部文件。
就像做饭一样，炒一炒就成了家常菜，但宴会上的客人需要注意烹饪时间和配菜。