1. Dynamic Content Generation:
Dynamic content generation involves creating web pages that generate content dynamically based on user input or other factors. JavaScript is commonly used to manipulate the HTML DOM (Document Object Model) to dynamically update content on the page.
Example: Dynamic To-Do List
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic To-Do List</title>
</head>
<body>
<h1>To-Do List</h1>
<input type="text" id="taskInput" placeholder="Enter task">
<button onclick="addTask()">Add Task</button>
<ul id="taskList"></ul>
<script>
function addTask() {
var taskInput = document.getElementById("taskInput");
var taskList = document.getElementById("taskList");
var task = taskInput.value;
if (task.trim() !== "") {
var li = document.createElement("li");
li.textContent = task;
taskList.appendChild(li);
taskInput.value = "";
}
}
</script>
</body>
</html>
In this example, users can input tasks into a text field and click a button to add them to a dynamic to-do list. JavaScript dynamically creates <li> elements and appends them to the <ul> element to display the tasks.
2. Form Validation:
Form validation ensures that user input meets specified criteria before submitting the form. JavaScript can be used to validate form fields in real-time, providing feedback to users and preventing invalid submissions.
Example: Form Validation for Email
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Validation</title>
</head>
<body>
<h1>Form Validation</h1>
<form onsubmit="return validateForm()">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
var emailInput = document.getElementById("email");
var email = emailInput.value;
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
alert("Please enter a valid email address.");
return false;
}
return true;
}
</script>
</body>
</html>
In this example, JavaScript validates the email input field when the form is submitted. If the email is invalid, an alert is displayed, and the form submission is prevented.
3. DOM Manipulation:DOM manipulation involves modifying the structure, content, or styling of HTML elements dynamically. JavaScript provides methods for accessing and manipulating DOM elements, allowing developers to create interactive and responsive user interfaces.
Example: Changing Element Styles on Click
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM Manipulation</title>
<style>
.highlighted {
background-color: yellow;
}
</style>
</head>
<body>
<h1>DOM Manipulation</h1>
<p id="paragraph">Click the button to highlight this paragraph.</p>
<button onclick="highlightParagraph()">Highlight</button>
<script>
function highlightParagraph() {
var paragraph = document.getElementById("paragraph");
paragraph.classList.toggle("highlighted");
}
</script>
</body>
</html>
In this example, clicking the button toggles the highlighted class on the paragraph element, changing its background color to yellow.
4. Event Handling:
Event handling involves responding to user interactions or system events, such as clicks, keypresses, or mouse movements. JavaScript provides event listeners to handle and respond to these events dynamically.
Example: Displaying Mouse Coordinates on Click
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Handling</title>
</head>
<body>
<h1>Event Handling</h1>
<p>Click anywhere on the page to display mouse coordinates.</p>
<p id="coordinates"></p>
<script>
document.addEventListener("click", function(event) {
var coordinates = "X: " + event.clientX + ", Y: " + event.clientY;
document.getElementById("coordinates").textContent = coordinates;
});
</script>
</body>
</html>
Practice Excercise Practice now