1.学習ログ

-復習
:style tagに書くのが望ましいか、特定のtagにスタイルを単独で書くのもよい.
書き込み内容がstyletagに書き込まれた内容と同じである場合、アプリケーションは1つのみです.
この場合、最も重要なスタイルだけを適用したい場合は、スタイルに!重要な情報を追加します.
:CSSスタイルHTML上

<style></style>

と書くことはできますが、linkラベルは使用できます.
またCSSファイルを作成してリンクするので、修正しやすいです.
-今日の勉強
条件文-条件ステータス

   <h1>Conditional Statements</h1>
      <script>
         console.log(1);
         if(true){
            console.log('2 - true');
         }else{
            console.log('2 - false');
         }
         console.log(4);
         // true라 된 부분은 실행되고 false는 실행이 안됨
         if(false){
            console.log('5 - true');
         }else{
            console.log('5 - false');
         }
         console.log(6);

      </script>

もし{
条件(condition)が真の場合、実行するコード
} else {
もう1つの実行するコード
}
条件文と呼ばれるプロセスではなく、異なる条件で実行させます.
elseも条件を追加したい場合は、elseではなくelseに変更し、条件文を追加します.
ブライアン・ボロラン
任意のプログラミング言語に存在するデータ型、値はtrueまたはfalse、
全部で2つの資料型しかありませんが、Boolean資料型です.
Boolean資料型声明は以下の通りである.

<h1>Boolean</h1>
<script>
   console.log(true);
   console.log(false);
</script>

比較演算子-Comparison Operator
比較演算子は、被演算子間の相対的な大きさを判断することによって、真(true)と偽(false)を返す.
2つの被演算子を持つ2つの演算子.左から右に、被演算子の組み合わせ方向は次のとおりです.
ちなみに、この項演算子は以下に説明する記号であり、被演算子はこの項演算子の両側からの値を指す.

-コメントサイト
[http://www.tcpschool.com/javascript/js_operator_comparison]

<h1>Comparison Operator</h1>
<script>
   console.log(1>1);
   console.log(1===1);
   console.log(1!==1);
   //!는 not을 뜻함, ==는 같음을 뜻하고, ===은 정확히 같음을 뜻함.
</script>

繰り返し文-ループ状態
条件が正しい場合は、この条件を繰り返します.
複文を使用する前に、まずアレイについて説明します.

<h1>배열(Array)</h1>
<script>
   let topic1 = 'html';
   let topic2 = 'css';
   let topic3 = 'css';
   let topics = ['html','css','js'];
   // 일일히 topic이 뭔지 정해도 되지만, 묶어서 [] 정하는게 편하다.
   console.log(topics.length); //topic이 지정된 수만큼 보여주기.
   console.log(topics[0]); 
   //그룹으로 묶인 각각의 값을 'element'라고 하고, 각각의 순서는 'index'라 한다.
   //js에서 보통 index는 '0'부터 시작한다.
</script>

console.log(topics[0]); したがって、最初の順序で「html」が出力され、表示されます.
今、複文を理解してみましょう.

<h1>반복문(Loop)</h1>
<script>
   console.log(1);
   for(let i=0; i<7 ;i=i+1){
      console.log(2);
      console.log(3);
   }
   // for는 처음은 초기화, 세번째 증감효과, 두번째는 세번째에 맞는 조건이면 계속 실행되게 하는 조건문

   console.log(4);
</script>

複文は伝統的にforで、他の宣言もありますが、まずforを学びました.
for()のカッコ内に関数条件文を書きます.
1つ目はletで宣言し、(,)の3種類を書き、順番に、
i=0が宣言された場合
2つ目は、iがどのような条件になるかを繰り返すことです.
3つ目は、最初に宣言されたiの関数の値であり、この場合、2番目は条件を満たして返されます.
forのコンテンツ出力.
したがって、最初のi値は0なので、2番目の条件文ではなく、3番目の条件文を見ます.
代入して計算します.
1番目が0であるため、条件は7未満であるため、そのまま出力される.
2番目は0+1,1の値は7未満,2番目は再出力{}である.
したがって、合計{}が出力しなければならない数字は0番目を含む.
出力7番です.
繰り返し文と配列が結合された場合

<h1>Array+Loop</h1>
<script>
   topics = ['html','css','js','python'];
   for(let i=0; i<topics.length; i=i+1){
      document.write('<li>'+topics[i]+'</li>');
   }
   //document.write는 html화면 상에 입력되어 나오게 하는 명령문.
   //let을 topic앞에 쓰지 않은 이유는 파일안에 이미 선언한 토픽이 있기 때문에 쓰지 않음.
   //i<topics.length 은 토픽안의 내용물 수 만큼 출력되게 조건문을 적어놓은 것임.
</script>

+昨日学習した内容でボタンを一つにまとめてダークモードにする方法

  <input type="button" id="dnbtn" value="Night" onclick="
      let button = document.querySelector('#dnbtn');
      if(button.value ==='Night'){
      document.querySelector('body').style.backgroundColor = 'black';
      document.querySelector('body').style.color = 'white';

      button.value = 'Day';
      }
      else{document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';

      button.value = 'Night';}
      ">

inputにidを指定するのは、ドキュメントに他のボタンや類似の機能を追加したときにイベントが発生しないようにするためです.
あるいはこのような方法で使用することもできます.

<input type="button" id="dnbtn" value="Night" onclick="
let btn = this;
if(btn.value === 'Night'){ 
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';

btn.value = 'Day';
}
else{document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';

btn.value = 'Night';}
">

いずれかのIDをletで設定に書き、そのIDがこのtag(this)です.
これはinputラベルにidを単独で追加するよりも簡単です.
次に、ボタンを押したときにボタン内の値を変更し、他の効果を追加したい場合は、
thisと呼ばれる任意のID(ここでは「btn」)を使用します.value値を入力します.
次回は変えたい効果でいいです.

2.難点と解決策

ブール演算子の具体的な定義は分かりませんが、別途インターネットで調べてもいいです.
参考資料:[https://muckycode.blogspot.com/2015/01/javascript-boolean.html]
そして、授業で勉強しているi演算子を初めて聞いたので、あまり理解できませんでした.
数字で書かれた条件文の詳しい説明を聞いて、理解できました.
forの条件文を书く中で、まず第1の数字を第3のに代入して、それから第2の条件を见て少し...
これは紛らわしい内容かもしれませんが、Chromeのコンソール部分で出力された結果は正しいです.
わかりました.

3.勉強の心得

暗いモードをより快適なバージョンにする方法を学びましたが、演算子の部分は想像以上に難しいです.
これは、開発者がコードの中で大きな努力を払ったことを再認識させる有意義な時間です.
そして一緒に授業を受けた学生たちの答えはとても具体的で、多くの助けがあって、とても暖かい時間でした.
+上記ダークモードボタンの他の学習者コード

<input type="button" value="night" onclick="
    // 자바스크립트 오랜만에 써보는데 재미있네요 :)

    const toggle = {
        value: ['night', 'day'],
        backgroundColor: ['black', 'white'],
        color: ['white', 'black'],
        getIndex: () => toggle.value.indexOf(this.value)
    };
    //const는 변하지 않는 데이터에 부여하는 선언문.
    
    document.querySelector('body').style.backgroundColor = toggle.backgroundColor[toggle.getIndex()];
    document.querySelector('body').style.color = toggle.color[toggle.getIndex()];
    this.value = toggle.value[(toggle.getIndex() + 1) % 2]">