Scribd
Upload
2 views

Web Programming II Week 4

Uploaded by

KIM Denzel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Web Programming II Week 4

Uploaded by

KIM Denzel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

Web programming-II

Software engineering, Digital marketing,


network and security & Web and graphics
designs.

By VERNYUY BASILE
TIMELINE/Week 4
1. Event handling methods
2. DOM Forms
1. Adding event 3. Using events to 4. Data/Form
listeners set CSS validation.
2. Removing event properties.
listeners

VERNYUY BASILE
1. Event handling methods.

VERNYUY BASILE
1. Adding event listeners.

JavaScript events. An event is an action that occurs as per the


user's instruction / input and gives an output in response. We
can consider different types of inputs, such as mouse clicks,
button presses, hoover effects, drag contents etc . For example

VERNYUY BASILE
Examples
document.getElementById("myBtn").addEventListener("click",
myFunction);
function myFunction() {
alert ("Hello World!");
}

let btn = document.querySelector('#btn');


btn.onclick = function() {
alert('Clicked!');
}
VERNYUY BASILE
2. Removing event listeners.
In JavaScript, the removeEventListener() method is used to remove
event listeners from an element. This means the previous event added
to an element is dynamically removed using this method. See
structure/syntax.

element.removeEventListener(eventType, eventHandler);
 element: The HTML element from which you want to remove the
event listener.
 eventType: The type of event you want to remove the listener for
(e.g., "click", "mouseover", "keydown").
 eventHandler: The function that was used as the event listener.
VERNYUY BASILE
Example.
const myElement = document.getElementById("myElement");

function handleClick(event) {
alert("Clicked button!");
}

myElement.addEventListener("click", handleClick);

// Remove the event listener


myElement.removeEventListener("click", handleClick);

VERNYUY BASILE
3. Using events to set CSS properties.

In JavaScript, you can use events to dynamically set CSS properties on


elements, creating interactive and responsive web designs.

Key steps involved


1.Identify the event: Determine which event will trigger the CSS
property change (e.g., "click", "mouseover", "keydown", "resize").
2.Attach an event listener: Use the addEventListener() method to
attach an event listener to the appropriate element.
3.Modify CSS properties: Within the event handler function, use the
style property of the element to modify its CSS properties.

VERNYUY BASILE
Example.

const myElement = document.getElementById("myElement");

function handleMouseOver(event) {
myElement.style.backgroundColor = "yellow";
}

myElement.addEventListener("mouseover", handleMouseOver);

VERNYUY BASILE
2. DOM Forms.

VERNYUY BASILE
DOM Forms/Data validation.

DOM forms refer to the interaction between JavaScript and HTML forms
using the Document Object Model (DOM). This allows for dynamic form
validation, data manipulation, and user interaction enhancement.

Form validation and data validation are essential aspects of web


development to ensure data integrity, prevent errors, and
enhance user experience. JavaScript provides powerful tools
and techniques for implementing these processes effectively.

VERNYUY BASILE
Key Elements of DOM Forms:
 Form Element: The <form> tag defines a form element. It contains
input fields, buttons, and other elements that allow users to input data.
 Input Elements: Various input elements are used to collect user input,
such as <input>, <textarea>, <select>, and <button>.
 Event Listeners: JavaScript event listeners are attached to form
elements to capture user actions, like form submission, button clicks
etc.

VERNYUY BASILE
Example DOM Forms:
function formcontrol(){
let usernames = document.forms.myForm.names.value
let userpassword = document.forms.myForm.password.value
let usercpassoword = document.forms.myForm.cpassword.value

if(usernames==""){
document.getElementById("errornames").innerHTML="Please fill your names"
return false;
}

if(userpassword==""){
document.getElementById("errorpassword").innerHTML="Sorry you need a password"
return false;
}
if(usercpassoword==""){
document.getElementById("errorcpassword").innerHTML="Sorry confirm the password"
return false;
}
}

VERNYUY BASILE
Common DOM Form Interactions:

 Form Submission: Preventing the default form submission behavior


(page reload) and handling form data using JavaScript.
 Input Validation: Validating user input in real-time to ensure data
integrity and provide feedback to the user.
 Dynamic Content Generation: Creating and manipulating form
elements dynamically based on user input or other conditions.
 User Experience Enhancements: Providing a more interactive and
user-friendly experience through features like autocomplete, tooltips,
and progress indicators.

VERNYUY BASILE
Assignments
1. Create an HTML form with 4 input fields, change the
background color, text color with the click of a button.
Using js make sure the user do not submit the form with
empty fields.
End

You might also like