Orchemi

Orchemi

I start where others stop.

[JS] 2.1. 조건문

작성:    

업데이트:

카테고리:

태그: , ,

참고 자료

boostcourse 생활코딩: 자바스크립트의 시작


비교연산자

===

프로그래밍 언어에서 =을 통해 우변의 값을 좌변에 할당하여 변수를 지정하기 때문에 파이썬에서는 ==처럼 등호를 두 개 연달아 써서 양변을 비교해주었다.

그런데 자바스크립트에서는 ===처럼 등호를 3개 써서 양변을 비교한다.

document.write(1 === 1);

// [결과] true

참고로 파이썬에서는 True와 False처럼 Capitalize되어 표시되지만, 자바스크립트는 true와 false처럼 소문자로만 표시된다.


HTML에서 비교연산자 표기하기

**참고**📣 JS 문법이 아니라 HTML 문법이다.

<, >로 표기하기에는 HTML에서 태그를 표시할 때 사용하므로, 부등호 표시는 다음과 같이 한다.

  • <: &lt; / less than
  • >: &gt; / greater than
  • <=: &le; / less than or equal
  • >=: &ge; / greater than or equal


조건문

비교연산자를 배운 이유이다. if~else문의 조건에 boolean 타입을 넣어 true일 때와 false일 때의 코드의 동작을 다르게 한다.

document.write("1<br>");
document.write("2<br>");
document.write("3<br>");
document.write("4<br>");

// [결과]
// 1
// 2
// 3
// 4

기본적으로 브라우저에 숫자를 쓰고 다음 줄로 넘어가는 코드이다. print()와 같다.


document.write("1<br>");
if (true) {
  document.write("2<br>");
} else {
  document.write("3<br>");
}
document.write("4<br>");

// [결과]
// 1
// 2
// 4

if(조건){조건이 true일 때 실행 코드}의 형식을 가진다.


document.write("1<br>");
if (false) {
  document.write("2<br>");
} else {
  document.write("3<br>");
}
document.write("4<br>");

// [결과]
// 1
// 3
// 4

조건이 true이든 false이든 if(조건){조건이 true일 때 실행 코드}의 형식을 가진다.


조건문의 활용

조건문을 활용해서 다크모드를 on/off 하는 토글을 구현해보자.

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

  <ul>
    <li .list="">내용</li>
    <li .list="">내용</li>
    <li .list="">내용</li>
  </ul>
</body>

onclick 속성 내부에 if(){}와 else(){}가 들어가있는 모습이다. 최초에 body는 검정 글씨와 흰 배경으로 설정되었고, night_day라는 id명을 가진 button 타입 input의 초기 value는 night이다.

이 상황에서 night를 누르면 body는 색이 반전되어 흰 글씨와 검정 배경으로 변하게 하고, 버튼의 value는 ‘day’로 바뀌게 되어 이를 누르면 다시 원래대로 돌아오게 하려고 한다.

document.querySelector('#night_day')를 통해 ‘night_day’ 를 가진 id의 HTML 문서를 지정한다. console에서 위에처럼만 치면 태그에 대한 내부 정보가 모두 보인다. 이중에서 우리에게 필요한 정보는 value이다. 이 value를 조건문에서 비교해서 night일 때 버튼을 누르면 스타일이 검정배경/흰글씨 로 바뀌게 되는 것이다.

이후에 그냥 조건문을 빠져나오게 된다면 다음 클릭에서 value가 여전히 night이기 때문에 다시 if문을 거치게 된다. 즉, night 모드에서 빠져나올 수 없는 것이다. 이를 바꿔주기 위해 value 속성을 사용한다.

댓글남기기

참고