WEB2(JavaScript) – 조건문(비교 연산자와 불리언)

#it#코딩#HTML#CSS#javaScript#공부#생활 코딩#수업#연산자#불 리언 이번의 포스팅에서는 비교 연산자와 불리앙을 통한 조건문을 복습한다.학습 속도가 더 내려간 듯 조금 더 스피드 좋은 수업을 진행할 필요가 있다고 생각했다.하지만 무리가 아닌 이해 못했지만 무리하게 간과하거나 하지 않는 방향으로 갈 생각.이미 한번씩 받은 적이 있는 수업이지만 그렇다고 완벽하게 이해하지 못한 다음에 간다고 듣자마자하지 않느냐는 방법이 될 것 같습니다.이해 못한 부분은 이해를 최대한 가는 부분까지는 반복 수행하려고 한다.목표 이전의 포스팅에서 버튼을 통해서 야간 모드와 주간 모드의 만드는 법을 공부했다.이번에는 2개의 버튼을 1개로 줄이고, 단 1개의 버튼으로 작동하는 웹 사이트를 만든다.그 전에 알아야 할 기본적인 이론을 확인하고 들어 보자.비교 연산자와 불 리언 우선 비교 연산자는 우리가 잘 아는 2개의 값을 비교하는 연산자이다.<,>,=의 3가지 사항이 있으며 이 중”=”는 HTML에서 “===”라고 표현했다

코드.

결과

비교 연산자는 양쪽에 값이 와서 비교를 하는 이항 연산자이며, 이 연산에서 나온 값을 자바스크립트가 사실이라면 ture 거짓이면 false를 결과값으로 나타낸다.이때 걸과 값을 곱한 ture와 false가 불리언이라고 불리는 데이터 타입이다.

값이 사실이 아닌 경우 false를 결과값으로 하는 모습.

다음의 비교 연산자로 「<」와「>를 보자.그대로 사용할 경우 문법으로 인식하기 때문에 &lt;로 작성해야 출력값이 <로 나오고 &gt;로 작성하면 >의 값이 나온다. 조건문, 지금까지 배운 연산자와 데이터 유형을 활용하여 조건문 만드는 법을 복습해 보자.

조건문의 기본코드는 if (조건) {실행코드}else{실행코드이다.}하나씩 살펴보면 if 부분은 우리가 잘 알고 있듯이 혹시나 하는 부분이다. 조건부분에서 (조건)안의 부분이 성립(ture)이면 {실행코드} 값을 실행하고, 그렇지 않으면 else {실행코드} 부분을 실행할 수 있다. 결과치를 보면 124와 같이 나오는 것을 확인할 수 있다. 사실 이 부분은 이미 자바 이클립스를 다루는 부분을 배울 때 많이 해서 본부 쪽이라고 알고 있는 부분이었다. 이 밖에도 elseif문과 if 중복 등 다양한 활용이 가능하지만 이번 수업에서는 언급이 없어 미뤄졌다.

이것의 값은 134로 출력되는 것을 확인할 수 있다.그러나 현재 어코드는 매우 쓸모없는 코드다. 왜냐하면 조건문이 값에 따라 달라지지 않기 때문이다.그러므로 우리는 조건을 값에 따라 변환할 수 있는 조건식을 만들어야 한다. 조건문의 활용

이전에 우리가 만든 코드에 위와 같은 코드를 작성해 보았다.if 내 조건문을 확인하기 위해서 value 값이 무엇인지 확인해 볼 필요가 있다.먼저 value에 ID값을 입력하고웹페이지 검사 기능을 통해 document.query Selector(‘선택’). value를 입력하여 확인해 보면 vlau 값을 확인할 수 있음을 알 수 있다.요소의 value 값을 ‘day’로 바꿨을 때도 잘 선택되었음을 확인할 수 있다.그 값을 이용하여 value가 night일 경우 클릭하면 야간모드로 바꾸고 value 값을 day로 바꾸고 반대일 경우도 적용해 주었다.하나의 버튼으로 작동하게 되는 웹사이트를 만들었다. 리팩터링 지금까지 코드를 완성했는데 조금 더럽고 중복되는 부분이 보인다.우리가 코드를 짜다 보면 이렇게 불필요하거나 비효율적이고 중복이 생기기 마련이다. 코딩을 잘 짜기 위해 중복을 끝까지 쫓아 중복을 최대한 줄이는 것.이것이 코딩을 잘 하기 위한 방법이라고 한다.이런 과정을 리팩터링이라고 한다. 공장에 가져가서 새로 만들어낸다고 이해하면 편할 것 같아.코드를 짜는 동안 리팩터링을 자주 해주는 것이 좋다고 한다.리팩 토핑 방법 중 하나도 this.를 사용하는 것이다. 사실 전에 document.query Selector(‘선택’). 부분에서 선택하려는 것이 자기 자신이라면 굳이 그렇게 쓸 필요 없이 this.라는 코드로 자기 자신을 선택할 수 있다.다음으로 변수를 통해 중복을 제거하는 것이다. document.query Selector(‘body’) 부분은 4번이나 반복되므로 target이라는 변수에 넣어 활용한 모습이다. 이처럼 때때로 리팩터링을 통해 중복을 줄이고 유지보수가 보다 쉽게 만들어내는 것이 코드를 잘 짜내는 방법이라고 한다.

error: Content is protected !!