JavaScript-エラーと例外の処理

プログラミングのエラーには、(a)構文エラー、(b)ランタイムエラー、および(c)論理エラーの3種類があります。

構文エラー

構文エラー、別名 parsing errors, 従来のプログラミング言語ではコンパイル時に、JavaScriptでは解釈時に発生します。

たとえば、次の行では、閉じ括弧がないため、構文エラーが発生します。

<script type = "text/javascript">
   <!--
      window.print(;
   //-->
</script>

JavaScriptで構文エラーが発生すると、構文エラーと同じスレッドに含まれるコードのみが影響を受け、他のスレッドの残りのコードは、エラーを含むコードに依存しないと想定して実行されます。

ランタイムエラー

ランタイムエラー、別名 exceptions, 実行中(コンパイル/解釈後)に発生します。

たとえば、次の行では構文が正しいため実行時エラーが発生しますが、実行時に、存在しないメソッドを呼び出そうとしています。

<script type = "text/javascript">
   <!--
      window.printme();
   //-->
</script>

例外は、それらが発生するスレッドにも影響を及ぼし、他のJavaScriptスレッドが通常の実行を継続できるようにします。

論理エラー

論理エラーは、追跡するのが最も難しいタイプのエラーである可能性があります。これらのエラーは、構文エラーまたは実行時エラーの結果ではありません。代わりに、スクリプトを駆動するロジックに誤りがあり、期待した結果が得られない場合に発生します。

プログラムにどのタイプのロジックを配置するかはビジネス要件に依存するため、これらのエラーをキャッチすることはできません。

try ... catch ... finallyステートメント

最新バージョンのJavaScriptには、例外処理機能が追加されています。JavaScriptはtry...catch...finally 構成と同様に throw 例外を処理する演算子。

あなたはできる catch プログラマーが生成し、 runtime 例外ですが、できません catch JavaScript構文エラー。

これが try...catch...finally ブロック構文-

<script type = "text/javascript">
   <!--
      try {
         // Code to run
         [break;]
      } 
      
      catch ( e ) {
         // Code to run if an exception occurs
         [break;]
      }
      
      [ finally {
         // Code that is always executed regardless of 
         // an exception occurring
      }]
   //-->
</script>

ザ・ try ブロックの後には、1つだけが続く必要があります catch ブロックまたは1つ finallyブロック(または両方のいずれか)。で例外が発生した場合try ブロック、例外はに配置されます e そしてその catchブロックが実行されます。オプションfinally ブロックは、try / catchの後に無条件に実行されます。

これは、存在しない関数を呼び出そうとしていて、例外が発生している例です。それなしでどのように動作するか見てみましょうtry...catch

<html>
   <head>      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               alert("Value of variable a is : " + a );
            }
         //-->
      </script>      
   </head>
   
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>      
   </body>
</html>

出力

次に、を使用してこの例外をキャッチしてみましょう。 try...catchわかりやすいメッセージを表示します。このエラーをユーザーから隠したい場合は、このメッセージを非表示にすることもできます。

<html>
   <head>
      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               try {
                  alert("Value of variable a is : " + a );
               } 
               catch ( e ) {
                  alert("Error: " + e.description );
               }
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

出力

使用できます finallytry / catchの後に常に無条件に実行されるブロック。これが例です。

<html>
   <head>
      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               
               try {
                  alert("Value of variable a is : " + a );
               }
               catch ( e ) {
                  alert("Error: " + e.description );
               }
               finally {
                  alert("Finally block will always execute!" );
               }
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

出力

スローステートメント

使用できます throw組み込みの例外またはカスタマイズされた例外を発生させるステートメント。後でこれらの例外をキャプチャして、適切なアクションを実行できます。

次の例は、 throw ステートメント。

<html>
   <head>
      
      <script type = "text/javascript">
         <!--
            function myFunc() {
               var a = 100;
               var b = 0;
               
               try {
                  if ( b == 0 ) {
                     throw( "Divide by zero error." ); 
                  } else {
                     var c = a / b;
                  }
               }
               catch ( e ) {
                  alert("Error: " + e );
               }
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

出力

文字列、整数、ブール値、またはオブジェクトを使用して1つの関数で例外を発生させてから、上記と同じ関数で、またはを使用して別の関数でその例外をキャプチャできます。 try...catch ブロック。

onerror()メソッド

ザ・ onerrorイベントハンドラーは、JavaScriptでのエラー処理を容易にする最初の機能でした。ザ・error ページで例外が発生するたびに、ウィンドウオブジェクトでイベントが発生します。

<html>
   <head>
      
      <script type = "text/javascript">
         <!--
            window.onerror = function () {
               alert("An error occurred.");
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

出力

ザ・ onerror イベントハンドラーは、エラーの正確な性質を識別するために3つの情報を提供します-

  • Error message −特定のエラーに対してブラウザが表示するのと同じメッセージ

  • URL −エラーが発生したファイル

  • Line number−エラーの原因となった特定のURLの行番号

これは、この情報を抽出する方法を示す例です。

<html>
   <head>
   
      <script type = "text/javascript">
         <!--
            window.onerror = function (msg, url, line) {
               alert("Message : " + msg );
               alert("url : " + url );
               alert("Line number : " + line );
            }
         //-->
      </script>
      
   </head>
   <body>
      <p>Click the following to see the result:</p>
      
      <form>
         <input type = "button" value = "Click Me" onclick = "myFunc();" />
      </form>
      
   </body>
</html>

出力

抽出した情報は、自分が良いと思う方法で表示できます。

あなたは使用することができます onerror 以下に示すように、画像の読み込みに問題が発生した場合にエラーメッセージを表示する方法。

<img src="myimage.gif" onerror="alert('An error occurred loading the image.')" />

使用できます onerror エラーが発生した場合に適切なメッセージを表示するための多くのHTMLタグが付いています。