#はじめに
初めまして。ムラサカと申します。
記事の投稿は初めてで至らぬ点もあるかと思いますがよろしくお願いいたします。
※追記:プログラム内容を修正(2019 4/27)
###なぜ作ったのか
IT系の求人を探している中で事前課題として出題されているのを見かけたため、
技術的な能力の基準を満たすための要件として必須と思い着手することにしました。
###構成要素
構成としては入力フォームで数字のみの値を入力受付し、
checkボタンで判定。アラートで結果を返す構成にしました。
↓こちらが制作物になります。
https://murasaka.github.io/Prime-number-decision/
###悩んだところ(html)
<from>
<label for="textForm">下記のフォームに素数を入力</label>
<input type="number" id="textForm" maxlength="3">
</from>
入力するにあたってinput typeを”number”にするか”tel”にするか少し悩みました。
”number”の場合:入力を数字に限定できるが、クリックの矢印操作でマイナスの値も入力できてしまう。
”tel”の場合 :スマホで数字入力が容易だがPCだと文字列も入力できてしまい無条件で「例)kkkは素数です」と表示されてしまう。
もし、文字列を判定してしまった場合の違和感が大きかったので今回は”number”を使用。
マイナスの値に関しては0以下の場合、エラーを出すアラートを設定。
空文字の場合も同様にエラーのアラートを設定。
###課題(JavaScript)
JavaScriptの中身は入力された値を判定するためif文を用いていますが、
実際の素数判定は力技です。
以下、Scriptの中身ですが、
<script>
// ボタンの要素を取得
var button = document.getElementById("button");
var flag =0;
button.addEventListener("click", function(e) {
e.preventDefault();
// 入力フォームの値を取得
var textForm = document.getElementById("textForm").value;
//空文字判定、100以上、1と等しい、0以下の場合アラート
if (document.getElementById('textForm').value == ""||
textForm >100 || textForm ==1 || textForm < 0) {
alert('エラー 2~100までの素数を入力してください');
return false;
}else {
//素数判定
for( i = 2 ; i<textForm ; i++){
if(textForm % i == 0){
flag = 1;
break;
}
}
}
//素数判定後、結果をアラートで表示した後に更新する
if(flag == 0){
alert(textForm + 'は素数です');
location.reload();
}else{
alert(textForm + 'は素数ではありません');
location.reload();
}
});
</script>
素数判定後、サイトを更新して初期の状態に戻しています。
location.reload();を入れた理由としては一度判定した後、フラグがリセットされてないのか継続して正しく素数判定ができなかったため。
###最後に
まだまだ理解不足を感じていますが、ひとまず形として投稿させていただきました。
これからもアウトプットを続けていきたいと思います。