CSS(JavaScript) Practical Programs by VJTech Academy
Practical No 1: Write simple JavaScript with HTML for arithmetic expression evaluation and
message printing.
<html>
<body>
<script language="javascript" type="text/javascript">
var a,b,c;
a=parseInt(prompt("Enter first no:"));
b=parseInt(prompt("Enter second no:"));
c=a+b;
document.write("<br>Addition="+c);
c=a-b;
document.write("<br>Subtraction="+c);
c=a*b;
document.write("<br>Multiplication="+c);
c=a/b;
document.write("<br>Division="+c);
c=a%b;
document.write("<br>Reminder="+c);
a++;
document.write("<br>Value of a after increment="+a);
b--;
document.write("<br>Value of b after decrement="+b);
</script>
</body>
</html>
CSS(JavaScript) Practical Programs by VJTech Academy
Practical No2:-Develop JavaScript to use decision making and looping statements
I) If statement:
<html>
<body>
<script language="javascript" type="text/javascript">
var a,b;
a=parseInt(prompt("Enter first no:"));
b=parseInt(prompt("Enter second no:"));
if(a==b)
{
document.write("<br>Both numbers are equal");
}
document.write("<br>End of Program");
</script>
</body>
</html>
2) If-Else statement:
<html>
<body>
<script language="javascript" type="text/javascript">
var a,b;
a=parseInt(prompt("Enter first no:"));
b=parseInt(prompt("Enter second no:"));
if(a==b)
{
document.write("<br>Both numbers are equal");
}
else
{
document.write("<br>Both numbers are not equal");
}
document.write("<br>End of Program");
</script>
</body>
</html>
CSS(JavaScript) Practical Programs by VJTech Academy
3) Else-If Ladder:
<html>
<body>
<script language="javascript" type="text/javascript">
var marks;
marks=parseInt(prompt("Enter your marks:"));
if(marks>=75)
{
document.write("<br>You got distinction");
}
else if(marks>=60)
{
document.write("<br>You got first class");
}
else if(marks>=40)
{
document.write("<br>You are pass only");
}
else
{
document.write("<br>You are fail");
}
</script>
</body>
</html>
4) switch case statement:
<html>
<body>
<script language="javascript" type="text/javascript">
var ch;
ch=parseInt(prompt("Enter number between 1 to 3:"));
switch(ch)
{
case 1: document.write("You have entered ONE");
break;
case 2: document.write("You have entered TWO");
break;
case 3: document.write("You have entered THREE");
break;
default: document.write("Invalid Input");
break;
}
</script>
</body>
</html>
CSS(JavaScript) Practical Programs by VJTech Academy
5) For loop statement
<html>
<body>
<script language="javascript" type="text/javascript">
for(i=1;i<=5;i++)
{
document.write("<br>VJTech Academy");
}
</script>
</body>
</html>
OUTPUT
VJTech Academy
VJTech Academy
VJTech Academy
VJTech Academy
VJTech Academy
6) While loop
<html>
<body>
<script language="javascript" type="text/javascript">
var i=1;
while(i<=5)
{
document.write("<br>VJTech Academy");
i++;
}
</script>
</body>
</html>
OUTPUT
VJTech Academy
VJTech Academy
VJTech Academy
VJTech Academy
VJTech Academy
CSS(JavaScript) Practical Programs by VJTech Academy
7) Do While loop:
<html>
<body>
<script language="javascript" type="text/javascript">
var i=1;
do
{
document.write("<br>VJTech Academy");
i++;
}while(i<=5);
</script>
</body>
</html>
OUTPUT
VJTech Academy
VJTech Academy
VJTech Academy
VJTech Academy
VJTech Academy
8) for in loop
<html>
<body>
<script language="javascript" type="text/javascript">
var num_arr=new Array(10,20,30,40,50);
document.write("Array Elements:");
for(x in num_arr)
{
document.write(" "+num_arr[x]);
}
</script>
</body>
</html>
OUTPUT:
Array Elements: 10 20 30 40 50
CSS(JavaScript) Practical Programs by VJTech Academy
Practical No-3. Develop JavaScript to implements Array functionalities
1) Array created using new keyword
<html>
<body>
<script language="javascript" type="text/javascript">
var a=new Array(10,20,30,40,50);
document.write("Array Elements:");
for(i=0;i<a.length;i++)
{
document.write(" "+a[i]);
}
</script>
</body>
</html>
2) Array created using literals
<html>
<body>
<script language="javascript" type="text/javascript">
var a=[10,20,30,40,50];
document.write("Array Elements:");
for(i=0;i<a.length;i++)
{
document.write(" "+a[i]);
}
</script>
</body>
</html>
CSS(JavaScript) Practical Programs by VJTech Academy
Practical No-4. Develop javascript to implement functions
<html>
<body>
Enter any number:<input type="text" id="tf1">
<input type="button" name="b1" value="Check Even/Odd" onclick="Display()">
<script language="javascript" type="text/javascript">
function Display()
{
var no=document.getElementById("tf1").value;
if(no%2==0)
{
alert("Number is Even");
}
else
{
alert("Number is Odd");
}
}
</script>
</body>
</html>
Practical No-5. Develop JavaScript to implement Strings.
<html>
<body>
<script language="javascript" type="text/javascript">
var str=new String("VJTech");
document.write("Original String:"+str);
document.write("<br>Length of string:"+str.length);
document.write("<br>Concate Method:"+str.concat("Academy"));
document.write("<br>toLowerCase Method:"+str.toLowerCase());
document.write("<br>toUpperCase Method:"+str.toUpperCase());
document.write("<br>Character present at index 2 :"+str.charAt(2));
</script>
</body>
</html>
OUTPUT
Original String:VJTech
Length of string:6
Concate Method:VJTechAcademy
toLowerCase Method:vjtech
toUpperCase Method:VJTECH
Character presen
CSS(JavaScript) Practical Programs by VJTech Academy
Practical No-6. Create web page using Form Elements
<html>
<body>
<form name="myform">
Enter Full Name:<input type="text" name="tf1"><br><br>
Enter Mobile No:<input type="number" name="tf2"><br><br>
Select Gender:<input type="radio" name="r1" value="Male">Male
<input type="radio" name="r1" value="Female">Female
<input type="radio" name="r1" value="Other">Other <br><br>
<input type="checkbox" name="c1" value="bike">I like bike
<input type="checkbox" name="c2" value="car">I like car <br><br>
<input type="submit" name="b1" value="Submit">
<input type="reset" name="b2" value="Reset">
</form>
</body>
</html>
CSS(JavaScript) Practical Programs by VJTech Academy
Practical No-7: Create web page to implement Form Events.
<html>
<body>
<form name="myform">
<input type="button" name="b1" value="Single Click" onclick="Display1()">
<input type="button" name="b2" value="Double Click" ondblclick="Display2()">
<input type="button" name="b3" value="On Mouse Over"
onmouseover="Display3()">
<input type="button" name="b4" value="On Mouse Out"
onmouseout="Display4()">
</form>
<script language="javascript" type="text/javascript">
function Display1()
{
alert("Single on click Event Occurred");
}
function Display2()
{
alert("Double on click Event Occurred");
}
function Display3()
{
alert("On Mouse over Event Occurred");
}
function Display4()
{
alert("On Mouse out Event Occurred");
}
</script>
</body>
</html>
Practical No-8: Create web page to implement Form Events. Part II
<html>
<body onload="alert('onload event occurred')" onunload="alert('onunload event occurred')">
Enter Name:<input type="text" name="tf1" onkeypress="alert('OnKeyPress Event
Occurred')"><br><br>
Enter Mobile No:<input type="number" name="tf2" onkeydown="alert('OnKeyDown event
Occurred')" ><br><br>
Enter Email Id:<input type="text" name="tf3" onkeyup="alert('OnKeyUp event
occurred')"><br><br>
Enter Feedback:<input type="text" name="tf4" onfocus="alert('onfocus event occurred')"
onblur="alert('onblur event occurred')">
</body>
</html>
CSS(JavaScript) Practical Programs by VJTech Academy
Practical No:-9 Develop a webpage using intrinsic java functions, Disable/Enable Elements and
Make Readonly element
<html>
<body>
<form name="myform">
Enter Name:<input type="text" id="tf1">
<input type="button" name="b1" value="Enable" onclick="EnableFunction()">
<input type="button" name="b2" value="Disable" onclick="DisableFunction()">
<br><br>
Country Name:<input type="text" id="tf2">
<input type="button" name="b3" value="Read Only" onclick="ReadOnlyFunction()">
<br><br>
<img src="submit.png" width="50px" height="50px"
onclick="javascript:document.forms.myform.submit()">
</form>
<script language="javascript" type="text/javascript">
function EnableFunction()
{
document.getElementById("tf1").disabled=false;
}
function DisableFunction()
{
document.getElementById("tf1").disabled=true;
}
function ReadOnlyFunction()
{
document.getElementById("tf2").readOnly=true;
}
</script>
</body>
</html>
CSS(JavaScript) Practical Programs by VJTech Academy
Practical No:-10.Develop a webpage for creating session and persistent cookies. Observe the
effects with browser cookies settings.
<html>
<body>
Enter Cookie Name:<input type="text" id="tf1"><br><br>
Enter Cookie Value:<input type="text" id="tf2"><br><br>
<input type="button" name="b1" value="Create Cookie" onclick="CreateCookie()">
<input type="button" name="b2" value="Read Cookie" onclick="ReadCookie()">
<input type="button" name="b3" value="Update Cookie" onclick="UpdateCookie()">
<input type="button" name="b4" value="Delete Cookie" onclick="DeleteCookie()">
<script language="javascript" type="text/javascript">
function CreateCookie()
{
var nm=document.getElementById("tf1").value;
var val=document.getElementById("tf2").value;
document.cookie=nm+"="+val+";expires=Wed, 01 Jan 2025 00:00:00 UTC";
alert("Cookie created successfully");
}
function ReadCookie()
{
var x=document.cookie;
alert("All Cookies:"+x);
}
function UpdateCookie()
{
var nm=document.getElementById("tf1").value;
var val=document.getElementById("tf2").value;
document.cookie=nm+"="+val;
alert("Cookie updated successfully");
}
function DeleteCookie()
{
var nm=document.getElementById("tf1").value;
document.cookie=nm+"="+";expires=Wed, 01 Jan 1970 00:00:00 UTC";
alert("Cookie deleted successfully");
}
</script>
</body>
</html>
