whatisthis?
생활코딩 WEB3 - javascript편(4/6) 본문
18. 리팩토링 중복의 제거
리팩토링 = 공장으로 다시 보내 개선.
코딩을 하고 나면 비효율적인 코드가 발생.
코드를 효율적으로 하여 유지보수를 용이하게 중복 제거 등 -> 리팩토링
document.querySelector('#night_day')위 코드는 사실상 자기 자신(=input요소) 을 가리키고 있다.
이제 id를 이용하지 않고 자기자신의 값을 불러오기 위해서
this
를 이용할 수 있다.
if(this.value === 'night'){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
this.value = 'day';
}즉, 이제 더이상 id값을 사용할 필요가 없으므로
id="night_day"를 지워줘도 된다.
또한, document.querySelector('body') 가 계속해서 중복 사용되고 있는데,
우리는 코딩을 할때 중복을 최소화해야한다.
따라서, 변수로 document.querySelector('body')를 설정한 다음
변수를 사용하는 방법을 이용하여 중복을 제거하자.
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';
}** 자바스크립트에서 변수를 선언할때는
var 변수명 = 값
과 같이 선언해야한다. (var = variable. 즉 변수)
이제 document.querySelector('body')라는 값을 일일히 적어줄 때 보다 훨씬 간결하게 코드가 작성되었다.
이는 target값을 수정해줄때에도 (즉, 유지보수시에도) 한번에 바뀌는 효율적인 방법이다.
19. 반복문 ex.
야간모드에는 링크(즉, a태그)가 밝게, 주간모드에는 링크가 어둡게 나오도록 하고 싶다!
이때, 스타일 속성값을 밝게 해주는 코드를 작성하면 되겠지만, 만약 링크가 1억개라면?
반복문을 사용해서 위 기능을 실행해보자.
미리 코드를 작성해보고, 이론을 학습하며 하나씩 이해해보자.
var links = document.querySelectorAll('a');
var i = 0;
while(i<links.length){
links[i].style.color = 'powderblue';
i=i+1;
}| <아직 배우기 전이지만 내가 생각한 코드의 해석> link라는 변수에 'a'요소를 전부 선택하는 querySelectorAll 값을 주었다. i라는 인덱스 변수를 주고 0으로 초기화. while문을 이용하여 i가 links의 length보다 작은 값인 동안 반복한다. links.length는 'a'태그의 개수 인 것 같다. (여기서는 길이의 개념이 아닌듯) links[i]는 querySelectorAll을 통해 선택된 a태그의 i번째 값인 것 같다. 즉, a태그가 10개가 있다면, links[0]부터 links[9]까지 있는 것이고, links.length는 10이므로 i < 10이 될때까지, 즉 i가 0부터 9까지 반복한다. i = i+1은 i를 카운트업해주는 것. |
var target = document.querySelector('body')
if(this.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
var links = document.querySelectorAll('a');
var i = 0;
while(i<links.length){
links[i].style.color = 'powderblue';
i=i+1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
var links = document.querySelectorAll('a');
var i = 0;
while(i<links.length){
links[i].style.color = 'blue';
i=i+1;
}
}
20. 배열
배열이 왜 필요할까?
배열(Array)
: 많은 데이터 중에 서로 연관된 데이터를 잘 정리정돈하여 담아두는 수납상자 역할.
배열의 기본적인 문법은 다음과 같다.
1. 배열 만들기
보통은 변수로 지정하여 생성한다.
var 변수명 = ["인자1","인자2","인자3"]
2. 배열 값 꺼내서 사용하기
document.write(배열변수명[i])
-이것은 화면에 출력하는 document.write함수의 예시이고,
이 외에도 다양하게 배열의 값을 꺼내서 활용할 수 있다.
____
3. 배열에 값 추가하기
배열변수명.push('값')
** push는 배열 맨 뒤에 추가하는 것 이고, 그 외에도 배열에 관련된 다양한 기능이 있다.
나중에 검색을 하면서 하나하나 배워보자.
예>
>>Properties
Array.prototype[@@unscopables]
Array.prototype.length
>>Methods
Array.prototype[@@iterator]()
get Array[@@species]
Array.prototype.at()
Array.prototype.concat()
Array.prototype.copyWithin()
Array.prototype.entries()
Array.prototype.every()
Array.prototype.fill()
Array.prototype.filter()
Array.prototype.find()
Array.prototype.findIndex()
Array.prototype.flat()
Array.prototype.flatMap()
Array.prototype.forEach()
Array.from()
Array.prototype.includes()
Array.prototype.indexOf()
Array.isArray()
Array.prototype.join()
Array.prototype.keys()
Array.prototype.lastIndexOf()
Array.prototype.map()
Array.of()
Array.prototype.pop()
Array.prototype.push()
Array.prototype.reduce()
Array.prototype.reduceRight()
Array.prototype.reverse()
Array.prototype.shift()
Array.prototype.slice()
Array.prototype.some()
Array.prototype.sort()
Array.prototype.splice()
Array.prototype.toLocaleString()
Array.prototype.toSource()
Array.prototype.toString()
Array.prototype.unshift()
Array.prototype.values()
4. 배열 값이 몇개인지 카운트
배열변수명.length
21. 반복문
<script>
document.write('<li>1</li>')
var i = 0;
while(i<3){
document.write('<li>2</li>')
document.write('<li>3</li>')
i = i + 1;
}
document.write('<li>4</li>')
</script>
우리는 반복 횟수를 정하기 위해 i라는 변수를 사용한다.
i = index
i=0에서
while문의 조건인 i < 3을 만족시켜
write를 하고, i = i+1로 i=1이 된다.
i=1에서
while문의 조건인 i < 3을 만족시켜
write를 하고, i = i+1로 i=2이 된다.
i=2에서
while문의 조건인 i < 3을 만족시켜
write를 하고, i = i+1로 i=3이 된다.
i=3에서는 i < 3의 조건을 만족시킬 수 없으므로 반복문을 빠져나온다.
22. 배열과 반복문
배열과 반복문을 같이 사용해보자.
var coworkers = ['this','is','yjin','web log'];
var i = 0;
while(i < coworkers.length){
document.write('<li>'+coworkers[i]+'</li>');
i = i + 1;
}
**주의
배열 선언시 ' ' 와 " " 의 차이점은 뭔지?
변수를 선언할때 var 과 const 의 차이점은?
html코드와 document.write의 사용법
예>
<a href="http://a.com/' + coworkers[i] +' ">
23. 배열과 반복문의 활용
우리가 html 문서 내에 있는 모든 <a>태그를 가져오기 위해서는
querySelectorAll('a')
를 입력해야한다.
앞서 사용했던 querySelector을 사용한다면, 맨 첫번째로 나오는 <a>태그 하나만 출력해준다.
>> 검색어 : javascript get element by css selector multiple
(css 선택자로 element,즉 태그를 여러개 가져옴)
querySelectorAll을 이용하면 다음과 같은 결과가 나온다.
document.querySelectorAll('a')
>> NodeList(4) [a, a.saw, a, a][ ] 안에 총 4개의 값이 있다.
이는 배열이므로, querySelectorAll의 결과는 배열을 반환한다는 것을 알 수 있다.
console.log(alist[0]); 이라 치면 해당 태그중 첫번째 태그가 나온다.
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
console.log(alist[i]);
i = i + 1;
}
우선 반복문의 구조를 작성하고, 제대로 작성하는지를 보기 위해서
console.log로 alist[i]값을 출력해본다.
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
var target = document.querySelector('body')
if(this.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
var links = document.querySelectorAll('a');
var i = 0;
while(i<links.length){
links[i].style.color = 'powderblue';
i=i+1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
var links = document.querySelectorAll('a');
var i = 0;
while(i<links.length){
links[i].style.color = 'blue';
i=i+1;
}
}onclick 안에 들어가는 자바스크립트 코드는 다음과 같다.
24. 함수 ex.
function
함수 < 객체 (함수보다 좀더 큰 도구)
웹페이지가 커지면 효율성이 떨어지고, 중복을 제거하여 수정시에도 용이하게.
우리가 위에서 onclick=" " 안에 작성했던 자바스크립트 전체를
<head> 태그 내에 <script>태그로 붙여넣어보자.
그리고, 우리는 이 코드 전체를 함수 하나로 선언해볼 것이다.
함수를 선언하기 위해서는 function을 앞에 붙여줘야한다.
function 함수명(self)
** self라는 요소는 자기 자신을 의미하는데, 이는 나중에 자세히 알아보자.
<script>
function nightDayHandler(self){
var target = document.querySelector('body')
if(self.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
self.value = 'day';
var links = document.querySelectorAll('a');
var i = 0;
while(i<links.length){
links[i].style.color = 'powderblue';
i=i+1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
self.value = 'night';
var links = document.querySelectorAll('a');
var i = 0;
while(i<links.length){
links[i].style.color = 'blue';
i=i+1;
}
}
}
</script>
그리고, 아래 본문에서 input 버튼의 onclick="" 의 속성값에
nightDayHandler(this);라고 적어주자.
이 또한 이유는 다음 포스팅에서 알아보도록 하겠다.
즉, 함수 선언시에는
nightDayHandler(self);
로 하였지만, 정작 함수를 사용할 때에는
nightDayHandler(this);
로 해줘야한다는 의미이다.
'WEB STUDY > JAVASCRIPT' 카테고리의 다른 글
| 생활코딩 WEB3 - javascript편(6/6) (0) | 2021.10.02 |
|---|---|
| 생활코딩 WEB3 - javascript편(5/6) (0) | 2021.10.01 |
| 생활코딩 WEB3 - javascript편(3/6) (0) | 2021.09.30 |
| 생활코딩 WEB3 - javascript편(2/6) (0) | 2021.09.29 |
| 생활코딩 WEB3 - javascript편(1/6) (0) | 2021.09.24 |
