Embedded Files
前回の続きでloopについてfor loopとwhile loopを見ていきましょう。前回紹介したfor loopは基本ですが、whileでも同様にloopを作ることができます。若干文法が異なります。
forを利用したloop
forを利用したloop
for loopは以下のように行います。
for ( let i=1; i <=10; i++)
for文の中にはカウントアップする変数iの初期値(1)から終わりの値(10)が指定されており、カウントアップは一づつ(i++)となっています。
10秒待ってから”カウント終了”と表示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>カウントアップ</title>
</head>
<body>
<p id="counter"></p>
<button onclick="startCount()">カウント開始</button>
<script>
const counterElement = document.getElementById('counter');
let intervalId;
function startCount() {
for (let i = 1; i <= 10; i++) {
setTimeout(() => {counterElement.textContent = i;}, i * 1000);
}
// カウント終了後に表示する処理
setTimeout(() => {
counterElement.textContent = "カウント終了";
}, 10 * 1000);
}
</script>
</body>
</html>
whileを利用したloop
whileを利用したloop
whileでは以下のようになります。
for loopでは"i" を、while loopでは”count"を用いています。同じ機能の変数です。
今度は最後の”カウント終了”を10秒待つのでなく、loop が終わったら表示するようにしています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>カウントアップ</title>
</head>
<body>
<p id="counter"></p>
<button onclick="startCount()">カウント開始</button>
<script>
const counterElement = document.getElementById('counter');
let i = 1;
// startCount関数をasync関数にする
async function startCount() {
while (i < 10) {
counterElement.textContent = i;
i++;
// 1秒間待つ
await new Promise(resolve => setTimeout(resolve, 1000));
}
counterElement.textContent = "カウント終了";
}
</script>
</body>
</html>
以下の文章の定義がわかりにくいかもしれません。
”const counterElement = document.getElementById('counter');”
これは、document.getElementByIdが２回javascriptの中で用いられているので、この長い表式をcounterElementとして定義して後で繰り返し利用するというものです。もしこれを利用しなければ上のコードはcounterElementに docoument.getEl・・・を代入して上のコードは以下のようなコードでも動きます。このようにコマンドを変数として利用することもできるのですね。
<body>
<p id="counter"></p>
<button onclick="startCount()">カウント開始</button>
<script>
let count = 1;
// startCount関数をasync関数にする
async function startCount() {
while (count < 10) {
document.getElementById('counter').textContent = count;
count++;
// 1秒間待つ
await new Promise(resolve => setTimeout(resolve, 1000));
}
document.getElementById('counter').textContent = "カウント終了";
}
</script>
</body>
while loopで合計計算
while loopで合計計算
while loopでただ数えるだけでなく、合計を計算してみましょう。上の例ではcount++なっていますが、この部分をcountの代わりに変数をtotalにして、「total += x」としてxを「x++」1づつ増加させます。
「total += x」はtotalにxを加えることになります。
1秒では100まで待つのが大変なので、0.1秒送りにしました。(setTimeout(resolve, 100))
「`現在の合計: ${total}`;」の$(total)は変数totalの値を文字に変換して、「現在の合計：」の後に続けて表示します。これにより「現在の合計：55」と表示されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>合計</title>
</head>
<body>
<p id="counter"></p>
<button onclick="startSum()">100までの合計計算開始</button>
<script>
const counterElement = document.getElementById('counter');
//let total = 0; // 全体の合計を保持
async function startSum() {
let total = 0; // 全体の合計をリセット
let x = 1; // 1からスタート
while (x <= 100) {
total += x; // 合計にxを加算
counterElement.textContent = `現在の合計: ${total}`;
x++;
await new Promise(resolve => setTimeout(resolve, 100));
}
counterElement.textContent = "合計終了: " + total;
}
</script>
</body>
</html>
このloopでの計算について説明します。
初期値は、total=0, x=1です。
１回目：「total += x」の結果は、total=0+1=1になります。計算の後でx++があるのでx=2になります。
２回目：「total += x」の結果は、total=1+2=3になります。計算の後でx++があるのでx=3になります。
３回目：「total += x」の結果は、total=3+3=6になります。計算の後でx++があるのでx=4になります。
４回目：「total += x」の結果は、total=6+4=10になります。計算の後でx++があるのでx=5になります。
５回目：「total += x」の結果は、total=10+5=15になります。計算の後でx++があるのでx=6になります。
６回目：「total += x」の結果は、total=15+6=21になります。計算の後でx++があるのでx=7になります。
７回目：「total += x」の結果は、total=21+7=28になります。計算の後でx++があるのでx=8になります。
８回目：「total += x」の結果は、total=28+8=36になります。計算の後でx++があるのでx=9になります。
９回目：「total += x」の結果は、total=36+9=45になります。計算の後でx++があるのでx=10になります。
１０回目：「total += x」の結果は、total=45+10=55になります。計算の後でx++があるのでx=11になります。
Page updated
Google Sites
Report abuse