内部外部 Java脚本：通过示例进行学习

⚡ 智能摘要

内部和外部 Java本文介绍了 Web 项目中脚本代码的两种支持放置方式。文章对比了这两种方法，展示了可运行的示例，解释了如何使用 async 和 defer 正确链接脚本代码，并阐述了每种放置方式在哪些情况下能够提供更好的可维护性和性能。

📄 内部安置： Code 它位于 HTML 文档中的 script 标签之间，并随其所属页面一起加载。
🗂️ 外部安置： Code 它位于一个单独的 .js 文件中，通过 src 属性引用，因此许多页面共享一个源。
🔗 链接规则： 外部脚本标签必须始终关闭，除非提供完整路径，否则 src 路径是相对于 HTML 文档解析的。
⚙️ 加载控制： defer 属性会在 HTML 解析完成后运行文件，而 async 属性会在下载完成后立即运行文件。
🚀 缓存优势： 浏览器会将外部文件缓存一次，并在所有引用它们的页面中重复使用。
🧭 选择标准： 将简短的页面特定逻辑放在内部，并将共享或冗长的逻辑移到外部文件中，以便于调试。
🚫 内联处理程序： 基于属性的处理程序（例如 onclick）将标记与行为混合在一起，应该用 addEventListener 替换。

什么是内部和外部 Java脚本？

您可以使用 Java脚本代码有两种方式。

您可以包括 Java脚本代码 HTML 文档内部 本身。
您可以保留 Java脚本代码 单独的外部文件 然后从 HTML 文档指向该文件。

两种部署方式执行的是完全相同的语言，在浏览器中产生的结果也相同。区别在于源代码的存储位置、浏览器下载的方式，以及代码在网站上的重用和维护的难易程度。

什么是内部 Java脚本？

全内走线 Java脚本是直接写在 HTML 文件中一对 script 标签内的代码。浏览器从上到下读取 HTML 标记，当遇到 script 标签时，会立即执行其中的语句，无需额外的网络请求。

到目前为止，我们一直在使用内部 JS。以下是示例 -

<html>
<head>
  <title>My First JavaScript code!!!</title>
  <script type="text/javascript">
    // Create a Date Object
    var day = new Date();
    // Use getDay function to obtain todays Day.
    // getDay() method returns the day of the week as a number like 0 for Sunday, 1 for Monday,….., 5
    // This value is stored in today variable
    var today = day.getDay();
    // To get the name of the day as Sunday, Monday or Saturday, we have created an array named weekday and stored the values
    var weekday = new Array(7);
    weekday[0]="Sunday";
    weekday[1]="Monday";
    weekday[2]="Tuesday";
    weekday[3]="Wednesday";
    weekday[4]="Thursday";
    weekday[5]="Friday";
    weekday[6]="Saturday";
    // weekday[today] will return the day of the week as we want
    document.write("Today is " + weekday[today] + ".");
  </script>
</head>
<body>
</body>
</html>

输出：

Today is Wednesday.

打印出的日期会随着访问者的系统时钟而变化，因为 getDay 返回一个从 0（星期日）到 6（星期六）的数字，该数字用作星期几数组的索引。

什么是外部 Java脚本？

您计划在所有网页上显示当前日期和时间。假设您已经编写了代码并将其复制到所有网页（例如 100 个）。但之后，您想要更改日期或时间的显示格式。在这种情况下，您需要在所有 100 个网页上进行修改。这将是一项非常耗时且困难的任务。

因此，保存 JavaScript 代码保存在一个扩展名为 .js 的新文件中。然后在所有网页中添加一行代码以指向您的 .js 文件，如下所示：

<script type="text/javascript" src="currentdetails.js"></script>

注意：假设 .js 文件和所有网页都位于同一文件夹中。如果 external.js 文件位于不同的文件夹中，则需要在 src 属性中指定文件的完整路径。 </script> 即使元素没有内容，标签也是必需的，因为自闭合的脚本标签不是有效的 HTML，页面的其余部分会被未终止的元素吞噬。

这是你需要放在 currentdetails.js 文件中的代码：

var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var monthName;

var hours = currentDate.getHours();
var mins = currentDate.getMinutes();
var secs = currentDate.getSeconds();
var strToAppend;
if (hours >12 )
{
	hours1 = "0" + (hours - 12);
strToAppend = "PM";
}
else if (hours <12)
{
	hours1 = "0" + hours;
	strToAppend = "AM";
}
else
{
	hours1 = hours;
	strToAppend = "PM";
}

if(mins<10)
mins = "0" + mins;
if (secs<10)
	secs = "0" + secs;

switch (month)
{
	case 1:
		monthName = "January";
		break;
	case 2:
		monthName = "February";
		break;
	case 3:
		monthName = "March";
		break;
	case 4:
		monthName = "April";
		break;
	case 5:
		monthName = "May";
		break;
	case 6:
		monthName = "June";
		break;
	case 7:
		monthName = "July";
		break;
	case 8:
		monthName = "August";
		break;
	case 9:
		monthName = "September";
		break;
	case 10:
		monthName = "October";
		break;
	case 11:
		monthName = "November";
		break;
	case 12:
		monthName = "December";
		break;
}

var year = currentDate.getFullYear();
var myString;
myString = "Today is " + day +  " - " + monthName + " - " + year + ".<br />Current time is " + hours1 + ":" + mins + ":" + secs + " " + strToAppend + ".";
document.write(myString);

这是你的 currentdetails.js 文件。看到长长的代码行不用担心，你很快就会学会编程。像这样修改你的 HTML 文档：

<html>
	<head>
	   <title>My External JavaScript Code!!!</title>
	   <script type="text/javascript" src="currentdetails.js">
	   </script>
	</head>
	<body>
	</body>
</html>

⚠️警告： 上面的旧脚本会在每个小时前面加上零，所以上午 11 点显示为 011。它还会分配 hours1 未声明该变量会导致创建一个隐式全局变量，并在严格模式下抛出错误。下面的修正版本修复了这两个缺陷。

现代重写的同一个文件更短，声明了每个变量，并正确地填充了值：

// currentdetails.js - corrected modern version
const now = new Date();

const months = ["January", "February", "March", "April", "May", "June",
                "July", "August", "September", "October", "November", "December"];

const hours24 = now.getHours();
const suffix  = hours24 >= 12 ? "PM" : "AM";
const hours12 = String(hours24 % 12 || 12).padStart(2, "0");
const mins    = String(now.getMinutes()).padStart(2, "0");
const secs    = String(now.getSeconds()).padStart(2, "0");

const message = "Today is " + now.getDate() + " - " + months[now.getMonth()] +
                " - " + now.getFullYear() + ". Current time is " +
                hours12 + ":" + mins + ":" + secs + " " + suffix + ".";

document.getElementById("stamp").textContent = message;

样本输出：

Today is 29 - July - 2026. Current time is 09:05:07 AM.

如何连接外部 Java脚本文件正确

决定外部文件是否加载的三个细节是：src 属性中写入的路径、script 标签在文档中的位置以及应用于该标签的 loading 属性。

除非提供前导斜杠或完整地址，否则路径将相对于 HTML 文档进行解析。

src 值	意	决心
currentdetails.js	与 HTML 页面位于同一文件夹	/pages/currentdetails.js
js/currentdetails.js	当前文件夹的子文件夹	/pages/js/currentdetails.js
../currentdetails.js	当前文件夹的上一级文件夹	/currentdetails.js
/assets/js/currentdetails.js	从网站根目录开始的绝对路径	/assets/js/currentdetails.js

loading 属性控制浏览器何时停止解析 HTML 以运行文件。下表总结了三种可用的行为。

属性	下载	执行时刻	秩序得以维持
没有	阻止 HTML 解析	下载完成后立即	是
延缓	与解析并行	文档解析完成后	是
异步	与解析并行	下载结束后立即	没有

<!-- Recommended for scripts that read the DOM -->
<script src="js/currentdetails.js" defer></script>

<!-- Recommended for independent third party scripts -->
<script src="js/analytics.js" async></script>

<!-- Modern module syntax, deferred by default -->
<script type="module" src="js/app.js"></script>

💡提示： 此 type="text/javascript" 在 HTML5 中，该属性是可选的，可以省略。仅在需要支持非常旧的浏览器时才保留它，或者将其替换为其他属性。 type="module" 使用导入和导出语句时。

内部与外部 Java脚本：主要区别

下面将两种排名并列比较，考察通常决定选择的因素。

因素	全内走线 Java脚本	外置 Java脚本
存储位置	在 HTML 文件内部	单独的 .js 扩展名文件
跨页面重复使用	需要复制到每一页	每页都引用一个文件
浏览器缓存	每页重新下载	缓存一次，重复使用
维护工作量	代码共享时的高值	低，只需编辑一个文件
额外的 HTTP 请求	没有	是的，每个文件一个。
调试	在长 HTML 文件中更难	使用清晰的文件名和行号会更方便。
最适合	简短的页面特定逻辑	共享库和长脚本

何时使用内部和外部 Java脚本 Code?

如果你只有几行特定于特定网页的代码，那么最好保留你的 JavaHTML 文档内部的脚本代码。

另一方面，如果您的 Java如果许多网页都使用脚本代码，那么您应该考虑保留它。ping 将代码放在单独的文件中。这样，如果您想修改代码，只需修改一个文件即可，便于代码维护。如果您的代码过长，也最好将其放在单独的文件中，这有助于调试。

对于初学者来说，一个实用的原则是将内容限制在十行左右。任何较短且仅与页面相关的内容都可以放在内部文件中，而任何较长或需要共享的内容都应该放在外部文件中。

排队 Java脚本及其避免使用的原因

第三种放置方式存在于较旧的页面中，代码直接写在 HTML 属性内。虽然它仍然可以运行，但它将结构和行为混杂在一起，无法缓存、重用，也无法通过严格的内容安全策略进行保护。

<!-- Inline handler: works, but avoid it -->
<button onclick="alert('Clicked')">Click me</button>

<!-- Preferred: behaviour attached from a script -->
<button id="greet">Click me</button>

<script>
  document.getElementById("greet").addEventListener("click", () => {
      alert("Clicked");
  });
</script>

一旦您熟悉了如何放置脚本，请继续。 Java脚本数组方法，学习循环 Java脚本并逐步完成实际 Java脚本代码示例外部文件也使得管理浏览器存储逻辑变得更加容易，例如：饼干 Java脚本.

常见问题

将其放在结束的 body 标签之前，或者放在 head 标签内并使用 defer 属性。这两种方法都会让 HTML 先渲染，以便在代码运行时元素已经存在。

是的。每个文件添加一个 script 标签。如果没有 async 属性，浏览器会按照脚本出现的顺序执行它们，所以要把定义共享函数的文件放在调用它们的文件之前。

常见原因包括错误的源路径、缺少结束脚本标签或文件名大小写不一致。打开浏览器网络面板，查找 404 响应。

仅在首次访问时，会额外发出一次请求。之后，文件将从浏览器缓存中提供，这通常比在每个页面中重复相同的代码更快。

大多数助手会返回一个包含内部脚本标签的单个 HTML 文件，因为这样无需配置即可运行。如果您需要可用于生产环境的结构，请明确要求提供一个单独的 .js 文件。

具有 async 属性的外部文件适用于聊天机器人等第三方 AI 小部件，因为它们独立加载，并且永远不会阻止周围页面的渲染。

内部外部 Java脚本：通过示例进行学习

什么是内部和外部 Java脚本？

什么是内部 Java脚本？

输出：

什么是外部 Java脚本？

样本输出：

如何连接外部 Java脚本文件正确

内部与外部 Java脚本：主要区别

何时使用内部和外部 Java脚本 Code?

排队 Java脚本及其避免使用的原因

常见问题

总结一下这篇文章：

注册简报

什么是内部和外部 Java脚本？

什么是内部 Java脚本？

输出：

什么是外部 Java脚本？

样本输出：

相关文章

如何连接外部 Java脚本文件正确

内部与外部 Java脚本：主要区别

何时使用内部和外部 Java脚本 Code?

排队 Java脚本及其避免使用的原因

常见问题

总结一下这篇文章：

注册简报