Embedded Files
プログラミングで最も役立つ文法の一つに条件分岐があります。今日はその条件分岐についてまとめましょう。
条件分岐は「もし、〇〇なら、△。」「〇〇の場合は、⬜︎。」などです。英語で「もし」は「if」で、切り替えるなら「switch」ですね。数学的には「〇〇の間は、△。」が使え、これは「while」が対応します。
特に、「while」が利用できるのは繰り返し(loop)の中でよく利用できます。例えば最初1を与えて、1づつ増やしていき、10になったら足し算を止める場合などですね。もちろん「if」でもOKです。前回の例ではカウントダウン時計で2025年1月1日0時0分0秒になったらエラーにするというときに「if」を使っていましたね。
それでは「if」からみていきましょう。
〜なら〜、それ以外は〜; ifとelse
〜なら〜、それ以外は〜; ifとelse
前回の挨拶のjavascriptコードを少し改変します。名前の代わりに数字を入力します。
下のHMTLのコードの部分から説明します。
入力するのは数字なので、タイプはnumberです。数値なのでnameinの代わりに、idはnumberinとしました。
ボタンの名称は「判定」としました。
表示させるのは「result」です。
javascriptの部分、つまりfunctionの部分について説明します。
javascriptの名称はcheckNumberとしました。
入力値は、document.querySelectorの代わりにdocument.getElementByIdを使いました。 入力した値をnumberに代入します。
奇数偶数を見るのは「if (number % 2 == 0)」を利用しています。このnumber%2は入力値を2で割り、あまりを計算する式です。「==」は等しいの意味です。したがってこの式は、「2で割ったあまりがゼロ」であることを示しています。
余りがゼロならすぐ下の行を実行します。つまりresultに「偶数を代入」します。
そうで無いなら「else」の行を実行します。つまり、resultに奇数」を代入します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>私の初めてのHTML</title>
<script>
function checkNumber(){
// 入力された数値を取得
var number = document.getElementById('numberin').value;
// 数値が偶数か奇数か判定
if (number % 2 == 0) {
document.getElementById('result').textContent = "偶数";
} else {
document.getElementById('result').textContent = "奇数";
}
}
</script>
</head>
<body>
<p>お好きな数字を入力して判定ボタンを押してください。<br>偶数/奇数を判定します。</p>
<input type="number" id="numberin">
<button onclick="checkNumber()">判定</button>
<p id="result"></p>
</body>
</html>
その他条件関数(以上、以下など)
その他条件関数(以上、以下など)
同じ「==」以外には次のような比較演算子がります。
A<B ：B大なりA(BはAより小さい)以上 (1<2, true)
A<=B : Bと等しいもしくは大なりA (1<=1, true)
A>B :B小なりA (1>2, faols)
=== 同じ型・値 (1===1, true)
== 同じ値 (1==1, true)
!=(!==) 異なる値. (1!=2, true / 1!=1; faols)
switchとcaseによる条件分岐
switchとcaseによる条件分岐
次のswitchは複数の条件がある場合に利用できます。例えばジャンケンなどです。ランダム関数を使い表示されるグー、チョキ、パーに対して、あなたの選択した手をクリックします。
表示とボタンは前回の青、赤ボタン(button)を利用しました。
javascriptは、乱数を使い出す手を決める関数と、おしたボタンと乱数で出した答えとの勝負を決める関数の２つがあります。
勝負の計算は、単に2つの手を合計(足し算)したテキスト文をwhich/caseで選別します。以下のようになります。
グー・グーなら引き分け
グー・パーなら勝ち
グー・チョキなら負け
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>じゃんけんゲーム</title>
<script>
const hands = ['グー', 'チョキ', 'パー'];
function getComputerChoice() {
const randomIndex = Math.floor(Math.random() * hands.length);
return hands[randomIndex];
}
function playGame(playerChoice) {
const computerChoice = getComputerChoice();
document.getElementById('opponentHand').textContent = computerChoice;
switch (playerChoice + computerChoice) {
case 'グーチョキ':
case 'チョキパー':
case 'パーグー':
document.getElementById('result').textContent = "勝ち";
break;
case 'チョキグー':
case 'パーチョキ':
case 'グーパー':
document.getElementById('result').textContent = "負け";
break;
default:
document.getElementById('result').textContent = "あいこ";
}
}
</script>
</head>
<body>
<p>相手の手：</p>
<p id="opponentHand"></p>
<p>あなたの結果：</p>
<p id="result"></p>
<button onclick="playGame('グー')">グー</button>
<button onclick="playGame('チョキ')">チョキ</button>
<button onclick="playGame('パー')">パー</button>
</body>
</html>
途中で終わる brake
途中で終わる brake
次は途中で止めるbrakeです。これはコーヒーブレイクですね。
以下の例では1秒づつカウントアップして10を超えたらやめて「10数え終わり！」と表示するコードです。
if文を使い、count++」(１プラスする)で増加させます。
<!DOCTYPE html>
<html>
<head>
<title>1秒カウントアップ</title>
</head>
<body>
<p>10まで数えるjavascriptです。</p>
<p id="counter">0</p>
<script>
let count = 0;
const counterElement = document.getElementById('counter');
function countUp() {
count++;
counterElement.textContent = count;
if (count === 10) {
clearInterval(intervalId);
counterElement.textContent = "10数え終わり！";
}
}
const intervalId = setInterval(countUp, 1000);
</script>
</body>
</html>
数え終わると→
for文(〜の間は・・・）brakeも利用
for文(〜の間は・・・）brakeも利用
for文は〜の間は〇〇するという形になります。
つまり、〜の間は作業を続けます。
for 文の中にある条件がくると終わります。
brakeは強制的にループから抜け出す時に利用する条件です。
以下の例ではfor(let i=1; i<=10; i++)となっています。
初期値としてi=1とします。3番目のi++でiを1づつ増やします。２番目でi<=10で10まで{}を繰り返します。
※ですので10になるとこのループは終わるのでbrakeは本来不要ですが説明のために入れてあります。
※このコードは ループ内が早く回りすぎて答え「10数え終わり！」が表されるだけです。
<!DOCTYPE html>
<html>
<head>
<title>1から10までカウントアップ</title>
</head>
<body>
<p id="result"></p>
<script>
// HTMLの<p>要素を取得
const resultElement = document.getElementById('result');
// 1から10までカウントアップする関数
function countUp() {
for (let i = 1; i <= 10; i++) {
resultElement.textContent = i;
// 10を超えたらループを中断
if (i === 10) {
break;
}
}
// カウント終了のメッセージを表示
resultElement.textContent = "10数え終わり！";
}
// 関数を実行
countUp();
</script>
</body>
</html>
Page updated
Google Sites
Report abuse