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

JavaScript

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

보라해바라기 2021. 7. 13. 15:38

SMALL

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

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

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

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

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

오늘도 렛츠 기릿!!

1. 제어할 태그 선택하기

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

이번에는 night 버튼과 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<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>