Home > DeveloperSection > Articles > Exception Handling in JavaScript

Exception Handling in JavaScript


C# C# 
Ratings:
0 Comment(s)
 3512  View(s)
Rate this:

Exception Handling in JavaScript

Exception handling is an important concept which is widely used in programming language. Exception handling is an important approach which is designed to handle unexpected occurrence of code error in programming language. That is, we can say that in other word exception handling is occurrence of unexpected code error due to which the execution of program may be terminated.

There are lots of situation occurs where we have to use exception handling concept such as suppose that we are browsing a web pages and when we click any control on web page then an alert box open and telling us this runtime error (due to any reason may be css not loaded, may be any file not loaded etc.) and message shows ‘Due want to debug it’ if user are developer then it is possible to he would be continue otherwise a naïve user close the web page. So in this situation we have to use exception handling within the javascript code block.

There is a specific way to handle the exception in program. Try, catch and finally are used to handle the exception. Try contains those blocks of code there is probability to occurrence unexpected code error and when exception is raised then catch block catches that exception and handle that exception i.e catch block contains exception handler code.      

Here I am giving a small example to how exception handles within the javascript code. Here I am taking two input number1 and number2 and print division result of these two numbers. 

Exception Handling in JavaScript

To design the above UI write the following code in .aspx page.

<form id="form1" runat="server">

    <div>

    <table style="width: 446px; height: 132px">

      <tr>

        <td class="style1">

         <asp:Label ID="Label1" runat="server" Text="Enter first Number:"></asp:Label>

        &nbsp;

        </td>

        <td>

        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"

                ControlToValidate="TextBox1" ErrorMessage="*"></asp:RequiredFieldValidator>

            <asp:RangeValidator ID="RangeValidator1" runat="server"

                ControlToValidate="TextBox1" ErrorMessage="*" MaximumValue="999999"

                MinimumValue="0" Type="Integer"></asp:RangeValidator>

        </td>

      </tr>

       <tr>

        <td class="style1">

         <asp:Label ID="Label2" runat="server" Text="Enter Second Number:"></asp:Label>

        </td>

        <td>

        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"

                ControlToValidate="TextBox2" ErrorMessage="*"></asp:RequiredFieldValidator>

            <asp:RangeValidator ID="RangeValidator2" runat="server"

                ControlToValidate="TextBox2" ErrorMessage="*" MaximumValue="999999"

                MinimumValue="0" Type="Integer"></asp:RangeValidator>

        </td>

      </tr>

      <tr>

         <td class="style1">

        

            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        

         </td>

         <td>

         <%-- ClickEventResult Call the javascript block when button clicked by client--%>

 

             <asp:Button ID="Button2" runat="server" Text="Division" OnClientClick="ClickEventResult();" />

           

         </td>

      </tr>

    </table>

      

           

        

    </div>

    </form>

The javascript for button click event is :

<script type="text/javascript">

        functionClickEventResult() {

            var num1=document.getElementById("TextBox1").value;

            var num2=document.getElementById("TextBox2").value;

 

            try {

                if (num1== ""||num2== "") {

                   //// throw the exception when textbox is empty, throw keyword is used for throw user execption

                    throw "empty";

                }

                else {

                /// calculate division result

                    var result;

                    result=num1/num2;

                   //// result show with confirm pop up message box

                    confirm(result);

                }

              }

            catch (Error) {

                if (Error== "empty") {

                    /// exception catch when empty throw

                    alert("Textbox cannot empty:"+Error);

                }

 

                else {

                //// exception occured when result calculated

                    alert(Error);

                }

            }

          

           

          

        }

     

    </script>

When we input two number and first number is divided by 0 then exception is raised and there one alert box show the exception error.

Exception Handling in JavaScript

Exception Handling in JavaScript


Don't want to miss updates? Please click the below button!

Follow MindStick