なりなり日記

スマホ、GARMIN、トレラン、サイクリング、テニス、プログラミングの情報を中心に発信中!

【JavaScript入門】簡単なタイマーを作る


スポンサーリンク

こんにちは、なりなりです(^ ^)


JavaScriptなら誰でもプログラミングが始められる! - なりなり日記
こちらにJavaScriptに関して簡単にまとめましたが、手始めとして、

【Python入門】Pythonistaでタイマーを作る(2) - なりなり日記

【Python入門】tkinkerでタイマーを作る - なりなり日記

こちら、Pythonで作ったのと同じ様なカウンターを作ってみます。

作成したプログラム、counter.htmlの中身がこちら。

<html>
<head>
<title>Timer</title>
</head>

<body>

<form name="timer">
<input type="text" name="textbox" value="10">
<input type="button" value="START" onclick="countdown()">
</form>


<script type="text/javascript">
var count;

function countdown(){
   count = Number(timer.textbox.value);
   //alert(String(count));
   
   if(count <=0)
       alert("時間です!");
   else{
       setTimeout("countdown()", 1000);
       count--;
       timer.textbox.value = String(count);
   }
}
</script>

</body>
</html>


<form>から</form>でform(タイマーと命名)の中に、text(textboxと命名)とボタン(今回は必要無いので名前は付けません)のウィジェットを定義しています。

button スタートを押す(クリックする)とcountdown関数が実行されます。

記述方法が異なりますが、PythonでUIを構築するのと同様ですね。

formは<body>と</body>の間、<script>の上に記述します。


後は関数contdownの定義です。

Number(timer.textbox.value);

は定義したtimerのtextboxの値を数値に変換します。

ウィジェットに名前を付けていない場合は

timer.elemnts[0].value

と記述します。elemnts[]の中の数値は0をスタートに定義した順番となります。

今回は0:text、1:buttonです。

setTimeout("countdown()", 1000);

が今回の肝で、1000ms後にcountdown関数を呼び出します。
関数の中で再起呼び出しをすることによって1000ms毎に連続実行する作りは、Pythonで作ったプログラムと同じです。

alert("時間です!");

これで簡単にメッセージウィンドウが開けるので入れてみました。


<body>から</body>をこのエントリー内で直に書き込むと下記の様になり、ボタンを押すと実行されます。






当たり前だけど、JavaScriptはブログ内でも普通に実行できるんですねー、素晴らしい!

せっかくJavaScriptの勉強を始めましたが、どうやら去年あたりから、DropboxやGoogle Driveなどで一斉にJavaScriptをURL指定して直接実行することが出来なくなったようなんですよ。

それなら安価なレンタルサーバーでも借りようかと(ロリポップ!の最安は月100円!)思ったのですが、当面は必要ならブログに埋め込むで良いかな。

そのうち興味を持ったら借りてみるかも。

ブラウザから直接実行出来るブックマークレットも勉強したい。


Python、JavaScript(HTMLの勉強も含む)と始めてみて、自分で出来ることが格段に増えて楽しいです。

特に、僕は、トレラン、サイクリング、テニス(先週、会社のテニス部に入ってやる気満々!)と楽しみがスポーツばかりだった(このブログは趣味と実益を兼ねてますが)ので、プログラミングを趣味にするのもいいかも(^-^)