How to Embed JavaScript in HTML

JavaScript can be embedded in HTML documents using a variety of methods. Here’s a comprehensive guide on how to include JavaScript in your HTML file.

1. Inline JavaScript

You can write JavaScript directly within HTML tags using the <script> tag. This method is suitable for small scripts or quick tests.

<html>
<head>
    <title>Inline JavaScript Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script>
        // JavaScript code goes here
        document.write("This is an inline JavaScript example.");
    </script>
</body>
</html>

2. Internal JavaScript

Internal JavaScript is written within the <script> tag in the HTML document, usually within the <head> or <body> section. This method is useful for scripts that are specific to a single HTML file.

<html>
<head>
    <title>Internal JavaScript Example</title>
    <script>
        function greet() {
            alert("Hello from internal JavaScript!");
        }
    </script>
</head>
<body>
    <button onclick="greet()">Click me</button>
</body>
</html>

3. External JavaScript

External JavaScript files are linked to the HTML file using the <script> tag with the src attribute. This method is ideal for organizing and reusing code across multiple HTML pages.

<html>
<head>
    <title>External JavaScript Example</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
    <button onclick="showMessage()">Click me</button>
</body>
</html>

In the example above, the JavaScript code would be placed in a separate file named script.js:

function showMessage() {
    alert("Hello from external JavaScript!");
}

4. Asynchronous and Deferred Loading

To optimize page load times, you can load external JavaScript files asynchronously or defer their execution until after the HTML document has been parsed.

**Asynchronous Loading**: The script is fetched asynchronously and executed as soon as it’s available.

<script src="script.js" async></script>

**Deferred Loading**: The script is executed only after the HTML document has been fully parsed.

<script src="script.js" defer></script>

Conclusion

Embedding JavaScript in HTML can be done in various ways, including inline, internal, or external methods. Each approach has its use cases depending on the complexity and organization of your code. External scripts are generally preferred for maintainability and reuse, while inline and internal scripts are useful for quick or specific tasks.