#it #코딩 #HTML #CSS #javaScript #공부 #생활코딩 #수업 #연산자 #블루리안
이번 포스팅에서는 비교 연산자와 브리안에 의한 조건문을 복습한다.학습 속도가 약간 줄어든 것 같아 조금 더 속도를 내서 수업을 진행할 필요가 있다고 생각했다.
하지만 무리가 아니라 이해가 안됐지만 무리하게 진행되지는 않는 방향으로 나아가려 한다.이미 한 번쯤은 들어봤던 수업이지만 그렇다고 완벽하게 이해하지는 못했지만, 넘어가면 듣지 말라는 방법이 될 것 같다.
이해하지 못한 부분은 이해를 최대한 할 수 있는 부분까지는 반복해서 수행하고자 한다.
목표 지난 포스팅에서 버튼을 통해 야간 모드와 주간 모드 만드는 법을 공부했다.이번에는 두 개의 버튼을 하나로 줄이고 단 하나의 버튼으로 작동하는 웹사이트를 만든다.
그 전에 알아야 할 기본적인 이론을 확인하고 들어가보자.
비교 연산자와 브리안
먼저 비교 연산자는 우리가 잘 알고 있는 두 값을 비교하는 연산자다.
<,>, =의 3가지 사항이 있으며, 이 중 ‘=’은 HTML로 ‘===’로 표현한다.
코드.
결과 비교 연산자는 양쪽에 값이 와서 비교를 하는 이항 연산자로, 이 연산을 통해 나온 값을 자바스크립트가 사실이라면 ture 거짓이라면 false를 결과값으로 나타낸다.
이때 걸로 값을 매긴 ture와 false가 브리안이라고 불리는 데이터 유형이다.
값이 사실이 아닌 경우 false를 결과값으로 하는 모습.
다음의 비교 연산자로서 「<」와「>」를 살펴보자.
그대로 사용할 경우 문법으로 인식하기 때문에 <로 작성해야 출력값이 <>로 나오고 >로 작성하면 <>의 값이 나온다.
조건문제로 지금까지 배운 연산자와 데이터 유형을 활용하여 조건문 만드는 방법을 복습해 보자.
조건문의 기본코드는 if(조건){실행코드}else{실행코드이다.}
하나씩 살펴보면 if 부분은 우리가 잘 알고 있듯이 혹시나 하는 부분이다.조건 부분에서 (조건) 안의 부분이 성립(ture)되면 {실행코드}의 값을 실행하고, 그렇지 않으면 else {실행코드} 부분을 실행할 수 있다.
하고 결과치를 보면 124와 같이 나오는 것을 확인할 수 있다.
사실 이 부분은 이미 자바 이클립스를 다루는 부분을 배울 때 많이 해본 부분이라고 알고 있는 부분이었다.이외에도 elseif문이나 if 중복 등 다양하게 활용할 수 있지만 이번 수업에서는 언급이 없어 간과했다.
이것의 값은 134로 출력됨을 확인할 수 있다.
그러나 현재 어코드는 매우 쓸모없는 코드이다. 왜냐하면 조건문이 가격에 따라 변하지 않기 때문이다.
그러므로 우리는 조건을 값에 따라 변환할 수 있는 조건식을 작성해야 한다.
조건문의 활용
이전에 우리가 만든 코드에 위와 같은 코드를 작성해 보았다.
if 내 조건문을 확인하기 위해 value 값이 무엇인지 확인해 볼 필요가 있다.
먼저 value에 ID 값을 입력하고,
웹페이지의 검사기능을 통해 document.query Selector(“선택”). value를 입력하여 확인해보면 vlaue의 값을 확인할 수 있음을 알 수 있다.
요소의 value 값을 ‘day’로 바꿨을 때도 잘 선택되었음을 확인할 수 있다.
그 값을 이용하여 value가 night일 경우 클릭 시 야간 모드로 바꾸고 value 값을 day로 바꾸고 반대의 경우도 적용하였다.
하나의 버튼으로 동작하는 웹사이트를 작성했다.
리팩토링 지금까지 코드를 완성했는데 조금 더럽고 중복이 있는 곳이 보인다.우리가 코드를 짜다 보면 이렇게 불필요하거나 비효율적이고 중복이 생기기 마련이다.
코딩을 잘 짜기 위해 중복을 끝까지 쫓아가 중복을 최대한 줄이는 것.이것이 코딩을 잘하기 위한 방법이라고 한다.
이러한 과정을 리팩토링이라고 한다.공장에 가져가서 새로 만들어 낸다고 이해하면 편해.
코드를 짜는 틈틈이 리팩터링을 자주 하는 것이 좋다고 한다.
리팩 토핑 방법 중 하나 역시 this.를 사용하는 것이다.
사실 앞에 document.query Selector(‘선택’). 부분에서 선택하려는 것이 자기 자신이라면 굳이 저렇게 쓸 필요 없이 this.라는 코드로 자기 자신을 선택할 수 있다.
다음으로 변수를 통해 중복을 제거하는 것이다.
document.query Selector(‘body’) 부분은 4번이나 반복되므로 target이라는 변수에 넣어 활용한 모습이다.
이처럼 때때로 리팩터링을 통해 중복을 줄이고 유지보수가 보다 쉽게 만들어내는 것이 코드를 잘 짜내는 방법이라고 한다.