JS 如何使用
<script> 标签
在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。
实例
<script>document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
旧的 JavaScript 例子也许会使用 type 属性:<script type="text/javascript">。
type 属性不是必需的。 JavaScript 是 HTML 中的默认脚本语言。
JavaScript 函数和事件
JavaScript 函数 是一种 JavaScript 代码块，它可以在调用时被执行。
例如，当发生 事件 时调用函数，比如当用户点击按钮时。
您将在稍后的章节学到更多有关函数和事件的知识。
<head> 或 <body> 中的 JavaScript
您能够在 HTML 文档中放置任意数量的脚本。
脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，或兼而有之。
<head> 中的 JavaScript
在本例中，JavaScript 函数被放置于 HTML 页面的 <head> 部分。
该函数会在按钮被点击时调用:
实例
<!DOCTYPE html><html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
</body>
</html>
<body> 中的 JavaScript
在本例中，JavaScript 函数被放置于 HTML 页面的 <body> 部分。
该函数会在按钮被点击时调用:
实例
<!DOCTYPE html><html>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html> 亲自试一试 »
把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。
外部脚本
脚本可放置与外部文件中:
外部文件:myScript.js
function myFunction() {document.getElementById("demo").innerHTML = "Paragraph changed.";
}
外部脚本很实用，如果相同的脚本被用于许多不同的网页。
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.w3ccoo.com/js/myScript1.js"></script>本例使用了位于当前网站上指定文件夹中的脚本:
实例
<script src="/js/myScript1.js"></script>本例链接了与当前页面相同文件夹的脚本:
实例
<script src="myScript1.js"></script>您能够在 HTML 文件路径中学习更多有关文件路径的知识。
