1）学習内容

1.整理コード

<script>
    document.write('<li>'+topics2[i]+'</li>');
	document.write(`<li>${topics2[i]}</li>`);
</script>

同様に、次の行コードはより明確で、より美しくなります.

2.ハイパーリンクフォントの色を変更する

リンクがリンクされている場合、デフォルトは文字色です.
-ダークモードの実行中、フォントの色を変更するには、リンクの色を直接変更する必要があります.

WEB

html

css

JavaScript

①各リンクのコードにidを設定します.

<h1> <a id="a1" href="index.html">WEB</a></h1>
   <div id="container">
       <ol>
            <li><a id="a2" href="1.html">html</a></li>
            <li><a id="a3" href="2.html">css</a></li>
            <li><a id="a4" href="3.html">JavaScript</a></li>
        </ol>

②for文を用いてaを1つずつ呼び出して色を指定する.

<script>
	let as = document.querySelectorAll('a'); 
	for(let i=0;i<as.length;i++){
		as[i].style.color='black';
            }
                                  </script>

3.2000個のボタンを押す

2000個のボタン

（1）全てのボタンを押す

  <script>
      let btn =document.querySelectorAll('input');
      for (let i=0;i<btn.length;i++){
          btn[i].click() ;
  }
  </script>

（2）100を超えるボタンを押す

    <script>
        let btn =document.querySelectorAll('input');
        for (let i=0;i<btn.length;i++){
            if(btn[i].value>100){
                btn[i].click() ;
            }   
    }
    </script>

（3）100と200以下のボタンを押す

  1)2개의 if문 사용

    <script>
        let btn=document.querySelectorAll('input');
        for (let i=0;i<btn.length;i++){
            if (btn[i].value>100){
                if(btn[i].value<200){
                    btn[i].click();
                }
            }
        }
    </script>

2)1개의 if문 사용 (&&연산자)

<script>
    let btn =document.querySelectorAll('input');
    for (let i=0;i<btn.length;i++){
        if(btn[i].value>100 && btn[i].value<200){
            btn[i].click() ;
        }   
}
</script>

4.関数の使用

「関数は、相互に関連付けられたコードを1つの整数のボックスに組み合わせることです。」

関数の使用「コードが簡潔になる/読みやすくなる/メンテナンスが容易になる」

追加税金計算関数の作成

①変数を受け入れず、戻り値の関数を使用しない

   <script>
        function 부가세계산(){
            let 가격=1000;
            let 부가세율=0.1;
            let 부가세=가격*부가세율;
            console.log(부가세);
        }
        console.log(1);
        부가세계산();
        console.log(2);
    </script>

②変数を受け取り、戻り値の関数を使用しない

    <script>
        function 부가세계산(가격,부가세율){ //매개변수,parameter
            let 부가세=가격*부가세율;
            console.log(부가세);
        }            
        부가세계산(2000,0.1);// 인자,argument,입력값
    </script>      

③変数を受け取り、戻り値の関数を使う

  <script>
        function 부가세계산(가격,부가세율){ 
            let 부가세=가격*부가세율;
            return 부가세;
        }            
        console.log(부가세계산(5000,0.1));// return값을 콘솔창에 출력
        alert(부가세계산(10000,0.1))
        confirm(부가세계산(20000,0.1))
    </script>

5.オブジェクト（Object）

「オブジェクト向けは、相互に関連付けられた変数と関数を組み合わせて名前を付けます。」

配列インデックスによって識別されるオブジェクト
オブジェクトが名前で識別される配列.

     <script>
           let member ={developer:'egoing',designer:'duru'};
           console.log(member.developer,member.designer);

        let person={name:'egoing',city:'seoul', job:'developer'}
        console.log(person.name,person.city,person.job)
    </script>

  -배열과 달리 객체는 평등하지 않은 것들,성질이 다른 것들이 들어있을 때 사용한다.

6.有用なサイト

コード作成練習
-練習コードに適したサイト

2）学習内容の難点

console.log(topics[i]); vs document.write(topics[i]);二つの違いが混同された.
多くの場合、「ではなく」を使用しても、所望の結果は得られません.
2つの条件を使用する場合の演算子&&がandではなく分からないため、最初は解決できません.

3）解決方法

李戈英先生のやり方を真似する.
2つの条件がある場合,if文を2回使用する方法と&&演算子を使用する方法があることが分かった.

4）勉強の心得

パイプを勉強している間に、関数の機能が不思議で面白かったです.JavaScriptでは、関数も役に立ち、面白かったです.
コードの形式が少し違うので、よく覚えておくべきで、混同しないために、概念を整理する必要があります.