時計を写経の後に作ってみた #JavaScript

デジタル時計を作って見た

手を動かしながら考える経験積むために時計を作ってみた
CSSは度外視の現在の時刻表示をするもの
(今回、Qiita初投稿なのだけど、こういう書き方なんですな　慣れなきゃ)

写経元にしたURL

https://qiita.com/delph/items/9c702cdf03a5679d93e0
（@delphさん、丁寧な説明で分かりやすかったです。ありがとうございます）

コード

使う言語は以下二つ

clock-easy.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--時刻表示　時：分：秒-->
    <div id="clock-time"></div>

    <!--日付表示　20xx/0x/0x-->
    <div id="clock-date"></div>

    <!--上記二つはjsから読み込む-->
    <script type="text/javascript" src="clockEasy.js"></script>
</body>

</html>

clock-easy.js

  //時間が更新されるように時計機能を函数「clock」とまとめる

  function clock() {

   //前準備　曜日を表す各文字列の配列
  var weeks = new Array('sun','mon','tue','wed','thu','fry','sat')

　　// 数字が 1ケタのとき、「0」を加えて 2ケタにする
  var twoDigital = function(num) { //変数twoDigitalを設定する 引数（材料）はnum
        var digit  //変数digitを定義　numに0を加えるためのもの
         if (num < 10) {digit = "0"+ num; }  //if文 "0"+は文字列として0を足すため
         else {digit = num; }         
         return digit ;  //返り値（結果）としてdigitを返す
    }
 
  //  現在日時を表すインスタンスを取得→メソッドを使って時間情報をそれぞれ取得する

  var now =new Date();  //コンストラクタDate()により得た日時情報をインスタンス「new」に格納　newの中に現在の時間情報が全部入っている

  var year = now.getFullYear();
  var month = twoDigital(now.getMonth() +1 );        // 困る　月が２月なのに1月 → なので結果に1足す(10行目)
  var day = twoDigital(now.getDate());
  var week = weeks[now.getDay()];          // 困る  weeksがなければ曜日が数字表記 → なので、配列Arrayを使用して数字を曜日に変換するインスタンス「week」を作成し、代入　（4,13行目）
  var hour = twoDigital(now.getHours());
  var minute = twoDigital(now.getMinutes());
  var second = twoDigital(now.getSeconds());


 //　HTML: <div id="clock_date">(ココの日付文字列を書き換え)</div>
  document.getElementById('clock-date').textContent
   = year + '/' + month + '/' + day ;

 //　HTML: <div id="clock_time">(ココの時刻文字列を書き換え)</div>
  document.getElementById('clock-time').textContent
   = hour + '/' + minute + '/' + second;
   

  }

 // 上記のclock関数を1000ミリ秒ごと(毎秒)に実行 

 setInterval(clock, 1000);

わかった事

・VS Code

progateで勉強したのみだったので、VS Code使って見たかった
ターミナルの使い方（mkdir,touch,cd,open）をつかめた
ブラウザでの検証

・HTML
雛形の作り方
jsファイルの取り込み方と連携の仕方

・js
使用した関数の動作
変数定義の順番

・詰まったところ
写経元様の記事にて作成ステップがあったので、その順番でjsは書き足していった。
まず、「時計機能作って、その後に、0で桁合わせしよう」と思って書いてたら、桁合わせしたいgetMonthとかの下にdigit変数の定義をしていて、エラーが出て悩んだ。
しょうもないミス。