What is JavaScript in HTML?
JavaScript is a scripting language that allows you to add behavior and interactivity to web pages. While HTML is used for structure and content, and CSS for styling, JavaScript enables actions and logic, such as reacting to user inputs, fetching data or modifying the page dynamically.
How HTML and JavaScript Work Together
JavaScript can be included in HTML in three ways:
- Inline: Using the onclick or similar event attributes directly in HTML tags.
- Internal: Placing JavaScript code inside the <script> tag within the HTML file.
- External: Linking an external JavaScript file using the <script> tag.
Adding JavaScript to HTML
1. Inline JavaScript
Inline JavaScript is written directly within an HTML tag using event attributes like onclick, onmouseover, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline JavaScript Example</title>
</head>
<body>
<button onclick="alert('Button Clicked!')">Click Me</button>
</body>
</html>
Explanation:
- The onclick attribute calls the JavaScript alert() function when the button is clicked.
2. Internal JavaScript
Internal JavaScript is written inside a <script> tag within the HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal JavaScript Example</title>
<script>
function showMessage() {
alert('Hello, this is internal JavaScript!');
}
</script>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
</body>
</html>
Explanation:
- The <script> tag defines a function showMessage() which is called when the button is clicked.
3. External JavaScript
External JavaScript separates code into a .js file, keeping the HTML clean and organized.
HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External JavaScript Example</title>
<script src="script.js"></script>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
</body>
</html>
External JavaScript File (script.js):
function showMessage() {
alert('This is external JavaScript!');
}
Explanation:
- The <script src=”script.js”> tag links the JavaScript file, which contains the logic.
JavaScript Basics
1. Variables
Variables store data that JavaScript can use or manipulate.
Example:
let name = "John";
console.log("Hello, " + name);
2. Functions
Functions encapsulate reusable code blocks.
Example:
function addNumbers(a, b) {
return a + b;
}
console.log(addNumbers(5, 10));
3. Events
JavaScript can respond to user actions like clicks, keypresses or mouse movements.
Example:
<button onclick="changeText()">Change Text</button>
<p id="text">Original Text</p>
<script>
function changeText() {
document.getElementById('text').innerHTML = "Text Changed!";
}
</script>
Benefits of Using JavaScript with HTML
- Interactivity: Add features like dropdown menus, modal windows, and sliders.
- Dynamic Content: Update content without reloading the page.
- Improved User Experience: Validate forms, show tooltips, and create animations.
- Enhanced Functionality: Integrate APIs for real-time data fetching.
Example: Interactive Form Validation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<script>
function validateForm() {
let name = document.getElementById('name').value;
if (name === "") {
alert('Name is required!');
return false;
}
return true;
}
</script>
</head>
<body>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
</body>
</html>
Explanation:
- The validateForm() function checks if the input field is empty before submitting the form.