네이버 부스트코스 JS Javascript 제어문

 

 

 

 

프로그래밍

 

js는 프로그래밍 언어이다.

프로그램은 순서라는 뜻이다.

프로그래밍이란 순서를 만드는 행위를 말한다.

즉, 프로그래밍 언어란 시간에 순서에 따라서 

실행되어야 할 행위가 있고 이를 글로 표현한 것을 말한다.

이것을 컴퓨터가 읽고 실행하는 것이다.

 

 

html은 정적이라 한 번 만들어지면 변하지 않는다.

따라서 프로그래밍 언어가 아니다.

하지만 js의 경우 동적이고 사용자와 상호작용하기에

프로그래밍 언어라 부를 수 있는 것이다.

 

 

 

조건문이란?

 

조건문이란 조건에 따라 다른 기능들이

다른 순서에 따라 실행되도록 만드는 것이다.

if/else를 이용해 조건문을 생성할 수 있다.

 

 

 

비교 연산자와 불리언

 

js에서 가장 많이 쓰이는 비교 연산자는 ===이다.

왼쪽과 오른쪽이 동등한 지 물어보는 연산자이다.

 

 

이때 결과로 true와 false가 나온다.

이를 불리언 데이터 타입이라 부른다.

불리언은 true나 false 딱 2가지만 존재한다.

 

 

 

다른 비교 연산자에는 '<'와. '>'가 있다.

&lt;
&gt;

html은 '<'와 '>'를 태그기호와 헷갈려하기에

위처럼 작성해야 사용가능하다.

 

역시나 불리언 형태로 출력된다.

 

 

 

조건문

 

if랑 else를 이용한 조건문을 만들어보자.

 

document.write('1')
document.write('2')
document.write('3')
document.write('4')

 

script에 적으면 

이렇게 출력된다.

만약 true값일 때 혹은 false값일 때

그 값을 출력하고 싶다면 어떻게 해야 할까.

 

 

if와 else문을 사용한다.

document.write('1')
if(true){
document.write('2')
}
else{
document.write('3')
}
document.write('4')

2를 true로 설정하고 3을 else값으로 둔다면

 

3은 출력되지 않는다.

 

document.write('1') 
if(false){ 
document.write('2') 
} 
else{ 
document.write('3') 
} 
document.write('4')

 

이번에 2를 false값으로 설정해주면

 

2가 출력되지 않는다.

 

 

true이면 else값이 무시되고

false이면 else값이 사용되는 모습을 볼 수 있다.

 

 

 

 

조건문의 활용

 

전날 만들었던 야간모드와 주간모드.

조건문을 활용하면 하나의 버튼에 만들 수 있다.

if 값이 night라면 if 값을 실행하고

그렇지 않다면 else값을 실행하도록 만드는 것이다.

 

 

일단 버튼부터 만들어준다.

<input id="night_day" type="button" value="night" onclick= ">

 

if(???) {
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
}
else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
}

 

그리고 야간모드와 주간모드의 설정을 

if와 else를 이용해 쭉 이어 적어준다.

이때, if의??? 부분이 문제가 된다.

document에서 id=night_day의 value값을

night와 비교해야 하기 때문이다.

(왜냐면 위의 버튼에서 value값을 night로 했으니까)

 

document.querySelector('#night_day').value

 

이것이 id=night_day의 value를 찾는 코드이다.

 

if(document.querySelector('#night_day').value==='night')

 

if(???) 부분만 따로 확대해서 위의 식을 적어본다.

저 value의 값이 night라면 밑의 식이 적용되는 것이다.

그렇지 않다면 else의 식이 적용된다.

 

 

다만, 이렇게 적으면 night모드로 변경 가능하지만

버튼이 눌린 후에는 value가 바뀌지 않는 것이다.

따라서 버튼이 눌러진 후에도

value를 바꿔주는 코드를 입력해야 한다.

 

document.querySelector('#night_day').value = 'day';


document.querySelector('#night_day').value = 'night';

 

if와 else문 맨 끝에 각각 두 줄을 입력해준다.

if에서 야간모드가 실행되면 value값이 day로 바뀌고

다시 한번 버튼을 누르면 value값이 day이기 때문에

else가 실행되는 것이다.

 

 

<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';
}
">

 

 

 

 

뒷 배경색도, 버튼의 이름도 잘 바뀌는 것을 볼 수 있다.

 

 

 

리팩토링

 

코드가 중복이 많을 경우 너저분하고 가독성을 떨어트린다.

이때, 비효율적인 코드를 효율적으로 바꾸는

리팩토링을 이용해 정리하도록 하자.

 

 

위의 야간모드, 주간모드의 태그 중에서

id값은 하나의 태그에만 적용될 수 있다.

따라서 토글을 하나 더 만들어주었을 때

그대로 똑같은 id값을 준다면

밑의 토글은 제대로 작동하지 않는다.

따라서 id값을 태그마다 다르게 해야 하는데

this를 이용해 한번에 할 수 있다.

 

 

document.querySelector('#night_day')이 자기 자신이기에

this로 치환하여

this.value === 'night'로 적어주고

id값은 필요 없기에 지워주면

그 전과 똑같이 기능함을 볼 수 있다.

 

 

리팩토링의 가장 핵심은 중복을 제거하는 것,

따라서 document.querySelector('body')도 줄여보자.

변수를 이용한다.

var target = document.querySelector('body');

이 태그가 target이라고 변수를 지정해주고

저 태그를 가진 코드에 target으로 치환해주면

변함없이 잘 나오는 모습을 볼 수 있다.

 

 

변수명을 남들이 잘 알아볼 수 있도록

짓는 것이 가장 중요하다고 생각이 든다.

 

 

 

 

배열

 

데이터를 종류별로 분류하기 위해 배열을 사용한다.

서랍장에 옷을 넣듯 코드를 정리한다고 보면 된다.

 

var food = ["치킨", "피자"];

 

배열은 대괄호를 사용한다.

위와 같이 적으면 food라는 변수에

치킨과 피자가 정리된 것이다.

 

 

이제 꺼내보자.

document.write(food[0]);
document.write(food[1]);

 

순서는 0부터 시작된다.

따라서 food [0]을 출력하면 치킨이 나오고,

food [1]을 출력하면 피자가 나온다.

 

document.write(food.length);

 

food라는 상자에 담긴 아이템들의 수를 셀 수 있다.

지금은 치킨과 피자가 있기에

값이 2로 출력된다.

 

 

만약 food상자에 다른 아이템을 넣고 싶다면?

food.push("햄버거");

push를 이용하면 된다.

그리고 다시 앞에 사용한 개수 세는 태그를 입력하면

 

23이 아니라.... 2, 3인데 한눈에 보기 위해...

앞에 치킨, 피자의 개수 2개

뒤에 치킨, 피자, 햄버거의 갯수 3개로

food에 햄버거가 잘 들어갔음을 볼 수 있다.

 

 

document.write(food[2]);

굳....

 

 

 

 

반복문

 

코드를 작성하다 보면 반복해야 할 일이 생긴다.

물론 일일이 다 작성해도 되지만

양이 감당할 수 없을 정도로 많아진다면

다 치는 것은 불가능하다.

이럴 때 반복문을 사용한다.

 

 

먼저 ul을 이용해 리스트를 만들어주자.

document.write('<li> 강아지 </li>')
document.write('<li> 고양이 </li>')
document.write('<li> 말 </li>')
document.write('<li> 기러기 </li>')

 

여기서 고양이와 말을 반복하고 싶다.

반복문은 while을 이용한다.

 

while(???){
document.write('<li> 강아지 </li>') 
document.write('<li> 고양이 </li>') 
document.write('<li> 말 </li>') 
document.write('<li> 기러기 </li>')
}

 

??? 부분에는 if문과 같이 불리언 데이터 타입이 들어간다.

따라서 true을 입력해주면 false가 나올 때까지 출력된다.

한번 true를 입력해보니 jsbin이 렉이 걸렸다...

 

 

횟수를 정해서 입력해주어야 할 것 같다.

고양이와 말을 3번 반복하고 싶다.

변수를 사용해준다.

 

var i = 0;
while(i<3)
...
i = i+1;

이렇게 입력해주면 i는 0부터 시작해서 1씩 더해간다.

i는 3보다 작으므로 이 수를 반복하다가

조건을 만나면 stop 하게 된다.

마지막 i의 값은 2이므로 2+1=3이고

고양이와 말은 3번 반복된다.

 

 

 

배열과 반복문

 

이제 배열과 반복문을 모두 사용해보도록 하자.

먼저 배열을 만들어준다.

var food=["치킨","피자","햄버거"];

 

이제 이 값을 list로 나타내 보도록 하자.

3개이므로 반복문을 3번 해줘야 한다.

 

var i = 0;
while(i<3){
document.write('<li></li>')
i= i+1
}

 

while 반복문을 적어준다.

이제 food라는 배열을 반복하라고 명령해준다.

 

var i = 0; 
while(i<3){ 
document.write('<li>'+food[i]+'</li>')
i= i+1 
}

 

(작은따옴표 주의하자!)

++사이에 배열을 넣고 변수 i를 대괄호 안에 넣어주면

 

 

그런데 만약 배열 안에 다른 원소가 추가되면 어떻게 해야 할까?

그냥 대괄호 안에 작성해주면

새로 작성한 원소는 출력되지 않는다.

그리고 만약 원소 중 하나를 삭제한다고 할 때도 

list가 사라지는 것이 아니라 undefined로 출력된다.

 

 

이런 경우를 위해 while(i <3) 부분을 손봐준다.

매번 배열의 개수에 따라 숫자를 바꿀 수 없으니

좀 더 포괄적으로 변경하는 것이다.

배열 안의 갯수에 따라 출력되는 값을 원하니

3 대신 배열 총 개수 식을 적어준다.

 

while( i<food.length)

 

하나가 줄어도 undefined로 나오지 않고

 

 

하나가 늘어나도 정상적으로 출력된다.

 

 

 

 

 

이제 a링크에 야간모드, 주간모드에 따라 

색이 변하는 설정을 넣어보자.

 

 

a링크 목록들을 작성하고

변수를 넣어준다.

 

var alist = document.querySelectorAll('a');

 

이 태그는 a 링크들을 배열 형태로 alist에 저장해준다.

이제 배열과 반복문을 이용해 

a태그의 색상을 바꿔주자.

 

 

반복문은 alist의 길이만큼 반복되면 된다.

var i = 0;
while(i < alist.length) {
alist[i].style.color='red'
i=i+1;
}

 

만약 첫번째 것은 적용하고 싶지 않다면

처음 줄인 var i을 1로 설정하면 된다.