Linking JavaScript to Html

To make your web pages interactive, you need to connect your JavaScript code to your HTML file. There are three main ways to do this — let’s explore each!

1. Inline JavaScript

You can write JavaScript code directly inside an HTML element using the onclick or other event attributes.

<button onclick="alert('Hello!')">Click Me</button>

Pros: Super quick for small interactions.
Cons: Not recommended for larger projects — mixes logic with structure.

2. Internal JavaScript (Inside the HTML File)

You can add JavaScript within a <script> tag in your HTML file.

<!DOCTYPE html>
<html>
<head>
  <title>Internal JS</title>
</head>
<body>
  <h1>Hello, World!</h1>

  <script>
    console.log("This is internal JavaScript.");
  </script>
</body>
</html>

Pros: Good for small projects or testing.
Cons: Still mixes HTML and JavaScript.

3. External JavaScript (Best Practice)

For larger projects, it's best to write JavaScript in a separate .js file and link it using the <script src=""> tag.

Step-by-step:

1. Create a file called script.js
Write your JavaScript inside it:

console.log("Hello from external JS!");

3. Link it in your HTML file like this:

<!DOCTYPE html>
<html>
<head>
  <title>External JS</title>
</head>
<body>
  <h1>Welcome</h1>

  <script src="script.js"></script>
</body>
</html>

Bonus: Using defer or async (Advanced Option)

You can add these attributes to control when the JavaScript runs:

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

defer: Waits until the HTML is fully loaded, then runs JS (recommended).
async: Runs JS as soon as it's loaded (can be unpredictable with DOM access).