1) 학습한 내용

1. 코드정리

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

같은 의미로 사용되지만 아래줄 코드가 좀더 정리가 잘되고 보기좋음

2. 하이퍼링크 글씨색 바꾸기

링크가 연결되면 글자색이 기본으로 설정되어 있음
-다크모드 실행에서 글자색을 바꾸기 위해선 링크의 색을 직접 바꿔주어야한다.

WEB

1. html
2. css
3. 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를 하나하나 불러와 색을 지정해준다.

<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. 함수사용

"함수는 서로 연관된 코드를 그룹핑한 정리정돈의 상자이다"

함수를 사용하면 '코드가 간결해진다 / 가독성이 좋아진다 / 유지 및 보수가 편해진다'

부가세 계산 함수만들기

①변수를 받지 않고, 반환값을 사용하지 않는 함수

   <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)

"객체지향은 서로 연관된 변수와 함수를 그룹핑해서 이름을 붙인 것 "

배열은 index로 식별되는 객체

객체는 이름으로 식별되는 배열

     <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]);
두개의 차이가 헷갈렸다.

''대신 ""을 사용하여 원하는 결과가 안 나올때가 많았다.

조건이 두개일때 and가 아닌 &&연산자를 사용하는것을 몰라서 처음에 해결을 못하였다.

3) 해결방법

이고잉 강사님의 방법을 따라하면서
조건이 2개일때는 if문을 두번쓰는 방법과 &&연산자를 사용하는 방법이 있다는 것을 알게 되었다.

4) 학습소감

파이선을 배울 때도 함수의 기능이 신기하고 재미있었는데 자바스크립트에서도 함수는 정말 유용하고 재밌다.
코드의 형태가 조금씩 다르니까 잘 기억해야할 것 같고,헷갈리지 않게 개념정리가 필요한 것 같다.