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