주간모드 (2) 썸네일형 리스트형 [JavaScript] 함수 활용한 refactoring - 야간 모드 예제 간결하게 오늘은 함수를 이용하여 야간모드 버튼을 간결하게 바꾸는 작업을 배웠다. 지금은 night / day 버튼을 사용하는 간단한 예제를 만들었지만 나중에 다양한 용도를 추가하기 위해 함수를 활용하고 코드가 더 길어진다면 최대한 반복을 줄인 효율적인 코드가 필요하다. 이전 포스팅에서 사용한 예제의 일부분이다. WEB 지금은 야간모드 전환 버튼이 한개지만 버튼이 여러개가 될 경우에는 수정이 번거로워진다. 따라서 부분의 반복을 줄이기 위해 nightDayHandler() 함수를 만들고 버튼에 자바스크립트 코드를 넣을 것이다. 1. nightDayHandler() 함수 만들기 태그를 추가하여 버튼의 자바스크립트 코드를 넣는다. 주의) onclick 이벤트 안에서 this는 더이상 이벤트가 소속된 태그를 가리키지 않기.. [JavaScript] 웹 페이지 야간모드 만들기 기초 - 하나의 버튼으로 이전 포스팅에서 night / day 두 버튼을 만들어서 야간 모드 / 주간 모드를 변경하는 기초를 배웠다 두 버튼을 하나의 버튼으로 만든다면 좀 더 편하게 사용할 수 있다. 조건문을 사용해서 이를 구현하였다. 이전 코드 WEB 조건문을 추가하면 night버튼을 누르면 야간모드가 되고(버튼이 day로 변경됨), day버튼을 누르면 주간모드가 된다. if 문 조건 값에 들어 갈 element의 value 값을 알아내는 방법은 아래 코드를 console 창에 입력하면 된다. document.querySelector('#id 값 입력').value 'javascript element get value'를 검색하면 알 수 있다. (https://stackoverflow.com/questions/4173391/g.. 이전 1 다음
