JavaScript Course | Interaction With User

Previous article: JavaScript Course | Practice Quiz-1
Javascript allows us the privilege with which we can interact with the user and respond accordingly. It includes several user-interface functions which help in the interaction. Let’s take a look at them one by one.

  • alert
    simply creates an alert box which may or may not have specified content inside it, but it always comes with the ‘OK’ button. It simply shows a message and pauses the execution of the script until you press the ‘OK’ button. The mini-window that pops-up is called the ‘modal window’.

    alert('text');
    

    Example:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // alert example
    <script>
     alert('HI there'); // with specified content
     alert(); // without any specified content
    </script>

    chevron_right

    
    

    Output:

    It can be used for debugging or simply for popping something to the user.

  • prompt
    Prompt is another user-interface function which normally contains two arguments.

    prompt('text', default value);
    

    The text is basically what you want to show the user and the default value argument is optional though it acts like a placeholder inside a text field. It is the most used interface as with it you can ask the user to input something and then use that input to build something.
    Example:(with default parameter)

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
    // prompt example
    let age = prompt('How old are you?', 50);
      
    alert(`You are ${age} years old!`); 
    </script>

    chevron_right

    
    

    Output:

    You can enter anything and it will print that, it doesn’t necessarily have to be a number. Without the default value, you have to enter something in the text-field otherwise it will print a blank space simply.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
    // prompt example
    let age = prompt('How old are you?');
      
    alert(`You are ${age} years old!`); 
    </script>

    chevron_right

    
    

    Output:

  • confirm
    The confirm function basically outputs a modal window with a question and two button ‘OK’ and ‘CANCEL’.

    confirm('question');
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
    // confirm example 
    let isHappy  = confirm('Are you Happy?');
    alert(`You are ${isHappy}`); 
    </script>

    chevron_right

    
    

    Output:

    It will print true or false based on your choice of clicking the ‘OK’ button or ‘CANCEL’ button respectively.

Next article: JavaScript Course | Logical Operators in JavaScript



My Personal Notes arrow_drop_up

Executive Software Developer at Cavisson Systems

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.