좋은 프로그램은 간결한 코드로 이루어집니다.
코드에 중복된 내용을 제거하고 간결한 구조로 유지 보수하는 것을 리팩터링이라 합니다. 아래 예시는 버튼 한 개를 클릭할 때마다, 배경화면 및 본문의 글자색을 변경하는 코드입니다. 버튼의 값이 night 일 때 클릭하면, 배경이 네이비색으로 바뀝니다. 글자색은 노란색으로 바뀌며 버튼 안의 값 night는 day로 변경됩니다.
<! DOCTYPE html>
<html>
<head>
<title> slim </title>
<meta charset="utf-8">
</head>
<body>
<h1> sample text </h1>
<input id="transfer" type="button" value="night" onclick="
if(document.querySelector('#transfer'). value === 'night') {
document.querySelector('body'). style.backgroundColor = 'navy';
document.querySelector('body'). style.color = 'yellow';
document.querySelector('#transfer'). value='day';
} else {
document.querySelector('body'). style.backgroundColor = 'skyblue';
document.querySelector('body'). style.color = 'black';
document.querySelector('#transfer'). value='night';
}
">
</body>
</html>
반면에 버튼의 값이 day일 때 클릭하면, 배경색은 하늘색으로 바뀝니다. 글자색은 검정이 되며 버튼 안의 값은 night로 변경됩니다.
이 버튼을 2개 더 추가해보겠습니다. <input> 태그를 복사해서 2 군데에 붙여 넣습니다. 버튼을 클릭해보면 처음 버튼은 문제없이 잘 작동합니다. 그러나 두 번째, 세 번째 버튼의 속성 값 night가 day로 변경되지 않음을 확인할 수 있습니다. 총 3개의 버튼이 각자 잘 수행할 수 있도록 id를 transfer 2 , transfer3 등으로 각자 지정해줄 수 있습니다. 하지만 일일이 id를 지정하고 수정하는 것인 매우 비효율적입니다.
속성이 속해 있는 태그 자신을 불러오는 키워드 this
위의 예시는 id를 transfer로 지정한 후 자바스크립트 명령어로 document.querySelector('#transfer')로 id 자신의 내용을 불러오는 코드입니다. 굳이 길게 작성할 필요 없이 this를 사용하고, 지정해 놓은 id는 삭제합니다. id transfer의 속성 값을 불러와서 night, day 등으로 변경하는 document.querySelector('#transfer'). value='night';도 this를 적용하여 수정합니다.
<! DOCTYPE html>
<html>
<head>
<title> slim </title>
<meta charset="utf-8">
</head>
<body>
<h1> sample text </h1>
<input type="button" value="night" onclick="
if(this.value === 'night') {
document.querySelector('body'). style.backgroundColor = 'navy';
document.querySelector('body'). style.color = 'yellow';
this.value='day';
} else {
document.querySelector('body'). style.backgroundColor = 'skyblue';
document.querySelector('body'). style.color = 'black';
this.value='night';
}
">
</body>
</html>
자바스크립트 키워드 var 변수 선언을 통해 중복된 값 제거하기
var는 변수 variable의 앞 3글자이며, 데이터가 변하는 수를 의미합니다. 변수란 데이터를 담기 위한 메모리 공간이라고 볼 수 있습니다. var 키워드를 이용해 변수를 선언함과 동시에 특정 값을 할당합니다. 중복되는 코드를 target이라는 변수로 선언하겠습니다. 중복 코드는 document.querySelector('body');입니다.
var target = document.querySelectro('body'); 로 변수를 선언한 후 중복된 코드를 target으로 수정합니다.
<! DOCTYPE html>
<html>
<head>
<title> slim </title>
<meta charset="utf-8">
</head>
<body>
<h1> sample text </h1>
<input type="button" value="night" onclick="
var target=document.querySelector('body');
if(this.value === 'night') {
target.style.backgroundColor = 'navy';
target.style.color = 'yellow';
this.value='day';
} else {
target.style.backgroundColor = 'skyblue';
target.style.color = 'black';
this.value='night';
}
">
</body>
</html>
'코딩' 카테고리의 다른 글
| 자바스크립트 JavaScript 반복문을 위한 while , var 변수 i = 0 선언 (0) | 2020.09.09 |
|---|---|
| 자바스크립트 JavaScript 배열 array 만들기, 값 불러오기, 값 개수 세기, 값 추가하기 (0) | 2020.09.08 |
| html onclick 속성과 자바스크립트를 활용해 서식 변경 버튼 만들기 (0) | 2020.09.06 |
| JavaScript 자바스크립트 조건문 if else 기본 원리 (0) | 2020.09.06 |
| Comparison operators 비교연산자와 데이터타입 (Number 숫자열, String 문자열, Boolean 불리언) (0) | 2020.09.05 |
댓글