How To Call JavaScript Function In HTML
When you are learning programming, especially web development, you will come across a popular language known as JavaScript. JavaScript is a versatile scripting language that is used to create dynamic and interactive web pages, making the web experience more engaging and user-friendly. In this tutorial, we will learn how to call a JavaScript function in HTML, which is a fundamental concept in web development.
What is a JavaScript function?
A function is a reusable block of code that carries out a specific task. Functions help to break down complex code into smaller, more manageable units that can be called or executed whenever needed. In JavaScript, functions can be used to perform calculations, manipulate data, or simply display alerts.
Imagine a function as a small factory that takes input, processes it, and produces output. This factory can be reused multiple times, and you can have multiple factories, each serving a different purpose.
Calling a JavaScript function in HTML
There are several ways to call a JavaScript function in an HTML file, and we will discuss three common methods: inline event handlers, external event handlers, and self-invoking functions.
Inline event handlers
Inline event handlers are the most straightforward way to call a JavaScript function. You simply include the function within an HTML element's attribute, such as onclick, onmouseover, or onsubmit. Inline event handlers are not the best practice since they mix JavaScript code with HTML, making it challenging to maintain and debug. However, they can be useful for simple, small-scale projects.
Here's an example:
<!DOCTYPE html>
<html>
<head>
<script>
function showAlert() {
alert("Hello, world!");
}
</script>
</head>
<body>
<button onclick="showAlert()">Click me</button>
</body>
</html>
In this example, the JavaScript function showAlert() is defined inside the <script> tag in the <head> section. Then, we create a button in the <body> section and add an onclick attribute to it. When the button is clicked, the showAlert() function is called, and an alert displaying "Hello, world!" appears.
External event handlers
External event handlers, also known as unobtrusive JavaScript, is the recommended way to call JavaScript functions in HTML. This method involves separating the JavaScript code from the HTML markup by placing the JavaScript code in an external file or a separate <script> tag. The JavaScript code is then linked to HTML elements using event listeners.
Here's an example:
index.html
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<button id="myButton">Click me</button>
</body>
</html>
script.js
function showAlert() {
alert("Hello, world!");
}
document.getElementById("myButton").addEventListener("click", showAlert);
In this example, we create a separate JavaScript file called script.js and link it to the HTML file using the <script> tag's src attribute. The JavaScript function showAlert() is defined in the external JavaScript file. We then use getElementById() to access the button in the HTML file and add an event listener that listens for the "click" event. When the button is clicked, the showAlert() function is called, and an alert displaying "Hello, world!" appears.
Self-invoking functions
Self-invoking functions, also known as immediately invoked function expressions (IIFE), are functions that run automatically as soon as they are defined. They can be used to call JavaScript functions in HTML without the need for event handlers.
Here's an example:
<!DOCTYPE html>
<html>
<head>
<script>
(function() {
alert("Hello, world!");
})();
</script>
</head>
<body>
</body>
</html>
In this example, the JavaScript function is enclosed in parentheses () and followed by another pair of parentheses, which immediately calls the function. When the HTML page is loaded, the function is automatically executed, and an alert displaying "Hello, world!" appears.
Conclusion
In this tutorial, we explored different ways to call JavaScript functions in HTML. While inline event handlers can be useful for simple projects, they are not recommended due to the difficulty of maintaining and debugging the code. External event handlers are the best practice, as they separate JavaScript code from HTML, making it easier to manage and maintain. Self-invoking functions can be useful when you want a function to execute automatically when the page is loaded.
As you continue learning programming and web development, you will discover that understanding how to call JavaScript functions in HTML is a crucial skill. By using functions efficiently, you can create dynamic, interactive web pages that provide a better user experience. Keep practicing and experimenting with different ways to call JavaScript functions to improve your web development skills.