（クライアント側）JavaScriptの第二歩（時計を例に）

おさらい

HTMLファイルの先頭には、図のような２行（日本語文字を表示しなければ先頭行だけでも）を入れておくこと。
以下の例ではこの枠組は省略して提示する。

1 現在時刻を表示する

まずは、表示する場所を作っておこう
（中身は空でもいいし何か文字が入っていてもいい）。
（＝＞最初のサンプルのソース）
```
  <span id=clock></span>
```
```
  span#clock
```
ページをloadしたタイミングで、そのSPANに時刻を表示させる。
- スクリプトの2,3行目で、表示する文字列（日付と時刻）を生成している。
```
javascript:
  var clk=document.getElementById('clock');
  var now=new Date();
  clk.innerHTML=now.toLocaleString();
```
ついでに、文字の大きさも変えておこう（ここではCSSを使う）。
```
  <style>
  #clock{font-size:100px}
  </style>
```
```
  css:
    #clock{font-size:100px}
```
（=>ここまでのサンプルのソース）
ブラウザの開発ツールは他にも様々な機能がある。

２定期的実行

ここまでのプログラムは、ページを表示した時点での時刻が表示され、
そのまま止まったままである（ページを再表示させれば時刻が変るが）。
JavaScriptではタイマー動作をする関数が２つ用意されている。
1. SetTimeout(動作, 待機時間)
  - 第一引数には、実行すべきコード（文字列として）か、すでに定義した関数名を渡す。
  - この関数自体は一回の動作しかしないが、繰り返し動作をするプログラムは簡単に作れる。
    (=>たとえばこういう解説ページを参照のこと)
2. setInterval(動作, 時間間隔) : 解説ページ
  => 今回はこちらを使う。なお、いずれの関数も、第二引数（時間）の単位はミリ秒。
簡単な動作ならば、第一引数の与え方を、
```
  setTimeout("alert('5秒経過しました')",5000)
```
のように与えることができる。
（=>このコードは、ブラウザのJavaScriptコンソールで実行して見て下さい（F12またはCtrl+Shift+J））。

ルール補足

文字列内の関数呼出を終端するセミコロンは略してもいい。
文字列の中に文字列があるので、一方をダブルクォート、一方をシングルクォートで囲んだ。

（が、ここではやや長いコードなので、関数を定義しておき、その名前を渡すことにする。）

すでに理解されているだろうが、このコード例はJavaScriptのコードであるから、
HTMLの中に埋め込むならば < script > タグで囲む必要がある（これ移行は省略して表記する）。
```
    var clk=document.getElementById('clock');
    function showTime() {
      clk.innerHTML=new Date().toLocaleString();
    }
    setInterval(showTime,2000);
```
（=>ここまでのサンプルのソース）

12/8 ここまで

以下は次回扱います

３ライブラリ（jQuery）を使った書き方

ライブラリの読み込み

セレクタの活用

要素に対する処理