（クライアント側）JavaScriptの第二歩

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

おさらい

HTMLの先頭２行

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では動作を引数として渡す時に、関数名で渡すことも、プログラム片を表す文字列で渡すこともできる。
  他に、無名関数（匿名関数、即時関数とも呼ばれる）」という渡し方もあるが、ここでは解説は省略しておく。

スクリプトの形式２つ

文法とルールについて補足

多くのWebページでJavaScriptによるスクリプトが動作している。
- ブラウザの「ソース表示」機能で見ることができる（確認してみて下さい）。
- ページに貼付けてある（または外部ファイルとして読み込む）スクリプトは右図のように読みやすい形式のものと、圧縮された（minify compress 或いは uglify された）形式のものがある。が、内容的には違いはない。
JavaScript(をはじめとする昨今の多くのプログラミング言語）は、Case-sensitive。
- さらに、やや長い（２つ以上の英単語をつないで作ったような）名標は、Camel Case で作られる。
- なので、入力の際はどこが大文字になるか、注意を払うこと。
- time out というような言葉は、英単語として１語なのか２語なのか、判断に苦しむケースがあるので注意。
最近のJavaScriptでは、文字列内の関数呼出を終端するセミコロンは略してもいい。
- CやJavaに慣れている人は、必ずセミコロンで終端させる書き方を貫いてもかまわない
- 逆に、セミコロンを省略できるようになったことで、複数行にわたる式を書くときに、どこで改行させるか、工夫が必要になってきている。
- JavsScriptにおけるセミコロンについては様々な評論や議論が行われているので見ておいて下さい。
上記の例では、文字列の中に文字列があるので、一方をダブルクォート、一方をシングルクォートで囲んだ。
- こうしないと、クォート文字の対応関係が、プログラムによって意図しない解釈をされたりエラーを起こしたりする。
（が、ここではやや長いコードなので、関数を定義しておき、その名前を渡すことにする。）
すでに理解されているだろうが、このコード例はJavaScriptのコードであるから、
HTMLの中に埋め込むならば < script > タグで囲む必要がある（これ移行は省略して表記する）。
```
    var clk=document.getElementById('clock');
    function showTime() {
      clk.innerHTML=new Date().toLocaleString();
    }
    setInterval(showTime,2000);
```
（=>ここまでのサンプルのソース）

HTMLでコメントの囲み方
HTMLでのコメントの文法も理解しておくこと。
- 右図の記号で囲まれた区間は表示上は無視される。

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

おさらい

1 現在時刻を表示する

２ 定期的実行

文法とルールについて補足

２定期的実行