JavaScriptのコードを書こう6 for文で繰り返す回数を指定して、繰り返し処理を行う

<script>
var n;

for (n = 0; n < 5; n++) {
    document.write(n);
    //改行
    document.write("<br>");
}
</script>

表示される内容は

0
1
2
3
4

となります

forで指定した回数だけ処理を繰り返すことができます。
for (n = 0; n < 5; n++){}とすると、nが0からnが5になるまで、n++(一回の処理が終わる度にnに1ずつ加える)という処理で、nが0,1,2,3,4と5回繰り返し処理を行います。

ここで使用したn++という処理は繰り返し処理内でなくても使えます。

<script>
var n = 5;
//変数nに1を足す
n++;
//6と表示される。
document.write(n);
</script>

for文の中で指定した回数よりも前に繰り返し処理を抜けたい場合は、break;を使います。たとえば、冒頭の処理でnの値が3を超えたら繰り返しから抜けるという指示を追加する場合、

<script>
var n;

for (n = 0; n < 5; n++) {
    document.write(n);
    //改行
    document.write("<br>");

    //forの処理から抜けるための条件
    if (n == 3) {

        //breakが読み込まれたら、forの処理を終了する
        break;
    }
}
</script>

表示される内容は

0
1
2

となります

このようにforの中でif文を用いて、条件によってはbreak;を読み込むことで、指定回数よりも前にfor文の処理を終えることができます。

JavaScriptのコードを書こう5 条件を満たすまで繰り返すdo-while文

<script>
var name = "";
var right = false;

do{
    name = window.prompt("リンゴを英語で書くと何ですか？");
    if(name == “apple”){
        right = true;
    }
}while(right == false);

document.write("リンゴを英語で書くと" + name + "です。");
</script>

今回はdo-whileを利用しています。

do-whileはwhileの後にある()内の条件を満たしている限りは繰り返すという処理となり、今回はright変数に入れた値がtrue(真:正しいという意味)であれば繰り返し処理を抜けることができます。

処理の初めに変数rightにfalse(偽:正しくないという意味)の値を入れておき、do-whileの処理を開始します。繰り返し処理の途中で入力フォームを表示して、値を入力してもらいます。入力した値が正しいかどうかはif文で判定して、正しければ変数rightにtrueを入れることによって、繰り返し処理を抜けることができます。
(変数 == 値のように==にすると右の値と左の値が等しいかを調べます)

rightのように処理が正しいかを調べてその状況を残しておくための変数をフラグと呼びますが、繰り返し内で期待する処理が終わるまで何度のトライさせるためにフラグとdo-whileの組み合わせを行うことが有効です。

フラグを使わない処理として、

<script>
var name = "";

do{
    name = window.prompt("リンゴを英語で書くと何ですか？");
}while(name == "apple");

document.write("リンゴを英語で書くと" + name + "です。");
</script>

このようにwhileで直接name変数内の値を判定する方法も有りです。＜

今までの話はdo-while文で処理を行ってから条件により繰り返しを抜けるか判定していましたが、

<script>
var count = 5;

//countの中身が5未満の場合なら{}の中の処理を実行する
while(count < 5){
    document.write(count + "です");
    count++;
}
</script>

処理を行う前にwhileを持ってきて判定することも可能です。

JavaScriptのコードを書こう4 if文(条件分岐)で変数に入っている値によって処理を変える

変数に入っている値を調べて、結果を出し分けるためにif文を使います。

<script>
//点数を入れるための変数
var score = 50;

//50点以上
if (score >= 50) {
    document.write("点数は50点以上です。");

//50点未満
} else {
    document.write("点数は50点未満です。");
}
</script>

elseはif文の条件を満たさなかった時に読みに行く箇所になります。
if文で調べたい条件を増やしたい場合は、elseの後にifをつけて条件を増やします。
(documet.write();の前のスペースはキーボードのtabキーを押すと、適切な空白が入ります。)

window.prompt("表示したい文字");で入力フォームを表示します。

<script>
var score = window.prompt("点数を入力してください。");

//スコアが70点以上の場合
if (score >= 70){
    document.write("成績優秀者です。");

//スコアが70未満(一つ上の条件を通過しているため)、50点以上の場合
} else if(score >= 50) {
    document.write("良くできています。");
//50点未満の場合
} else {
    document.write("頑張りましょう。");
}
</script>

JavaScriptのコードを書こう3 計算上の注意点

<script>
var num1 = 5;
var num2 = 6;
document.write(num1 + num2);

var num1 = "5";
var num2 = "6";
document.write(num1 + num2);
</script>

たとえば、
var num1 = 5;
var num2 = 6;
document.write(num1 + num2);
としてみましょう。表示される値は11になります。

ここで、
var num1 = "5";
var num2 = "6";
document.write(num1 + num2);
とすると、56と表示されます。

これは、5と6が数字ではなく、文字として認識されたことにより、5という文字と6という文字をつなげるという処理になり、56と表示されます。

文字列を数字に変えたい場合は、parseInt()を使います。

<script>
var num1 = "5";
document.write(typeof num1);

num1 = parseInt(num1);
document.write(typeof num1);
</script>

この時、一度目のtypeof num1では、string(文字列)となり、二度目のtypeof num1ではnumber(数字)になります。

JavaScriptのコードを書こう2 変数

<script>
var num = 5;
var string = "sample";

document.write("numは" + typeof num + "です。");
document.write("stringは" + typeof string + "です");
</script>

変数とは値を入れる箱のようなもので、var {変数};のように書きます。変数を定義する時はvar {変数}と{変数}の前にvarを書きます。変数名は自由に決めることができます。var a;という形でも構いません。

var num = 5;と書いた時、=の右側の値を、=の左側の変数に入れるという意味があり、var num = 5;はnumという変数に5という値を入れたということになり、この時の値は数字です。

変数に文字を入れる場合は、var string = "sample"といった様に値の両側に"(ダブルクォーテーション)をつけると文字列として扱われるようになります。

typeof {変数}で変数に入れた値が数字か文字列かを調べることができます。
数字ならnumberで、文字列ならstringと表示されます。

補足
document.write();はカッコに入れた文字や変数の値を表示します。

JavaScriptのコードを書こう1 基本的な書き方

メモ帳を開き、sample.htmlというファイル名で保存します。

JavaScriptのコードは、

<script>
//ここにプログラムを書く
var a = "何かの値";
</script>

<script>で囲った箇所にプログラムを書いていきます。コードを書くときは、一つの処理を一行で書き、行の最後に;(セミコロン)を付け、次の処理は改行して書き始めます。

//(ダブルスラッシュ)の後に文字を書くと、コメントとして認識されプログラムのコードとして実行されることはありません。
/* コメント */の形式でもプログラムのコードとして実行されません。

<script>
//変数aに5という値を入れる。この行はコメントのため実行されません。
var a = 5;

/*
    複数行にわたってコメントを書きたい場合は、この形式を使います。
    改行しても一つのコメントとして扱われます。
 */
</script>