Alert function

The alert() method displays an alert box with a specified message and an OK button. An alert box is often used if you want to make sure information comes through to the user.The alert box takes the focus away from the current window, and forces the browser to read the message. Do not overuse this method, as it prevents the user from accessing other parts of the page until the box is closed. It does not return a value.

<div class="row">
    <div class="col-3">
        Alert
    </div>
    <div class="col-4">
        <button onclick="showAlert()" type="button" class="btn btn-outline-primary btn-block">Click Alert</button>
    </div>
</div>
<script>
    function showAlert(){
        alert("This is an alert");
    }
</script>

Prompt function

The prompt() method displays a dialog box that prompts the visitor for input. A prompt box is often used if you want the user to input a value before entering a page. When a prompt box pops up, the user will have to click either “OK” or “Cancel” to proceed after entering an input value. Do not overuse this method, as it prevents the user from accessing other parts of the page until the box is closed. The prompt() method returns the input value if the user clicks “OK”. If the user clicks “cancel” the method returns null.

<div class="row">
    <div class="col-3">
        Prompt
    </div>
    <div class="col-4">
        <button onclick="showPrompt()" type="button" class="btn btn-outline-primary btn-block">Click Prompt</button>
    </div>
    <div class="col-5" id="promptResponse">
        
    </div>
</div>
<script>
    function showPrompt(){
        // message, defaultValue or defaultAnswer
        let name = prompt("What's your name?","John Doe");
        document.getElementById("promptResponse").innerHTML = "Welcome "+name;
    }
</script>

Confirm function

The confirm() method displays a dialog box with a specified message, along with an OK and a Cancel button. A confirm box is often used if you want the user to verify or accept something. The confirm box takes the focus away from the current window, and forces the browser to read the message. Do not overuse this method, as it prevents the user from accessing other parts of the page until the box is closed. The confirm() method returns true if the user clicked “OK”, and false otherwise.

<div class="row">
    <div class="col-3">
        Confirmation
    </div>
    <div class="col-4">
        <button onclick="showConfirmation()" type="button" class="btn btn-outline-primary btn-block">Click Confirmation</button>
    </div>
    <div class="col-5" id="confirmationResponse">
        
    </div>
</div>
<script>
    function showConfirmation(){
        let confirmed = confirm("Delete this post?");
        document.getElementById("confirmationResponse").innerHTML = "You said "+(confirmed ? "yes" : "no")+" to deleting the post.";
    }
</script>