数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 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> // Write your JavaScript Code Here </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 标签内
我们也可以将 JavaScript 代码包裹在 <body> 标签内。为此，我们必须在 body 标签内创建一个 <script>…. </script> 元素。
语法
<body> <script> //Write your JavaScript Code Here </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 事件通过调用“parachange”函数发生，该函数写在 script 标签内，而 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 文件中的 script 标签中添加文件的路径作为“src”属性。
语法
<script src="./file.js"></script>
在上面的语法中，我们在 script 标签的 src 属性中附加了 javascript 文件的路径。
示例
在下面的示例中，我们学习了用户如何在 script 标签的 src 属性中嵌入外部 JavaScript 文件。
<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 事件通过调用“parachange()”函数发生，该函数写在外部文件中。
我们学习了如何在 HTML 文档中包含 JavaScript。正如我们所看到的，用户可以遵循多种方法来包含 JavaScript 和 HTML。因此，我们可以得出结论，如果代码仅与任何事件相关，则我们可以在内联标签内编写它，或者如果代码行数很少，则可以将其添加到 body 或 head 标签中。但是，如果代码行数很多或需要重复使用代码，则用户可以使用外部文件编写 JavaScript 代码。
897 次查看
