Today I Learned #3

Date()オブジェクト、InnerText()、setInterval()関数、3つの演算子

momentumというクロム拡張プログラムの講座が始まりました.1月14日から行われている挑戦戦に出場したが、アルバイト並行のため予習がないと追いつけない.
"Divide & Conquer!"授業を始めたばかりの頃、尼はいつも重視しなければならないと言っていた.今学期のプロジェクトを実行した時にも何度も思い出した言葉だが、実際には規模の大きいプロジェクトにはあまり当てはまらなかった.プロジェクト以外のいくつかの課題は、main()関数ではprintList()sortList()のような関数のみを符号化し、以降のテスト期間中にコードを復習して表示する際にも見ることができるようにする.彼が一目でどんな機能なのか認識できたのを覚えていて、驚きました.これをしっかり覚えて、ますます規模の大きいコードに応用しようと努力しましょう.
Date()オブジェクトを読み込むことで、オブジェクトを読み込むときの時間を変数として保存できます.
どんなに时が流れても呼び出しgetMinute()も26を返します.なぜならconstでdateを保存したときの分は変わっていないからです.

const clockContainer = document.querySelector(".js-clock"),
clockTitle = clockContainer.querySelector("h1");

function getTime(){
    const date = new Date();
    const minutes = date.getMinutes();
    const hours = date.getHours();
    const seconds = date.getSeconds();
    clockTitle.innerText = `${hours}:${minutes}:${seconds}`
}

.innerText()および벡틱を使用して、Dateオブジェクトが受信した時間および分をクロックTitleに挿入します.
参照として、querySelector()では、文字列はhtml tagである.classを貼ると、idと認識されます.getElementById()は、idへのアクセスが可能で、処理速度が速いなどの利点を有し、querySelector()は、idまたは要素へのアクセス時に同名要素が多い場合、最初に見つかった最初の要素を深さ優先(depter-first)前列順序(pre-order)で返す.このほか、node-listを返すのとHTML Collectionを返すのとの違いもありますが、後で説明します.
ClockContainerに戻り、画面を最初にロードしたときの時間ではなく、変更するたびの時間出力を出力し続ける場合はどうすればいいですか?
最初はsetInterval関数で簡単に1秒ごとに時間を再取得します.
setInterval()関数を用いてクロックを毎秒更新することに成功したが,クロックが59秒から0秒に変化すると,秒は1桁単位でしか表されないことに気づいた.
したがって、${seconds}の値が10未満の場合は0${seconds}を出力し、そうでない場合は${seconds}をinnerTextの値として出力し、結果を表示する3つの演算子によって記述される.
のように、確認は1秒ではなく01秒!

    clockTitle.innerText = `${
        hours < 10 ? `0${hours}` : hours}:${
        minutes < 10 ? `0${minutes}` : minutes}:${
        seconds < 10 ? `0${seconds}`: seconds}`;

以上はgetTime()関数のinnerText部分のみを修正するコードです.
三項演算子は、第一項に条件を記入した後、?、第二項に条件を満たす場合を記入する.その後、:と書いて、第3項を書いて、条件に合わない場合は、第3項を書きます.