Web Design and Development Lecture 14 Java Script

Web Design and Development Lecture # 14 Java. Script And Form Validation Instructor: Rida Noor Department of Computer Science

Javascript popup Boxes

Popup Boxes �Java. Script has three types of popup boxes: �Alert box �Confirm box �Prompt box. 3

Alert Box �An alert box is often used when you want to display information to the user. When an alert box pops up, the user will have to click OK to proceed. �The syntax is as follows: �alert("sometext"); 4

Alert Box 5

Confirm Box �A confirm box is often used if you want the user to verify or accept something. When a confirm box pops up, the user will have to click either OK or Cancel to proceed. �If the user clicks OK, the box returns true. If the user clicks Cancel, the box returns false. � The syntax is as follows: �confirm("sometext"); 6

Prompt Box �A prompt box is often used if you want the user to input a value while on a page or from a page. When a prompt box pops up, the user will have to click either OK or Cancel to proceed after entering an input value. �If the user clicks OK, the box returns the input value. If the user clicks Cancel, the box returns null. �The syntax is as follows: �prompt("sometext", "defaultvalue"); 7

Prompt Box 8

Javascript Applications

Java. Script Can Change Images �This example changes an HTML image, by changing the src attribute of an <img> tag: 10

Java. Script Can Change Images �Note: Place above two images pic_bulboff. gif and pic_bulbon. gif in images folder in your project. �Write Javascript as follow and check results: 11

Java. Script Can Change HTML Styles (CSS) �Changing the style of an HTML element, is a variant of changing an HTML attribute: 12

Java. Script Can Change HTML Styles (CSS) �Write Javascript as follow and check results: 13

Java. Script Can Validate Data �Java. Script is often used to validate input: 14

Java. Script Can Validate Data �Write Javascript as follow and check results: 15

Form Validation

Form Validation �Create a new html page. Save it as sign. Up. php. Create following form: 17

Form Validation �Click on code view and change followings: 18

Form Validation 19

Form Validation Java. Script �Write the following script in head section of sign. Up. html page: 20

Java. Script (cont’d) 21

Form Validation Results 22