Javascript Part 3

講師:李戈穎(ソフトウェアエンジニア/生活コードオペレータ)

学習内容

前回のレッスンで学んだloopを集中的に復習し、最初のレッスンで作成したWebサイトでhashightbutton codeをloop形式で作成しました.すなわち、アンカータグをquerySelectorとして指定する方法で、アンカータグのidをloopとquerySelector Allに変更する.

<input type="button" value="night" id="daynight" />

<script>
    let button = document.querySelector("#daynight");
    let limb = document.querySelector("body");
    let groupA = document.querySelectorAll("a");
    document
      .getElementById("daynight")
      .addEventListener("click", function () {
        if (button.value === "night") {
          limb.style.backgroundColor = "black";
          limb.style.color = "white";
          for (let i = 0; i < groupA.length; i = i + 1) {
            groupA[i].style.color = "white";
          }
          button.value = "day";
        } else {
          limb.style.backgroundColor = "white";
          limb.style.color = "black";
          for (let i = 0; i < groupA.length; i = i + 1) {
            groupA[i].style.color = "black";
          }
          button.value = "night";
        }
      });
  </script>

次に,関数の定義,利点,使用例を紹介した.functionは、相互に関連するコードパケットによって定義される.functionを使用すると,(1)コードを簡潔にするだけでなく,(2)可読性が良く,(3)複数の位置のコードを同時に操作し,メンテナンスが容易になる.関数は、コマンドreturnを使用してコード入力の終了と出力を分離することもできます.一般的に,コードの機能が分離されるほど利用率が高くなるからである.最後にオブジェクト向けの学習を行った.オブジェクト指向とは,相互関係の変数と関数をグループ化して定義する方法論である.

困難と解決策

個人的に長い間勉強してきたJavaScriptの文法と概念が現れたため、コードの書き方と具体的な使い方に慣れていない.週末を利用して、一週間で学んだ多くの内容を充実させるように努力します.李戈穎先生は、コードを繰り返して、仕事の時間が減らないときは、この言語の本族語に近づく過程だと話しています.自分で管理して、自分が勉強を続けることができるようにしなければなりません.

Day 3 review

JS function

JS function application

JS object

感想

李ゴヨン講師は、短期間で迅速な進行しかできない現実を懸念し、JavaScriptを駆動する核心原理はconditional statementとloopであることを強調した.すなわち,機能とオブジェクト向けは複雑で変化の多いコアコンテンツを整理する補助引き出しであると考えている.そのため、本人も李戈穎先生の指導に従って、まず核心原理を明確に把握してから、いろいろな補助文法を練習することを決意しました.