JSチュートリアル

JSホーム JSの紹介 JSどこへ JS出力 JSステートメント JS構文 JSコメント JS変数 JS Let JSConst JSオペレーター JS算術 JS割り当て JSデータ型 JS関数 JSオブジェクト JSイベント JS文字列 JS文字列メソッド JS文字列検索 JS文字列テンプレート JS番号 JS番号メソッド JSアレイ JS配列メソッド JS配列ソート JSアレイの反復 JSアレイ定数 JSの日付 JSの日付形式 JS DateGetメソッド JS日付設定メソッド JS数学 JSランダム JSブール値 JSの比較 JS条件 JSスイッチ JSループFor JSループフォーイン JSループの JSループWhile JSブレイク JSIterables JSセット JSマップ JS Typeof JS型変換 JSビット単位 JS RegExp JSエラー JSスコープ JSホイスト JS厳密モード JSこのキーワード JSアロー関数 JSクラス JS JSON JSデバッグ JSスタイルガイド JSのベストプラクティス JSの間違い JSパフォーマンス JS予約語

JSバージョン

JSバージョン JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE /エッジ JSの歴史

JSオブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクト表示 オブジェクトアクセサー オブジェクトコンストラクター オブジェクトのプロトタイプ オブジェクト反復可能 オブジェクトセット オブジェクトマップ オブジェクトリファレンス

JS関数

関数の定義 関数パラメーター 関数の呼び出し 関数呼び出し 機能適用 関数クロージャ

JSクラス

クラスイントロ クラス継承 クラス静的

JSAsync

JSコールバック JS非同期 JSの約束 JS Async / Await

JS HTML DOM

DOMイントロ DOMメソッド DOMドキュメント DOM要素 DOM HTML DOMフォーム DOM CSS DOMアニメーション DOMイベント DOMイベントリスナー DOMナビゲーション DOMノード DOMコレクション DOMノードリスト

JSブラウザBOM

JSウィンドウ JS画面 JSロケーション JSの歴史 JSナビゲーター JSポップアップアラート JSタイミング JSクッキー

JS Web API

WebAPIイントロ WebフォームAPI Web履歴API WebストレージAPI WebワーカーAPI Web Fetch API Web Geolocation API

JS AJAX

AJAXイントロ AJAX XMLHttp AJAXリクエスト AJAX応答 AJAXXMLファイル AJAX PHP AJAX ASP AJAXデータベース AJAXアプリケーション AJAXの例

JS JSON

JSONイントロ JSON構文 JSONとXML JSONデータ型 JSON解析 JSON文字列化 JSONオブジェクト JSON配列 JSONサーバー JSON PHP JSON HTML JSON JSONP

JSとjQuery

jQueryセレクター jQuery HTML jQuery CSS jQuery DOM

JSグラフィックス

JSグラフィックス JSキャンバス JSPlotly JS Chart.js JSグーグルチャート JS D3.js

JSの例

JSの例 JS HTML DOM JSHTML入力 JSHTMLオブジェクト JSHTMLイベント JSブラウザ JSエディター JS演習 JSクイズ JS証明書

JSリファレンス

JavaScriptオブジェクト HTMLDOMオブジェクト


JavaScriptエラー


投げて、試してみてください...キャッチ...最後に

このtryステートメントは、実行する(試行する)コードブロックを定義します。

このcatchステートメントは、エラーを処理するためのコードブロックを定義します。

このfinallyステートメントは、結果に関係なく実行するコードブロックを定義します。

このthrowステートメントは、カスタムエラーを定義します。


エラーが発生します!

JavaScriptコードを実行すると、さまざまなエラーが発生する可能性があります。

エラーは、プログラマーによるコーディングエラー、誤った入力によるエラー、およびその他の予期しないものである可能性があります。

この例では、意図的にエラーを生成するために、「alert」のつづりを「adddlert」と間違えました。

<p id="demo"></p>

<script>
try {
  adddlert("Welcome guest!");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.message;
}
</script>

JavaScriptはadddlertをエラーとしてキャッチし、キャッチコードを実行して処理します。


JavaScriptを試してキャッチ

このtryステートメントを使用すると、実行中にエラーをテストするコードのブロックを定義できます。

このcatchステートメントを使用すると、tryブロックでエラーが発生した場合に、実行するコードのブロックを定義できます。

JavaScriptステートメントtrycatch ペアで提供されます。

try {
  Block of code to try
}
catch(err) {
  Block of code to handle errors
}


JavaScriptはエラーをスローします

エラーが発生すると、JavaScriptは通常停止し、エラーメッセージを生成します。

これの専門用語は次のとおりです。JavaScriptは例外をスローします(エラーをスローします)

JavaScriptは、実際には、namemessageの2つのプロパティを 持つErrorオブジェクトを作成します。


スローステートメント

このthrowステートメントを使用すると、カスタムエラーを作成できます。

技術的には、例外をスローする(エラーをスローする)ことができます。

例外は、JavaScript String、a Number、a、BooleanまたはObject:です。

throw "Too big";    // throw a text
throw 500;          // throw a number

およびと throw一緒に使用すると、プログラムフローを制御し、カスタムエラーメッセージを生成できます。trycatch


入力検証の例

この例では、入力を調べます。値が間違っていると、例外(err)がスローされます。

例外(err)がcatchステートメントによってキャッチされ、カスタムエラーメッセージが表示されます。

<!DOCTYPE html>
<html>
<body>

<p>Please input a number between 5 and 10:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="p01"></p>

<script>
function myFunction() {
  const message = document.getElementById("p01");
  message.innerHTML = "";
  let x = document.getElementById("demo").value;
  try {
    if(x == "") throw "empty";
    if(isNaN(x)) throw "not a number";
    x = Number(x);
    if(x < 5) throw "too low";
    if(x > 10) throw "too high";
  }
  catch(err) {
    message.innerHTML = "Input is " + err;
  }
}
</script>

</body>
</html>

HTML検証

上記のコードは単なる例です。

最近のブラウザは、HTML属性で定義された事前定義された検証ルールを使用して、JavaScriptと組み込みのHTML検証の組み合わせを使用することがよくあります。

<input id="demo" type="number" min="5" max="10" step="1">

フォームの検証について詳しくは、このチュートリアルの後の章をご覧ください。


最後のステートメント

このfinallyステートメントを使用すると、結果に関係なく、tryとcatchの後にコードを実行できます。

構文

try {
  Block of code to try
}
catch(err) {
  Block of code to handle errors
}
finally {
  Block of code to be executed regardless of the try / catch result
}

function myFunction() {
  const message = document.getElementById("p01");
  message.innerHTML = "";
  let x = document.getElementById("demo").value;
  try {
    if(x == "") throw "is empty";
    if(isNaN(x)) throw "is not a number";
    x = Number(x);
    if(x > 10) throw "is too high";
    if(x < 5) throw "is too low";
  }
  catch(err) {
    message.innerHTML = "Error: " + err + ".";
  }
  finally {
    document.getElementById("demo").value = "";
  }
}

エラーオブジェクト

JavaScriptには、エラーが発生したときにエラー情報を提供するエラーオブジェクトが組み込まれています。

エラーオブジェクトは、名前とメッセージの2つの便利なプロパティを提供します。


エラーオブジェクトのプロパティ

財産説明
名前エラー名を設定または返します
メッセージエラーメッセージ(文字列)を設定または返します

エラー名の値

エラー名プロパティによって、6つの異なる値が返される可能性があります。

エラー名説明
EvalErroreval()関数でエラーが発生しました
RangeError「範囲外」の数が発生しました
ReferenceError不正な参照が発生しました
構文エラー構文エラーが発生しました
TypeErrorタイプエラーが発生しました
URIErrorencodeURI()でエラーが発生しました

6つの異なる値を以下に説明します。


評価エラー

AnEvalErrorは、eval()関数のエラーを示します。

新しいバージョンのJavaScriptはEvalErrorをスローしません。代わりにSyntaxErrorを使用してください。


範囲エラー

RangeError有効な値の範囲外の数値を使用すると、Aがスローされます。

例:数値の有効桁数を500に設定することはできません。

let num = 1;
try {
  num.toPrecision(500);   // A number cannot have 500 significant digits
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

参照エラー

ReferenceError宣言されていない変数を使用(参照)すると、Aがスローされます。

let x = 5;
try {
  x = y + 1;   // y cannot be used (referenced)
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

構文エラー

SyntaxError構文エラーのあるコードを評価しようとすると、Aがスローされます。

try {
  eval("alert('Hello)");   // Missing ' will produce an error
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

タイプエラー

TypeError予想されるタイプの範囲外の値を使用すると、Aがスローされます。

let num = 1;
try {
  num.toUpperCase();   // You cannot convert a number to upper case
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

URI(Uniform Resource Identifier)エラー

URIErrorURI関数で不正な文字を使用すると、Aがスローされます。

try {
  decodeURI("%%%");   // You cannot URI decode percent signs
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

非標準エラーオブジェクトのプロパティ

MozillaとMicrosoftは、いくつかの非標準のエラーオブジェクトプロパティを定義しています。

fileName(Mozilla)
lineNumber(Mozilla)
columnNumber(Mozilla)
スタック(Mozilla)
説明(Microsoft)
番号(Microsoft)

これらのプロパティを公開Webサイトで使用しないでください。すべてのブラウザで機能するわけではありません。


完全なエラーリファレンス

Errorオブジェクトの完全なリファレンスについては、完全なJavaScriptエラーリファレンスにアクセスしてください。