Module 20: Basic JavaScript with HTML
This module introduces you to embedding JavaScript into HTML to create interactive web pages. You'll learn about the <script> tag, event handling (like onClick and onHover), and how to write and execute JavaScript within your HTML file.
🎯
1. Embedding JavaScript into HTML
JavaScript can be embedded into an HTML file in three ways:
Inline JavaScript: Adding JavaScript directly within an HTML element's attribute (e.g., onClick, onHover).
Internal JavaScript: Placing JavaScript code inside a <script> tag within the same HTML file.
External JavaScript: Linking an external .js file to your HTML file.
2. Understanding the <script> Tag
The <script> tag allows you to write JavaScript code directly inside your HTML file or link an external JavaScript file.
Example: Inline JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Inline JavaScript Example</title>
</head>
<body>
<button onClick="alert('Button Clicked!')">Click Me</button>
</body>
</html>
Explanation:
The onClick attribute calls JavaScript code when the button is clicked.
alert('Button Clicked!') is a JavaScript function that displays a pop-up message.
Example: Internal JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Internal JavaScript Example</title>
<script>
function showAlert() {
alert('Hello! This is triggered by JavaScript.');
}
</script>
</head>
<body>
<button onClick="showAlert()">Click Me</button>
</body>
</html>
Explanation:
The <script> tag in the <head> section contains the JavaScript function showAlert().
The onClick="showAlert()" attribute calls this function when the button is clicked.
Example: External JavaScript
HTML File (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>
JavaScript File (script.js):
function showAlert() {
alert('This is from an external JavaScript file!');
}
Explanation:
The <script> tag in the HTML file links to an external JavaScript file (script.js).
The showAlert function in script.js is called when the button is clicked.
3. JavaScript Events (onClick and onHover)
Events allow interaction between the user and the webpage. Two common events are onClick (when an element is clicked) and onMouseOver/onHover (when the mouse pointer hovers over an element).
Example: onClick Event
<!DOCTYPE html>
<html>
<head>
<title>onClick Event Example</title>
<script>
function changeText() {
document.getElementById("message").innerHTML = "Button Clicked!";
}
</script>
</head>
<body>
<p id="message">Click the button to change this text.</p>
<button onClick="changeText()">Click Me</button>
</body>
</html>
Explanation:
The onClick attribute calls the changeText function.
The document.getElementById method targets the element with id="message" and changes its content.
Example: onMouseOver Event
<!DOCTYPE html>
<html>
<head>
<title>onMouseOver Event Example</title>
<script>
function changeColor() {
document.getElementById("hoverText").style.color = "red";
}
function resetColor() {
document.getElementById("hoverText").style.color = "black";
}
</script>
</head>
<body>
<p id="hoverText" onMouseOver="changeColor()" onMouseOut="resetColor()">Hover over this text to change its color.</p>
</body>
</html>
Explanation:
The onMouseOver event triggers the changeColor function, changing the text color to red.
The onMouseOut event triggers the resetColor function, changing the text color back to black.
4. Practical Exercise
Exercise: Create a webpage where a user can toggle the background color of a paragraph between two colors using buttons.
Solution:
<!DOCTYPE html>
<html>
<head>
<title>Toggle Background Color</title>
<script>
function setBackground(color) {
document.getElementById("para").style.backgroundColor = color;
}
</script>
</head>
<body>
<p id="para" style="padding: 10px;">Click the buttons to change my background color!</p>
<button onClick="setBackground('lightblue')">Light Blue</button>
<button onClick="setBackground('lightgreen')">Light Green</button>
</body>
</html>
Explanation:
The setBackground function changes the background color of the paragraph based on the argument passed.
Each button triggers the function with a specific color.
5. Key Takeaways
The <script> tag embeds or links JavaScript to your HTML.
JavaScript events like onClick and onMouseOver enable interaction with the webpage.
Inline, internal, and external JavaScript approaches serve different use cases.
Combining HTML and JavaScript allows you to create dynamic, interactive web pages.
6. Exercises for Practice
Create a webpage where clicking a button toggles the visibility of an image.
Create a form that displays a pop-up message when submitted, showing the user’s input.
Build a webpage where hovering over an element changes its background color and clicking it resets the color.
These practical examples and exercises will help you master embedding JavaScript in HTML.
No comments:
Post a Comment