Hello reader, in this article, we will discuss a critical topic regarding web development, i.e. Adding JavaScript to an HTML file or in another language, Embedding JavaScript into HTML.
There are typically three ways to add JavaScript to HTML or just say embedding JavaScript into an HTML web page. They are as follows.
- Inline JavaScript
- Internal JavaScript
- External JavaScript
Contents
Inline Method to Add JavaScript to HTML
This is a method to add JavaScript to HTML that is not that widely used. This method can be useful in cases where you may need to call a function or just display an alert message when clicking a button or upon some events of our HTML element.
The use of this method is not as popular as writing a large amount of JavaScript code this way can clutter up the HTML file very much and makes it difficult to maintain the Code Base.
In this particular method, we don’t require any special tag for just adding JavaScript. We can directly write JavaScript inside HTML code. It would be much clear on looking at an example. The example shows an HTML file in which we display an alert message on clicking a Button.
<html>
<head>
<title>Inline JavaScript Example</title>
</head>
<body>
<button onclick="alert('Subscribe to Our Newsletter')">Click Me</button>
</body>
</html>Now if you look at the source code closely, we embedded JavaScript inside the onclick event on the button without the need for additional configuration.
While this method can be very helpful for certain conditions, it is better to avoid this method as overuse of this method can heavily clutter the HTML file.
Internal Method to Add JavaScript to HTML
While this method is also not the best method to embed JavaScript into HTML, this method can be preferred over Inline JavaScript as it is much cleaner than Inline JavaScript. Unlike Inline JavaScript, we can write complete and regular JavaScript using this method.
This method is a whole better to use instead of the Inline method of embedding JavaScript into HTML. This method can also clutter up our HTML document as everything is in the same file but compared to the Inline method, it is much cleaner and more maintainable.
Unlike the Inline method of writing JavaScript in HTML, we have a special tag provided by HTML inside which we can write regular expressions of JavaScript. Now, first look at an example of this method to add JavaScript to HTML.
<html> <head> <title>Internal JavaScript Example</title> </head> <body> <script> let myText = "Subscribe to Our Newsletter"; document.write(myText); </script> </body> </html>
If you are wholly new to JavaScript and don’t understand the code written above, it is nothing much. It just prints the text “Subscribe to Our Newsletter” into the browser window.
Now, if you observe the source code, we are using a special HTML tag called <script></script>. We can write our regular JavaScript into the tag and it will execute normally.
While this method is much better than that of Inline JavaScript, in the case of large documents, it is not that preferable. And a pro tip for the people reading this post. Always write the JavaScript just above the closing body </body> tag because HTML follows a top-down approach and if you are accessing the HTML element inside JavaScript it may not execute as the element can be undefined if the JavaScript is run before the HTML is rendered.
External Method to Add JavaScript to HTML
This is the most preferred method for embedding JavaScript into HTML. This is the most popular and best way of writing JavaScript along with HTML. It is the best way to write JavaScript.
This is the superior method for embedding JavaScript into HTML as it is the most practical way which doesn’t clutter the code base and it makes the code easy to maintain.
Unlike any other method of writing JavaScript, we need to create two files, one for HTML and one for JavaScript, and link the JavaScript into HTML using the HTML tag.
The first thing we need to do is to create two files named “index.html” and “script.js” inside the same folder. Note that the file name can be any. Now, two files are created, we will start with the HTML file. Write the following code into the “index.html” file.
<html> <head> <title>External JavaScript Example</title> </head> <body> <script src="./script.js"></script> </body> </html>
If you look closely, we used the same tag used in Internal JavaScript, and instead of writing JavaScript directly inside the tag, we used an attribute called src to link the JavaScript. If you are using any other file name for JavaScript, you should rename the <script src="./script.js"> to <script src="./yourname.js">.
Now when you are finished with the HTML, write the following code into the “script.js” file.
let myText = "Subscribe to Our Newsletter"; alert(myText);
Now, if you have done everything right, you should be able to see the output inside your browser. And the same condition as of Internal JavaScript applies here, you should write the script tag just above the closing body tag so that the HTML can be rendered first and then your JavaScript.
If you have read so far and liked the content, it would be better to subscribe to our newsletter for the latest updates.
Subscribe to our newsletter!
