Write some theory about JavaScript
1. WAP to find area and circumference of circle.
<script type="text/javascript">
var radius,area,circumference;
radius=parseInt(prompt("Enter radius value: "));
area=3.14*radius*radius;
circumference=2*3.14*radius;
document.write("Area of circle= "+area.toFixed(2));
document.write("<BR>"+"Circumference of circle : "+circumference.toFixed(2));
</script>
2. Write a Js program to find the square root of a number. Here the number is entered by the user.[Use Math object with method (Math.sqrt for square root) and prompt method to input data]
<script type="text/javascript">
var number,squareroot;
number=parseInt(prompt("Enter any number : "));
squareroot=Math.sqrt(number);
document.write ("Answer = "+squareroot);
</script>
3. Write a program to pick the greatest number among three numbers entered by the 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>
4. Write a program to input a number and know that it is an even or odd number. [Use prompt for input and % operator to get remainder]
<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>
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>
6. Write a program to perform following operations using switch structure. If you enter A+, it says you have obtained grade A+. If you enter A, it says you have obtained grade A. If you enter B+, it says you have obtained grade B+. If you enter B, it says you have obtained grade B. If you enter any other value/character, it says you have obtained other grade.
<script type="text/javascript">
var day=prompt(" Enter your grade : ");
switch(day)
{
case "A+":
document.write( " <br> A+");
break;
case "A":
document.write( " <br> A");
break;
case "B+":
document.write( " <br> B+");
break;
case "B":
document.write( " <br> B");
break;
default:
document.write(" <br> Other Grade");
}
</script>
7. Write a program to print 1,3,5,....100 using a while loop.
<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>
8. WAP to print factorial value of a number.
<script type="text/javascript">
var num,i,f=1;
num=parseInt(prompt("Enter any number: "));
for(i=1;i<=num;i++)
{
f=f*i;
}
document.write("Factorial is "+f);
</script>
9. WAP to print multiplication table of a number. Use function.
<input type="text" id="num" placeholder="Enter a number"><br><br>
<input type="button" onclick="mtables()" value="click for multiplication table">
<script type="text/javascript">
function mtables(){
var num,i;
num=document.getElementById("num").value;
for(i=1;i<=10;i++)
{
document.write(num*i);
document.write("<BR>");
}
}
</script>
10. WAP to print factors of a number. Use function.
<input type="text" id="num" placeholder="Enter a number"><br><br>
<input type="button" onclick="factors()" value="click for factors">
<script type="text/javascript">
function factors(){
var num,i;
num=document.getElementById("num").value;
for(i=1;i<=num;i++)
{
if(num%i==0)
document.write(i +"<BR>");
}
}
</script>
11. Write a program to reverse a 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>
12. An array contains multiple strings. 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>
13. Write a program to insert a string “We are learning JS” 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>
14. Input your name and grade using form. Validate this with a message ‘This field is required’, using onclick() event.
<!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>
15. 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>
16. 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>
Case Study
Design a calculator to perform various mathematical functions such as addition, subtraction, multiplication, division and root etc. using JS and CSS.
Click for reference answer