站长百科 | 数字化技能提升教程 数字化时代生存宝典 
在Web开发中，JavaScript是一种常用的脚本语言，可以实现动态交互效果和复杂的前端逻辑。为了让JavaScript代码能够被浏览器正确执行，我们需要将其引入到HTML页面中。本文将详细介绍JavaScript的引入方式和一些基本属性。
一、JavaScript的引入方式
JavaScript的引入方式有两种常用方法：直接在页面中写入和引入外部JS文件。
1、在页面中直接写入
可以使用<script>标签将JavaScript代码直接写入HTML页面中，例如：
<script>
alert("Hello, World!");
</script>
2、引入外部JS文件
通过 src 引入，此时 script 标签内添加任何js代码都不起效果。
<script src="js/script.js"></script>
其中，src属性指定了外部JS文件的路径。
动态引入JS的四种方式：
1、使用document.write方法
document.write("<script src='test.js'><\/script>");
但这种方式会将当前页面全覆写掉，不推荐使用。
2、动态改变已有<script>的src属性
var script = document.createElement("script");
script.src = "test.js";
document.head.appendChild(script);
通过创建一个新的<script>元素，并修改其src属性，然后将其添加到<head>标签中，实现动态引入。
3、动态创建<script>元素
var script = document.createElement("script");
script.src = "test.js";
document.head.appendChild(script);
通过使用document.createElement方法创建一个新的<script>元素，然后设置其src属性，并将其添加到<head>标签中。
4、基于Ajax请求的（推荐）
function includeJS(url) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var script = document.createElement("script");
script.text = xhr.responseText;
document.head.appendChild(script);
}
};
xhr.send();
}
includeJS("test.js");
通过使用XMLHttpRequest对象发送GET请求获取JS文件的内容，然后创建一个新的<script>元素，设置其text属性为获取到的JS代码，并将其添加到<head>标签中。
二、引入JavaScript的基本属性
1、type属性
在<script>标签中，可以使用type属性指定引入的是JavaScript文件，但这是默认属性，可以省略不写。
<script src="index.js" type="text/javascript"></script>
2、async属性
使用async属性可以异步加载JS文件，即在加载JS文件过程中，页面会继续渲染和执行其他代码。默认情况下是同步加载（即阻塞加载，直到JS文件加载完成后再继续渲染和执行）。
<script src="index.js" async></script>
3、defer属性
使用defer属性可以延迟执行JS文件，即在页面加载完成后再执行JS代码。与async属性不同的是，defer保证了JS文件的执行顺序与其在页面中的顺序一致。
<script src="index.js" defer></script>
async和defer的区别：
- async：异步加载，JS文件加载完成后立即执行，不影响页面渲染。多个async属性的JS文件的执行顺序不确定。
- defer：延迟执行，JS文件在页面加载完成后按照其在页面中的顺序依次执行，不影响页面渲染。
例如：
<script src="index.js" async></script>
<script>
alert("First");
</script>
<script>
alert("Second");
</script>
<h1>Hello, World!</h1>
<script>
alert("Third");
</script>
<script>
alert("Fourth");
</script>
- 使用async属性加载index.js，将会有5次弹窗，首先是"First"，然后是"Second"，接着是页面中的内容，最后是index.js中的代码。
- 如果改为使用defer属性加载index.js，则会先弹出"First"、"Second"、页面内容，最后是index.js中的代码。
