Sohn SooKyoung

💛💚

최대 1 분 소요

조건문, 반복문을 통한 리팩토링

조건문과 리팩토링

codding-everybody-1

document.querySelector(‘#night_day’).value를 통해서 현재의 value값을 알려준다. 그래서 만약에 value값을 night로 해둔다면 document.querySelector(‘#night_day’).value === ‘night’가 되고, value값을 day로 해둔다면 document.querySelector(‘#night_day’).value === ‘day’가 된다. 이를 통해서 할 수 있는 것은 무엇이 있을까?

1
2
3
4
5
6
7
8
<input type="button" value="dark" onclick="
    document.querySelector('body').style.backgroundColor = '#003333';
    document.querySelector('body').style.color = 'white';
">
<input type="button" value="day" onclick="
    document.querySelector('body').style.backgroundColor = '#669999';
    document.querySelector('body').style.color = 'black';
">
cs


다음과 같은 코드가 있다. 여기서 클릭에 따라서 dark였던 모드가 day로 바뀌게 되면서 버튼 위의 글씨가 night로 바뀌게 되는 코드를 작성하고 싶을 때, if문과 .value속성을 사용해준다.

1
2
3
4
5
6
7
8
9
10
11
var target = document.querySelector('body');
    if (this.value === 'night') {                   //만약에 this.value가 night라면
        target.style.backgroundColor = '#003333';
        target.style.color = 'white';
        this.value = 'day';                         //value값을 day로 바꾼다. 
    }
else {                                              //그렇지 않다면 (만약에 this.value값이 day라면)
    target.style.backgroundColor = '#669999';
    target.style.color = 'black';
    this.value = 'night';                           //this.value값을 night로 바꾼다. 
    }
cs


위 코드와 같이 바꾸어 줄 수 있다.

배열과 반복문

codding-everybody-2

위 사진을 통해서 document.querySelectorAll(‘a’)라는 속성은 a태그를 다 찾아준다. 이를 활용하여 태그들을 리스트로 만든 후, 콘솔창에 0번째 인덱스, 1번째 인덱스를 출력(console.log(alist[0]), console.log(alist[1]))해보면 위와 같은 출력값임을 알 수 있다. 그럼 이를 활용해서 무엇을 할 수 있을까?

codding-everybody-3

콘솔창을 이용해서 모두 적용되는 것이 확인이 되었으면 소스 코드에 복붙하는 형식으로 진행하였다.

1
2
3
4
5
6
var alist = document.querySelectorAll('a');
var i = 0;
 while (i < alist.length) {
    alist[i].style.color = 'powderblue';
    i++;
}
cs


다음과 같은 코드를 이용해서 모든 a테그들의 색상을 모두 powderblue로 바꿀 수 있다. 여기서 .length속성은 길이를 알려주는 속성으로 리스트의 원소 개수만큼 반복문을 돌려준다.

함수

함수의 기본 문법은 내가 평소에 배웠던 바와 같다. 매개변수, 인자, 리턴 등,,

1
2
3
function 함수 이름 (매개변수) {
    함수의 실행 코드;
}
cs


함수의 기본 구조는 위와 같다. 다만 C언어와는 조금 다른 것은 매개변수에 대한 데이터형을 쓰지 않아도 된다는 것이었다.

See the Pen Untitled by sohnsookyoung (@sooking87) on CodePen.


반복문, 조건문, 함수를 사용하여 예시로 만들어본 코드는 위와 같다.

댓글남기기

참고