TL;DR – Adding JavaScript to HTML allows making webpages interactive and creating web applications.
Contents
How to Link JavaScript to HTML
JavaScript is one of the main languages used in web development nowadays. While it started as a front-end language, it gained more functionalities as it grew.
Combined with HTML, JavaScript can help you add dynamicity and interactiveness to your website or perform data validation. To put it short, JavaScript allows you to manipulate HTML elements:
<script>
function smile(sw) {
if (sw == 0) {
document.getElementById("learn").innerHTML = "SAD!";
} else {
document.getElementById("learn").innerHTML = "HAPPY!";
}
}
</script>There are a few elements you need to know to be able to add JavaScript to HTML. The most important of them is <script>. A pair of these tags define the client-side script, creating functionality for the user:
<script type="application/javascript">
document.getElementById("p").innerHTML = "It works!";
</script>Options
There are two ways to add JavaScript to HTML. You can either include inline JavaScript in your web document or have a separate JS file and link it to the document as an external resource. In both of these cases, you will use the same <script> tags – the only difference will be their content.
For inline JavaScript, you will simply include the script itself between the tags:
<script>
function myExample() {
document.getElementById("learn").innerHTML = "Wow, I can use JavaScript!";
}
</script>To link an external JS script to HTML, you will need to use the src attribute and include a link to the file as its value:
Tag Placement
The <script> tags can be placed in either <head> or <body> section of the document. The first option might be more common, as most developers like to keep the script separate from the content. However, it's smart to place them in the <body> if you need the JS content to load later:
<script>
function myExample() {
document.getElementById("learn").style.fontSize = "30px";
document.getElementById("learn").style.color = "white";
document.getElementById("learn").style.backgroundColor = "indianred";
}
</script>Fallback Option: Using noscript
When adding JavaScript to HTML, keep in mind the user's browser might fail to support a JS script. For such a case, we recommend adding the <noscript> element. Its content will be displayed if JavaScript is not supported by the browser:
<noscript>JavaScript is not supported by your browser.</noscript>HTML JavaScript: Useful Tips
- If you include both internal JavaScript and an external script, the external one will override the embedded code. However, this might cause issues and unexpected browser behavior.
- Using an external file is the best option when you need to reuse the same script in multiple HTML documents.