Professional Documents
Culture Documents
11
ALGORITHM: 1. Design the login page. Username and Password are text fields, a CheckboxRemember me, Submit button, a link to the register page.
2. Design the register page to contain the following. Username, password, date of birth, address, phone number, submit and reset buttons.
3.
Using JavaScript perform validations for username, password, dob, phone number in the register page.
4. These entries are mandatory. Username must start with character, password and confirm password must match and must be of 4 characters only. Phone number should be 8 digit.
5. An alert box specifies the correct format for each data appears if the user moves from one field to another.
6. The login page checks for username match. If the remember me checkbox is selected, the password field appears.
DEFINITION: JavaScript is a scripting language designed to add interactivity to the HTML page.It is usually embedded directly to the html pages. DESCRIPTION: Description JavaScript variables Definition Declared using the var keyword. A variable declared within a function has a local scope. Variable declared without the var keyword ahs a global scope. Assigning values to variables that have not yet been declared also are global. + addition -Sub * Multiplication /Division % Modulus ++ Increment --Decrement = += -= *= %= /= = is equal to == stricty equal to > Greater than < Lesser than <= Lesser than or equal Usage var x=5; var car; x=x+y; y=z-6;
Arithmetic Operators:
Assignment Operators
x=y x+=y y-=z y*=z x%=z x/=z Given that x=5, x=8 is false x===5 is false x===5 is true
Comparison Operators
Logical Operators
to >= Greater than or equal to != Not equal to To determine the logic between two variables && || !
Conditional Statements
If..else if(condition) { Code } else { Code } Switch statements switch(v) {case 1: execute code break; case2: execute code break; default: } Alert Box: When an alert box comes, user will have to click OK to proceed. Confirm Box: When a confirm box pops up , the user has to click either OK or Cancel to proceed. Prompt box: Used when the user has to enter value before entering the page. A function contains code that will be executed by an event or call to the function.
Popup Boxes
Functions
Loops
Return statement specifies value to be returned by the function. for(;;) do while while for ..in
Events
Objects
Regular Expression
onLoad and upLoad <form name="login_form" events are triggered onsubmit="login_check();"> when user enters or leaves the page.Often used to deal with cookies. onSubmit event triggers when submit button is clicked. onMouseOver when mouse is over an HTML element. onFocus,onBlur,onchange are used in combination mith validation of form fields. The backslash is used to Code Output insert \ single apostrophes,quotes, and quote other spl characters. \ double quote \\ backslash An object has method var text=hello world and properties. document.write(text.length); Properties are values op:11 associated with the document.write(toUpperCase(t object. ext)); Methods are actions that op:HELLO WORLD can be performed on objects. It is an object that var patt=/pattern/ describes a pattern of var patt=new RegExp(e); characters. document.write(pat.test(cse)
test() is a function that searches a string for a specified value and returns true or false,depending on the result. exec() searches string for a particular value and returns the text of the found value.
CODE: //page.html <frameset cols="50%,50%"> <frame src="main.html" name="1"> <frame src="new.html"name="2"> </frameset>
//main.html <html> <head> <body> <h1><b> WELCOME TO STUDENT MAIL !! :)</b></H1> <h3> new user</h3><br> <a href="new.html" target="2"> create account</a><br> <h3> existing user</h3><br> <a href="exist.html" target="2"> sign in</a><br> </body> </head> </html>
//new.html <html> <head> <script language="javascript" type="text/javascript"> function check() { var x=document.f1.t1.value; var x1=x.charAt(0); if(!isNaN(x1)) window.alert("enter alphabet");
var a = document.f1.t4.value; if(a.length<8) window.alert("phone no should be of 8 digits"); for(i=0;i<8;i++) { if(isNaN(a.charAt(i))) window.alert("phone no cannot contain characters"); }
//var r=new RegExp(/^\[1-31]+\/+[1-12]+\/+[1990-2011]+$/) var r=/^\d{2}\/\d{2}\/\d{4}/; if(r.test(b)) window.alert("date correct"); else window.alert("entered date incorrect"); }
//exist.html <html> <head> <script language="javascript" type="text/javascript"> var n=new Array("aaa","bbb","ccc","ddd"); var p=new Array("111","222","333","444"); function check1() { var x=document.f1.t1.value; var y=document.f1.t2.value; var f=0; for(var i=0;i< n.length;i++) { if(x==n[i]) { f=1;
var k=i; break; } } if(f==1) { if(y==p[k]) window.alert("login successful"); else window.alert("invalid password"); } else window.alert("invalid user"); }
function remember() { var a=document.f1.c1.value; document.f1.c1.value=false; var x=document.f1.t1.value; var y=document.f1.t2.value; var n = new Array("aaa", "bbb", "ccc", "ddd"); var p = new Array("111", "222", "333", "444"); if (document.f1.c1.value=true)
{ for (var i=0; i <n.length; i++) { if (x== n[i]) { document.f1.t2.value=p[i]; } } } } </script> </head> <body> <form name=f1>
<label>
OUTPUT:
New user:
Existing user: