Integrating HTML and JavaScript
DOM and Events

Integrating HTML and JavaScript: Bringing Pages to Life

HTML structures your content, but JavaScript adds the soul. By integrating JavaScript with your HTML, you can respond to user interactions, change content dynamically, and build powerful, interactive web applications. Let’s get started with the basics.

1. Adding JavaScript to HTML with <script>

Inline Script Example

<!DOCTYPE html>
<html>
<head>
  <title>Banana Alert</title>
</head>
<body>

<script>
  alert("Hello from Banana World!");
</script>

</body>
</html>

This shows a popup when the page loads. It’s simple, but not recommended for complex apps.

In-Page Script (After HTML Elements)

<button onclick="sayHello()">Click Me</button>

<script>
function sayHello() {
  alert("Hello Cherry!");
}
</script>

[ Clicking button shows “Hello Cherry!” ]

External JavaScript File

Best practice is to separate your JavaScript into its own file.

// script.js
function greet() {
  document.getElementById("fruit").innerText = "Hello Apple!";
}

<p id="fruit"></p>
<button onclick="greet()">Say Hello</button>
<script src="script.js"></script>

2. DOM Manipulation Basics

The DOM (Document Object Model) represents your HTML page as objects you can interact with.

Example: Change Text Content

<p id="message">Old message</p>
<button onclick="changeText()">Update Message</button>

<script>
function changeText() {
  document.getElementById("message").innerText = "New message: Hello Banana!";
}
</script>

Example: Change Style

<p id="highlight">Watch me glow!</p>
<button onclick="glow()">Glow Now</button>

<script>
function glow() {
  document.getElementById("highlight").style.color = "red";
  document.getElementById("highlight").style.fontWeight = "bold";
}
</script>

3. Event Handling

Events are how your JavaScript reacts to things — clicks, typing, scrolling, etc.

Example: Add Event Listener

<button id="cherryBtn">Click Cherry</button>

<script>
document.getElementById("cherryBtn").addEventListener("click", function() {
  alert("Cherry clicked!");
});
</script>

Using addEventListener() is better than inline onclick for scalability and separation of concerns.

4. Best Practices for Clean Integration

  • Place <script> at the end of <body> or use defer in <head>
  • Keep JavaScript in external files for maintainability
  • Use meaningful IDs and class names
  • Separate logic (JavaScript) from structure (HTML) and style (CSS)
  • Always test your DOM access after the document has loaded

5. Real-World Example

This puts everything together.

<h3 id="fruitLabel">Favorite Fruit:</h3>
<button id="appleBtn">Apple</button>
<button id="bananaBtn">Banana</button>

<script>
document.getElementById("appleBtn").onclick = function() {
  document.getElementById("fruitLabel").innerText = "Favorite Fruit: Apple 🍎";
};

document.getElementById("bananaBtn").onclick = function() {
  document.getElementById("fruitLabel").innerText = "Favorite Fruit: Banana 🍌";
};
</script>

[ Buttons update the text dynamically ]

Summary

By combining HTML with JavaScript, your pages become interactive, intelligent, and expressive. You've learned how to:

  • Include scripts inline, in-page, or externally
  • Access and manipulate HTML with the DOM
  • Respond to user actions with events
  • Write clean, maintainable, and accessible code

What’s Next?

Next, we’ll explore advanced topics like JavaScript timing functions, form validation logic, and dynamic content generation — essential tools for building responsive, user-friendly applications.

QUIZ

Question 1:What is the correct way to include JavaScript code inside an HTML document?