JavaScript Lab 2022/23

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