[JavaScript] 생활코딩 12~18 _ 제어 태그 선택, 비교연산자, 불리언, 조건문, 리팩토링

안녕하세요~ 보라해바라기입니다.

 

어제에 이어서 계속 날씨 얘기를 하게 되는데.. 

 

어제 저희 학교에 심겨진 나무가 부러졌다는 이야기가 있더라구요...!!

 

제가 날씨 얘기를 또 하게 되는건 날씨가 제게 주는 임팩트가 커서 그런 것 같아요... ㅎㅎ

 

오늘은 내용이 꽤 많아서 얼른 시작해야겠어요~

 

오늘도 렛츠 기릿!!

 

---

 

1. 제어할 태그 선택하기

저번 시간에 input을 이용해서 버튼과 그 이름을 설정하고 다양한 event를 실행해보았답니다!

 

이번에는 night 버튼과 day 버튼을 각각 생성해서 

 

버튼을 클릭했을 때, 배경과 글씨 색이 바뀔 수 있도록 설정해볼게요~

 

  <input type="button" value="night" onclick="
    document.querySelector('body').style.backgroundColor='black';
    document.querySelector('body').style.color='ivory';
  ">

night 버튼을 눌렀을 때

  <input type="button" value="day" onclick="
  document.querySelector('body').style.backgroundColor='ivory';
  document.querySelector('body').style.color='black';
  ">

day 버튼을 눌렀을 때

 

2. 비교연산자와 불리언

비교연산자는 === 로 나타내며 좌항과 우항이 같은가를 비교하는 연산자랍니다~

 

예시를 살펴보면

 

<h1>Comparison Operator & Boolean</h1>
    <h2>===</h2>
    <h3>1===1</h3>
    <script>
      document.write(1===1);  => 좌항과 우항이 같나? 같으면 true, 다르면 false 출력
    </script>

    <h3>1===2</h3>
    <script>
      document.write(1===2);  => 좌항과 우항이 같나? 같으면 true, 다르면 false 출력
    </script>

    <h3>1&lt;2</h3> => '<'를 나타내기 위해서 &lt 사용
    <script>
      document.write(1<2);  => 좌항이 우항보다 작은가? 좌항이 작으면 true, 그렇지 않으면 false 출력
    </script>

 

 

여기서 출력하게되는 true, false를 합하여 Boolean(불리언)이라는 자료형으로 부른답니다~

 

 

3.  조건문

 

조건문은 하나의 프로그램이 조건에 따라 다른 순서의 기능을 실행하는 역할을 합니다!

 

앞서 만든 주/야간모드에서 디벨롭하여

 

하나의 버튼만을 이용해 깜깜할 때, 버튼을 클릭하면 밝은 상태로 만들어주고 그 반대도 구현해볼거예요~

 

이는 토글을 이용해서 구현할 수 있는데요!

 

그 전에 알아야할 것이 바로 조건문입니다~

 

예시를 살펴볼게요!

 

<h2>IF-true</h2>
      <script>
        document.write("1<br>");
        if(true) {
          document.write("2<br>");
        } else {
          document.write("3<br>");
        }
        document.write("4<br>");
      </script>

      <h2>IF-false</h2>
      <script>
        document.write("1<br>");
        if(false) {
          document.write("2<br>");
        } else {
          document.write("3<br>");
        }
        document.write("4<br>");
      </script>

 

실행 결과

 

조건문을 활용하여 우리가 앞서 해보고자 한 기능을 구현할 수 있어요!

 

<input id="night_day" type="button" value="night" onclick="
  if(document.querySelector('#night_day').value === 'night'){
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'ivory';
    document.querySelector('#night_day').value = 'day';
  } else {
    document.querySelector('body').style.backgroundColor = 'ivory';
    document.querySelector('body').style.color = 'black';
    document.querySelector('#night_day').value = 'night';
  }
">

 

만약 웹페이지가 night 상태라면 배경 색을 아이보리색, 글씨 색을 검정색으로 설정하고 day상태로 바꾸어라!

 

그렇지 않으면 (웹페이지가 day 상태라면) 배경 색을 검정색, 글씨 색을 아이보리색으로 설정하고 night상태로 바꾸어라!

 

는 의미로 간단하게 해석이 가능하답니다^_^

 

day상태일 때

night상태일 때

 

4. 리팩토링 중복의 제거

 

리팩토링이란 코드의 가독성을 높이고 유지보수를 편하게 하며 중복을 최소한하는 쪽으로 코드를 개선하는 방식입니다.

 

event안에서 작동하는 코드들, 

 

예시에서는 input 태그를 가리키도록 하는 특별한 키워드를 사용하여 중복을 최소화할 수 있는데요!

 

바로 this라는 키워드를 통해서입니다. 

 

document.querySelector('#night_day')를 this로 통일시켜주고

 

document.querySelector('body') 을 target 변수에 대입하여

 

조건문을 target으로 통일시켜주면 코드의 길이를 줄이면서 더 효율적인 프로그래밍이 가능하답니다~

 

완성된 코드는 다음과 같답니다~

 

  <input type="button" value="night" onclick="
    var target = document.querySelector('body');
    if(this.value === 'night'){
      target.style.backgroundColor = 'black';
      target.style.color = 'ivory';
      this.value = 'day';
    } else {
      target.style.backgroundColor = 'ivory';
      target.style.color = 'black';
      this.value = 'night';
    }
  ">

 

---

오늘 JS를 배우면서 또 느낀 점은

 

웹페이지를 만드는데 중요한 목적은 이를 사용하는 "사람"에게 

 

최대한 편리함을 제공해야 한다는 점임을 다시금 깨달았답니다!

 

주/야간모드를 구현해보니까 평소에 내가 쓰던 당연한 기능들도

 

구현하는게 쉽지 않구나하는 생각을 가지며 코딩을 했던 것 같아요 ㅎㅎ

 

앞으로도 열심히 공부해서 사람들이 생각하지 못한 웹페이지의 불편한 점을 

 

직접 생각하고 이를 해결할 수 있는 코드를 짜보는 것을 목표로 해야겠어요!!!!

 

오늘도 수고하셨고 내일 또 만나요~