在 HTML 中,JavaScript 代码插入在 <script>
和 </script>
标记之间。
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>
旧的 JavaScript 示例可能使用 type 属性:<script; type="text/javascript">。
类型属性不是必需的。 JavaScript 是 HTML 中的默认脚本语言。
JavaScript 函数
是一段 JavaScript 代码,可以在“调用”时执行。
例如,当事件发生时(例如用户单击按钮时)可以调用函数。
您将在后面的章节中了解有关函数和事件的更多信息。
您可以在 HTML 文档中放置任意数量的脚本。
脚本可以放置在 HTML 页面的 <body>
或 <head>
部分中,或两者皆有。
在此示例中,JavaScript 函数
放置在 <head>
部分中 HTML 页面的。
单击按钮时会调用(调用)该函数:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
</body>
</html>
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
在此示例中,JavaScript 函数
放置在 HTML 页面的 <body>
部分中。
单击按钮时会调用(调用)该函数:
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<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>
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<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> 元素的底部可以改善显示效果 速度,因为脚本解释会减慢显示速度。
脚本也可以放置在外部文件中:
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
当在许多不同的网页中使用相同的代码时,外部脚本很实用。
JavaScript 文件的文件扩展名为 .js。
要使用外部脚本,请将脚本文件的名称放入 src
(源)属性中 一个 <script>
标签:
<script src="myScript.js"></script>
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>Demo External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>
您可以根据需要将外部脚本引用放置在 <head>
或 <body>
中。
该脚本的行为就像它恰好位于 <script>
标记所在的位置一样。
外部脚本不能包含 <script>
标签。
将脚本放在外部文件中具有一些优点:
它将 HTML 和代码分开
它使 HTML 和 JavaScript 更易于阅读和维护
缓存的 JavaScript 文件可以加快页面加载速度
要将多个脚本文件添加到一页 - 使用多个脚本标签:
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
可以通过 3 种不同的方式引用外部脚本:
具有完整的 URL(完整的网址)
使用文件路径(如 /js/)
没有任何路径
此示例使用完整 URL 链接到 myScript.js:
<script src="https://www.w3schools.com/js/myScript.js"></script>
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Click Me</button>
<p>This example uses a full web URL to link to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="https://www.w3schools.com/js/myScript.js"></script>
</body>
</html>
此示例使用文件路径链接到 myScript.js:
<script src="/js/myScript.js"></script>
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>This example uses a file path to link to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="/js/myScript.js"></script>
</body>
</html>
此示例不使用链接到 myScript.js 的路径:
<script src="myScript.js"></script>
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>Demo External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>
您可以在 HTML 章节中阅读有关文件路径的更多信息 文件路径。