時計を作ってみる

枠組み

ざっとこんな感じかな。

  <!doctype html>
  <meta charset="utf-8"/>
  <script src="http://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
  <style></style>     <div></div>
  <script>
  function get(){     // データ取得
  }
  function put(str){  // 画面に表示
  }
  setInterval(get,1000)
  </script>

ソース(HTML)はここ

バージョン1 内部の時計を使って

内部の時刻を取得する。（これが　get()　の中身）

new Date().toLocaleTimeString() この書き方などは、おそらく「Javascript 現在時刻」でググれば見つかるだろう。
それを表示。jQueryで簡単にすませる。

str に値が入ってるとして、$('div').text(str) 、これは前回扱ったのと同じ技術。
- ちなみに、ネイティブjavascriptで書くなら、div にidをつけて（仮に id=“clock” とすると）、document.getElementById('clock').textContent=str
のように、ちょっと長くなる。この「ちょっと長くなる」の蓄積がプログラミングを煩雑にするので、コンパクトに書ける技術を追求することは今後重要になるだろう。
これを記入したHTMLソース（ソース表示して確認ください）

バージョン２ NICT にアクセス

「日本標準時」で検索するとNICTのページがすぐ見つかります。ここからデータをもらいましょう。「技術情報」のページで、右図の、「時分秒」のあたりのアドレスにアクセスしてみます。
jqueryのAjax機能を呼ぶ関数のメインの名前は $.ajax()ですが、その簡略計がいくつか用意されていて、

HTTPのGETメソッドでデータを取得するだけなら、$.get() のほうが使いやすいでしょう。
- 第一引数がアクセスするURL、第２引数に渡したいパラメータ（ここでは特に使わないので、空の { } だけ）、第３引数がコールバック関数です。
- コールバック関数として、function(data) {...} のようなプログラムを渡す使用例が多いけど、すでに put を用意してあるので、その名前を渡すだけで動きます。
実は、jQueryのslim版には Ajaxの機能は入ってません。外部Scriptタグのsrcパラメータを、slimじゃないものに置き換えて下さい。
- slim版だと、（F12で開発ツール/コンソールを開くと）右図のようなメッセージが出るかと思います。

他に、ちょこっとCSSを追加しました。結果、こんな感じになります（ソースはここ）。

<!doctype html>
<meta charset="utf-8"/>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>div{font-size: 50pt}</style>
<div></div>
<script>
function get(){     // データ取得
    $.get('https://ntp-a1.nict.go.jp/cgi-bin/time',{},put)
}
function put(str){  // 画面に表示
    $('div').text(str)
}
setInterval(get,5000)
</script>

まとめ

Web技術は、HTMLのタグ、フォームによる対話、CSS、といった技術から出発して、 javascript言語との融合、Ajaxなどが加わって機能を多様化してきた。
Ajaxの採用により SPAや、ハイブリッドアプリケーションという発展形も出現したが、

その反面、プログラムの複雑化は開発者を悩ませる問題にもなっていて、その意味ではまだまだ発展途上の技術と言えるのかも知れない。