在现代网页设计中，javascript已经成为了不可或缺的一部分。javascript可以轻松扩展网页的功能性，同时也可以增强用户体验。虽然javascript在html中可以直接嵌入，但当你需要在多个网页中重复使用相同的javascript代码时，封装javascript为一个独立的外部文件并外部调用将变得非常有用。
本文将讨论如何外部调用JavaScript代码，包括将其嵌入HTML文档和链接到文档中。
- 在HTML文档中嵌入JavaScript
将JavaScript代码直接嵌入HTML文档中是最简单的方法。你只需在HTML的head区域或body区域中编写
例如，以下是一个简单的HTML文档，它嵌入了JavaScript代码：
嵌入JavaScript代码
在这个例子中，我们定义了一个简单的函数，名为sayHello()。它通过警报操作向用户发出问候。我们使用在HTML的button标签上定义的onclick事件调用这个函数。
立即学习“Java免费学习笔记（深入）”；
虽然这种方法对于小型项目可能还可以，但在大型项目中，将所有JavaScript代码嵌入到HTML文档中可能会使代码变得混乱不堪，难以维护。
- 将JavaScript代码保存为独立的外部文件
为了解决这个问题，我们可以将JavaScript代码保存为独立的外部文件。这种方法使代码更加清晰易读，并可以轻松地在不同的HTML文档中重用相同的代码。同时，由于浏览器会缓存外部文件，加载速度也会变得更快。
下面是一个简单的示例：我们将JavaScript代码保存在名为myscript.js的文件中。
function sayHello() {
alert("Hello World!");
}我们将上面的代码保存为myscript.js，然后将它链接到我们的HTML文档中。
调用外部JavaScript文件
通过使用
值得注意的是，使用外部JavaScript文件时，必须确保JavaScript文件能够正确加载。如果文件路径不正确，浏览器将无法找到文件，JavaScript文件中的代码将无法执行。
在HTML文档中包含外部JavaScript文件的另一个好处是可以使网站更加易于管理和维护。当需要更新JavaScript代码时，只需更改JavaScript文件中的代码即可，所有使用该文件的HTML文档都可以自动更新。
- 在JavaScript文件中定义多个函数和变量
一般来说，一个JavaScript文件可以包含一组逻辑相关的函数和变量。这可以帮助你将代码组织的更好，并且在更多的应用场景中可以使用。
例如，以下是一个名为myfunctions.js文件，它包含多个函数：
function addNumber(a, b) {
return a + b;
}
function subtractNumber(a, b) {
return a - b;
}
function divideNumber(a, b) {
return a / b;
}我们将这个JavaScript文件引入到我们的HTML文档中：
在JavaScript文件中定义多个函数和变量 10 + 5 =
10 - 5 =
10 / 5 =
这个例子显示了如何在多个HTML文档中使用myfunctions.js中定义的多个函数。我们可以在脚本块中使用调用函数的方式来调用这些函数。
- 使用异步加载JavaScript
当我们在HTML文档中包含JavaScript文件时，浏览器会立即开始加载文件并阻止页面的呈现，直到文件完全加载完成。这可能导致页面加载速度变慢。
为了避免这个问题，我们可以使用异步加载JavaScript的方式。具体来说，我们可以将JavaScript的下载放到HTML页面的底部，并将脚本标记中的async属性设置为true。这将使浏览器忽略JavaScript文件的下载，直到页面加载完成后开始下载代码。
例如，下面是一个HTML文档，用于异步加载JavaScript文件：
异步加载JavaScript 使用异步加载JavaScript进行页面优化
这里是页面的正文内容。
我们将JavaScript文件myscript.js加载到HTML文档中。通过将async属性设置为true，浏览器将异步加载脚本代码并不会阻止页面的呈现。
总结
在本文中，我们讨论了如何在HTML文档中嵌入JavaScript代码和外部调用JavaScript代码。我们还讨论了如何将JavaScript代码保存为独立的外部文件、在JavaScript文件中定义多个函数和变量以及使用异步加载JavaScript代码进行页面优化。
无论你是初学者还是专业人士，了解这些知识将有助于你更好地组织和管理JavaScript代码，并提高网站的性能和可维护性。
