JavaScript是一种非常流行的脚本语言，它既可以在客户端使用，也可以在服务器端使用。JavaScript对于我们的网页是必要的，因为它使我们的网页具有互动性。
要成为一名前端开发员，有三个基本要求。
- HTML。
- CSS。
- JavaScript
HTML是超文本标记语言的简称，它为我们的网页提供结构，CSS为我们的网页提供样式。最后，如前所述，JavaScript使我们的网页具有互动性。JavaScript也有助于改变Html和CSS。
现在出现了一个问题，即我们如何将JavaScript与HTML联系起来/连接起来。今天在这篇文章中，我们将探讨几乎所有可以将JavaScript与HTML连接起来的方法。
什么是脚本标签？
在探讨如何将JavaScript与HTML连接起来的解决方案之前，我们先看看脚本标签。
**
语法
<script src=""></script>
这是一个带有src属性的脚本标签，我们可以在其中提供一个我们想要引用的文件名。
在HTML文件中使用JavaScript
我们可以通过在HTML文件中添加所有的JavaScript代码来将JavaScript与HTML联系起来。我们使用前面解释过的脚本标签来实现这一点。我们可以把标签放在HTML的头部，或者放在正文的结尾。这完全取决于我们想把它放在哪里，以及我们想在什么时候加载JavaScript。 程序员通常会在他们想要生成内容或应用一些动作时调用脚本标签。所以通过观察下面的代码，在HTML主体之后加载javaScript是一个很好的做法。
让我们看一个例子。
例子
<body>
<button onclick="myFunc()">Click Me</button>
<script>
function myFunc(){
alert("You Clicked me");
}
</script>
</body>
在这个例子中，首先，我们在HTML中创建了一个按钮。我们设置了一个点击事件。每当用户点击这个按钮，**myFunc()函数将被激活。之后，我们放了一个
祝贺你我们通过在脚本标签中添加JavaScript代码，成功地将JavaScript与HTML联系起来。
这种方法适合于小型网页或一个网页。然而，当你的网络应用越来越大时，脚本代码也会越来越大，而且会变得非常难以处理和阅读。解决办法是在一个专门的独立javaScript文件中编写JavaScript，并在HTML文件中提供JavaScript文件的参考。
在一个外部文件中使用JavaScript
对于较大的脚本，使用外部文件是有好处的，因为我们可以将我们的代码分成不同的JavaScript页面以及不同的文件。这可以通过在HTML文件中的脚本标签的 "src "属性中引用JavaScript文件名来实现。
让我们稍微改变一下前面的例子。代码将保持不变。我们将建立另一个JavaScript文件，名称为 "code.js"。我们将把所有的JavaScript代码放在 "code.js "文件中，并在HTML文件中提供 "code.js "引用。
举例来说
<button onclick="myFunc()">Click Me</button>
<script src="code.js"></script>
我们使用**"文件。
现在是code.js文件。
function myFunc(){
alert("You Clicked me");
}
结果将与前面的例子相同，即。
外部JavaScript文件的优势
在讨论了外部javaScript文件之后，让我们正式说明一些优势。
- 它分离了我们的HTML代码和JavaScript代码
- JavaScript代码变得可读以及可维护。
- 另一个优点是，缓存的JavaScript文件可以加快页面加载速度。
JavaScript选择器
在前面的例子中，我们借助了一个事件的帮助。假设我们不想添加一个事件，而想从html文件中选择一个元素。JavaScript通过提供不同的选项来帮助我们，这些选项被称为JavaScript选择器。
JavaScript选择器的主要功能是选择一个HTML元素，并根据我们的需要对其执行不同的操作。JavaScript为此提供了不同的选项，其中之一就是id。
我们可以在Html中给一个元素一个id属性，然后在JavaScript中访问它。我们在JavaScript中通过以下方式访问。
document.getElementById("idName");
id是唯一的，只用于一个元素。
JavaScript还为我们提供了使用类属性选择一个元素的选项。我们可以对不同的元素使用类的名称。语法是。
document.querySelector(".className");
JavaScript给我们的另一个选择是使用标签名来访问JavaScript元素。访问标签名称的语法是
document.getElementsByTagName("p");
例子
HTML
<body>
<button id="btn">Click Me</button>
<script src="code.js"></script>
</body>
脚本
const btn=document.getElementById("btn");
btn.addEventListener("click", function(){
alert("You clicked me");
})
在这个例子中，我们使用getElementById()访问按钮元素。之后，我们设置了一个事件，每当用户点击按钮时，就会显示一个警报。
如果我们使用，我们可以实现同样的输出。
const btn=document.querySelector("btn");
需要注意的是，我们必须在按钮元素中设置class属性。
总结
将JS与HTML连接起来可以使你的网站变得动态和互动。在这篇文章中，我们教你如何将JavaScript与HTML连接起来。我们讨论了实现这一任务的两种主要方式。
第一种是在HTML文件中使用JavaScript。第二种是在HTML文件外使用JavaScript，使用一个JavaScript文件。要成为一名前端开发员，有必要同时使用HTML和JavaScript，这篇文章向你展示了如何将这两者联系起来。
