로또추첨기
-
JavaScript 입문 : 로또 추첨기 - 마무리컴퓨터 알아가기/JavaScript 2022. 6. 6. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 사실 이번 장은 그리 내용이 많지 않습니다만 지난번 강좌에 대하여 스스로 복습하는 개념으로 다가가고자 합니다. 어느 분야이든 꾸준하게 공부하고 이어가야 하는데 개발자도 아니고 개발과 관련된 직업이 아닌 취미로 공부하고 있으니 약간의 외부 요인이 생기면 블로그를 포함하여 정리할 수 있는 시간을 가질수 없는게 현실입니다. 특히, 이렇게 생소한 분야인 컴퓨터 코딩분야는 한 2주간 공부를 하지 않으면 아예 다 잊어버린것만 같은 느낌이 듭니다. 게다가 한창 머리 회전이 빠른 젊은 시절이 아닌 은퇴를 앞둔 시점이라 더욱 머리 회전이 되지 않네요. 누가 나이를 숫자라 그랬던가 기억력과 이해력의 한계를 느끼는 순간입니다. ▒ 로또추첨기 마무리 지난 시..
-
JavaScript 입문 : 로또 추첨기 - setTimeout( ) 함수 : 중복 부분 매개변수 함수로 통일컴퓨터 알아가기/JavaScript 2022. 5. 16. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. ▒ 중복부분 함수로 통일 지난시간 로또추첨기에 대한 코딩을 완료 하였습니다. 이제부터는 좀 더 효과적인 코딩을 위하여 심하게 중복되어 있는 부분을 별도로 함수를 만들어 통일화하는 과정을 같이 공부할 겁니다. 일단 지난 시간 코딩을 살펴보면 다음과 같이 중복이 계속 발생합니다. (일부분만 봐도 그렇습니다.) 주황색 사각형 안만 변하고 나머지는 전부 같습니다. 물론 수정하지 않아도 프로그램이 작동하는데는 이상이 없습니다만, 수정 사항이 발생하는 경우 일일이 하나씩 고쳐야 하는 번거로움이 있고 아주 복잡한 프로그램인 경우는 수정시 실수 할 확률도 높아 비효율적입니다. 1. 함수로 중복 제거 (1단계) 별도로 외부에 함수를 만들어서 중복된 부분..
-
JavaScript 입문 : 로또추첨기 - 당첨볼 추출 및 정렬 / setTimeout( ) 함수컴퓨터 알아가기/JavaScript 2022. 5. 13. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지금까지 로또추첨기에 대한 코딩 순서를 복습하자면 코딩에 대한 순서도 - 배열을 이용한 숫자 45개 준비 - 전체 숫자 무작위 섞기 (피셔 예이츠 셔플) 이었습니다. 지금부터는 섞인 45개의 숫자에서 당첨볼 6개와 보너스 볼을 뽑는 코딩을 공부할텐데 setTimer 함수 메소드를 이용하여 1초마다 공이 화면에 표시되는 과정을 해보고자 합니다. ▒ 6개 당첨볼 뽑기 지난 시간까지 무작위 섞인 45개의 공을 shuffle이라는 빈 배열에 배정 하였습니다. 여기서 앞 6개를 당첨번호로 (뒤 6개를 뽑아도 되고, 홀수번째나 짝수번째 봅아도 되고) 다음 7번째 볼을 보너스볼로 하겠습니다. slice()와 sort()를 이용하여 원본을 유지한채 뽑..
-
JavaScript 입문 : 로또추첨기 - 무작위 섞기 1단계 (배열로 공 45개 준비)컴퓨터 알아가기/JavaScript 2022. 5. 9. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지금부터는 로또추첨기를 만들기 위해 순서도상 45개의 공을 무작위 섞는 내용에 대해 공부를 해 보로록 하겠습니다. 우선 로또추첨기에 베이스가 되는 HTML을 만들어 놓을 필요가 있고 공에 대한 기본적 틀만 CSS로 만들어 놓는 과정을 하겠습니다. 순서도를 조금 추가하면 다음과 같습니다. 1. 기본이 되는 HTML과 기본 공모양 CSS VS Code에서 작성하면 다음과 같을 수 있습니다. 상기 기본 공모양 CSS를 만들어 놓고 향후 자바스크립트로 CSS를 연결시키는 공부를 할 예정입니다. 아울러, 강좌에서는 없지만 로또추첨기에서 뽑혀진 공들에게 애니메이션을 입혀 보도록 하겠습니다. 2. 45개 숫자 무작위 섞기 (피셔 예이츠 셔플, Fis..
-
JavaScript 입문 : 로또추첨기 - 공 모양 만들기컴퓨터 알아가기/JavaScript 2022. 5. 3. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 로또추첨기에 대한 순서도를 임의로 작성을 해 보았습니다. 배워가면서 순서도 수정이 필요하거나 한 경우 반영하면서 진행하도록 하겠습니다. 먼저 CSS측면에서 공 모양을 만들어 보는 연습을 해 볼 필요성이 있습니다. ▒ 공 모양 만들기 직접 HTML과 CSS만으로 공을 만들 수 있으나 자바스크립트 분야이기 때문에 같이 연동해서 만들어 보는것도 같이 공부 하도록 하겠습니다. ① 기본적 HTML과 CSS 1번볼을 만들어 볼건데 HTML과 CSS를 이용한 볼 만들기 연습니다. 높이와 넓이를 40px로 같게하고 중간맞춤 글씨크기를 절반인 20px로 class를 이용해서 만들어 보도록 하겠습니다. 간단한 작업이기에 Codepen을 이용해서 기본 모양..
-
JavaScript 입문 : 로또추첨기 - 순서도컴퓨터 알아가기/JavaScript 2022. 5. 2. 19:30
이 글은 제로초TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 강좌의 도움을 받아 로또추첨기를 만들어 볼 예정입니다. 가능한 CSS도 꾸며볼 생각이고요. 먼저 순서도를 만들어 놓아야 할 것입니다. 순서도를 기준으로 어떻게 자바스크립트를 이용할지 고민하는 과정이 필요합니다. ▒ 로또추첨기 순서도 기본적인 로또추첨기의 흐름을 정리해 보도록 하겠습니다. ① 45개 숫자가 필요 ② 45개 숫자가 무작위로 섞여야 함 ③ 추첨 시작 ④ 추첨은 6개볼과 보너스볼 1개 (공이 튕기면서 7개가 순서대로 나오는 방식 고민) ⑤ 공 색깔 구분 (십단위로 끊어서) 이정도가 필요할 것 같습니다. 한번 순서도를 그리도록 하겠습니다. 순서도에서 우선 고민하고 배워야할 부분은 다음과 같이 나눌수 있습니다. ① 공모양 만들어 보기..