-
[WEB2 JavaScript] 18.리팩토링(refactoring) | 초코더JavaScript/생활코딩 2019. 11. 14. 15:54
이번 시간은 개발자에게 매우 중요한 리팩토링에 대해 알아볼게요.
저번시간에 만든 버튼을 활용해서 코드를 수정해보겠습니다.
먼저 이 게시물을 보고 와주세요!
WEB2 JavaScript - 14. 조건문 예고, 17.조건문의 활용
오늘은 간단한 조건문에 대해 공부해볼게요. 우선 저번 시간에는 아래 사진과 같이 night버튼을 누르면 배경검정_글씨흰색, day버튼을 누르면 배경흰색_글씨검정이 되도록 만들었는데요. 버튼 하나를 가지고 day..
sinsomi.tistory.com
이러한 버튼을 100개,1000개를 만들고 싶을 때 코드가 중복되는 것을 막기 위해 짜볼게요.
우선 id값이 중복될 수 없기 때문에 코드를 복붙하게 되면 제대로 작동이 안될 뿐더러 중복되는 코드는 매우 안좋습니다!! 최대한 중복을 줄여볼게요.
1. document.querySelector('body')
var target = document.querySelector('body');var target으로 body태그를 지정해줄게요. 이렇게 하면 훨씬 코드의 길이도 줄어들고 중복되는 코드가 줄어들어요.
물론 변수의 이름은 target이나 bodyTag나 마음대로 정해도 상관없습니다.
2. document.querySelector('#night_day')
<!-- 첫번째 줄과 두번째 줄은 같은 코드 --> document.querySelector('#night_day').value = 'night'; this.value = 'night';document.qeurySelector('#night_day')는 이 코드안에서 실행되고 있는 것이므로 굳이 선언해주지 않고도 'this'라는 지정자를 통해서 나타낼 수 있어요.
자바스크립트에서 'this'는 아주 중요한 개념이고 많이 사용되니깐 잘 익혀두는게 좋을 것 같아요.
위 아래 두개의 버튼 이렇게 코드의 길이가 줄어들고 중복을 없앤 최종 코드를 보여드릴게요.
두 개의 버튼을 만들어주어도 아무런 문제가 없습니다!
<html> <h1><a href="index.html">WEB</a></h1> <!-- 코드 리팩토링 중복줄이기(target, this) --> <input type="button" value="night" onclick=" var target = document.querySelector('body'); if(this.value === 'night'){ target.style.backgroundColor = 'black'; target.style.color = 'white'; this.value = 'day'; }else{ target.style.backgroundColor = 'white'; target.style.color = 'black'; this.value = 'night';}"> <ol> <li><a href="1.html">HTML</a></li> <li><a href="2.html">CSS</a></li> <li><a href="3.html">JavaScript</a></li> </ol> <h2>JavaScript</h2> <p> JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA. </p> <input type="button" value="night" onclick=" var target = document.querySelector('body'); if(this.value === 'night'){ target.style.backgroundColor = 'black'; target.style.color = 'white'; this.value = 'day'; }else{ target.style.backgroundColor = 'white'; target.style.color = 'black'; this.value = 'night';}"> </html>'JavaScript > 생활코딩' 카테고리의 다른 글
[WEB2 JavaScript] 25.함수, 26. 함수 : 매개변수와 인자, 27. 리턴 | 초코더 (0) 2019.11.15 [WEB2 JavaScript] 23.배열과 반복문의 활용 | 초코더 (0) 2019.11.14 [WEB2 JavaScript] 22. 배열과 반복문 | 초코더 (0) 2019.11.14 [WEB2 JavaScript] 14. 조건문 예고, 17.조건문의 활용 | 초코더 (0) 2019.11.14 [WEB2 JavaScript] 12.제어할 태그 선택하기 | 초코더 (0) 2019.11.14