最新のWeb開発のチュートリアル
×

JS チュートリアル

JS HOME JS 導入 JS どこへ JS 輸出 JS 構文 JS ステートメント JS 注釈 JS 変数 JS 演算子 JS 算術 JS 割り当て JS データの種類 JS 機能 JS オブジェクト JS 範囲 JS イベント JS ストリング JS 文字列メソッド JS 数字 JS 数のメソッド JS 数学 JS 日付 JS 日付形式 JS 日付の方法 JS 配列 JS アレイ方式 JS ブール値 JS 比較 JS 条件 JS スイッチ JS ループ For JS ループしながら JS ブレーク JS 型変換 JS 正規表現 JS エラー JS デバッギング JS 巻き上げ JS strictモード JS スタイルガイド JS ベストプラクティス JS 間違い JS パフォーマンス JS 予約語 JS JSON

JS フォーム

フォームバリデーション フォームAPI

JS オブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクトプロトタイプ

JS 機能

関数定義 ファンクションのパラメータ 関数の呼び出し 関数クロージャ

JS HTML DOM

DOM イントロ DOM メソッド DOM 資料 DOM 要素 DOM HTML DOM CSS DOM アニメーション DOM イベント DOM EventListener DOM ナビゲーション DOM ノード DOM ノードリスト

JS ブラウザ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS

JS 例 JS HTML DOM JS HTML 入力 JS HTML オブジェクト JS HTML イベント JS ブラウザ JS クイズ JS 概要

JS リファレンスマニュアル

JavaScript オブジェクト HTML DOM オブジェクト


 

JavaScriptエラーが - 投げてキャッチしてみてください


try文は、エラーのコードのブロックをテストすることができます。

catchステートメントは、エラーを処理することができます。

throw文は、カスタムエラーを作成することができます。

finallyステートメントを使用すると、結果にかかわらず、tryおよびcatchの後に、コードを実行することができます。


エラーが起こるのでしょう!

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

エラーは、プログラマによって発生したエラー、間違った入力に起因するエラー、その他予測不可能なものをコーディングすることができます:

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>
»それを自分で試してみてください

上記の例では、我々は(tryブロック内)のコードのタイプミスをしました。

catchブロックはエラーをキャッチし、それを処理するコードを実行します。


JavaScriptがtrycatch

try文は、あなたはそれが実行されている間にエラーをテストするコードのブロックを定義することができます。

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

JavaScriptステートメントはtrycatchペアで来ます:

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

JavaScriptがエラーを発生させることができます

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

このための技術的な用語です:JavaScriptは例外を発生させる(またはスロー)になります。


throwステートメント

throw文は、カスタムエラーを作成することができます。

技術的に、あなたは(投げる)例外を発生させることができます。

例外はJavaScriptの文字列、数値、ブール値またはオブジェクトを指定できます。

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="message"></p>

<script>
function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    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

finally文は、後に、コードを実行することができますtrycatch結果にかかわらず、:

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() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    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 = "";
    }
}
»それを自分で試してみてください