Scribd
Upload
44 views

Java Script Assg

The document contains code snippets demonstrating the use of different JavaScript functions including alerts, prompts, confirms, event handling, form validation, and registration forms. It includes multiple examples of using JavaScript to validate user input, handle events like clicks and key presses, and create pop-up boxes to display messages to users. The snippets cover concepts like validating email addresses and passwords, handling form submissions, and manipulating the DOM.

Uploaded by

ashpatil1265
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
44 views

Java Script Assg

The document contains code snippets demonstrating the use of different JavaScript functions including alerts, prompts, confirms, event handling, form validation, and registration forms. It includes multiple examples of using JavaScript to validate user input, handle events like clicks and key presses, and create pop-up boxes to display messages to users. The snippets cover concepts like validating email addresses and passwords, handling form submissions, and manipulating the DOM.

Uploaded by

ashpatil1265
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 21

Demonstrate use of different dialog/popup boxes in Java script (Alert , Prompt, Confirm)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language= "javascript">
function demo()
{
alert("Wel come in Java Script");
}
function demo1()
{
confirm("Are you sure?");
}
function demo2()
{
a=prompt("enter value of a”);
alert(a);
}

</script>
</HEAD>

<BODY>
<input type="button" value="Alert" onclick="demo();">
<input type="button" value="Confirm" onclick="demo1();">
<input type="button" value="Prompt" onclick="demo2();">

</BODY>
</HTML>
Fibonacci Series JavaScript Program (for beginners)
This is a simple JavaScript example program for Fibonacci sequence.

<html>
<body>
<script type="text/javascript">
var a=0,b=1,c;
document.write("Fibonacci");
while (b<=10)
{
document.write(c);
document.write("<br/>");
c=a+b;
a=b;
b=c;
}
</script>
</body>
</html>

//Demonstration of document.getElementByID().value;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language= "javascript">
function showname()
{
a=document.getElementById("txtname").value;
alert(a);
}

</script>
</HEAD>

<BODY>
<form>
Name - <input type="text" id="txtname" ><br><br>
<input type="button" value="Show My Name" onclick="showname();" >
</form>
</BODY>
</HTML>

// Demonstrate use of java script Events. (Minimum Five )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<script language= "javascript">

function funblur()

var x = document.getElementById("fname");

x.value=x.value.toUpperCase();

//Event—OnChange--

function ColorChange()

clr = document.getElementById("color").value;

document.bgColor=clr;

function sel()

{
alert("You can not change price value");

document.getElementById("price").disabled=true;

function pageload()

alert("wellcome user in website");

function pageunload()

alert("Thank you user for visiting my website");

function key1()

Key=event.keyCode;

alert("U Pressed key on keyboard");

function sub()

alert("R you ready to submit form");

</script>

</HEAD>

<BODY onload="pageload();" onunload="pageunload()">

<h1 onMouseOver='style.background="blue"' onMouseout='style.background="red"'>JavaScript


Events</h1>
<form onsubmit="sub();">

Enter Your Name - <input type="text" id="fname" Onblur="funblur();"><br><br>

Choose Your Background Color:

<select id = "color" OnChange="ColorChange()">

<option value="Red">Red</option>

<option value="Blue">Blue</option>

<option value="Green">Green</option>

</select><br><br>

Item Price - <input type="text" id="price" value="Rs.500" OnSelect="sel();"><br><br>

Press Key in TextBox - <input type="text" id="key" onkeypress="key1()"><br><br>

<input type="submit" value="submit" ><input type="Button" value="Print" onclick='window.print();'>

</form>

</BODY>

</HTML>
// Demonstrate use of java script form validations. (Minimum Five)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!doctype html>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<script language="javascript">

function onlychar()

key1=window.event.keyCode;//only for Internet explore

if((key1>=97&&key1<=122)||(key1>=65&&key1<=90))

return true;

else

alert("accept only chars");

return false;

}
function onlynum()

key1=window.event.keyCode;//only for Internet explore

if(key1>=48&&key1<=57)

return true;

else

alert("accept only numbers");

return false;

function checknull()

m=document.getElementById("txtmob").value;

if(m=="")

alert("Mob No not valid");

document.getElementById("txtmob").focus();

return false;

else if(document.getElementById("txtmob").value.length!=10)

{
alert("Mob No should have min 10");

document.getElementById("txtmob").focus();

function checkpass()

p1=document.getElementById("fpass").value;

p2=document.getElementById("rpass").value;

if(p1!=p2)

alert("Both password should be same");

document.getElementById("fpass").value="";

document.getElementById("rpass").value="";

document.getElementById("fpass").focus();

return false;

function emailval()

atpos=document.getElementById("email").value.indexOf("@");

dotpos=document.getElementById("email").value.lastIndexOf(".com");

if(atpos<1||dotpos-atpos<2)
{

alert("Invalid Email");

return false;

</script></HEAD>

<BODY>

<form>

Name<input type="text" id="txtname" onKeyPress="return onlychar();"> <br>

Mobile Number<INPUT TYPE="text" id="txtmob" onKeyPress="return


onlynum();"onblur="checknull()"><br>

Password<INPUT TYPE="password" id="fpass" ><br>

ReType Pasword<INPUT TYPE="password" id="rpass" onblur="checkpass()"><br>

Email<INPUT TYPE="text" id="email" onblur="emailval()"><br>

<INPUT TYPE="submit" value="submit">

</form>

</BODY>

</HTML>
Login Form Using JavaScript Validation

<!DOCTYPE html>

<html>

<head>

<title>LOGIN FORM VALIDATION</title>

</head>

<body>

<h2>LOGIN FROM</h2>

<form method="post" onsubmit="validation()">

<input type="text" id="uname" placeholder="user name"><br>

<input type="text" id="pswd" placeholder="password"><br>

<input type="submit" value="Submit" id="sub">

</form>

<script>

function validation(){

var un=document.getElementById('uname').value;

var ps=document.getElementById('pswd').value;

if (un == "manoj" && ps == "patil"){

window.alert("Login Successful");

else{

window.alert("Login Failed");

</script>
</body>

</html>

Registration Form

<html>

<head>

<script>

function reg() {

var name =document.forms.RegForm.Name.value;

var email =document.forms.RegForm.EMail.value;

var phone =document.forms.RegForm.Telephone.value;

var what =document.forms.RegForm.Subject.value;

var password =document.forms.RegForm.Password.value;

var address =document.forms.RegForm.Address.value;

var regEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g; //Javascript reGex for Email


Validation.

var regPhone=/^\d{10}$/; // Javascript reGex for Phone Number validation.

var regName = /\d+$/g; // Javascript reGex for Name validation

if (name == "" || regName.test(name)) {

window.alert("Please enter your name properly.");

name.focus();

return false;

}
if (address == "") {

window.alert("Please enter your address.");

address.focus();

return false;

if (email == "" || !regEmail.test(email)) {

window.alert("Please enter a valid e-mail address.");

email.focus();

return false;

if (password == "") {

alert("Please enter your password");

password.focus();

return false;

if(password.length <6){

alert("Password should be atleast 6 character long");

password.focus();

return false;

}
if (phone == "" || !regPhone.test(phone)) {

alert("Please enter valid phone number.");

phone.focus();

return false;

if (what.selectedIndex == -1) {

alert("Please enter your course.");

what.focus();

return false;

return true;

</script>

<style>

div {

box-sizing: border-box;

width: 100%;

border: 100px solid black;

float: left;

align-content: center;

align-items: center;

}
form {

margin: 0 auto;

width: 600px;

</style>

</head>

<body>

<h1 style="text-align: center;">REGISTRATION FORM</h1>

<form name="RegForm" onsubmit="return reg()" method="post">

<p>Name: <input type="text" size="65" name="Name" /></p>

<br />

<p>Address: <input type="text" size="65" name="Address" />

</p>

<br />

<p>E-mail Address: <input type="text" size="65" name="EMail" /></p>

<br />
<p>Password: <input type="text" size="65" name="Password" /></p>

<br />

<p>Telephone: <input type="text" size="65" name="Telephone" /></p>

<br />

<p>

SELECT YOUR COURSE

<select type="text" value="" name="Subject">

<option>MBA</option>

<option>MCA</option>

<option>BCA</option>

</select>

</p>

<br />

<br />

<p>Comments: <textarea cols="55" name="Comment"> </textarea></p>

<p>
<input type="submit" value="send" name="Submit" />

<input type="submit" value="Reset" name="Reset" />

</p>

</form>

</body>

</html>

Registration Form 2

<!DOCTYPE html>

<html>

<head>

<title>Welcome To Registration Form</title>

<script type="text/javascript">

function registration()

var name= document.getElementById("t1").value;

var email= document.getElementById("t2").value;


var uname= document.getElementById("t3").value;

var pwd= document.getElementById("t4").value;

var cpwd= document.getElementById("t5").value;

//email id expression code

var pwd_expression = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-])/;

var letters = /^[A-Za-z]+$/;

var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

if(name=='')

alert('Please enter your name');

else if(!letters.test(name))

alert('Name field required only alphabet characters');

else if(email=='')

alert('Please enter your user email id');

else if (!filter.test(email))

alert('Invalid email');

}
else if(uname=='')

alert('Please enter the user name.');

else if(!letters.test(uname))

alert('User name field required only alphabet characters');

else if(pwd=='')

alert('Please enter Password');

else if(cpwd=='')

alert('Enter Confirm Password');

else if(!pwd_expression.test(pwd))

alert ('Upper case, Lower case, Special character and Numeric letter are required in Password
filed');

else if(pwd != cpwd)

alert ('Password not Matched');

else if(document.getElementById("t5").value.length < 6)


{

alert ('Password minimum length is 6');

else if(document.getElementById("t5").value.length > 12)

alert ('Password max length is 12');

else

alert('Thank You for Registration & You are Redirecting to Website');

// Redirecting to other page or webste code.

window.location = "https://www.w3schools.com//";

</script>

</head>

<body>

<!-- Main div code -->

<div id="main">

<div class="h-tag">

<h2>Register Your Account</h2>

</div>

<!-- create account div -->

<div class="login">
<table cellspacing="2" align="center" cellpadding="8" border="0">

<tr>

<td align="right">Enter Name :</td>

<td><input type="text" placeholder="Enter user here" id="t1" class="tb" /></td>

</tr>

<tr>

<td align="right">Enter Email ID :</td>

<td><input type="text" placeholder="Enter Email ID here" id="t2" class="tb" /></td>

</tr>

<tr>

<td align="right">Enter Username :</td>

<td><input type="text" placeholder="Enter Username here" id="t3" class="tb" /></td>

</tr>

<tr>

<td align="right">Enter Password :</td>

<td><input type="password" placeholder="Enter Password here" id="t4" class="tb" /></td>

</tr>

<tr>

<td align="right">Enter Confirm Password :</td>

<td><input type="password" placeholder="Enter Password here" id="t5" class="tb" /></td>

</tr>

<tr>

<td></td>

<td>

<input type="reset" value="Clear Form" id="res" class="btn" />


<input type="submit" value="Create Account" class="btn" onclick="registration()" /></td>

</tr>

</table>

</div>

<!-- create account box ending here.. -->

</div>

<!-- Main div ending here... -->

</body>

</html>

You might also like