Pin Me

Alerts and Functions in JavaScript

written by: •edited by: Michele McDonough•updated: 4/2/2010

This guide will explain how you can use different types of alert boxes in your JavaScript code to make it more interactive. It also explains what functions are and how they can be utilized in JavaScript.

  • slide 1 of 1

    JavaScript Alerts

    In this tutorial, I will explain all there is to know about alerts and prompts in JavaScript. We will also learn about functions, including how and when they should be used.

    Alert, Confirmation, and Prompt boxes are the most basic kinds of interactivity elements you can add to your JavaScript code.

    Alert Boxes:

    Alert boxes are to be used when you just want to pass on some information to the user. The user will be alerted with an alert box with whatever information you want to pass on and then he can click OK and go back to the page. The Alert box doesn't return any values, unlike the Confirm and Prompt boxes.

    The standard syntax for an alert box is

    alert("Hi, This is an alert box");

    Confirm Boxes:

    Confirm boxes are generally used when you need confirmation from the user regarding some specific action. The confirmation box is displayed with text on it and the user can then click OK or Cancel. The return value is stored in a variable. If the user clicks OK, the value returned is true. If he clicks Cancel, the value returned is false.

    Syntax for Confirm Boxes:

    var returnvalue = confirm("Hi, This is a confirmation box");

    Prompt Boxes:

    While alert boxes are used to notify the user and confirm boxes are used to get a yes / no response, prompt boxes can be used to get text input from the user. The prompt box can be used to display information to the user and get a response. It has two buttons - OK and Cancel, and a textbox. If the user enters some text and presses OK, the input is stored in the return variable. If the user clicks Cancel, a null value is returned. You can also specify a default value in the textbox.

    Basic Syntax for Prompt Boxes:

    var returnvalue = prompt("Hi, This is a Prompt box", "This is the default value of the prompt box");

    Here is some code which will demonstrate all types of alert boxes.

    <html>

    <body>

    <script type="text/javascript">

    alert("Hi, This is an alert box");

    var returnvalue1 = confirm("Hi, This is a confirmation box");

    document.write("The confirm box returned the value " + returnvalue1 + " <br> ");

    var returnvalue2 = prompt("Hi, This is a Prompt box", "This is the default value of the prompt box");

    document.write("The prompt box returned the value " + returnvalue2 + " <br> ");

    </script>

    </body>

    </html>

    Functions:

    Functions are blocks of code which are executed when an event triggers the function or when the function is called in the code after its definition. A function can be called at any point after it is defined. It can return values and accept parameters to operate on. Functions are generally used when the same code block is to be used at many points in the program.

    Syntax:

    function functionname(variable1, variable2)

    {

    function body

    return returnvariable;

    }

    Here's an example of a function

    <html>

    <body>

    <script type="text/javascript">

    var a = 2;

    var b = 4;

    var addvalue;

    function addvar(var1,var2)

    {

    document.write("Function to compute the sum of two variables and return it");

    return var1+var2;

    }

    addvalue= addvar(a,b);

    document.write("The sum of a and b is "+addvalue);

    </script>

    </body>

    </html>

JavaScript - Tutorials for Beginners

This collection contains several basic JavaScript tutorials for beginners. It explains fundamental concepts, such as operators, variables, loops, events, errors and conditional statements in JavaScript. It assumes no prior programming knowledge.
  1. Conditional Statements in JavaScript
  2. Looping Constructs in JavaScript
  3. Advanced Operators in JavaScript
  4. Alerts and Functions in JavaScript
  5. Error Handling in JavaScript