This is an extension of the hands-on section, using a few simple methods to deepen your impression of JavaScript.

Using the prompt Function

The prompt function in JavaScript is used to display a dialog box that prompts the user for input. It is a built-in function that creates a modal window with a text field, allowing the user to enter a string. This function is particularly useful for simple user interactions and collecting small amounts of data.

Syntax 

  var result = prompt(message, defaultValue);

Parameters

  • message (optional): A string that is displayed to the user. This message typically prompts the user for input, explaining what kind of information is expected.
  • defaultValue (optional): A string that appears in the input field by default. This value can be edited or replaced by the user.

Return Value

  • If the user clicks “OK”, the function returns the text entered by the user as a string.
  • If the user clicks “Cancel” or closes the dialog box, the function returns null.

Example 1: Simple Prompt

This example demonstrates a basic use of the prompt function to ask the user for their name and then display a greeting.

index.html

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Prompt Example</title>
    <script>
        function askName() {
            var name = prompt('Please enter your name:');
            if (name) {
                alert('Hello, ' + name + '!');
            } else {
                alert('You didn\'t enter your name.');
            }
        }
    </script>
</head>
<body>
    <button onclick="askName()">Enter Your Name</button>
</body>
</html>

Explanation

  • The prompt function displays a dialog box that prompts the user for input.
  • The input value is stored in the name variable.
  • The alert function then displays a greeting using the entered name.
  • If no name is entered, a different alert message is displayed.

Example 2: Prompt with Default Value

This example shows how to use a default value in the prompt function.

index.html

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prompt with Default Value</title>
    <script>
        function askAge() {
            var age = prompt('Please enter your age:', '18');
            if (age) {
                alert('You are ' + age + ' years old.');
            } else {
                alert('You didn\'t enter your age.');
            }
        }
    </script>
</head>
<body>
    <button onclick="askAge()">Enter Your Age</button>
</body>
</html>

Explanation

  • The prompt function includes a second argument, '18', which sets the default value in the input box.
  • The input value is stored in the age variable.
  • The alert function then displays a message using the entered age.
  • If no age is entered, a different alert message is displayed.

Example 3: Prompt for Multiple Inputs (Sequential Prompts)

This example uses multiple prompt functions to collect more than one piece of information from the user.

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Prompts</title>
    <script>
        function askDetails() {
            var firstName = prompt('Please enter your first name:');
            var lastName = prompt('Please enter your last name:');
            if (firstName && lastName) {
                alert('Hello, ' + firstName + ' ' + lastName + '!');
            } else {
                alert('You didn\'t enter both names.');
            }
        }
    </script>
</head>
<body>
    <button onclick="askDetails()">Enter Your Details</button>
</body>
</html>

Explanation

  • The prompt function is used twice to collect the user’s first and last names.
  • The input values are stored in the firstName and lastName variables.
  • The alert function then displays a greeting using both names.
  • If either name is not entered, a different alert message is displayed.