[생활코딩|WEB_JavaScript#5] 조건문下 : 조건문, 조건문의 활용 2020.01.31

---

본 게시글은 유튜브 생활코딩 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.

생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.

생활코딩 유튜브

생활코딩

생활코딩 사이트

생활코딩

"어떤 문제가 우리 삶에서 중요하고 심각할 수록

그 문제를 해결해 주는 공부는 문제로부터 우리를 해방시켜줄겁니다."

(생활코딩 : Web1 -1 수업소개. 중)

---

#0.

<h1>Conditional statements</h1>
<h2>Program</h2>
<script>
  document.write("1<br>");
  document.write("2<br>");
  document.write("3<br>");
  document.write("4<br>");
</script>
<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>

위 코드는 생활코딩 사이트에서 확인하실 수 있으십니다.

저번 시간에 Boolean data type과 비교 연산자를 배워 보았습니다.

이 두 기능을 사용하는 조건문의 형식에 대하여 간단히 알아보겠습니다.

 

#3. 조건문

Conditional statement, 조건문입니다.

if(Boolean){
	//CODE
	}
    
	<!--
else if(Boolean){
   	//CODE
    }
    -->
    
else{
  	//CODE
    }

조건문의 형식은 위 코드와 같습니다.

if문 괄호 안에 Boolean 데이터 타입이 위치합니다.

그리고 그 Boolean 데이터 타입의 값이 true면 if문의 코드가 실행되고, false라면 else문의 코드가 실행됩니다.

만약 값이 false이고, else문 코드가 없다면, 위 조건문은 '순서'에서 무시되고 실행되지 않습니다.

이해를 위해 예시를 들어가며 코드를 실행해보겠습니다.

먼저 조건문이 없는 우리의 '순서'에는 1,2,3,4가 출력 되고 있습니다.

IF-true 문을 살펴 보겠습니다.

if문 안 괄호에 true가 들어와 있습니다. 그 값은 당연히 참이므로,

else 구문이 무시되고 1,2,4 순으로 출력되는 것을 확인할 수 있습니다.

반대로 IF-false구문에서는 if 문 괄호에 false, 그 값은 당연히 거짓이므로,

if문 구문이 무시되고 else 구문이 실행되어 1,3,4 순으로 출력되는 것을 확인할 수 있습니다.

조건문은 그 조건에 따라 실행하는 순서(코드)를 바꾸는 것입니다.

이것이 조건문을 이해하는 가장 중요한 요소입니다.

사실 이 코드는, boolean값을 직접 넣었기 때문에 의미 없는 코드입니다.

언제나 true(혹은 false)이기에 조건에 따라 값이 변하지 않기 때문입니다.

따라서, 우리는 조건에 따라 그 값이 바뀌도록 코드를 이해할 필요가 있습니다.

 

#4. 조건문의 활용

See the Pen JavaScript#5 by nani6765 (@nani6765) on CodePen.

먼저 조건문을 통해 얼마나 놀라운 기능을 구현할 수 있는지 음미해 보시길 바랍니다.

<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 = 'white';
      document.querySelector('#night_day').value = 'day';
    } else {
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
      document.querySelector('#night_day').value = 'night';
    }
  ">

코드를 천천히 살펴보도록 하겠습니다.

#3 조건문에서, if문의 괄호에는 boolean data type이 위치한다고 설명하였습니다.

if(document.querySelector('#night_day').value === 'night')

를 살펴보면 document.querySelector('#night_day')의 value가 'night'와 같다면 true이다를 설명하고 있습니다.

이것을 조금 더 직관적으로 살펴본다면 if('night')라면으로 해석할 수 있습니다.

우리는 CSS를 학습하면서 'body'를 통해 웹페이지 body를 선택할 수 있음을 학습하였습니다.

이번에는 버튼을 선택하기 위하여 버튼에 <input id="night_day">로 버튼에 id값을 부여하였습니다.

id값을 선택하기 위해서 '#'을 사용하는 것 역시 CSS를 학습하면서 이해할 수 있습니다.

자, 그렇다면 선택된 버튼의 value와 night를 비교연산자를 통해 비교하고 싶은데,

우리는 아직 그 value를 불러오는 법을 모릅니다.

이 문제는 검색을 통해 해결할 수 있겠죠?

검색 : Javascript element get value

HTML DOM Input Text value Property

' .value ' 를 통해 그 값을 얻어올 수 있습니다.

이것을 우리의 코드에 적용해 보았을 때,

if(document.querySelector('#night_day').value === 'night') 로 구문을 완성할 수 있게 됩니다.

"만약 버튼의 값이 night라면 참이다" 우리의 문장을 코드로 실현시킨 혁명적인 순간입니다.

참이라면 if의 코드가 실행되고 거짓이라면, else의 코드가 실행되어야 합니다.

버튼을 클릭하였을 순간, 그 버튼의 값이 night라면 현재 야간 모드이므로 우리는 주간모드로 바꾸고 싶습니다.

따라서 버튼의 값이 night일 때, 주간모드의 코드와 버튼의 value값을 day로 바뀌는 코드를

그렇지 않다면, 야간모드의 코드와 버튼의 value값을 night로 바뀌는 코드를 작성하면 되는 것입니다.

물론, if문 괄호의 내용을 수정하여 이 반대의 상황도 연출할 수 있습니다.

See the Pen JavaScript#6 by nani6765 (@nani6765) on CodePen.

어느 버튼을 클릭하던지 모든 버튼의 value값이 바뀌도록 코드를 한 줄 씩 추가하였을 뿐,

별 달리 바뀐 코드는 없습니다.

위의 버튼과 아래의 버튼이 같은 기능으로 동작하고,

그 코드를 살펴보면 if문 괄호안의 조건에 따라 코드를 변경하여 수정하여도 상관없다는 것을 의미합니다.

우리는 '조건문'이라는 아주 중요하고 핵심적인 기능을 이로써 이해할 수 있게 되었습니다.