setInterval()
-
JavaScript 입문 : 지뢰찾기 게임 - 지뢰없는 칸 한꺼번에 열기 (재귀함수 최적화), 게임 승리 및 걸린시간 표시컴퓨터 알아가기/JavaScript 2022. 11. 3. 19:30
Recursion 재귀함수에 대해 공부를 하고 있습니다. 나 자신의 함수를 나에게 다시 적용함으로써 같은 조건하에서는 지속적으로 작동되게 만드는 함수입니다. 그런데 지난시간에도 보았듯이 작동이 되긴하는데 시간차가 생기고 결국에는 브라우저가 다운되는 현상이 벌어졌습니다. 이는 이벤트루트의 문제도 아니며 자기 자신이 루프를 돌면서 지난간 곳을 반복적으로 지나가기 때문입니다. 관련된 재귀함수를 최적화하는 내용을 공부해보겠습니다. 관련 내용은 제로초 TV 자바스크립트 강좌의 도움을 받아 공부하고 있습니다. 1. 재귀함수 최적화 지난시간 에러를 다시보면 빈칸이 열리긴 하는데 시간이 더디고 마지막에는 브라우저가 다운되는 현상이 있었습니다. 원인을 고민해 보면 내가 열었던 칸을 기준으로 다시 열리고 다시 열린칸을 기..
-
JavaScript 입문 : 가위바위보 게임 - clearInterval(), clearTimeout()컴퓨터 알아가기/JavaScript 2022. 7. 8. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지난 시간 다음 그림과 같이 브라우저에서 setInterval 함수를 이용하여 가위바위보 그림이 무한루프로 변하게 설정을 해 보았습니다. setInterval은 또 setTimeout 함수로 바꾸어 할 수도 있었구요. 그림을 보면 가위바위보가 무한정 0.05초 간격으로 변하고 있고 밑에 가위 바위 보의 각 버튼을 만들어 놓았습니다. 즉, 버튼을 누르면 그림이 멈추면서 승패에 대한 점수를 계산하는 방식으로 되어 있습니다. 우선 무한정 돌고있는 그림을 멈추는 함수 명령어가 필요합니다. setInterval() 함수를 멈추게 하는 함수는 clearInterval() 함수입니다. 참고로 setTimeout() 함수를 취소하는 함수는 clearT..
-
JavaScript 입문 : 가위바위보 게임 - setInterval함수와 setTimeout함수컴퓨터 알아가기/JavaScript 2022. 7. 7. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지난시간 setInterval함수를 통하여 가위바위보 그림을 0.05초마다 바꾸도록 설정 하였고 중복되는 부분을 제거하여 간단하게 코딩을 해 보았습니다. 이제는 setInterval 함수내 사용되었던 코드를 별도의 함수로 외부에 선언하고 setInterval 함수자체의 모양을 setInterval(별도 함수이름, 50)의 모양으로 다듬어 보고자 하며 setTimeout함수로 대체해 보는 연습을 해 보도록 하겠습니다. 1. 외부함수 선언 setInterval 내에 사용되었던 if문을 외부로 선언하고 setInterval 자체는 간단하게 하고자 하면 다음과 같이 할 수 있습니다. 역시 브라우저 또한 잘 반영이 되어 돌아갑니다. 2. setT..
-
JavaScript 입문 : 가위바위보 게임 - 빠르게 그림변환 (setInterval)컴퓨터 알아가기/JavaScript 2022. 7. 6. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. ▒ 빠르게 그림변환 (setInterval 함수) 지난시간 개발자도구(F12)를 통하여 가위 바위 보 그림의 위치를 확인해 보았습니다. 무료로 사용할 수 있는 그림을 구한 관계로 순서가 바위 가위 보 순서로 되어 있는데 빠르게 그림을 변화시킬 예정이므로 큰 문제는 아닐 것으로 판단됩니다. 현재 그림에서 각각의 위치는 다음과 같이 나왔습니다. 바위 : 0 0 가위 : -83px 0 보 : -176px 0 그리고 지난시간 JS상 CSS 명령어를 주었던 위치관련된 style.background와 style.backgroundSize 두 명령어는 항상 세트로 작성해 주어야 합니다. 1. 변수객체 가위바위보 게임에 사용될 변수에서 공통점을 찾을 ..