1. 학습일지

-복습
: style tag에 적는게 가장 좋고, 특정 tag에도 스타일을 따로 적어 줄수 있으나,
style tag에 적었던 것과 같은 내용을 적는다면 적용이 하나밖에 안됨.
이럴경우 가장 중요한 스타일만 적용해 주고 싶은 경우 스타일에 !important를 추가해줌.

: CSS 스타일은 HTMl상에

<style></style>

로 적어도 되지만, link태그를 이용해
CSS 파일을 따로 만들어 링크 시켜주는게 수정하기 편리하다.

-오늘 학습한 내용

"조건문 - Conditional Statements"

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

if (조건) {
만약 조건(condition)이 참일 경우 실행할 코드
} else {
대신 실행할 다른 코드
}

하나의 흐름이 아닌 다른 조건에서도 실행되게끔 해주는것을 조건문이라 한다.

만약 else에도 조건을 붙이고 싶다면, else가 아닌 else if 로 바꾸고 조건문을 넣어야 한다.

불리언 - Boolean

어떤 프로그래밍 언어에도 존재하는 자료형, 값이 true 또는 false,
총 2개밖에 존재하지 않는 자료형, 바로 Boolean 자료형이다.
Boolean 자료형은 아래와 같이 선언된다.

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

비교 연산자 - Comparison Operator

비교 연산자는 피연산자 사이의 상대적인 크기를 판단하여, 참(true)과 거짓(false)을 반환한다.
모두 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽입니다.

참고로 이항연산자는 아래에서 설명하는 기호들이고 피연산자는 이항연산자 양쪽에 오는 값을 말한다.

-참고사이트
[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>

반복문 - Loop Statements

조건이 맞는다면 해당 조건만큼 반복되게 실행함.

반복문을 사용하기 전에 우선 배열(Array)부터 알아야 한다.

<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()의 괄호 안은 함수로 된 조건문을 쓴다.
첫번째는 let으로 선언해( , , ) 3가지를 적어주는데 차례로,

i=0이라 선언했을 때
두번째는 i가 어떠한 조건일때 까지 반복하는지.
세번째는 첫번째 선언된 i의 함수의 값이 이럴때 두번째로 돌아가 조건에 맞으면
for안의 내용물이 출력된다.

그러니까 처음 i값이 0이니까 두번째 조건문을 보는게 아닌 세번째 조건문으로 가서
대입해 계산을 한다.
처음은 0이니까 조건이 7보다 작으니 그대로 {}내용을 출력하고,
두번째는 0+1이니 1의 값이 7보다 작으니 두번째로 {}을 한번더 출력하는 것이다.
그래서 총 {}이 출력되어야 할 수는 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';}
">

let으로 임의의 아이디를 설정에 쓰고, 그 아이디가 바로 이 tag라고 (this)를 쓴다.
this가 input태그에 따로 id를 추가하는 것 보다 더 쉽다.

그런다음 만약 버튼을 눌렀을때 버튼 안의 값을 바꾸고 다른 효과를 넣고 싶다면,
this로 선언한 임의의 아이디(여기서는 'btn')을 쓰고 .value 값을 입력한다.
다음엔 바꾸고 싶은 효과를 쓰면 된다.

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

불리언 연산자에 대해 구체적인 정의가 뭔지 잘 몰랐는데 따로 인터넷을 찾아보고 알 수 있었다.
참고자료: [https://muckycode.blogspot.com/2015/01/javascript-boolean.html]

또 수업시간에 배운 i연산자에 대해 처음 듣는 내용이라 이해가 잘 가지 않았는데,
숫자로 적어 놓은 하나의 조건문이란 상세한 설명을 듣고 이제 이해할 수 있었다.
for를 적을 때 들어가는 조건문에 첫번째 수를 세번째에 먼저 대입해서 두번째 조건을 보는 게 좀
헛갈릴 수도 있는 내용이였으나, 크롬의 console부분의 출력된 결과물의 숫자가 맞다는 것을
알 수 있었다.

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]">