如何在HTML里嵌入和调用JavaScript函数的简单指南

最编程 2024-02-20 10:29:18

...

JavaScript正在日渐兴起，并被有效地用于网页中。每当JavaScript被调用到HTML页面，它就会在网页上进行动态互动。与静态网页相比，JavaScript使网页更加直观，并增强了用户体验。在HTML页面中调用JavaScript的功能并不是一项复杂的任务。在这篇文章中，我们将演示在HTML中调用JavaScript函数的各种方法。

内联JavaScript函数

第一种方法是在HTML中调用JavaScript函数。为此，你必须创建一个函数，然后在HTML文档的标题部分或正文部分定义这个函数。你可以创建一个链接或一个按钮，然后将onclick()事件与它们联系起来，以便调用这个函数。

现在我们要演示一个简单的例子。这个例子包含一个简单的HTML文件，我们在HTML头部的脚本标签中定义了一个方法functionName()，如下所示。

<html>

<head>

<script type = "text/javascript">

function functionName() {  

alert("You are learning how to call JavaScript function in html");

        }

</script>

此外，我们创建了一个按钮，并将onclick()事件与之关联，如下图所示。随后，每当用户点击该按钮，该函数就会被调用。

<body>

<h4>Hey, click on the button below to invoke the function</h4>

<input type = "button" onclick = "functionName()" value = "Click Me">

</body>

例子

<html>

<head>

<script type = "text/javascript">

function functionName() {  

alert("You are learning how to call JavaScript function in html");

        }

</script>

</head>

<body>

<h4>Hey, click on the button below to invoke the function</h4>

<input type = "button" onclick = "functionName()" value = "Click Me">

</body>

</html>

输出

通过外部文件调用JavaScript函数

第二种方法是通过外部.js文件在HTML中调用一个JavaScript函数。JavaScript的外部文件被附在HTML文件的头部部分。首先，你需要创建两个文件，即.html文件，其中写了HTML代码，另一个是.js文件，其中定义了函数。

一旦我们完成了JavaScript的创建，我们就必须创建一个HTML文件。纳入JavaScript文件后，我们必须创建一个链接或一个按钮，然后调用JavaScript文件中定义的功能。

例子

这个例子包含一个简单的HTML文件 "articl.html"，我们在其中链接了外部的JavaScript文件 "jsarticle.js"。

articl.html

<html>

<head>

<script type = "text/javascript" src="jsarticle.js"></script>

</head>

<body>

<h4>Hey, click on the button below to invoke the function</h4>

<input type = "button" onclick = "functionName()" value = "Click Me">

</body>

</html>

Jsarticle.js

function functionName() {
 
document.write("You are learning how to call JavaScript function in html");

        }

Html和JavaScript文件应该保存在同一个文件夹中，如果不是的话，我们必须在head部分的脚本标签中提供一个完整的路径。在我们提供的例子中，我们将HTML和JavaScript文件保存在同一个文件夹中，这就是为什么我们提供了JavaScript文件的名称而不是提供完整的路径。

<head>

<script type = "text/javascript" src="jsarticle.js"></script>  

</head>

我们在正文部分创建了一个按钮，除了这个按钮，我们还使用了onclick事件来调用一个函数。现在，每当用户点击该按钮时，该函数就会被调用，它被定义在javascript文件中，如下面提到的图片所示。

<body>
 
<h4>Hey, click on the button below to invoke the function</h4>
 
<input type = "button" onclick = "functionName()" value = "Click Me">

</body>

输出

总结

在这篇文章中，我们演示了如何在HTML中调用JavaScript函数。我们还讨论了两种方法。在第一种方法中，我们在一个HTML文档中包含了一个JavaScript文件。在第二种方法中，我们通过外部文件调用JavaScript。这两种方法都有简单的解释，并举例说明了如何在HTML中调用JavaScript函数。

上一篇：快速了解 JavaScript 窗口弹出功能

下一篇：施巍松全新修订版边缘计算实战指南：深入解析第8章边缘计算系统实操案例