在前端开发中，将JavaScript代码嵌入到HTML文档中通常会有三种方式：
- 行内脚本（inline script）
- 内部脚本（internal script）
- 外部脚本（external script）
1. 行内脚本
行内脚本是指直接在HTML标签中使用<script>标签，将JavaScript代码写在其<script>和</script>标记之间，如下所示：
<button onclick="alert('Hello, World!')">Click me!</button>行内脚本通常用于简单的交互或临时调试。虽然它方便快捷，但代码可读性差，难以维护，也不利于代码复用。
2. 内部脚本
内部脚本是指在HTML文档中通过<script>标签引入JavaScript代码块，如下所示：
-- -------------------- ---- -------
--------- -----
------
------
--------- ------------
--------
-------- ---------- -
------------- ---------
-
---------
-------
------
------- -------------------------- ------------
-------
-------内部脚本可以在HTML文档中任何位置引入，通常放在<head>标签中，这样可以确保所有的JavaScript代码在页面渲染前加载完毕。内部脚本支持的语法与行内脚本相同，但它更易于维护和复用。
3. 外部脚本
外部脚本是指将JavaScript代码单独存放在一个.js文件中，并通过<script>标签的src属性引入，如下所示：
-- -------------------- ---- -------
--------- -----
------
------
--------- ------------
------- ---------------------------
-------
------
------- -------------------------- ------------
-------
-------外部脚本可以被多个页面共享，提高了代码的复用性和可维护性。同时，由于浏览器会缓存已下载过的外部脚本，因此它们也可以提高网站的性能。
如何选择不同的放置方式？
- 如果只是简单的交互或调试，使用行内脚本更方便。
- 如果需要在整个HTML文档中使用某个函数或变量，使用内部脚本比较合适。
- 如果需要多次重用某个函数或变量，或者需要多个HTML文档共享同一份JavaScript代码，使用外部脚本是最佳选择。
值得注意的是，由于浏览器解析HTML文档是从上到下依次进行，因此在使用内部脚本或外部脚本时，应确保它们在使用前已经加载完毕。
示例代码
行内脚本
<button onclick="alert('Hello, World!')">Click me!</button>内部脚本
-- -------------------- ---- -------
--------- -----
------
------
--------- ------------
--------
-------- ---------- -
------------- ---------
-
---------
-------
------
------- -------------------------- ------------
-------
-------外部脚本
将以下代码保存为myscript.js文件，并与HTML文档放置在同一目录下。
function sayHello() {
alert('Hello, World!');
}在HTML文档中引入这个外部脚本：
<!DOCTYPE html>
<html>
<head>
<title>
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/12494) ，转载请注明来源
[https://www.javascriptcn.com/post/12494](https://www.javascriptcn.com/post/12494)