1. 학습일지

-복습

<input type="button" 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';
     }

  ">

===은 비교연산자인데 더 정확한 값을 가리킬때 쓰고, =는 대입연산자로 =다음에 오는 값을 대입해 준다.

반복문과 배열문에서

<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>');
   }
 </script>

이런식으로도 작성해 줄수 있다.
또한 i=i+1은 i++로 줄여 쓸수도 있다.
위의 코드 중에 도큐먼트 부분은 아래처럼 쓸 수도 있다.

<script>
   let topics2 = ['html','css','js'];
   for (i=0;i<topics2.length;i=i+1) {
      //document.write('<li>'+topics2[i]+'</li>');
      document.write(`<li>${topics2[i]}</li>`);
   }
</script>

-오늘 배운 내용
어제 변하지 않은 'a'태그의 색깔을 바꾸는 명령문을 배웠다.
단순한 명령문은 document.querySelectorAll('a')지만
이렇게 할 경우 a태그 전체가 선택이 되어 색이 변경되지 않고, 버튼에 오류가 발생했다.
이유는 All이라 해도 하나의 값만 리턴되기 때문이다.
그래서 'a'각각이 나열되면 그 해당된 값 전체에 스타일을 변경해야한다면,
for를 사용해야 한다.

 let as = document.querySelectorAll('a');
 for (let i=0;i<as.length;i++){
    as[i].style.color='black'; //as배열에 있는 값을 하나하나 꺼냄:a[i]
 }

let으로 as라는 선언을 했을때의 의미를 쓰고, for로 조건문을 써준다.
그런다음 {}안에 as배열의 있는 값을 꺼낼때 그에 해당되는 스타일을 지정해 주면 된다.

-번외로..
만약 '2000개의 버튼을 한꺼번에 누르고자 한다면' 이란 조건이 생겼을 경우,
위와 마찬가지로 let으로 선언하고 for 를 써주면 된다.
버튼은 'input'태그로 만들어져 있다.

let inputs = document.querySelectorAll('input');
//이때 선언했기 때문에 inputs을 입력해 보여달란 명령을 내리면 input에 있는 값 하나하나를 보여줌.
for(i=0;i>inputs.length;i++){
	inputs[i].click()
}

을 하면 2000개의 버튼 모두가 선택이 된다.

이어서 다크모드와 데이모드를 하나의 버튼으로 만들기 + 'a'태그 전체 색도 같이 바꾸기
를 했다. 코드는 종합하면 아래와 같다.

 <input type="button" value="Night" onclick="
    let btn = this;
    if(btn.value === 'Night'){ 
      document.querySelector('body').style.backgroundColor = 'black';
      document.querySelector('body').style.color = 'white';
      let as = document.querySelectorAll('a');
      for (let i=0;i<as.length;i++){
      as[i].style.color='white';
      }
      btn.value = 'Day';
      }
      else{
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
      let as = document.querySelectorAll('a');
      for (let i=0;i<as.length;i++){
      as[i].style.color='black'; //as배열에 있는 값을 하나하나 꺼냄:a[i]
      }
    btn.value = 'Night';}
    ">

하지만 이럴경우, 코드가 너무 길어져 보이고 가독성이 떨어지는 문제가 발생한다.
코드는 최대한 간결하게 보이도록 적는게 좋기 때문에 여기서 function 기능을 사용해 준다.
function 이란?
Meth.random();이란 식처럼 객체. 함수 ()이렇게 구성되어 결과값이 나오는데
이 객체와 함수는 개발자들이 만든 명령문이다. 위의 식이 실행되어 숫자가 랜덤으로 나오게
결과값이 만들어지는 걸 js에서도 만들수 있는게 바로 funcrion 즉 함수선언문이다.

function name([param[, param[, ... param]]]) {
  statements
}

그럼 앞서 만든 길다란 식을 한번 정리해보자.

<script>
            function Night(){
          document.querySelector('body').style.backgroundColor = 'black';
         document.querySelector('body').style.color = 'white';
         let as = document.querySelectorAll('a');
         for (let i=0;i<as.length;i++){
            as[i].style.color='white';
            }
         }

         function Day(){
         document.querySelector('body').style.backgroundColor = 'white';
         document.querySelector('body').style.color = 'black';
         let as = document.querySelectorAll('a');
         for (let i=0;i<as.length;i++){
            as[i].style.color='black'; //as배열에 있는 값을 하나하나 꺼냄:a[i]
         }
      }
</script>

<input type="button" value="Night" onclick="
 let btn = this;
if(btn.value === 'Night'){ 
  Night();
btn.value = 'Day';
}
else{
  Day();

btn.value = 'Night';}
">

input 태그안은 확연히 줄어든 모습이다.
function으로 정의해 주었으니, 뒤에는 이름();을 넣어주면 똑같이 실행이 된다.

이름뒤에 빈괄호가 올수 있지만 숫자를 넣어 계산한 값을 결과로 나타 낼 수도 있다.

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

</script>

부가세계산();이렇게 나타낼 수도 있지만 그럴경우, let으로 숫자를 지정해 결과를 내게끔 해야 한다.
let으로 숫자를 지정하면, 어떤 수를 넣어도 계산이 되게끔 한다는 목적에 부합하므로
let을 없애고 ()안에 무슨 값이 들어갈지 정의를 한다음(ex. 여기선 가격, 부가세율)
{}안에 let으로 계산 식만 넣어 결과값이 나오게 한다.
여기서 계산하는 기능과 콘솔에 출력되게 하는 기능이 하나로 들어가는 것 보다는 따로 나타내는게 좋다.
왜냐하면 function로 선언한 계산문에 따로 값을 곱하거나 더하는 수식을 만들어도 결과값이 NaN(무슨뜻인지 모름)이 뜨기 때문.
예를 들어 부가세계산(2000,0.5)*100;하면 값이 안나온다는 의미.

그래서 부가세란 수를 돌려주고(return) 그 돌려준 값은 수치이니 그걸 수식을 이용해 계산할 수 있게 된다.

만약 console.log를 쓰고 싶다면 위에 처럼 console.log(부가세계산(2000,0.1));
로 적어주면 된다.

+추가로 '객체지향'을 배웠다.

원래data를 index로 식별하는데, 객체는 이름으로 식별할수 있게 해주는것.

let Student = ['egoing','duru'];
         console.log(Student[0],Student[1]);

하면 순서대로 콘솔에 ''안에 나열된다. 객체지향은 저 ''값을 Student[0],Student[1]
입력하지 않고 이름으로 입력해도 나타나게 정의하는 것을 말한다.

let Memember = {developer:'egoing',desiger:'duru'};
         console.log( Memember.developer, Memember.desiger);

2. 어려웠던 점 및 해결 방안

앞에서 잠깐 배웠는데도 ===이랑 =의 차이점을 몰라 다시 한번 수업중에 여쭤보았다.
'===은 비교연산자인데 더 정확한 값을 가리킬때 쓰고, =는 대입연산자로 =다음에 오는 값을 대입해 준다.'
는 것을 이제 잊지는 않을것 같다.

나열되는 값을 for(조건){}에서 {}안에 첫번째로 let을 선언한 값을 적고 [i]를 적어주는 게 바로 기억이 안났는데 이제는 잘 할 수 있을것 같다. 스타일이나 다른 결과값을 나타내는 수식을 적용하고 싶다면

for(i=0;i>inputs.length;i++){
	inputs[i].click()
}

로 적고 무조건 for 앞에 let을 선언해야 한다.

3. 학습소감

점점 더 어려워 지는 명령문에 갑자기 이러한 조건으로 명령문을 입력해 보라는 미션이 주어졌을때
for 반복문을 쓰는 지는 알았지만 구체적으로 어떻게 적어야 될지는 몰랐다.
다시 결과문을 보니 이해가 갔지만 스스로 문법을 알고 적어나가기 위해서는 상당한 노력이 더 필요해 보였다.

살짝 주눅이 든 것도 사실이지만, 조금씩 문제를 해결하다 보면 앞에서 고민했던 것들도 한방에 해결되리라 믿는다.