プロジェクト
これまで学んできた知識を利用して、はじめてのWebアプリケーション作りに挑戦してみましょう。題材が思いつかない場合は、下の例を参考にしてみてください。
おみくじ
今日の運勢をランダムで表示するアプリです。
ルール
- 20%の確率で
大吉と表示し、文字色を赤色にします - 50%の確率で
吉と表示し、文字色を黒色にします - 30%の確率で
凶と表示し、文字色を青色にします
ヒント
Math.random関数は、呼び出すたびに変わる0以上1未満の一様乱数を返します。
document.write(Math.random()); // 0.8924949384481442
- 発生させた乱数を変数に保存しておきましょう。この乱数は
[0, 1)の一様分布に従うので、例えば[0, 0.2)に含まれる確率は20%になります。
const r = Math.random();
if (r < 0.2) {
// 20%の確率で実行される
} else if (条件式2) {
// 50%の確率で実行される
} else {
// 30%の確率で実行される
}
- クリックするためのボタンと、テキストを表示して色を変えるための
div要素の両方をJavaScriptから取得してみましょう。
index.html
<button id="omikuji-button" type="button">おみくじを引く</button>
<div id="result"></div>
script.js
const omikujiButton = document.getElementById("omikuji-button");
const result = document.getElementById("result");
function omikuji() {
result.textContent = "結果";
}
omikujiButton.onclick = omikuji;
解答例
ストップウォッチ
シンプルなストップウォッチです。おみくじの課題より難易度が高いです。
ルール
スタートボタンをクリックすると、時刻の数え上げが開始されます- 1秒ごとに表示される数値が更新されます
ヒント
setInterval関数は引数をふたつ (func,delay) とり、funcは値としての関数、delayは整数です。setIntervalは、funcに指定された関数をdelayミリ秒の間隔で定期的に実行します。
function greet() {
document.write("<p>Hello World</p>");
}
setInterval(greet, 1000);
このコードを実行すると、1秒ずつ画面に<p>Hello World</p>が書き加えられていきます。
- ボタン要素がクリックされたら
setInterval関数を実行し、タイマーを開始しましょう。
function start() {
setInterval(関数名, 1000);
}
const startButton = document.getElementById("start-button");
startButton.onclick = start;
- 時刻は常にJavaScriptの変数として保持しておくと扱いやすくなります。
let time = 0;
function tick() {
time += 1;
}
- (発展) ストップボタンを作りたい場合は、
setInterval関数の戻り値を利用しましょう。setIntervalの戻り値は整数で、clearIntervalにこの値を渡すと、動作中のタイマーを解除することができます。
let timerId;
function start() {
timerId = setInterval(関数名, 1000);
}
function stop() {
clearInterval(timerId);
}
const startButton = document.getElementById("start-button");
const stopButton = document.getElementById("stop-button");
startButton.onclick = start;
stopButton.onclick = stop;