Skip to content
Related Articles

Related Articles

JavaScript Course | Interaction With User
  • Last Updated : 29 Apr, 2019

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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :