For Lab Report : Program 1 to 15
Program 1. Write Java Script program to display date and time. [Use Date() object]
<script type="text/javascript">
var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var m = new Date();
var dateString = m.getDate() +" "+ (months[m.getMonth()]) +" "+ m.getFullYear() + " " + m.getHours() + ":" + m.getMinutes();
document.write(dateString);
</script>
Program 2. Write a program using JavaScript to test whether the given number is even or odd.
<script type="text/javascript">
var num;
num=parseInt(prompt("Enter any number : "));
if(num%2==0)
document.write (" Even number ");
else
document.write ("Odd number ");
</script>
Program 3. Write a program using JavaScript to display greatest number among three entered numbers by user.
<script type="text/javascript">
var num1,num2,num3;
num1=parseInt(prompt("Enter first number : "));
num2=parseInt(prompt("Enter second number : "));
num3=parseInt(prompt("Enter third number : "));
if(num1>num2&&num1>num3)
document.write (" Greatest number = "+num1);
else if(num2>num1&&num2>num3)
document.write (" Greatest number = "+num2);
else
document.write (" Greatest number = "+num3);
</script>
Program 4. Write a program using JavaScript to find square root of given number.
<script type="text/javascript">
var num,sq;
num=parseInt(prompt("Enter any number : "));
sq=Math.sqrt(num);
document.write ("Square root of "+num + " is " +sq);
</script>
Program 5.Write a program to input your name and age using form and know whether he/she is eligible to vote or not. [ Use function and onclick event]
<form name="myForm">
<input type="text" name="username" placeholder="Enter name">
<br><br>
<input type="text" name="age" placeholder="Enter age">
<br><br>
<input type="button" value="Click here"
onclick="test()">
</form>
<script type="text/javascript">
function test() {
var naam=document.myForm.username.value;
var a=document.myForm.age.value;
if(a>18)
document.write("You can vote "+naam);
else
document.write("sorry! You can't vote "+naam);
}
</script>
Program 6. Write a program to input a string using form and convert that into uppercase.[Use string object toUpperCase()]
<form name="myForm">
<input type="text" name="stringData" placeholder=" Enter any string ">
<br><br>
<input type="button" value="Click here" onclick="convertUpper()">
<p id="ans"></p>
</form>
<script type="text/javascript">
function convertUpper() {
var text = document.myForm.stringData.value;
var result = text.toUpperCase();
document.getElementById("ans").innerHTML = result;
}
</script>
Program 7. Write a program to print odd numbers between 1 to 100 using while loop. Use function.
<input type="button" onclick="oddNumbers()" value="start">
<script type="text/javascript">
function oddNumbers() {
var i=1;
while(i<=100)
{
document.write(i +" ");
i=i+2;
}
}
</script>
Program 8. Write a program to reverse a given string. [use loop from its length-1 to 0 and print it]
<script type="text/javascript">
var s,i;
s=prompt("Enter any sting : ");
for(i=s.length-1;i>=0;i--)
{
document.write(s[i]);
}
</script>
Program 9. An array contains some string data. Print them.
<script type="text/javascript">
var day=new Array(7);
var day = ["Sun","Mon","Tues","Wed","Thur","Fri","Sat"];
document.write(day);
</script>
Program 10. An array contains some data. Print them in reverse order.[use array.reverse() method].
<script type="text/javascript">
var day = ["Sun","Mon","Tues","Wed","Thur","Fri","Sat"];
document.write (day.reverse());
</script>
Program 11. Write a program to insert a string "We are learning Java Script" via form object getElementById() method.Use paragraph with id.
<p id="result"> </p>
<script type="text/javascript">
document.getElementById("result").innerHTML ="We are learning Java Script";
</script>
Program 12. Input your name and grade using form. Validate this with a message "This field is required", onclick.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Validation</title>
</head>
<body>
<form name="myForm" method="post" onsubmit="return validateForm()">
<input type="text" name="user" placeholder="Enter name">
<br>
<span id="usererror" class="error"></span>
<br>
<input type="text" name="grade" placeholder="Enter grade">
<br>
<span id="gradeerror" class="error"></span>
<br>
<input type="submit" value="Login">
</form>
<script type="text/javascript">
function validateForm() {
var uname=document.myForm.user.value;
var g=document.myForm.grade.value;
if (uname==""){
document.getElementById("usererror").innerHTML="This field is required";
return false;
}else if(g==""){
document.getElementById("gradeerror").innerHTML="This field is required";
return false;
}
}
</script>
<style type="text/css">
.error{
color: red;
}
</style>
</body>
</html>
Program 13. Write any two paragraphs in your html page. Now write a program using jquery to hide that written paragraphs as you click on that.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
<body>
<h2> Simple Example of jQuery </h2>
<p> This is a sample paragraph </p>
</body>
</html>
Program 14. Use Jquery to create an alert message for a button.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("You clicked");
});
});
</script>
<body>
<button>Click here</button>
</body>
</html>
Program 15. Use Jquery to show concept of slide effect.[Use slide() method]
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #f2f2f2;
border: solid 1px ;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Click to view and hide</div>
<div id="panel">My Dear Students ! <BR>
Welcome to PLK computer SIR site</div>
</body>
</html>
Bonus Programs
Program 3. Write a program using JavaScript to calculate simple interest.
<script>
var p,t,r,si;
p=parseInt(prompt("Enter Principal : "));
t=parseInt(prompt("Enter Time : "));
r=parseInt(prompt("Enter Rate : "));
si=(p*t*r)/100;
document.write ("Simple Interest is " +si);
</script>
Program 4. Write a program using JavaScript to display first ten natural numbers.
<script>
var i;
for(i=1;i<=10;i++)
{
document.write("<br>"+ i);
}
</script>
Program 5. Write a function to add any two numbers in Javascript.
<form>
Enter First Number:
<input type="text" name="number1" id="number1">
<br> <br>
Enter Second Number:
<input type="text" name="number2" id="number2">
<br> <br>
<button type="button" onclick="total()"> Click for Result </button>
<p id="result"> </p>
</form>
<script>
function total(){
var num1 = document.getElementById("number1").value;
var num2 = document.getElementById("number2").value;
var sum = parseInt(num1) + parseInt(num2);
document.getElementById("result").innerHTML= num1 + " + " + num2 + " = " + sum;
}
</script>
Program 6. Write a function to find factorial of given number using Javascript.
<form>
Enter a number :
<input type="text" name="num" id="num">
<br><br>
<button type="button" onclick="fact()"> Click for result </button>
<p id="ans"> </p>
</form>
<script>
function fact() {
var f=1,i,num;
num=document.getElementById("num").value;
for(i=1;i<=num;i++)
{
f=f*i;
}
document.getElementById("ans").innerHTML="Factorial of " +num + " is " + f;
}
</script>
Program 7. Write a JavaScript program to show password. (Toggle between password)
<input type="Password" id="pass" placeholder="Type password"><br><br>
<input type="checkbox" onclick="myFunction()"> Show Password
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("pass");
if (x.type == "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
Form Validation
Program 8. Write JavaScript to validate a html form containing username and password. Program should display the error message when username and password is blank.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Validation</title>
</head>
<body>
<form name="myForm" method="post" onsubmit="return validateForm()">
<p>
<input type="text" name="user" placeholder="username">
<br>
<span id="usernameerror" class="error"></span>
</p>
<p>
<input type="password" name="pass" placeholder="password">
<br>
<span id="passworderror" class="error"></span>
</p>
<p>
<input type="submit" value="Login">
</p>
</form>
<script type="text/javascript">
function validateForm() {
var uname=document.myForm.user.value;
var password=document.myForm.pass.value;
if (uname==null || uname==""){
document.getElementById("usernameerror").innerHTML="Enter username";
return false;
}else if(password==null || password==""){
document.getElementById("passworderror").innerHTML="Enter your password";
return false;
}
}
</script>
<style type="text/css">
.error{
color: red;
}
</style>
</body>
</html>
Program 9. Write JavaScript to validate a html form containing username and password. Program should display the error message when username is blank and mobile number is less than 10 digit.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Validation</title>
</head>
<body>
<form name="myForm" method="post" onsubmit="return validateForm()">
<p>
<input type="text" name="user" placeholder="username">
<br>
<span id="usernameerror" class="error"></span>
</p>
<p>
<input type="text" name="mobileno" placeholder="mobile number">
<br>
<span id="mobilenoerror" class="error"></span>
</p>
<p>
<input type="submit" value="Login">
</p>
</form>
<script type="text/javascript">
function validateForm() {
var uname=document.myForm.user.value;
var mobileno=document.myForm.mobileno.value;
if (uname==null || uname==""){
document.getElementById("usernameerror").innerHTML="Enter username";
return false;
}else if(mobileno.length<10){
document.getElementById("mobilenoerror").innerHTML="Enter ten digit mobile no";
return false;
}
}
</script>
<style type="text/css">
.error{
color: red;
}
</style>
</body>
</html>
Program 10. Write JavaScript to validate confirm password or re-type password.
<!DOCTYPE html>
<html>
<head>
<title>Retype Password Validation</title>
<script type="text/javascript">
function validatePassword() {
var password1=document.myForm.firstpass.value;
var password2=document.myForm.secondpass.value;
if(password1==password2) {
alert("password matched");
return true;
}
else {
alert("Both password must be same");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return validatePassword()">
<input type="password" name="firstpass" placeholder="Type your Password">
<br><br>
<input type="password" name="secondpass" placeholder="Again type Password">
<br><br>
<input type="submit">
</form>
</body>
</html>