JavaScript 입문 : 클릭 반응속도 체크 - 개요 및 순서도

이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 

 

지금까지 다양한 자바스크립트 예제를 공부하고 있는데요... 과연 머리속에 얼마나 남아있는지 모르겠습니다. 이럴경우 모든 학문의 진리이지만 지속적으로 접하고 연습해보는 것외에는 방법이 없는 것 같습니다. 

 

지금부터 고민할 부분은 화면에서 어떤 객체가 색이 변했을 경우 바로 클릭하여 얼마나 빨리 반응했는지 볼 수 있는 프로그램을 만들어 보고자 합니다. 

 

언제나 그렇듯 내용을 정리하고 관련 순서도를 만들어 보는게 첫번째 순서입니다. 

 

1. 클릭 반응속도 체크를 위한 프로그램 개요

 

전체적인 개요를 정의해 보면 "파란화면이 띄어져 있고 한번 클릭하면 빨간회면으로 바뀌고 랜덤 시간뒤 노란화면으로 바뀌면 클릭을하고 얼마나 빨리 클릭하였는지 또는 몇번의 클릭의 평균시간을 구하는 프로그램을 만든다." 입니다 .

 

노란화면으로 바뀌기 전에 빨간화면을 클릭한다면 경고메시가 뜨게 만들고 다시 랜덤시간후 노란화면으로 바뀌는 과정도 필요합니다. 

 

이를 위해서 기본적인 순서도를 다음과 같이 그려 보았습니다. 

원 강좌의 순서도와는 조금 차이가 있어 보입니다만, 이전까지는 순서도를 그대로 따라하기 급급했지만 이번부터는 스스로의 순서도를 기준으로 강좌의 도움을 받아 진행해보고 평가를 해보고자 합니다.

 

2. 반응속도 체크를 위한 순서도 

 

 

전반적으로 스스로 이해하기 위한 순서도이지만 여기서 중요한 점은 코딩이 시작되기전 변수에 대한 개념을 미리 생각해야하며 데이터를 반영하면 화면도 같이 표시해 줘야하는것이 필요합니다. 

 

아울러 처음 파란화면이 되면 클릭전까지는 대기상태여야 하고 향후 반응속도 체크에 대해 일정 횟수 시도시 평균값을 구할지는 코딩해 가면서 결정하면 되겠습니다. 

 

저는 회면을 클릭하지 않고 카드 같은 직사각형을 만들어 사용할 예정입니다.