1~10の数値をランダムに生成する
このコードは、ランダムで 1~10 の数字をランダムで生成するコードです。
const answerNumber = Math.floor(Math.random() * 10) + 1;
「10」の所を変更することで、任意の範囲で数字をランダムで生成できます。
なぜ最後に「+ 1」しているかと言いますと、このコードは 0~9 を出力するコードだからです。
Math.floor(Math.random() * 10)
なので、最後に「+1」することで、期待通りの1~10を生成してくれる様になります。
応用解説 (難しかったら飛ばしても OK)
Math.floor とは、指定した数値以下の最大整数を返します。
実行してみると下記の様になります。
console.log(Math.floor(2.9)) // -> 2
console.log(Math.floor(2.1)) // -> 2
console.log(Math.floor(5.1948467465)) // -> 5
厳密には全然違いますが簡単なイメージとして、小数点以下を切り捨てみたいなイメージです。
Math.random とは、0 以上 1 未満のランダムな数値(浮動小数点)を返します。
実行してみると下記の様になります。
console.log(Math.random()) // 例 -> 0.8274154412599994
なので、この 1~10 をランダムに生成するコード
const answerNumber = Math.floor(Math.random() * 10) + 1;
は次の通りになります。
1. randum 関数で 0~1 未満の数値(浮動小数点)を生成
2. 生成した数値を 10 倍(任意の数)する
3. 10 倍(任意の数)した数値を floor 関数で整数を取得
4. 0 を生成しない様に最後に+1 する
5. 変数answerNumberに値を格納する
こうする事で、欲しい範囲の数値をランダムで生成することができます。
応用解説終了 (飛ばした人はここから読んでね)
DOM操作をできる様にする
次に、このコードは input タグを JavaScript で操作するために必要なコードです。
const inputNumber = document.querySelector("#inputNumber");
また、このコードは button タグを JavaScript で操作するために必要なコードです。
const btn = document.querySelector("#btn");
2つのコードに共通して出てきたこのコードは、任意の要素を JavaScript で操作する時に使用するコードです。
document.querySelector()
この関数の引数(括弧の中)には、CSSを指定する時に記述するセレクタを指定します。
下記はそれぞれの例です。
document.querySelector('div'); // タグはそのまま
document.querySelector('.wrapper) // classは.(ドット)をつける
document.querySelector('#name') // idは#をつける
応用解説 (難しかったら飛ばしても OK)
ですが、同じタグや同じclass名が複数ある場合は、querySelectorAllを使いましょう。
querySelectorを使用した場合は、同じセレクタが複数あったとして、最初に見つけた1つの要素だけしか操作することができません。
ですが、querySelectorAllを使用した場合は、同じセレクタが複数あっても配列で要素を取得することができるので、複数の要素を操作することができます。
十分気をつけましょう。
応用解説終了 (飛ばした人はここから読んでね)
クリックイベントを追加
このコードは、ボタンをクリックした時に何か処理をしたい時に書くコードです。
btn.addEventListener("click", function () {
// 何かしらの処理
});
先ほどの「button タグを JavaScript で操作するために必要なコード」で書いたbtn変数には、 button 要素を JavaScript で動かすためのいろんなプログラムが入っています。
その中のaddEventListenerは、イベントを追加することができるプログラムです。
イベントとは、クリック、ホバー、スクロール、キー入力など、たくさんのイベントを指定できます。
例えば、次のコードは、ボタンをホバーした時に「おめでとう！」とアラート表示するコードです。
btn.addEventListener("mouseover", function () {
alert('おめでとう！');
});
今回は、クリックした時に正解か不正解を判定したいので、clickイベントを指定します。
alertを表示させる条件式を追加
このコードは、入力された値が正解の数字かどうかを確認して、結果によって処理を分けるコードです。
if (inputNumber.value == answerNumber) {
// 条件が正しい
} else {
// それ以外
}
ここで言う入力された値とは、inputNumber.valueのことで、正解の数字というのはanswerNumberです。
answerNumber は、最初にランダムで 1~10 の値を生成した結果の変数です。
そして answerNumber と比較するのは、数字が入力された input タグを JavaScript で操作するために用意したinputNumberを使います。
JavaScriptでinputタグに入力された値を取得するには、valueを使用します。
なので、下記コードは入力された値とランダムに生成した数値を比較するコードです。
if (inputNumber.value == answerNumber)
そして、if文には2つの動きがあります。
- 引数に記述した条件が正しかったら最初の波括弧の処理が実行される
- 条件が正しくなかったら else の波括弧の処理が実行される
if (inputNumber.value == answerNumber) {
alert("正解");
} else {
alert("はずれ");
}
なので今回記述したコードは、
- 入力された値とランダムに生成した数字が一致したら「正解」とアラートされ、
- 一致しなかったら「はずれ」とアラートされます。
こう言った条件式は、日本語として口に出して言うことでよりイメージがつきます。
もし、入力した値が正解の値と一致したら、アラートで「正解」と表示して、それ以外の時は「はずれ」と表示する。
どうですか？
イメージはついたでしょうか。