5/8(2) 생활코딩

오늘의 진도:

 WEB2 - JavaScript

  조건문 예고~리팩토링

 

조건문: 하나의 프로그램이 하나의 흐름으로 가는 것이 아니라

 조건에 따라서 다른 순서의 기능들이 실행되도록 하는 것

 

11. 조건문 예고

night/day 버튼에서의 불만족

: 버튼이 두 개가 있는게 불편하다.

 그래서 하나의 버튼으로 night 상태에서 클릭하면 day 모드가 되고,

 day 상태에서 클릭하면 night 모드가 되게 만들고 싶다.

= toggle

 

12. 비교 연산자와 Boolean 데이터 타입

JavaScript의 여러 기능 중에서

비교 연산자(Comparison operator)라는 것과,

그 비교 연산자를 통해 만들어지는 '불리언(boolean)'이라는 새로운 데이터 타입,

그리고 조건문이라는 것을 연달아 같이 살펴볼 것이다.

 

* ===: 동등 비교 연산자이자 이항 연산자(좌항과 우항이 있고, 좌항과 우항을 결합해서 어떠한 데이터를 만든다.)이다.

 

→ 왼쪽과 오른쪽이 같으면 true, 다르면 false가 출력된다.

* 불리언(boolean): true와 false 두 가지 값을 묶어서 Boolean이라고 부른다.

단 2개의 데이터로 이루어져 있는 데이터 타입이다.

 

이번에는 크다, 작다로 해보겠다.

※ >나 <는 태그에 사용되는 기호이므로

&lt (less than)이 <의 의미로 쓰인다.

 

13. 조건문(Conditional statement) 문법

→ 1, 2, 3, 4가 순서대로 나왔다.

 

→ 순서대로 실행은 되는데, 1, 2 다음에 3은 안 나오고 4가 나왔다.

 즉, 3을 무시하는 방향으로 실행의 순서가 바뀐 것이다.

 

14. 조건문의 활용

11.에서 나왔던 night/day toggle 버튼을 만들어보자.

input id="night_day" type="button" value="night

기본적으로 day모드이므로 버튼 이름은 night라고 지었다.

 

이런 식으로 짜면 될 것이다.

 

night가 상황에 따라서 true 또는 false가 되게 하면 된다.

 

제일 먼저 해야할 것은, 현재 이 버튼의 value 값이 무엇인지를 알아야 한다.

- 콘솔을 이용할 것이다.

 

형식에 맞게 조건문을 쓰고,

버튼의 id를 night_day로 지정해주었다.

 

Console을 열고 Id 값이 night_day인 element의 value 값을 어떻게 알아내는지를 검색해본다.

 

검색어: javascript element get value

value라는 property를 쓰면 된다고 나와 있다.

document.querySelector('#night_day')를 입력하고 엔터를 치면,

위의 그림처럼, 아래 그림의 회색 부분(nighy_day 버튼)을 잘 가져온 것을 볼 수 있다.

 

위쪽 화살표를 눌러서 직전에 입력했던 것을 재진입한다.

= document.querySelector('#night_day')가 써진다.

그리고 뒤에 .value를 붙인다.

document.querySelector('#night_day').value

그러면 night라는 값을 가져온다.

 

만약 위 그림의 회색 부분을 클릭해서 night를 day로 바꾸면

day라는 값을 가져오는 것을 볼 수 있다.

 

즉, 이 코드를 통해서 Id 값이 night_day인 태그의 value 값을 가져올 수 있는 것이다.

 

이 코드를 if 다음의 괄호 안에 넣고, === 연산자를 이용해서,

그것이 night라는 값과 일치하는지 여부를 확인한다.

 

이렇게 하면 night 버튼을 눌렀을 때, night 모드로 바뀌지만.

다시 한 번 눌렀을 때 day 모드로 바뀌지 않는다.

왜냐하면 value값이 계속 night이기 때문이다.

 

따라서 night 모드로 바꿀 때, value를 day로 바꾸도록 한다. (마지막 줄)

→ 버튼 안의 글씨가 day로 바뀐다.

 

그리고 day 모드로 바꿀 때는 value를 night로 바꾸도록 한다. (마지막 줄)

→ 버튼 안의 글씨가 night로 바뀐다.

 

완성!

 

15. 리팩토링 중복의 제거

리팩토링: 우리가 코딩을 하고 나면 코드가 좀 비효율적인 면들이 생기기 마련이다.

 그러면 동작하는 것은 그대로 두고

 코드 자체를 아주 효율적으로 만들어서

 그 코드의 가독성을 높이고,

 유지보수를 하기 편리하게 만들고,

 중복된 코드를 낮추고

 이러한 방향으로 코드를 다시 개선하는 작업을 리팩토링이라고 한다.

 

14.에서 만들었던 버튼을 페이지의 제일 밑에도 넣고 싶다.

코드를 복사해서 밑에 붙여넣으면,

화면은 야간모드/주간모드로 바뀌지만,

버튼에 써있는 글자가 night에서 day로 바뀌지 않는다.

 

id 뒤에 2를 붙여서 구분해주면 정상적으로 작동한다.

 

그런 방법도 있지만,

document.querySelector('#night_day2')는 사실 자기 자신(input 태그)을 가리키는 것이다.

즉, onclick event가 속해 있는 태그 자신이다.

 

이 때 document.querySelector('#night_day2')를 this로 바꿀 수 있다.

 

 

이렇게하면 코드도 훨씬 간결해지고,

id 뒤에 2를 붙일 필요도 없고,

또 복사해서 다른 곳에 붙여도 잘 작동하게 된다.

 

그리고 document.querySelector('body')라는 부분이 중복해서 등장하고 있다.

var target = document.querySelector('body');으로 이것을 target이라는 변수로 지정해준다.

 

그러면 아래쪽 코드의 해당 부분을 target으로 바꿔도 잘 작동한다.