JavaScript 去向


目录

    显示目录


<script> 标签

在 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 函数 是一段 JavaScript 代码,可以在“调用”时执行。

例如,当事件发生时(例如用户单击按钮时)可以调用函数。

您将在后面的章节中了解有关函数和事件的更多信息。


<head> 或 <body> 中的 JavaScript

您可以在 HTML 文档中放置任意数量的脚本。

脚本可以放置在 HTML 页面的 <body><head> 部分中,或两者皆有。


<head> 中的 JavaScript

在此示例中,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> 


<body> 中的 JavaScript

在此示例中,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> 元素的底部可以改善显示效果 速度,因为脚本解释会减慢显示速度。


外部 JavaScript

脚本也可以放置在外部文件中:

外部文件:myScript.js

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> 标签。


外部 JavaScript 的优点

将脚本放在外部文件中具有一些优点:

  • 它将 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 章节中阅读有关文件路径的更多信息 文件路径。