HTML JavaScript

HTML and JavaScript are often used together to create interactive and dynamic web pages. JavaScript is a programming language that can manipulate the content, structure, and style of a web page in real-time. You can embed JavaScript directly within HTML documents or link to external JavaScript files.

Embedding JavaScript in HTML

There are several ways to include JavaScript in an HTML document:

1. Inline JavaScript: Using the script tag directly within the HTML.

2. Internal JavaScript: Including JavaScript in the head or body of the HTML document within script tags.

3. External JavaScript: Linking to a separate JavaScript file.

Inline JavaScript

You can write JavaScript directly within HTML tags using the onclick, onload, and other event attributes.


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Inline JavaScript Example</title>
</head>
<body>
    <button onclick="alert('Button clicked!')">Click Me</button>
</body>
</html>

Internal JavaScript

You can include JavaScript code within script tags inside the head or body of the HTML document.


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Internal JavaScript Example</title>
    <script>
        function showMessage() {
            alert('Hello, World!');
        }
    </script>
</head>
<body>
    <button onclick="showMessage()">Click Me</button>
</body>
</html>

External JavaScript

You can create a separate JavaScript file and link to it using the src attribute of the script tag.

app.js


function showMessage() {
    alert('Hello, World!');
}

index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <title>External JavaScript Example</title>
    <script src="app.js"></script>
</head>
<body>
    <button onclick="showMessage()">Click Me</button>
</body>
</html>