[Q&A] 【JavaScriptのコード解説】エラーメッセージが表示される流れを知りたい

【JavaScriptのコード解説】エラーメッセージが表示される流れを知りたい

前提・実現したいこと

初めにどこの処理が行われているのか？
どんな関数・オブジェクトがどこで作成されてるのか？
なぜ必要なのか？

など、

エラーメッセージ表示されるまでの流れをわかりやすく解説して頂きたいです。

該当のソースコード

HTML

<html>
<head>
<title>Noname</title>
<script type="text/javascript" src="errCheck.js"></script>
</head>
<body>

<center>

エラーメッセージ
<form name="form1">
<table class="table">
<tr>
<td colspan="2" align="center"><textarea id ="idErrMsg" name="errMsg" rows="5" cols="30" value=""></textarea><br><br><br><br><br></td>
</tr>
<tr>
<td><label id="idName">＊名前<label></td>
<td><input type="textBox" id="txtName" name="Name" value=""><br><br></td>
</tr>
<tr>
<td><label id="idPassword">＊パスワード</label></td>
<td><input type="password" id ="pasPassword" name="pass1" value=""><br><br></td>
</tr>
<tr>
<td><label id="idPasswordCheck">＊パスワード確認用</label></td>
<td><input type="password" id ="pasPasswordCheck" name="pass2" value=""><br><br></td>
</tr>
</table>
</form>

<input type="button" onclick="errCheck()" value="送信">


</center>

</body>
</html>

ＪａｖａＳｃｒｉｐｔ

//●入力チェック
function errCheck(){

//エラーメッセージ（textarea)オブジェクト確保
var errMsg_obj = document.getElementById("idErrMsg");

//エラーメッセージクリア
errMsg_obj.value = '';

//氏名チェック
nameCheck(errMsg_obj);

//パスワードチェック
passwordCheck(errMsg_obj);

}

//●氏名チェック
function nameCheck(errMsg_obj){

//エラー表示内容
var errMsg_01 = "No Data\n"
var strName = document.getElementById("txtName").value;

//未入力チェック呼び出し
noInputCheck(strName, errMsg_obj, errMsg_01);

}

//●パスワードチェック
function passwordCheck(errMsg_obj){

//エラー表示内容
var errMsg_01 = "No Data\n"
var errMsg_02 = "password check again\n"

var strPassword = document.getElementById("pasPassword").value;
var strPasswordCheck = document.getElementById("pasPasswordCheck").value;

//未入力チェック呼び出し
noInputCheck(strPassword, errMsg_obj, errMsg_01);
noInputCheck(strPasswordCheck, errMsg_obj, errMsg_01);

//文字列一致チェック
strCheck(strPassword, strPasswordCheck, errMsg_obj, errMsg_02);

}

//●未入力チェック
function noInputCheck(str, errMsg_obj, errMsg_01){

if(str == "" ){
alert("add errMsg");
errMsg_obj.value += errMsg_01;
}
}

//●文字列一致チェック
function strCheck(str1, str2, errMsg_obj, errMsg_02){

if(str1 != str2){
alert("add errMsg");
errMsg_obj.value += errMsg_02;
}

}

試したこと

自分でエラーメッセージが表示されるコードを書こうとしてネットを探していたところ、このコードを見つけました。
自分なりにテキストで調べましたがコメントアウトの意味を解読することができませんでした。

どうかご解答よろしくお願いします。

0 likes

1Answer

@awachang posted at 2020-12-04

あまりいいコードではないように見受けられますが..。

はじめにどこの処理が？

<input type="button" onclick="errCheck()" value="送信">

のクリックにより、関数 errCheck() が呼ばれて動きます。

動作を見る

構造をシンプルにします。

index.html

<html>
<head>
  <title>Noname</title>
  <script type="text/javascript" src="errCheck.js"></script>
</head>
<body>
  <textarea id ="idErrMsg" name="errMsg" rows="5" cols="30" value=""></textarea><br>
  <input type="textBox" id="txtName" name="Name" value="">
  <input type="button" onclick="errCheck()" value="送信">
</body>
</html>

errCheck.js

// エラーチェック本体。ボタンクリックで呼ばれる
function errCheck() {
  // エラー表示用の <textarea> を取得する
  var errMsg_obj = document.getElementById("idErrMsg");

  // チェック開始前に、エラー表示欄を空にしておく
  errMsg_obj.value = "";

  // 名前欄の入力チェック関数に、エラー表示用 <textarea> を渡す
  nameCheck(errMsg_obj);
}

// 名前欄の入力チェック関数
// 引数に、エラー表示先のHTML要素を与える
function nameCheck(errMsg_obj){
  // 未入力だった場合のエラーメッセージを用意している
  var errMsg_01 = "No Data\n"

  // 名前欄の入力値を取得する
  var strName = document.getElementById("txtName").value;

  // 未入力チェック関数に、入力値とエラー表示用 <textarea> 、エラー時のメッセージを渡す
  noInputCheck(strName, errMsg_obj, errMsg_01);
}

// 未入力チェック関数
// 引数に、「入力値」「エラー表示先のHTML要素」「エラー時のメッセージ」を与える
function noInputCheck(str, errMsg_obj, errMsg_01){
  if(str == "" ){
    // 入力値に何も入ってないければこのブロックに入る
    // "add errMsg" をアラートする (本質的には不要)
    alert("add errMsg");

    // エラー表示先のHTML要素 (この場合は渡された <textarea> ) の valueに
    // 指定されたエラーメッセージを追記する
    errMsg_obj.value += errMsg_01;
  }
}

各行ごとにコメントを入れてみました。
(どこで関数が生成・・・に対する答えは、「 function 」で始まっている行です)

流れとしては、

ボタンクリックで errCheck() が呼ばれてチェック開始
errCheck() の中で nameCheck() が呼ばれて名前欄のチェックをする
nameCheck() の中で noInputCheck() が呼ばれて、入力値が入っていなければエラーメッセージを表示

・・・という感じです。
もとのスクリプトは、同様にパスワード欄もチェックしています。
また、パスワード欄と確認用パスワード欄の入力値が同じであることもチェックしています。

「どうしてこういう構造になっているのか」はよくわかりません (書いた人ではないので)。
「どうしてこういう関数なのか」「どうして <textarea> のオブジェクトを取得して関数に渡す形にしているのか」は不明です。
ただ、各行でやっていること自体は単純です。
どのへんが理解できないのかも書くと、回答もつきやすいかもしれません。

0Like

Are you sure you want to delete the question?