Using JavaScript in HTML and vice versa involves embedding JavaScript code within HTML documents and manipulating HTML elements through JavaScript. Here’s a detailed guide on how to integrate the two:
Embedding JavaScript in HTML
1. Inline JavaScript
You can include JavaScript directly within HTML tags using the onclick, onmouseover, and other event attributes.
<!DOCTYPE html>
<html>
<head>
<title>Inline JavaScript Example</title>
</head>
<body>
<button onclick=”alert(‘Button clicked!’)”>Click Me</button>
</body>
</html>
2. Internal JavaScript
You can place JavaScript code within the <script> tag inside the HTML document, usually within the <head> or at the end of the <body> section.
<!DOCTYPE html>
<html>
<head>
<title>Internal JavaScript Example</title>
<script>
function showAlert() {
alert(‘Hello, World!’);
}
</script>
</head>
<body>
<button onclick=”showAlert()”>Click Me</button>
</body>
</html>
3. External JavaScript
For better organization and maintainability, it’s common to write JavaScript in separate files and link them to the HTML document using the <script> tag with the src attribute.
script.js:
function showAlert() {
alert(‘Hello, World!’);
}
index.html:
<!DOCTYPE html>
<html>
<head>
<title>External JavaScript Example</title>
<script src=”script.js”></script>
</head>
<body>
<button onclick=”showAlert()”>Click Me</button>
</body>
</html>
Accessing and Manipulating HTML from JavaScript
Using JavaScript, you can access and manipulate HTML elements via the DOM (Document Object Model).
Selecting Elements
- By ID: document.getElementById()
let element = document.getElementById(‘myElement’);
- By Class Name: document.getElementsByClassName()
let elements = document.getElementsByClassName(‘myClass’);
- By Tag Name: document.getElementsByTagName()
let elements = document.getElementsByTagName(‘p’);
- By CSS Selector: document.querySelector() and document.querySelectorAll()
let element = document.querySelector(‘#myElement’); let elements = document.querySelectorAll(‘.myClass’);
Modifying Content
- Change Inner HTML:
document.getElementById(‘myElement’).innerHTML = ‘New Content’;
- Change Attribute:
document.getElementById(‘myImage’).src = ‘newImage.jpg’;
Adding Event Listeners
Instead of using inline event handlers, you can add event listeners using JavaScript.
document.getElementById(‘myButton’).addEventListener(‘click’, function() {
alert(‘Button clicked!’);
});
Example: Putting It All Together
Here’s a full example that demonstrates the integration of JavaScript within an HTML document:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript and HTML Example</title>
<script src=”script.js”></script>
</head>
<body>
<h1 id=”title”>Hello, World!</h1>
<p class=”description”>This is a paragraph.</p>
<button id=”changeTextButton”>Change Text</button>
<script>
// Inline JavaScript to add an event listener
document.getElementById(‘changeTextButton’).addEventListener(‘click’, function() {
document.getElementById(‘title’).innerHTML = ‘Text Changed!’;
});
</script>
</body>
</html>
script.js:
// External JavaScript to manipulate DOM elements
document.addEventListener(‘DOMContentLoaded’, (event) => {
let description = document.querySelector(‘.description’);
description.innerHTML = ‘This is a modified paragraph.’;
});
Summary
- Inline JavaScript: Embedded directly within HTML tags.
- Internal JavaScript: Placed within <script> tags inside the HTML document.
- External JavaScript: Stored in separate .js files and linked to HTML documents.
JavaScript interacts with HTML through the DOM, allowing dynamic changes to web pages in response to user actions and other events. This seamless integration is what enables the creation of interactive and responsive web applications.