본문으로 바로가기

[3일차] #17. 조건문의 활용

category Develop/WEB2 - JavaScript 2018. 12. 4. 14:36






3일차



수업의 목적

HTML과 JavaScript의 만남 1 (script 태그)

HTML과 JavaScript의 만남 2 (이벤트)

HTML과 JavaScript의 만남 3 (콘솔)

데이터타입 - 문자열과 숫자

변수와 대입 연산자

웹브라우저 제어

CSS 기초

제어할 태그 선택하기

프로그램, 프로그래밍, 프로그래머

조건문 예고

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

조건문

조건문의 활용

리팩토링(refactoring)

반복문 예고

배열

반복문

배열과 반복문

배열과 반복문의 활용

함수예고

함수

함수의 활용

객체예고

객체

객체 활용

파일로 쪼개서 정리 정돈하기

라이브러리와 프래임워크

UI vs API

수업을 마치며





#17. 조건문의 활용 


▲ 조건문 삽입 (#id="night_day")


▲ 검색 'Javascript element get value'




▲ 개발자 도구에서 구동해보기


▲ 구동하는 코드에서 코어적인 부분 'Value값' 찾기


▲ 구성(Element)에서 value 값을 day로 바뀐경우, 산출되는 .value = "day" 


▲ 조건문에서 조건을 value 값 'night'로 설정 (참/거짓)



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

이 경우, 'value'가 'day'인 경우를 설정하지 않았으므로, night 모드만 작동한다




▲ 조건문에 day가 value인 경우 삽입



참인 경우 #night_day 버튼은 day로 바뀜

거짓인 경우 #night_day 버튼은 night로 바뀜 

따라서, 주간/야간 모드 전환 가능 




▲ 불필요한 코드 (중복되는 기능) 제거