lesson : events and form validation -javascript. events click
DESCRIPTION
WHAT IS AN EVENT? EACH TIME SOMETHING INTERESTING HAPPENS IN THE BROWSER (LIKE THE USER CLICKS A BUTTON OR THE BROWSER FINISHES LOADING THE PAGE), AN EVENT IS FIRED. WHEN A PAGE LOADED WHEN A USER CLICKS A BUTTON WHEN YOU MOVE YOUR MOUSE WHEN YOU CLICK A FORM FIELD EVERY KEY PRESS YOU DON’T WRITE THE EVENT ITSELF, YOU WRITE THE EVENT HANDLER OR EVENT LISTENERTRANSCRIPT
LESSON : EVENTS AND FORM VALIDATION
-JAVASCRIPT
EVENTS
• CLICK
WHAT IS AN EVENT?
• EACH TIME SOMETHING INTERESTING HAPPENS IN THE BROWSER (LIKE THE USER CLICKS A BUTTON OR THE BROWSER FINISHES LOADING THE PAGE), AN EVENT IS FIRED.
• WHEN A PAGE LOADED• WHEN A USER CLICKS A BUTTON• WHEN YOU MOVE YOUR MOUSE• WHEN YOU CLICK A FORM FIELD• EVERY KEY PRESS
• YOU DON’T WRITE THE EVENT ITSELF, YOU WRITE THE EVENT HANDLER OR EVENT LISTENER
EVENT NAMES
• ONLOAD• ONCLICK• ONMOUSEOVER• ONFOCUS• ONBLUR
HANDLING EVENTS : METHOD 1
• <BUTTON ONCLICK=“ALERT(‘HELLO WORLD’);”>• RUN SOME JAVASCRIPT• </BUTTON>
HANDLING EVENTS : METHOD 2
• ELEMENT.EVENT =
• WINDOW.ONLOAD• NAMEFIELD.BLUR
• MYELEMENT.ONCLICK = FUNCTION(){
• }
ENHANCING FORMS WITH JAVASCRIPT
• FIELD VALUES: • FIELD EVENTS:• FORM EVENTS
GETTING FORM AND FORM ELEMENTS
• ID • NAMES
FORM ELEMENTS: TEXTFIELDS
• MAIN PROPERTY: • MYTEXTFIELD.VALUE
• MAIN EVENTS• ONFOCUS• ONBLUR• ONCHANGE• ONKEYPRESS• ONKEYDOWN• ONKEYUP
FORM ELEMENTS: CHECKBOXES AND RADIO BUTTONS:
• MAIN PROPERTY:• MYCHECKBOX.CHECKED
• MAIN EVENT:• ONCLICK• ONCHANGE
FORM ELEMENTS: SELECT
• MAIN PROPERTY:• MYSELECT.TYPE
• SELECT-ONE• MYSELECT.SELECTEDINDEX
• SELECT-MULTIPLE• MYSELECT.OPTION[X].SELECTED
• MAIN EVENTS: • ONCHANGE
FORM
• MAIN EVENT:• ONSUBMIT
EVENTSMANY EVENTS ARE FIRED BY BROWSERS. HERE ARE THE MOST
COMMON:
•ONCLICK: FIRED WHEN AN ELEMENT IS CLICKED ON (OR OTHERWISE ACTIVATED), INCLUDING LINKS, BUTTONS AND IMAGES.
• ONMOUSEOVER, ONMOUSEOUT: FIRED WHEN THE MOUSE ENTERS OR LEAVES THE BOUNDARIES OF AN ELEMENT. USEFUL FOR ROLLOVERS, ETC.
• ONMOUSEDOWN, ONMOUSEUP: FIRED WHEN THE MOUSE BUTTON IS PRESSED OR RELEASED ON AN ELEMENT. USEFUL IF YOU WANT TO DO SOMETHING WHILE THE MOUSE BUTTON IS DOWN.
• ONLOAD: AVAILABLE ONLY ON THE <BODY> ELEMENT AND WINDOW OBJECT, FIRED WHEN THE DOCUMENT HAS FINISHED LOADING. USEFUL IN SCRIPTS THAT YOU LOAD FROM AN EXTERNAL FILE USING A <SCRIPT SRC="..."> ELEMENT IN THE DOCUMENT'S <HEAD> SECTION, BUT THAT REQUIRE THE DOCUMENT TO BE LOADED (AND THE DOM TO BE FULLY FORMED) BEFORE THEY CAN RUN.
FORM EVENTS• TO REFERENCE A FORM IN CODE, FIRST MAKE SURE THE
FORM HAS A NAME AND ID ATTRIBUTE SET. THEN USE ANY OF THE FOLLOWING NOTATIONS:
• <FORM NAME=“MYFORM” ID=“MYFORM”>
• </FORM>
• DOCUMENT.FORMS["MYFORM"];• DOCUMENT.MYFORM;• DOCUMENT.GETELEMENTBYID( "MYFORM" );
.FOCUS ()
• IF YOU NEED TO PUT THE CURSOR ON SOME CONTROL IN A FORM WHEN THE FORM LOADS, FIRST MAKE SURE THE CONTROL HAS A NAME AND ID ATTRIBUTE SET, THEN USE THE FOCUS() METHOD OF THE CONTROL AS FOLLOWS:
.SELECT()
• TO SELECT THE TEXT INSIDE A FIELD, USE THE SELECT() METHOD OF THE
• CONTROL AFTER SETTING THE FOCUS TO IT:
.DISABLED=TRUE;
• TO DISABLE A CONTROL.
FORM VALIDATION
• VALIDATING ENTRIES IN AN HTML FORM WITH JAVASCRIPT CONSISTS IN THE FOLLOWING STEPS:
ASSIGN AND ID AND NAME TO EACH FIELD YOU WILL NEED TO
• VALIDATE. ADD A SUBMIT BUTTON TO THE FORM. DEFINE A FUNCTION THAT RETURNS TRUE OR FALSE
DEPENDING ON• WHETHER THE ENTRIES ARE VALID OR NOT. ADD AN ONSUBMIT ATTRIBUTE TO THE FORM, ASSIGNING
TO IT THE• RETURN VALUE OF THE VALIDATING FUNCTION.
• CREATE A USER REGISTRATION FORM SIMILAR TO THE ONE SHOWN BELOW. THE REQUIREMENTS ARE THE
• FOLLOWING: 1) THE USERNAME AND PASSWORD MUST NOT BE
EMPTY,2) THE PASSWORD AND CONFIRMATION FIELDS MUST
BE THE SAME. MAKE SURE TO ADD A SUBMIT BUTTON ( NOT SHOWN ).