极客教程JavaScript 什么是external
JavaScript 是最受欢迎的一种解释型、轻量级和编译型编程语言 之一。它是同步且单线程的。JavaScript中的程序被称为脚本，将它们作为纯文本执行。我们可以直接在HTML页面上编写这些脚本，或者使用外部的JavaScript文件。JavaScript可以在浏览器中执行，也可以在服务器上执行，或者实际上在任何具备特殊程序（称为JavaScript引擎）的设备上执行。JavaScript被用于服务器端和客户端开发。
在HTML文件中使用JavaScript有两种方法：
- 内部JavaScript ：可以直接在HTML文件中通过在
<script>标签中编写代码来添加JavaScript代码。根据需要，我们可以将<script>标签放置在标签中。 - 外部JavaScript ：另一种方法是将JavaScript代码编写在一个扩展名为.js的文件中，然后将该文件链接到我们想要添加这段代码的HTML文件的标签中。
示例： 此示例描述了Internal Javascript的使用。
HTML
<!DOCTYPE html>
<html>
<head>
<title>Internal JS</title>
</head>
<body>
<h2>GeeksforGeeks</h2>
<script>
/*Internal Javascript*/
console.log("Hi Geeks, Welcome to GfG");
</script>
</body>
</html>
输出：
Hi Geeks, Welcome to GfG
示例： 该示例描述了外部Javascript的使用方法。
HTML
<!DOCTYPE html>
<html>
<head>
<title>External JS</title>
</head>
<body>
<h2>GeeksforGeeks</h2>
<script src="GfG.js"></script> /* External Javascript */
</body>
</html>
外部文件 ：GfG.js
Javascript
console.log("Hi Geeks, Welcome to GfG");
输出 ：
Hi Geeks, Welcome to GfG
外部JavaScript是什么？
外部JavaScript 是指将JavaScript代码（脚本）编写在扩展名为.js的另一个文件中，然后我们将这个文件链接到我们HTML文件的<head>或<body>标签中以添加代码。当同样的代码要在许多不同的网页中使用时，使用外部JavaScript更为实用。使用外部脚本很简单，只需将脚本文件的名称（我们的.js文件）放在<script>标签的src（源文件）属性中。外部JavaScript 文件不能包含<script>标签。
语法：
<script type="media_type" src="URL"> </script>
属性值：
- type：用于指定脚本的MIME类型并标识标签的内容。它有一个默认值，为“text/javascript” 。
- src：用于指定外部JavaScript文件的URL。
- async：它是一个布尔属性。当存在时，它指定脚本将在可用时异步执行。
- defer ：它是一个布尔属性，用于指定脚本在页面解析完成后执行。
- integrity：用于让浏览器检查获取的脚本，确保源代码未被篡改。
- referrerpolicy：在获取脚本时，用于指定要发送到服务器的参考信息。
可以使用多个<script>标签将多个脚本文件添加到一个页面中。
<script src="file1.js"> </script>
<script src="file2.js"> >/script>
示例 ：该示例描述了外部JavaScript文件的使用，其中当指针悬停在特定文本上时，文本会更改为不同的文本。
HTML
<!DOCTYPE html>
<html>
<head>
<title>External JavaScript</title>
<style>
h2 {
box-sizing: border-box;
width: 250px;
height: 150px;
background-color: green;
color: white;
margin: auto;
font-size: 15px;
font-family: sans-serif;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<h2 class="external">GeeksforGeeks</h2>
<script src="GfG.js"></script>
</body>
</html>
JS代码：
GfG.js
let h2 = document.querySelector(".external");
h2.addEventListener("mouseenter", function (e) {
h2.innerText = "Hi Geeks, Welcome to GfG";
});
输出 ：当指针悬停在元素上时，元素内的文本（即GeeksforGeeks）将变为“嗨，Geeks，欢迎来到GfG”。
使用内部JS的优势：
- 浏览器不需要为JavaScript代码发出额外的HTTP请求。
- 不允许缓存。
使用内部JS的劣势：
- 代码的可读性变差。
- 当有大量代码时，代码的维护变得困难。
使用外部JS的优势：
- HTML和JavaScript文件变得更可读，更易于维护。
- 由于缓存的JavaScript文件，页面加载速度加快。
使用外部JS的劣势：
- 程序员可以通过脚本(.js)文件的url轻易下载你的代码。
- 浏览器需要发出额外的HTTP请求来获取这个JavaScript代码。