外観の設計(Importボタン処理)

テキストを取り込むためのJavaScript

文字の取得

前節で用意したImportボタンを押したときの挙動はonclick内に記述している。つまりimport_d()を実行する。import_d()で必要となる処理は、テキストを書くエリアに記述されている文字を取り込み、文字列を解析して、ボタンに数字を反映することである。そこで必要となるのがForm nameになる。前節ではform name=”inputForm”と記述しており、import_d()ではinputFormに書かれているテキストを取得するように命令すれば良い。具体的にはこちらになる。

function import_d(){
    var str = document.imputForm.inputArea.value;
}

上記はテキストをstr変数に取り込むまでを記述したプログラムである。この処理の後に、文字列を解析して数字にあてはめていく。

文字列の構文チェック

文字列は”9文字<改行>9文字<改行>…”のフォーマットとする。文字は1~9であれば該当する数字、それ以外であれば空欄とする。
フォーマットを決めた時点でもう1つやるべきことが増える。それは、入力文字に対し、文字列がフォーマット通りに入力されていることをチェックして、フォーマット通りでない場合はエラーで返す処理が必要である。
次に示すのがフォーマットが正しいかチェックする部分である。

    for (x = 0; x < 9; x++){
        if (data[x] == undefined){
            ret = -1;
            break;
        }
        if (data[x].length != 9){
            Alert("ERROR: Length of row " + x + " incorrect. 9 Expected, " + data[x].length + " appears.");
            ret = -1;
            break;
        }
    }
	
    if (ret != -1){
        if (data[9] != undefined){
            if (data[9].length > 0){
                Alert("Warning: Too many rows. Ignored.");
            }
        }
    }

コーディングするうちに、文字列が多く入れられた場合についても考慮する必要があるのに気付いた。行数が多い場合はWarningメッセージを表示して無視することとした。

文字列の取得

最後に文字列を取得する。文字列は構文チェックで9文字毎に区切っているので9文字の文字列を9個処理する必要がある。xのfor文で9個の文字列を一度に処理している。

    for (x = 0; x < 9; x++){
        for (y = 0; y < 9; y++){
            butStr = "b" + x + y;
            num = data[x].charAt(y);
            if ((num == 1) || (num == 2) || 
                (num == 3) || (num == 4) ||
                (num == 5) || (num == 6) || 
                (num == 7) || (num == 8) || 
                (num == 9)){
                document.getElementById(butStr).value = num;
            } else {
                document.getElementById(butStr).value = ' ';
            }
        }
    }

ここまででナンプレ問題の入力部分が完成である。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です