Javascript-error-handling

提供：Dev Guides
移動先:案内、検索

JavaScript-エラーおよび例外処理

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

構文エラー

  • 構文解析エラー*とも呼ばれる構文エラーは、従来のプログラミング言語ではコンパイル時に、JavaScriptでは解釈時に発生します。

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

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

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

ランタイムエラー

実行中（コンパイル/解釈後）に*例外とも呼ばれるランタイムエラーが発生します。

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

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

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

論理エラー

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

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

try …​ catch …​ finallyステートメント

JavaScriptの最新バージョンでは、例外処理機能が追加されました。 JavaScriptは、 try …​ catch …​ finally コンストラクトと、例外を処理する throw 演算子を実装します。

プログラマーが生成した例外と*ランタイム*例外を*キャッチ*できますが、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>

出力

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

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

例

次の例は、 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つの情報を提供します-
  • エラーメッセージ-指定されたエラーに対してブラウザが表示するのと同じメッセージ
  • URL -エラーが発生したファイル
  • 行番号-エラーを引き起こした特定の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.')"/>

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

「https://www.finddevguides.com/index.php?title=Javascript-error-handling&oldid=31700」から取得
Powered by MediaWiki