こんにちは、なりなりです(^ ^)
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の勉強も含む）と始めてみて、自分で出来ることが格段に増えて楽しいです。
特に、僕は、トレラン、サイクリング、テニス（先週、会社のテニス部に入ってやる気満々！）と楽しみがスポーツばかりだった（このブログは趣味と実益を兼ねてますが）ので、プログラミングを趣味にするのもいいかも(^-^)
