5.1 Events. 5.3.3 with Keyword 5.1.1 onelick Event 5.1.2 onkeydown Event 5.4 Built-in Objects 5.1.3 onchange Event 5.4.1 Number 5.1.4 onload Event 5.4.2 Boolean 5.1.5 onmouseover & onmouseout 5.4.3 String Event 5.4.4 Array 5.2 Pop-up Boxes 5.5 Form Validation 5.2.1 Alert 5.5.1 Basic Validation — 5.2.2 Prompt 5.5.2 Data Format Validation 5.2.3 Confirm 5.6 Conclusion 5.3 User-Defined Objects 5.3.1 Object Methods | EW events JavaScript’s interaction with HTML is handled through events that occur when the user or the browser manipulates a page.(When the page loads, itis called an event. When: the user clicks a button, that click too is an event. Other examples include events like Pressing any key, closing a window, resizing a window, etc. Developers can use these sponses, Which cause buttons to close windows, events to execute JavaScript coded res i messages to be displayed to users, data to be validated and virtually any other type of Tesponse. Events are a part of the D clement contains a set of even: Advancad Japs Example Program \Abtmis

Click the following button and see result

Output Click the following button and see result | Say Hello | On clicking this button, it will display “Hello World”, 5.1.2 onkeydown Event onkeydown is an event that example shows how to use onk occurs when We try to pre eydown. Example Program

Type in the following text box and see result

Name:

Output “ype in the following text box and see result Name This page says key pressed down 5.1.3 onchange Event This event is generated when an HTML element has been changed. For example, this event happens when we change the contents of a text box. Following program illustrates this. Example Program i Output This page Say Name :[Markdavd | | content changed \ 81.4 onload Event an HTML page is loaded. The following This event is generated when illustrates this. Example Program * type="text/javascript"> function sayLoad() { alert ("Finished loading the page") ) script> Output This page says Finished loading the page6 Hiancad JavaSenipt gxample Program antl? ody” : j this example demonstrates how to assign an “onmouseover” Prmouseout* event to a hl element.

nt id="demo" onmouseovers "mouseOver ()" | pmouseout="mousedut ()">Mouse over me escript> function mouseOver() { document .getElementById ("demo") .style.color = "red"; function mouseOut() { document .getElementById ("demo") .style.color = "black"; t Output example demonstrates how to assign an “onmouseover” and “onmouseout” event 10 a bi element. Mouse over me "When the mouse is over the text “Mouse over me”, its color will be changed when mouse moves out of this text, the color will turn to black. BEEZH Pop-up BOXES pe JavaScript supports three important types of pop-up boxes. be used to raise an alert, or to get confirmation on any input or from the users. 5.2.1 Alert We havé already seen alert pop-up boxes 's mostly used to give a warning message ‘equires entering some text but the user ¢ Validation, we can use an alert » Fe for friendlieror Aisin Example Program «scr? ‘

Click the following button to see the result:

)

Output Click the following t lick the following button to see the result | This page says Glick Me This is a warning message! \_ 52.2 Prompt The prompt pop-up box is very useful when we want to p user input. Thus, it enables us to interact with the user. The and then click OK. This pop-up box is displayed using takes two parameters: (i) a label which we want to displ default string to display in the text box. 2 window method prompt() will return the entes clicks the Cancel button, the window method pa illustrates this. r Example Programaaa Maancad Jara Serine escript type="text/javascript">

Click the following button to see the result:

Output This page says Enter your nat = —- Cick the following button to see the result: Click Me) 5.2.3 Confirm A confirmation pop-up box is mostly used to take user’s consent displays a dialog box with two buttons: OK and Cancel. sae If the user clicks on the OK button, the window method conf the user clicks on the Cancel button, then coni confirmation pop-up box as follows. Following Example Program z= true af if( retval nyser wants to ent.write ( docum return true; } else{ é document.write ("User does not want t continue!"); return false; } } ia

Click the following button to see the res'

Output This page says Click the following bi 'g Dutton to see the result : Do you want to continue ? Click Me iene eae Wikre: oo reepranoad Jawa Serine WA 1. charAt0: This method returns the character at the specified index. concat(): Combines the text of two strings and returns a new string. string Methods . indexOf(: Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found. . replace(): Used to find a match between a regular expression and a string and to replace the matched substring with a new substring, . substring(): Returns the characters in a string between two indexes into the string. .. toLowerCase(): Returns the calling string value converted to lowercase. . toUpperCase(): Returns the calling string value converted to uppercase. . toString(): Returns a string representing the specified object. . valueOf(): Returns the primitive value of the specified object. Example Program khtml> ; ead ‘