Appearance
JavaScript 用法
JavaScript 的使用方式
JavaScript 可以通过多种方式在网页中使用：
1. 内联脚本
在 HTML 元素的事件属性中直接编写 JavaScript 代码：
html
<button onclick="alert('Hello, World!')">点击我</button>2. 内部脚本
在 HTML 文档的 <script> 标签中编写 JavaScript 代码：
html
<!DOCTYPE html>
<html>
<body>
<script>
alert("Hello, World!");
</script>
</body>
</html>3. 外部脚本
将 JavaScript 代码保存在单独的 .js 文件中，然后在 HTML 文档中引用：
html
<!DOCTYPE html>
<html>
<body>
<script src="script.js"></script>
</body>
</html>其中 script.js 文件内容：
javascript
alert("Hello, World!");<script> 标签的位置
1. 在 <head> 标签中
html
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body></body>
</html>2. 在 <body> 标签的末尾
html
<!DOCTYPE html>
<html>
<body>
<script src="script.js"></script>
</body>
</html>推荐：将脚本放在 <body> 标签的末尾，这样可以确保 HTML 元素已经加载完成，避免因 DOM 元素未加载而导致的错误。
defer 和 async 属性
defer 属性
- 脚本会在页面解析完成后执行
- 多个带有
defer属性的脚本会按照顺序执行
html
<script defer src="script.js"></script>async 属性
- 脚本会在下载完成后立即执行
- 多个带有
async属性的脚本执行顺序不确定
html
<script async src="script.js"></script>外部 JavaScript 文件的优势
- 可维护性：代码分离，便于管理
- 可缓存：浏览器可以缓存 JavaScript 文件，提高加载速度
- 可重用：同一脚本可以在多个页面中使用
- 可读性：HTML 和 JavaScript 代码分离，提高可读性
外部 JavaScript 文件的注意事项
- 外部 JavaScript 文件中不应包含
<script>标签 - 外部 JavaScript 文件的扩展名为
.js - 引用外部 JavaScript 文件时，
src属性的值是文件的路径
JavaScript 中的注释
JavaScript 中的注释有两种：
单行注释
javascript
// 这是单行注释多行注释
javascript
/*
这是多行注释
可以跨越多行
*/小结
JavaScript 可以通过内联脚本、内部脚本和外部脚本三种方式在网页中使用。推荐使用外部脚本，并将其放在 <body> 标签的末尾，以提高页面加载速度和代码可维护性。