PBA INSTITUTE

User Input in JavaScript

In this chapter, you'll learn how to interact with your JavaScript programs by taking user input. This allows your programs to be flexible and respond based on what the user provides.

The prompt() Function :

The primary tool for user input in JavaScript is the prompt() function. It pauses your program's execution and waits for the user to type something. Whatever the user types is returned as a string by the prompt() function.

Here's the basic syntax :

<script type="text/javascript"> var a=prompt("Enter Your Name : "); </script>

This code displays the prompt "Enter your name: " on the screen. The user types their name and presses Enter. The program then stores the entered name in the variable a.

Examples of User Input:

1. Greeting the User:
<script type="text/javascript">

var name=prompt("What is Your Name ? ");

    document.write("Hello, "+ name + "!")
</script>

This program asks the user for their name and then prints a personalized greeting.

2. Getting Numbers from the User:
<script type="text/javascript">

var age=parseInt(prompt("How old are you?"));

  document.write("You are ", age ," years old.");
</script>

Examples :

JavaScript code

													
													#1. Write a program to find the area, perimeter and diagonal of a rectangle.
													

													
													
<!DOCTYPE html>
 <html>
 <head>
   <title></title>
 </head>
 <body>
  
  <script type="text/javascript">
  var l=parseInt(prompt("Enter the value of length : "));
  var w=parseInt(prompt("Enter the value of width : "));
  var ar=l*w;
  var per=2*(l+w);
  var dia=Math.sqrt(l*l+w*w);
  document.write("Area= "+ar+"<br>");
  document.write("Perimeter= ",+per+"<br>");
  document.write("Diagonal= ",+dia); 
 </script>
 
 </body>
 </html>
													
													
												

Output :
Enter the value of length : 5
Enter the value of width : 5
Area= 25
Perimeter= 20
Diagonal= 7.0710678118654755

JavaScript code

													
													2.Write a program to find the base area , surface area and volume of Pentagonal pyramid.
 BaseArea= 5/2𝑎𝑏, SurfaceArea=5/2ab+5/2bs, Volume=5/6abh. [a – apothem length, b – base length, s – slant height, h – height of the pentagonal pyramid.]
													

													
													
														
<!DOCTYPE html>
 <html>
 <head>
   <title></title>
 </head>
 <body>
  <script type="text/javascript">
  var a=parseInt(prompt("Enter the value of a : "));
  var b=parseInt(prompt("Enter the value of b : "));
  var s=parseInt(prompt("Enter the value of s : "));
  var h=parseInt(prompt("Enter the value of h : "));
  var ba=5/2*a*b;
  var sa=5/2*a*b+5/2*a*b;
  var v=5/2*a*b*h;
  document.write("Base Area= "+ba+"<br>");
  document.write("Surface Area= ",+sa+"<br>");
  document.write("Volume= ",+v); 
 </script>
 </body>
 </html>
													
													
												

Output :
Enter the value of a :2
Enter the value of b :3
Enter the value of s :4
Enter the value of h :5
Base Area= 15
Surface Area= 30
Volume= 75

JavaScript code

													
													# Write a program to find area of Rhombus.
													
													                          
<!DOCTYPE html>
 <html>
 <head>
   <title></title>
 </head>
 <body>
  <script type="text/javascript">
  var d1=parseInt(prompt("Enter the value of d1 : "));
  var d2=parseInt(prompt("Enter the value of d2 : "));
  var a=d1*d2/2;
  document.write("Area= "+a+"<br>");
 </script>
 </body>
 </html>
                          
													
													
												

Output :
Enter the value of d1 :5
Enter the value of d4 :4
Area=10;

Key Points to Remember:

You can provide informative prompts within the prompt() function to guide the user on what kind of input is expected.

Practice Exercises:

1. Write a program that asks the user for their favorite food and then prints a message like "Your favorite food is ice cream!".
2. Write a program that asks the user for four numbers and then prints their multiplication.

Conclusion :

User input is integral to creating dynamic, responsive, and user-centric web applications. It enhances interaction, customization, and functionality, making the web experience more intuitive and engaging.

introduction user input if else loops Number Pattern array 2d array switch case Function string function Math function date time function class constructor Inheritance Regular Expression small application events Real Life

User Input in JavaScript

The prompt() Function :

Here's the basic syntax :

Examples of User Input:

Examples :

Key Points to Remember:

Practice Exercises:

Conclusion :

javascript All Chapters

SHARE