プロジェクト

これまで学んできた知識を利用して、はじめての Web アプリケーション作りに挑戦してみましょう。題材が思いつかない場合は、下の例を参考にしてみてください。

おみくじ#

今日の運勢をランダムで表示するアプリです。

ルール#

20%の確率で 大吉 と表示し、文字色を赤色にします
50%の確率で 吉 と表示し、文字色を黒色にします
30%の確率で 凶 と表示し、文字色を青色にします

ヒント#

Math.random 関数は、呼び出すたびに変わる 0 以上 1 未満の一様乱数を返します。

document.write(Math.random()); // 0.8924949384481442

発生させた乱数を変数に保存しておきましょう。この乱数は [0, 1) の一様分布に従うので、例えば [0, 0.2) に含まれる確率は 20% になります。

let 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

let omikujiButton = document.getElementById("omikuji-button");let 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);}
let startButton = document.getElementById("start-button");startButton.onclick = start;

時刻は常に JavaScript の変数として保持しておくと扱いやすくなります。

let time = 0;
function tick() {  time = time + 1;}

(発展) ストップボタンを作りたい場合は、 setInterval 関数の戻り値を利用しましょう。 setInterval の戻り値は整数で、clearInterval にこの値を渡すと、動作中のタイマーを解除することができます。

let timerId;
function start() {  timerId = setInterval(関数名, 1000);}
function stop() {  clearInterval(timerId);}
let startButton = document.getElementById("start-button");let stopButton = document.getElementById("stop-button");startButton.onclick = start;stopButton.onclick = stop;