前回はJavaScriptの配列について書きました。
今回はJavaScriptでのif - else文の使い方について、見ていきましょう。
最初にJavaScriptで、if – else文を使用する方法を確認します。
その後に処理を分岐を使用した、おみくじプログラムを書いて、ブラウザに出力してみましょう。
JavaScriptでif-else文を使うには？
JavaScriptでもif – else文は条件分岐をするための構文です。
if文を書くと、プログラムの中で「もしxxxだったら、xxxをする」というように処理を分岐することができます。
具体的な構文は下記のようになります。
timeという変数に9が入っています。12以前は朝の挨拶をするようにしました。
数値は時間に見立てています。下記のコードは条件に入って「おはようございます！」が出力されます。
let time = 9;
if (time < 12) {
console.log("おはようございます！");
}
JavaScriptでもelse文を書くと、if文に該当しなかった場合の処理をすることができます。
「もしxxxだったら、xxxをする、そうでなかったらxxxをする」という具合に、「そうでなかったらxxx」の処理ができます。
下記ではtimeが18になっています。
条件に合わないので、else文の方にきて「ヤッホー！」が出力されます。
let time = 18;
if (time < 12) {
console.log("おはようございます！");
} else {
console.log("ヤッホー！");
}
さらに、else if文を使用することで、「もしxxxだったら、xxxをする」の条件を増やすことができます。
下記ではtimeが15になっています。
最初の条件に合わないため、else if文が評価されます。
「timeが12以上かつtimeが17以下」の条件にあうことになり「こんにちは！」が出力されます。
let time = 15;
if (time < 12) {
console.log("おはようございます！");
} else if (12 < time && time < 17) {
console.log("こんにちは！");
} else {
console.log("ヤッホー！");
}
次は、実際にコードを書いてみましょう。
if-else文を使用したプログラムを書こう
if-else文を使って、簡単な内容でプログラムを作成します。
下記の内容をエディタに書き込んで、omikuji.htmlという名前で保存してください。
ランダムな値を生成して、その値を参照して５パターンに分岐するプログラムです。
おみくじに見立てて、ブラウザでファイルを開いたときに運勢を表示してくれます。
<html>
<head>
<meta charaset="UTF-8" />
<title>おみくじプログラム</title>
<script>
window.onload = function () {
alert("おみくじを引いてみます...");
let randomNumber = Math.floor(Math.random() * 5);
if (randomNumber === 0) {
alert("吉です。");
} else if (randomNumber === 1) {
alert("小吉です。");
} else if (randomNumber === 2) {
alert("中吉です。");
} else if (randomNumber === 3) {
alert("大吉です。");
} else if (randomNumber === 4) {
alert("凶です.....");
}
}
</script>
</head>
<body>
</body>
</html>
解説
コードの解説をします。
scriptタグの中に、JavaScriptのコードを書いています。
初期のアラート表示
window.onloadから始まっています。
これで、画面を開いたときに、functionの中のコードが動きます。
最初に「おみくじを引いてみます」というアラートを画面に出しています。
アラートでOKを押すと、次の処理に進みます。
ランダム値の取得
下記のように書いている箇所は、ランダムな値を取得しています。
let randomNumber = Math.floor(Math.random() * 5);
Math.random()は0以上1未満のランダムの少数点な値を返します。
実行すると0.15637616329558046や0.9443706882554563など、実行するたびに違う値が返ってきます。
これに5を掛けることで、0.1の場合は0.5・0.9の場合は4.5となります。
小数点が0〜9なので、0 - 4.99までのランダムな値になります。
Math.floor()は小数点以下を切り捨ててくれます。
なので、Math.floor(Math.random() * 5)とすることで、0から4のランダム値が取得できます。
if – else文で判定する
あとは、取得した値をif – else文で判定しています。
randomNumberが0だったら、「吉です。」と表示しています。
1だった場合は、「小吉です。」と表示します。
if (randomNumber === 0) {
alert("吉です。");
} else if (randomNumber === 1) {
alert("小吉です。");
}
// ... 続く ...
このような分岐をそれぞれ作って、５パターンの結果に分岐しました。
動作確認する
動作確認してみましょう。
作成したomikuji.htmlをブラウザで開きます。
まず、最初のアラートが表示されます。
OKボタンを押すと、このように結果のアラートが表示されました。
(ランダム値での分岐のため、結果は表示する度に変わります）
おわりに
今回はJavaScriptでのif文をみていきましたが、いかがでしたか。
JavaScriptのif文も他の言語と同じように書けました。
JavaScriptでは型が決まっていないので、条件で比較する場合には入っている値を意識するようにしましょう。
コメント