今週末は天気が悪いですね。ディズニー行きがまたまた伸びそうな予感です。今日も朝から大雨でしたので、５時に一度起床しましたが即あきらめて二度寝してしまいました（笑）。
さて、そんなわけで時間がありましたので、今日もJavaScriptのプログラム作りをしていました。
デジタル時計を作る
私がJavaScriptの勉強をしていて、まず最初の目標に「Webサイトにカレンダーを表示する」というものがあります。カレンダー作りができるようになるまではまだまだ時間がかかりそうですが、今日は同じ「日付・時間」関係からデジタル時計を作ってみました。プログラムは次のように作りました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScript Watch</title> </head> <body> <form name="watch"> <input type="text" id="contents"> </form> <script> function digitalWatch() { var dt = new Date(); var hr = dt.getHours(); var mn = dt.getMinutes(); var sc = dt.getSeconds(); if(hr < 10) { hr = "0" + hr; } if(mn < 10) { mn = "0" + mn; } if(sc < 10) { sc = "0" + sc; } var WatchString = "今の時間 " + hr + "時" + mn + "分" + sc + "秒"; document.getElementById("contents").value = WatchString; setTimeout(function() { digitalWatch(); },1000); } digitalWatch(); </script> </body> </html>
今回のプログラムで、新しく使ったものは現在日時を得るための「Date()」と１秒経つと処理を実行する「setTimeout()」です。
「Date()」で得られる現在日時は今後カレンダーを作るうえでも必要になってくるものなのでもう少し詳しく調べていこうと思います。
また「setTimeout()」ですが、同じように一定時間で繰り返し処理するものとして「setInterval()」というものがあります。
私が学習したドットインストールの「JavaScript入門」では、一定時間間隔での繰り返し処理は「setInterval()」より「setTimeout()」を使った方が良いと言っていました。
「setInterval()」と「setTimeout()」は同じように一定時間ごとに処理を行うものですが、「setInterval()」は一定時間で前の処理が終わっていなくても次の処理を実行するのに対し、「setTimeout()」は前の処理の終了を考慮したうえで次の処理を実行するとのことでした。
「setInterval()」で時間内の終わらないような重い処理を繰り返し実行すると最悪ブラウザクラッシュする恐れもあるそうです。今回のデジタル時計のような処理はどちらを使っても大丈夫だとは思いますが、ドットインストールの教えに従い、今後このような処理を行う時は「setTimeout()」を使った処理を書いていこうと思っています。
実際実行するとこんな感じになります。
