How To Include Javascript In Html

by

JavaScript is a powerful programming language that allows you to create dynamic web pages. It can be used to add interactivity, validate forms, create animations, and much more. In this blog post, we will discuss how to include JavaScript in your HTML document. There are two ways to include JavaScript in an HTML file:

  1. Inline JavaScript
  2. External JavaScript file

1. Inline JavaScript

Inline JavaScript code is written directly within your HTML file. You can place the JavaScript code between the <script> and </script> tags, which can be placed anywhere in the HTML file, usually within the <head> or <body> section. Here’s an example of how to include inline JavaScript code:

<!DOCTYPE html>
<html>
<head>
    <title>Inline JavaScript example</title>
</head>
<body>
    <h1>Click the button to display an alert</h1>
    <button onclick="displayAlert()">Click me!</button>
    <script>
        function displayAlert() {
            alert('You clicked the button!');
        }
    </script>
</body>
</html>

2. External JavaScript file

For more complex JavaScript code or for code reuse, it’s better to use an external JavaScript file. This method allows you to separate the JavaScript code from the HTML, making your code cleaner and easier to maintain. To include an external JavaScript file, use the <script> tag with the src attribute pointing to the URL of the JavaScript file:

<!DOCTYPE html>
<html>
<head>
    <title>External JavaScript example</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Click the button to display an alert</h1>
    <button onclick="displayAlert()">Click me!</button>
</body>
</html>

In the above example, the JavaScript code is located in a file called script.js. The contents of the script.js file would be:

function displayAlert() {
    alert('You clicked the button!');
}

Conclusion

In this blog post, we’ve discussed two methods of including JavaScript in your HTML document: inline JavaScript and external JavaScript files. Inline JavaScript is useful for small, simple scripts, but for more complex code or code reuse, it’s better to use an external JavaScript file. Both methods have their advantages, and the choice depends on your specific use case and coding preferences.