如何在 HTML 文档中包含 JavaScript?
在本教程中，我们将学习如何在 HTML 文档中包含 JavaScript。
要在 HTML 文档中包含 JavaScript，请使用 <script> 标签。可以使用放置在 <script>... </script> 内的 JavaScript 语句来实现 JavaScript。
您可以将包含 JavaScript 的 <script> 标签放置在网页内的任何位置，但通常建议您将其保留在 <head> 内。标签。
我们将讨论以下三种在 HTML 文档中包含 JavaScript 的方法 -
- 嵌入代码(在 head 或 body 内)
- 内联代码(在任何元素内)
- 外部文件(HTML 文件外)
通过嵌入代码
我们可以通过两种方式将 JavaScript 代码嵌入 HTML 页面 -
在 head 标签内
用户可以在 <head> 标签内编写 JavaScript 代码。为此，我们必须在 head 标签内创建一个元素 <script>…..</script>。
语法
<head> <script> // 在此处编写 JavaScript 代码 </script> </head>
在上述语法中，我们在 head 标签内使用 script 标签来编写 JavaScript 代码。
示例
在下面的示例中，我们学习了如何使用 HTML 文件中的 script 标签将 JavaScript 代码嵌入 head 标签内。
<html> <head> <script> //script tag inside the head tag //parachange function that called by the onclick event function parachange() { document.getElementById('para').innerHTML = 'The line has changed.' } </script> </head> <body> <h3>Including JavaScript in HTML document in <i>Head tag</i></h3> <p id="para">The is a line</p> <button type="button" onclick="parachange()">Click Here</button> </body> </html>
用户可以看到，单击按钮后，段落行在 p 标签内发生了变化，这是单击事件的发生原因。此 onclick 事件通过调用函数"parachange"发生，该函数写在 script 标签内，而 script 标签写在 head 标签内。
body 标签内
我们还可以在 <body> 标签内包裹 JavaScript 代码。为此，我们必须在 body 标签内创建一个元素 <script>…. </script>。
语法
<body> <script> //在此处编写 JavaScript 代码 </script> </body>
在上面的语法中，我们在 body 标签内使用了 script 标签来编写 JavaScript 代码。
示例
在下面的示例中，我们了解了用户如何使用 HTML 文件中的 script 元素将 JavaScript 代码嵌入 body 标签内。
<html> <head> </head> <body> <h3>Including JavaScript in HTML document in <i>Body tag</i></h3> <p id="para">The is a line</p> <button type="button" onclick="parachange()">Click Here</button> <script> //script tag inside the body tag function parachange() { document.getElementById('para').innerHTML = 'The line has changed.' } </script> </body> </html>
用户可以看到，点击按钮后，段落行在点击事件的 p 标签内发生了变化。此 onclick 事件通过调用写在 script 标签内的函数"parachange"发生，而 script 标签写在 body 标签内。
使用内联代码
我们也可以在不使用 script 标签的情况下在元素内编写 JS 代码。一般来说，我们使用此内联代码以防用户必须在特定事件(如 onclick、onmouseover 等)上调用任何函数。
语法
<button type="button" onclick="alert('Hello world!');Click Here</button>
<!-- it can be elements other than button too -->
在上述语法中，我们在 onclick 内使用了按钮的内联 JavaScript。
示例
在下面的示例中，我们了解了用户如何使用 HTML 文件中的 onclick 属性将 JavaScript 代码嵌入按钮标记内。
<html> <body> <h3>Including JavaScript in HTML document inside <i>element</i></h3> <p> <button onclick="alert('Hello world!');">Click Here</button> </p> </body> </html>
用户可以看到，单击"单击此处"按钮后，事件被激活并显示警告消息"Hello world!"
使用外部文件
用户可以创建一个单独的文件，在 HTML 文件外部编写 JavaScript 代码，并在 <script> 标记内添加该路径链接。当我们必须在多个页面上添加相同的 JS 代码时，这非常有用。此过程还使代码更简单、更易于理解。
首先，我们必须创建一个 JavaScript 文件，我们可以在其中编写代码(不带任何标记)，然后使用 .js 扩展名保存它。然后将文件的路径添加到脚本标记内作为 HTML 文件中的"src"属性。
语法
<script src="./file.js"></script>
在上面的语法中，我们在 script 标签的 src 属性中附加了 javascript 文件路径。
示例
在下面的示例中，我们了解了用户如何将外部 JavaScript 文件嵌入到 script 标签的 src 属性中。
<html> <body> <h2>Including JavaScript in HTML document using <i>external file</i></h2> <p id="para">The is a line</p> <button type="button" onclick="parachange()">Click Here</button> <script src="./file.js"></script> </body> </html>
在file.js文件里面，会写入onclick事件调用的parachange()函数的定义
#file.js
function parachange() { document.getElementById("para").innerHTML = "The line has changed."; }
用户可以看到，单击按钮后，p 标签内的段落行发生了 onclick 事件的变化。此 onclick 事件通过调用外部文件中编写的函数"parachange()"发生。
我们已经学习了如何在 HTML 文档中包含 JavaScript。如我们所见，用户可以遵循多种方式，包括将 JavaScript 与 HTML 一起包含。因此，我们可以得出结论，如果代码仅与任何事件有关，那么我们可以将其写入内联标记内，或者如果行数较少，那么我们可以将其添加到 body 或 head 标记中。但如果行数很多或代码必须重复使用，那么用户可以使用外部文件编写 JavaScript 代码。
