Assignment no -10
Aim: Write a javascript program to demonstrate array in javascript.
Program:
1)
<html>
<head>
</head>
<body>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var stud=["girish","akshith","vivek"]; var
studdet=["girish","bhandup",22];
document.getElementById("demo").innerHTML=stud;
document.getElementById("demo1").innerHTML=stud[0]+"<br>"+stud[1]+"<br>"+stud
[2];
document.getElementById("demo2").innerHTML="Student name: "+studdet[0]+"<br>"+
"Student address: "+studdet[1]+"<br>"+
"Student age: "+studdet[2];
var stud1={name:"girish",add:"remo",age:22};
document.getElementById("demo2").innerHTML="Student name:
"+stud1["name"]+"<br>"+
"Student address: "+stud1["add"]+"<br>"+
"Student age: "+stud1["age"];
</script>
</body>
</html>
Output:
2) array methods:
<html>
<body>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>
<p id="demo6"></p>
<p id="demo7"></p>
<script>
var stud=["girish","akshith","vivek"]; var
stud1=["remo","Kundar","bhanse"];
document.getElementById("demo").innerHTML="Array Element Before Push
method: "+stud;
stud.push("amey");
document.getElementById("demo1").innerHTML="Array Element After Push method:
"+stud;
stud.pop("amey");
document.getElementById("demo2").innerHTML="Array Element After pop method:
"+stud;
stud.shift("nitin");
document.getElementById("demo3").innerHTML="Array Element After shift method:
"+stud;
stud.unshift("abhishek");
document.getElementById("demo4").innerHTML="Array Element After unshift method:
"+stud;
document.getElementById("demo5").innerHTML="Array Element After concat method:
"+stud.concat(stud1);
document.getElementById("demo6").innerHTML="Array Element After sort method:
"+stud;
stud1.reverse();
document.getElementById("demo7").innerHTML="Array Element After reverse method:
"+stud1;
</script>
</body>
</html>
Output:
Practical No:11
Aim: Write a program to demonstrate event handling in javascript.
Program:
1)
<html>
<body>
<script>
</script>
<button onclick="alert('eventdemo')">Click here</button><br><br>
<button ondblclick="alert('eventdemo')">Click</button>
</body>
</html>
Output:
2)
<html>
<body>
<img src="Lighthouse.jpg" onmouseover="changeImg(this)"
onmouseout="normalImg(this)" width="200" height="200">
<script>
function changeImg(a)
{
a.style.height="300px";
a.style.width="300px";
}
function normalImg(a)
{
a.style.height="200px";
a.style.width="200px";
}
</script>
</body>
</html>
Output:
Practical No-12
Aim: Write a program to demonstrate form field validation
Program:
<html>
<head>
<script>
function validate()
{
var name=document.forms["form1"]["t1"];
var address=document.forms["form1"]["t2"];
var email=document.forms["form1"]["t3"];
var password=document.forms["form1"]["t4"];
var mobile=document.forms["form1"]["t5"];
var course=document.forms["form1"]["s1"];
if(name.value=="")
{
alert("please enter your name");
name.focus();
return false;
}
if(address.value=="")
{
alert("please enter your address");
address.focus();
return false;
}
if(email.value=="")
{
alert("please enter your email");
email.focus();
return false;
}
if(email.value.indexOf("@",0)<0)
{
alert("please enter valid email");
email.focus();
return false;
}
if(email.value.indexOf(".",0)<0)
{
alert("please enter correct email id");
email.focus();
return false;
}
if(password.value=="")
{
alert("please enter password");
password.focus();
return false();
}
if(mobile.value=="")
{
alert("please enter mobile number");
mobile.focus();
return false();
}
if(course.value=="")
{
alert("please select course");
course.focus();
return false();
}
}
</script>
</head>
<body>
<form name="form1">
<h1 align="center">Registration Form</h1>
<table align="center">
<tr>
<td><font color="red">*</font>Name:</td>
<td><input type="text" name="t1" required></td>
<td><p id="p1" style="color:red;"></p></td>
</tr>
<tr>
<td><font color="red">*</font>Address:</td>
<td><textarea rows="5" cols="22"
name="t2"></textarea></td>
<td><p id="p6" style="color:red;"></p></td>
</tr>
<tr>
<td><font color="red">*</font>Email:</td>
<td><input type="text" name="t3" required></td>
<td><p id="p2" style="color:red;"></p></td>
</tr>
<tr>
<td><font color="red">*</font>Password:</td>
<td><input type="password" name="t4" required></td>
<td><p id="p4" style="color:red;"></p></td>
</tr>
<tr>
<td><font color="red">*</font>Mobile:</td>
<td><input type="text" name="t5" required></td>
<td><p id="p3" style="color:red;"></p></td>
</tr>
<tr>
<td><font color="red">*</font>Select Your
Course:</td>
<td><select id="s1" required>
<option value="">Select</option>
<option value="MCA">MCA</option>
<option value="MMS">MMS</option>
<option value="BBI">BBI</option>
</select></td>
<td><p id="p5" style="color:red;"></p></td>
</tr>
<tr>
<td>Comment:</td>
<td><textarea rows="5" cols="22"
name="t6"></textarea></td>
<td><p id="p6" style="color:red;"></p></td>
</tr>
<tr>
<td colspan="3" align="center">
<button type="button" onclick="validate()">SUBMIT</button>
<input type="reset" value="RESET"></input>
</td>
</tr>
</table>
</form>
</body>
</html>
Output:
Practical NO-13
Aim: Write a program to demonstrate the simple calculating operation of addition
subtraction, multiplication and division.
Program:
<html>
<head>
<title>JavaScript program to calculate multiplication and division of two
numbers </title>
<style type="text/css">
body {margin: 30px;}
</style>
<script>
function additionBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = Number(num1)
+ Number(num2);
}
function substractBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = Number(num1) -
Number(num2); }
function multiplyBy()
{
num1 = document.getElementById("firstNumber").value; num2 =
document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num1 * num2;
}
function divideBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num1 / num2;
}
function modulusBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num1 % num2;
}
</script>
</head>
<body>
<form>
1st Number : <input type="text" id="firstNumber" /><br><br>
2nd Number: <input type="text" id="secondNumber" /><br>
<input type="radio" onClick="additionBy()" Value="r1" name="r1" />Addition
<input type="radio" onClick="substractBy()" Value="r1" name="r1" />Substract
<input type="radio" onClick="multiplyBy()" Value="r1" name="r1" />Multiply
<input type="radio" onClick="divideBy()" Value="r1" name="r1" />Division
<input type="radio" onClick="modulusBy()" Value="r1" name="r1" />Modulus
</form>
<p>The Result is : <br>
<span id = "result"></span>
</p>
</body>
</html>
Output:
Practical No-14
Aim: Write a program to demonstrate to find square of a number.
Program:
<html>
<head>
<script>
function square()
{
num1 = document.getElementById("number").value;
document.getElementById("result").innerHTML=num1 * num1;
}
</script>
<head>
<body>
<h1> Square Of Number</h1>
Enter Number: <input type="text" id="number"><br><br>
<input type="button" onClick="square()" value="square">
<p>The Result is : <br>
<span id = "result"></span>
</p>
</body>
</html>
Output:
