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的三种方法,即内联代码、外部文件和嵌入代码。我们还提供了每种方法的例子来帮助你理解。