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

  filter_none

  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

  filter_none

  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

  filter_none

  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

  filter_none

  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

immukul

Check out this Author's contributed articles.