오늘은 코드의 중복된 부분을 제거하여 수정을 편하게 하는 방법인 refactoring에 대해 배웠다.
요즘 배우고 있는 코드는 짧고 간결하지만, 코드가 더 길어질 경우 중복된 부분이 많으면 수정하는 과정이 번거롭다.
이전에 작성한 코드이다.
1. 코드를 보면 만약 버튼의 개수가 여러개로 늘어났을 때 id값인 night_day를 수정할 과정이 번거로울 것이다.
2. document.querySelector도 여러번 반복되고 있다.
<body>
<h1><a href="index.html">WEB</a></h1>
<input id ="night_day" type="button" value="night" onclick="
if (document.querySelector('#night_day'). value ==='night'){
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
document.querySelector('#night_day'). value ='day';
}
else {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
document.querySelector('#night_day'). value ='night';
}
">
</body>1번 문제를 해결 하는 방법은 onclick과 같은 이벤트 안에서 실행되는 코드는 현재 코드가 속해 있는 태그를 가리키도록 약속돼 있는 특수한 키워드(this)를 사용하는 것이다.
document.querySelector('night_day')를 this로 변경한다.
<input id ="night_day" type="button" value="night" onclick="
if (this.value ==='night'){
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
this.value ='day';
}
else {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
this.value ='night';
}
2번 문제를 해결 하는 방법은 <body> 태그를 target 변수에 할당하는 것이다.
var target = document.querySelector('body');해당 코드를 추가한 뒤 documetn.querySelector('body') -> target 으로 변경하면 된다.
<body>
<h1><a href="index.html">WEB</a></h1>
<input id ="night_day" 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';
}
">
</body>'소프트웨어 > JavaScript' 카테고리의 다른 글
| [JavaScript] 함수 활용한 refactoring - 야간 모드 예제 간결하게 (0) | 2023.02.02 |
|---|---|
| [JavaScript] 웹 페이지 주간모드 야간모드 링크 색깔 변경 (0) | 2023.02.01 |
| [JavaScript] 웹 페이지 야간모드 만들기 기초 - 하나의 버튼으로 (0) | 2023.01.31 |
| [JavaScript] 웹 페이지 야간모드 만들기 기초 예제 (0) | 2023.01.30 |
| [JavaScript] 변수(variable)와 상수(constant) console에서 사용 (0) | 2023.01.29 |
