如何在HTML中添加JavaScript

645 阅读2分钟

JavaScript是脚本语言之一,用于制作互动和现代的网页。不需要任何额外的插件,现代网络浏览器通过内置引擎支持JavaScript。

此外,在处理网页文件时,JavaScript需要与HTML一起执行。这可以通过在HTML文件的

在网页中,JavaScript可以用在许多方面,如表单的验证、创建警告提示等。在这篇文章中,我们将深入了解如何将JavaScript纳入HTML文件中。

以下是将JavaScript纳入HTML文件的方法。

嵌入代码

标签用于将JavaScript添加到网页中,这有助于将JavaScript包裹在HTML程序中。根据应用程序的结构,Javascript的代码可以在正文部分或标题部分之下。

例1:头部部分的JavaScript

<!DOCTYPE html>

<head>

    <title>page title</title>

<script>

document.write("JavaScript added in head section");

</script>

</head>

<body>

<p> This example shows how to include JavaScript in head section </p>

</body>

</html>

输出

例2:JavaScript在body部分

<!DOCTYPE html>

<head>

    <title>page title</title>

</head>

<body>

<script>

document.write("JavaScript added in body section");

</script>

<p> This example shows how to include JavaScript in the body section </p>

</body>

</html>

输出

内联代码

当你需要在HTML属性中调用一个函数时,那么就会用到JavaScript的内联代码。JavaScript代码可以直接用于各种事件,如OnMouseover()、OnClick(),以及更多。在使用内联脚本时,应该记住一些要点。

  • 适用于小型脚本或只在一个文件中执行的脚本。
  • 如果脚本较大或在多个页面中使用,则很难阅读和理解。

例子1:这个例子展示了如何在没有标签的情况下将JavaScript纳入HTML。

<!DOCTYPE html>

<head>

    <title>page title</title>

</head>

<body>

<p>

<a href="#" onClick="alert('inline JavaScript!');">Inline Code </a>

</p>

<p> This example shows how to include inline JavaScript without script tags. </p>

</body>

</html>

输出

例2:

<!DOCTYPE html>

<head>

    <title>page title</title>

<script>

    let date = new Date();

    alert("Today's date: " + date);

</script>

</head>

<body>


</body>

</html>

在上面的例子中,每当用户加载网页时,脚本就会显示一个显示当前日期的警报信息。

输出

外部文件

JavaScript代码可以写在一个单独的文件中,扩展名为".js",然后包含在HTML文件中。JavaScript文件名可以包含在脚本的 "src "属性中。 JavaScript代码的外部文件可以重复使用。因此,单独的JavaScript代码文件可以避免重写同一个软件程序。外部文件更容易管理。

例子

在这个例子中,有两个文件,index.html,和datescript.js。外部文件即datescript.js包含在名为index.html的HTML文件的主体部分。名为datescript.js的JavaScript被用来在用户加载网页时显示当前日期。.html和.js文件都放在同一个文件夹中。

Index.html

<!DOCTYPE html>

<head>

    <title>Date</title>

</head>

<body>

<script src="datescript.js"></script>

</body>

</html>

Datescript.js

let date = new Date();

document.body.innerHTML = "<h3>Date: " + date + "</h3>"

输出。

结论

在这篇文章中,我们演示了如何在HTML文件中添加JavaScript。随后,我们深入讨论了每种方法,以便将JavaScript纳入你的网页。我们讨论了在HTML文件中添加JavaScript的三种方法,即内联代码、外部文件和嵌入代码。我们还提供了每种方法的例子来帮助你理解。