[Javascript] Javascript 입문 12 (170322)

Javascript 입문 12

• QUIZ 1 > 

ANSWER >

- 버튼 클릭 후 1초 뒤 움직이도록 우선 만든다. 이 때 이용하는 함수는 setTimeout함수이다.

- 중복 클릭을 막기 위해선 함수가 실행중 or 실행하지 않는 중 두 가지 상태가 필요하다. 따라서 상태값을 관리할 변수를 둔다.

- 이 때 변수는 string, number, boolean 등으로 설정할 수 있는데 두 가지이므로 boolean타입이 적당하다.

- var isRunning을 초기값 false로 둔다.

- setTimeout 함수 안에 isRunning=false;으로 두는 이유 : setTimeout는 설정한 time(1초)후에 function이 실행된다. 따라서 function이 실행될 때 isRunning값을 초기화 시켜주면 된다.

** 출력 결과 **

• QUIZ 2 >

ANSWER >

 - 앞에서 풀었던 문제를 약간 다르게 적용한 문제이다.

 - true / false를 이용하여 toggle할 수 있다.

** 출력 결과 **

• QUIZ 3 >

ANSWER >

***다시풀어보기***

- 우선 박스가 버튼 클릭으로 이동하도록 한다.

- 그 후 지정된 거리를 지속적으로 이동하도록 한다.

- 이동중에 버튼을 클릭하면 움직이지 않도록 한다.

• QUIZ 4 >

ANSWER >

1. 토글되도록 한다.

2. marginLeft로 움직이도록 한다.

***다시풀어보기***

• QUIZ 5 >

ANSWER>

1. 버튼을 누르면 토글되도록 한다.

3. marginLeft로 움직이도록 한다.

4. 버튼을 누르면 자동으로 움직이도록 한다.

5. stop버튼을 누르면 멈추도록 한다.

6. start버튼을 여러번 누르면 속도가 가속되는 문제와 stop버튼이 작동하지 않는 문제를 해결한다.

***다시풀어보기***