Related Topics
HTML
Data Structure
JAVASCRIPT
<title>Form Validation Example</title>
<label for="name">Name:</label>
<br>
<label for="email">Email:</label>
<br>
const form = document.getElementById('myForm');
form.addEventListener('submit', function (event) {
// Prevent the default form submission
event.preventDefault();
// Perform form validation here
validateForm();
});
function validateForm() {
// Get form elements by their IDs
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
// Get the input values
const nameValue = nameInput.value.trim();
const emailValue = emailInput.value.trim();
// Validate name field (Example: Must be at least 3 characters long)
if (nameValue.length < 3) {
alert('Name must be at least 3 characters long.');
return false;
}
// Validate email field (Example: Must be a valid email format)
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(emailValue)) {
alert('Please enter a valid email address.');
return false;
}
// If all validations pass, you can submit the form
alert('Form submitted successfully!');
form.submit();
}
In the example above, we use the addEventListener method to attach a submit event handler to the form. When the form is submitted, the event handler function (validateForm) is called.
Inside the validateForm function:
We retrieve the input values from the name and email fields using the
valueproperty of their corresponding DOM elements.We then perform validation checks on these values. For the name field, we check if it’s at least 3 characters long. For the email field, we use a regular expression pattern to check if it matches a valid email format.
If any validation fails, an alert is shown to the user with an error message, and the form submission is prevented using
event.preventDefault().If all validations pass, an alert is shown indicating that the form was submitted successfully, and we proceed to submit the form using
form.submit().
Remember that client-side form validation is essential for improving user experience and reducing unnecessary server requests. However, it should always be complemented by server-side validation to ensure the submitted data is validated and sanitized on the server as well. Client-side validation can be bypassed, so it’s not a substitute for proper server-side validation.
document.getElementById('button').addEventListener('click', function(event) {
event.stopPropagation(); // Stop event from bubbling up to outer
event.preventDefault(); // Prevent the default behavior of the click event
// Your event handling code here
});
Understanding event bubbling and capturing is essential for managing event handling efficiently, especially when multiple event listeners are attached to different elements within the DOM hierarchy. It allows you to handle events at various levels in the hierarchy and provides flexibility in managing event flow and interactions in your web application.
const xhr = new XMLHttpRequest();
2. Configure the Request: Set up the request using the open() method. The open() method takes three arguments: the HTTP method (e.g., ‘GET’, ‘POST’), the URL to which the request is sent, and whether the request should be asynchronous (usually set to true).
xhr.open('GET', 'https://api.example.com/data', true);
Set Up Event Listeners: To handle the server’s response, set up event listeners for the XMLHttpRequest object. You’ll typically listen for the
readystatechangeevent, which is triggered whenever thereadyStateproperty of the XMLHttpRequest object changes. Additionally, you can listen for theloadevent, which is triggered when the request is successfully completed.
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// Request was successful, and the response is available in xhr.responseText
console.log(xhr.responseText);
} else {
// Handle the error
console.error('Error occurred:', xhr.status, xhr.statusText);
}
}
};
xhr.addEventListener('load', function() {
console.log('Request completed successfully!');
});
4. Send the Request: Finally, send the request using the send() method. If you’re making a POST request and need to send data to the server, pass the data as an argument to the send() method.
xhr.send();
Putting it all together, here’s a complete example of making an AJAX GET request:
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error('Error occurred:', xhr.status, xhr.statusText);
}
}
};
xhr.addEventListener('load', function() {
console.log('Request completed successfully!');
});
xhr.send();
Keep in mind that modern web development often utilizes Fetch API or other libraries like Axios or jQuery for handling AJAX requests, as they provide more streamlined and user-friendly APIs for making asynchronous HTTP requests. However, XMLHttpRequest is still a fundamental technique and can be used when compatibility with older browsers is a concern or when working on legacy projects.
<div id="myDiv">
<p>This is <strong>bold</strong> text.</p>
</div>
const myDiv = document.getElementById('myDiv');
// Reading innerHTML
console.log(myDiv.innerHTML); // Output: "<p>This is <strong>bold</strong> text.</p>"
// Setting innerHTML
myDiv.innerHTML = "<p>New paragraph.</p>";
textContent: The
textContentproperty, on the other hand, allows you to access or modify only the text content within an element, excluding any HTML tags. When you read thetextContentproperty, it returns the text content as a plain string, without any HTML tags. When you set thetextContentproperty, it replaces the existing text content with the new text.
Example:
<div id="myDiv">
<p>This is <strong>bold</strong> text.</p>
</div>
const myDiv = document.getElementById('myDiv');
// Reading textContent
console.log(myDiv.textContent); // Output: "This is bold text."
// Setting textContent
myDiv.textContent = "New paragraph.";
In summary:
innerHTMLis used to manipulate the HTML content, including HTML tags and text.textContentis used to manipulate only the plain text content without any HTML tags.
When updating content, you should be careful with innerHTML as it can introduce security risks like cross-site scripting (XSS) attacks if the content is not properly sanitized. Whenever possible, use textContent to update text content, and use other DOM manipulation methods to create and append elements to ensure security and consistency.
<title>Drag and Drop Example</title>
#draggableElement {
width: 100px;
height: 100px;
background-color: blue;
color: white;
text-align: center;
line-height: 100px;
position: absolute;
cursor: move;
}
<div id="draggableElement">Drag Me!</div>
const draggableElement = document.getElementById('draggableElement');
let offsetX, offsetY, isDragging = false;
draggableElement.addEventListener('mousedown', (event) => {
// Calculate the offset between the click point and the top-left corner of the element
offsetX = event.clientX - draggableElement.offsetLeft;
offsetY = event.clientY - draggableElement.offsetTop;
isDragging = true;
});
document.addEventListener('mousemove', (event) => {
if (isDragging) {
// Move the element to the new position
draggableElement.style.left = (event.clientX - offsetX) + 'px';
draggableElement.style.top = (event.clientY - offsetY) + 'px';
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
In this example, we create a blue box with the text “Drag Me!” inside it. The box can be dragged by clicking on it and moving the mouse. Here’s a breakdown of how it works:
We select the draggable element using
document.getElementById.When the
mousedownevent occurs on the element, we calculate the offset between the mouse click point and the top-left corner of the element (offsetXandoffsetY).While the mouse is moving (
mousemoveevent), if theisDraggingflag is set to true (indicating that the mouse button is being held down), we adjust the element’s position (leftandtopCSS properties) based on the mouse position and the calculated offsets.When the
mouseupevent occurs, we setisDraggingto false to indicate that dragging has stopped.
The position: absolute CSS property is used to enable precise positioning of the draggable element based on its left and top values.
This example demonstrates a simple implementation of drag and drop functionality. For more complex scenarios or to handle multiple draggable elements, you may need to consider additional features like z-index handling, constraining movement within a specific area, or handling overlaps between draggable elements. Libraries like interact.js and Draggable from GreenSock Animation Platform (GSAP) offer more advanced drag and drop features and can be helpful for complex drag and drop interactions.
<title>Dynamic Media Loading</title>
<button>Load Image</button>
<div id="imageContainer"></div>
function loadImage() {
const imageUrl = 'path/to/image.jpg';
const imageElement = new Image();
imageElement.src = imageUrl;
const imageContainer = document.getElementById('imageContainer');
imageContainer.appendChild(imageElement);
}
Example: Loading a video dynamically:
<title>Dynamic Media Loading</title>
<button>Load Video</button>
<div id="videoContainer"></div>
function loadVideo() {
const videoUrl = 'path/to/video.mp4';
const videoElement = document.createElement('video');
videoElement.src = videoUrl;
videoElement.controls = true; // Show video controls
const videoContainer = document.getElementById('videoContainer');
videoContainer.appendChild(videoElement);
}
Modifying Attributes:
You can modify the attributes of media elements using JavaScript to change their behavior or appearance. For example, setting the src attribute of an image or video changes the media source, and the controls attribute enables or disables video controls.
Event Handling:
You can attach event listeners to media elements to respond to various events, such as playing, pausing, seeking, and error events.
Example: Attaching an event listener to a video element:
const videoElement = document.getElementById('myVideo');
videoElement.addEventListener('play', function() {
console.log('Video started playing.');
});
videoElement.addEventListener('pause', function() {
console.log('Video paused.');
});
Controlling Playback:
You can use JavaScript to control the playback of videos, such as starting, pausing, seeking, changing volume, and muting.
Example: Controlling video playback:
const videoElement = document.getElementById('myVideo');
function playVideo() {
videoElement.play();
}
function pauseVideo() {
videoElement.pause();
}
function seekTo(time) {
videoElement.currentTime = time;
}
function setVolume(volume) {
videoElement.volume = volume;
}
function muteVideo() {
videoElement.muted = true;
}
function unmuteVideo() {
videoElement.muted = false;
}
These are some common tasks you can perform with images and videos in the DOM using JavaScript. You can use these techniques to create dynamic and interactive media experiences on your web pages.
Popular Category
Topics for You
HTML
Data Structure
Go through our study material. Your Job is awaiting.