JavaScript06 - switch를 사용한 이동효과 만들기

🟰switch

switch의 기본 구문은 이렇습니다.
switch(연산대상) {

case(연산결과값1) :
해당 case가 해당될 경우 수행될 내용
break;
case(연산결과값2) :
해당 case가 해당될 경우 수행될 내용
break;
default :
case외의 결과값시 수행될 내용
break;
}

이처럼 연산대상의 결과값에 따라 다른 내용이 수행되도록 하는 while과 유사하지만 조금 다른 모습의 반복문이다.
만약 어떤 값이 나올경우 종료를 시키고 싶다면 return;을 적으면 해당 반복문이 종료된다.
이 구문을 이용하여 간단한 이동효과를 만들 수 있다.

See the Pen Untitled by 이선로 (@ttxvrsis-the-animator) on CodePen.

지정된 가로500px 세로 500px의 div안(#root)에 하나의 다른 div(.item)를 넣고 .item의 background에 이미지를 집어넣었다.
해당 사진을 자바스크립트의 요소로 불러와서 어떠한 키를 누를 경우 해당 그림이 옆으로 100px씩 이동하는 자바스크립트를 작성하였다.
벽 너머로 넘어가면 안되기에 일정px이상 넘어가는 경우 제자리에 있도록 설정하였다.

getElementalById, querySelector등 요소를 가져오는 메서드를 사용하는 방법도 곧 포스팅하겠다.
지금은 해당 요소를 가져와서 요소의 스타일과 요소의 속성을 변경할 수 있는 방법정도로 알아두자.
물론 event발생시 함수를 작동시키는 방법도 포스팅하겠다.