Web前端开发：JavaScript的使用
<script> 标签
在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。
实例
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><p id="demo"></p><!-- js代码 --><script>document.getElementById("demo").innerHTML = "我的第一段JavaScript";</script></body>
</html>逐步解释：
-
document:
代表当前网页的文档对象模型（DOM），允许访问和操作页面内容。 -
.getElementById("demo"):
调用方法通过元素的ID属性查找DOM节点。此处查找ID为"demo"的元素（如<div id="demo"></div>）。 -
.innerHTML:
属性用于获取或设置元素内的HTML内容。赋值时，会替换元素原有内容。 -
= "我的第一段JavaScript":
将ID为"demo"的元素内部HTML设置为指定文本。浏览器会立即渲染更新后的内容。
注意事项：
-
执行时机：需确保代码在目标元素加载后执行（如将脚本放在元素之后，或使用
DOMContentLoaded事件）。 -
安全性与替代：若内容为用户输入，使用
textContent可避免XSS攻击（此处为静态文本无此问题）。 -
找不到元素：若ID不存在，代码会静默失败（可通过检查返回值处理）。
示例效果：
若原有HTML为 <p id="demo">原始内容</p>，执行后该段落会显示为“我的第一段JavaScript”。
<head> 或 <body> 中的 JavaScript
您能够在 HTML 文档中放置任意数量的脚本。
脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，或兼而有之。
<head> 中的 JavaScript
在本例中，JavaScript 函数被放置于 HTML 页面的 <head> 部分。
该函数会在按钮被点击时调用：
实例
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {document.getElementById("demo").innerHTML = "段落已被更改。";
}
</script>
</head><body><h2>Head 中的 JavaScript</h2><p id="demo">一个段落。</p><button type="button" onclick="myFunction()">试一试</button></body>
</html>
效果展示：
<body> 中的 JavaScript
在本例中，JavaScript 函数被放置于 HTML 页面的 <body> 部分。
该函数会在按钮被点击时调用：
实例
<!DOCTYPE html>
<html>
<body><h2>Body 中的 JavaScript</h2><p id="demo">一个段落。</p><button type="button" onclick="myFunction()">试一试</button><script>
function myFunction() {document.getElementById("demo").innerHTML = "段落已被更改。";
}
</script></body>
</html>
效果展示：
外部脚本
脚本可放置与外部文件中：
外部文件：myScript.js
function myFunction() {document.getElementById("demo").innerHTML = "段落被更改。";
}外部脚本很实用，如果相同的脚本被用于许多不同的网页。
JavaScript 文件的文件扩展名是 .js。
如需使用外部脚本，请在 <script> 标签的 src (source) 属性中设置脚本的名称：
实例
<script src="myScript.js"></script>您可以在 <head> 或 <body> 中放置外部脚本引用。
该脚本的表现与它被置于 <script> 标签中是一样的。
注释：外部脚本不能包含 <script> 标签。
外部 JavaScript 的优势
在外部文件中放置脚本有如下优势：
- 分离了 HTML 和代码
- 使 HTML 和 JavaScript 更易于阅读和维护
- 已缓存的 JavaScript 文件可加速页面加载
如需向一张页面添加多个脚本文件 - 请使用多个 script 标签：
实例
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
外部引用
可通过完整的 URL 或相对于当前网页的路径引用外部脚本：
本例使用完整的 URL 来链接至脚本：
实例
script src="https://www.w3school.com.cn/js/myScript1.js"></script>