初心者による初心者のためのJavaScript講座Ⅵ｜ゼロからのWeb制作 Vol.21｜SSCのホームページ制作・集客スクールブログ
こんにちは、鈴木です。
今回は、秒単位で表示するデジタル時計をJavaScriptを使って作りたいと思います。
目次
- 今回のプログラムコード
- プログラム解説
1.今回のプログラムコード
今回ご紹介するプログラムも前回の内容をベースに、追加する部分だけを書いていきます。
<html>
<head>
<title>デジタル時計</title>
<script type ="text/javascript">
<!--
function myTime(){
var myWeek=new Array("日","月","火","水","木","金","土");
var mydat=new Date();
myYear=mydat.getFullYear();
myMonth=mydat.getMonth()+1;
myDate=mydat.getDate();
myDay=mydat.getDay();
myHours=mydat.getHours();
myMinutes=mydat.getMinutes();
mySeconds=mydat.getSeconds();
var mymsg=myYear+"年"+myMonth+"月"+myDate+"日"+myWeek[myDay]+"曜日"+myHours+"時"+myMinutes+"分"+mySeconds+"秒"
document.myForm.myFormDate.value=mymsg
}//-->
</script>
</head>
<body onLoad="myTime()";>
<form name="myForm">
<input type="text" size=45 name = "myFormDate">
</form>
<script type ="text/javascript">
<!--
setInterval("myTime()",1000);
}//-->
</script>
</body>
</html>
こちらが今回追加するコードです。
2.プログラム解説
まず、新しい変数を定義します。
今回のように関数内で宣言する変数をローカル変数といいます。ローカル変数とは宣言した関数内でのみ有効な変数です。
今回の場合、関数外に変数を宣言してもプログラムは正常に動きます。
ローカル変数の他にグローバル変数があります。グローバル変数は、プログラム全体の関数で有効に働きます。
var myWeek=new Array("日","月","火","水","木","金","土");
var mydat=new Date();
function myTime()という新しい関数を作ります。（関数名は適当で構いません。）
Arrayオブジェクトを使い、曜日を配列します。
次に現在時刻を取得するためにnew Date()を定義します。
new Date()はDate()オブジェクトのコンストラクタの一つでシステムの日付をセットします。
myYear=mydat.getFullYear();
myMonth=mydat.getMonth()+1;
myDate=mydat.getDate();
myDay=mydat.getDay();
myHours=mydat.getHours();
myMinutes=mydat.getMinutes();
mySeconds=mydat.getSeconds();
ここでは、Dataオブジェクトの利用可能なメンバを使い、年、月、日、曜日、時、分、秒を取得します。getMonth()+1となっているのは月の指定は0~11で行うため、実際に表示するときは+1を加えます。
今回のようにあえてvarを書かなくても変数宣言をすることは可能です。
この時点で現在の日付を取得することが出来ました。
<code var mymsg=myYear+"年"+myMonth+"月"+myDate+"日"+myWeek[myDay]+"曜日"+myHours+"時"+myMinutes+"分"+mySeconds+"秒"
次にブラウザ上で表示するためにmymsgという変数を定義します。
ここではわかりやすくするために取得した時刻に年、月、日、曜日、時、分、秒、をつけます。
<body onLoad="myTime()";>
<form name="myForm">
<input type="text" size=45 name = "myFormDate">
</form></body>
formタグで時刻を出力するエリアを作ります。
ここでformタグ、inputタグ両方に名前(name)を付けます。
sizeは適当に設定してください。
bodyタグに onLoad=”myTime()”と付けたのはページを更新するごとに新しく日付・時刻を取得するためです。
document.myForm.myFormDate.value=mymsg
documentで先程指定したエリアに時刻を表示させます。
<script type ="text/javascript">
<!--
setInterval("myTime()",1000);
}//-->
</script>
ここまででページの更新のたびに時刻も更新していきます。
さらに、setIntervalを使い、常にこの関数を動かすことでデジタル時計のようにすることができます。
setIntervalは前回でも紹介しましたが、「決められた時間間隔で繰り返し処理を実行する」メソッドです。
これでプログラムの解説は以上になります。
実際にブラウザに表示するとこちらのようになります。
次回もJavaScriptについて書いていこうと思います。
SSCのホームページ制作・集客スクール
当社では、WordPress講座を中心としたホームページ制作・集客スクールを運営しています。
教室は、さいたま市の浦和駅から徒歩5分。
Webサイト制作から運用まで幅広いプロのスキルやノウハウを、 目的に合せてピンポイントで習得できるマンツーマン形式のWebスクールですので、
・個人事業主、中小企業の経営者
・企業内のWeb担当者
・起業（フリーランス）する予定のある方
・Webのスキルを活かしたダブルワークをしていきたい方
・Webのスキルを習得したい学生
などなど、様々な方に幅広い目的で受講していただくことが可能です！
SSCのホームページ制作・集客スクールはこちら。
S.S
