컴퓨터 알아가기/JavaScript
-
JavaScript 입문 : 논리연산자 AND (&&) 와 OR (||)컴퓨터 알아가기/JavaScript 2022. 10. 27. 19:30
자바스크립트에서 논리연산자(&&와 ||)는 지금까지 다음과 같이 이해를 하고 있었습니다. A && B 는 A와 B가 전부 true여야 true이며 A || B는 A와 B중 하나만 true여도 true로 알고 있었습니다. 맞는 이야기인데 이는 단순하게 앞 뒤에 대한 참과 거짓을 확인할 때 사용하는 경우입니다. 이러한 논리연산자를 조금 더 깊이 정확하게 자바스크립트에서는 다음과 같이 사용합니다. A && B 는 A가 true이면 B를 실행하고 A || B는 A가 false이면 B를 실행하라는 뜻입니다. A || B는 A가 아니면 B를 실행하라는 뜻도 되겠지요. 반대이면 다음과 같이 생각하면 됩니다. A && B 는 A가 false면 A를 실행하고 A || B는 A가 true면 A를 실행하라 언뜻보면 헷갈리는..
-
JavaScript 입문 : 지뢰찾기 게임 - 본격적인 지뢰심기컴퓨터 알아가기/JavaScript 2022. 10. 26. 19:30
본 글은 제로초 TV의 자바스크립트 강좌를 기본으로 공부하고 있습니다. 지난시간 다음과 같이 랜덤하게 10개의 지뢰 인덱스를 뽑았습니다. 물론 이 인덱스는 새로고침 할때마다 변경이 되겠지요. 하여간 랜덤하게 뽑힌 10개의 인덱스와 지뢰를 연결하도록 하겠습니다. ▒ 본격적인 지뢰심기 1. 전체를 지뢰가 없다는 가정하에 NORMAL로 코드숫자 부여 지뢰는 총 10개로 하고자 했습니다. 총칸은 100칸이고요. 지난 시간까지는 해당칸에 대한 그림을 인덱스로 나타내었지만 본격적으로 생명을 불어넣기 위해서는 각 인덱스와 연결을 시켜야 합니다. 여기서는 코드숫자와 연결을 시켜야겠지요. 먼저 전체 100칸에 지뢰가 없는 NORMAL인 상태로 만들어 줍니다. 코드숫자는 -1로 하기로 했구요. 10 X 10은 이중반복문을..
-
JavaScript 입문 : 지뢰찾기 게임 - 기본적 HTML / CSS 만들기, 지뢰를 심기위한 랜덤숫자 뽑기컴퓨터 알아가기/JavaScript 2022. 10. 25. 19:30
본격적인 지뢰심기 게임을 만들어 보도록 하겠습니다. 1차적 결과는 다음과 같이 나오도록 할 예정입니다. 잠깐 그림에 대해 설명드리면 처음에는 가로 10칸, 세로 10칸인 2차원 배열을 만들고 그 중에서 지뢰를 10개 랜덤하게 만들고자 합니다. 지금은 편의상 지뢰를 'X'로 표시하고 우측 클릭에서 물음표와 깃발을 각각 '?'와 '!'로 표시할 예정입니다. 향후 전체코드가 완료되었을때는 지뢰 그림과 깃발 등 조금 더 데코레이션 하는 방향으로 할 예정입니다. 본 코딩은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 1. 기본적인 HTML / CSS 만들기 역시 기본틀이 되는 HTML과 CSS를 고민해야 하는데요. 10 X 10 바둑판 배열은 2차원 배열이라고 보면 되겠습니다. 2차원 배열은 자바스..
-
JavaScript 입문 : 지뢰찾기 게임 - 순서도컴퓨터 알아가기/JavaScript 2022. 10. 21. 19:30
이 글은 제로초 TV의 지뢰찾기 게임을 참조로 정리한 글입니다. 머리속에 잘 남아있지 않지만 그래도 자바스크립트를 공부하고자 했던 마음 가다듬고 조금 더 훈련을 해 보고자 합니다. 무작정 따라 하는 것보다 복습하고 이해할려고 하니 어느정도는 업그레이드가 되는 느낌은 있는데 어떨때는 쉽게 포기할 수도 있겠구나 하는 생각도 들긴합니다. 각설하고, 좀 더 매진해야겠습니다. 이번에는 지뢰찾기 게임을 도전해 보는데요. 우선 지뢰찾기 게임이 뭔지 알아야 할 듯 합니다. 사실 저같이 나이가 있는 사람은 과거 컴퓨터 윈도우에 기본으로 깔려있는 게임인데요. 잘 모르는 분들은 구글에서 지뢰찾기를 검색하면 바로 게임할 수 있습니다. 아주 단순한 1차원적 게임이죠. 그렇지만 게임에 대한 큰 흐름을 알아야 순서도를 만들고 그에..
-
JavaScript 입문 : 카드맞추기 게임 - 카드게임 수량 유저 선택하기, 총 걸린시간 계산하기컴퓨터 알아가기/JavaScript 2022. 10. 13. 19:30
이 글은 제로초 TV 자바스크립트 강좌를 기본으로 공부하고 있습니다. 현재까지 카드맞추기 게임을 만들면서 어느정도 버그가 수정이 되었다고 판단되어 조금 더 업그레이드를 해보고자 합니다. 첫번째는 카드의 수량을 최대치로 정해놓고 시작시 유저가 원하는 카드갯수를 입력하여 게임을 시작하고 최종적으로는 게임완료 시간을 계산하도록 하겠습니다. 1. 카드수량 정하기 게임 시작시 카드 수량을 입력하도록 만들겠습니다. 최대 20개까지 카드의 숫자를 만들도록 하고 이는 alert 메시지를 통하거나 버튼클릭으로 만들 수 있습니다. 주의할 점은 카드 2개가 같은 색이어야 하고 유저가 몇장을 선택할지 모르기 때문에 최대 20장의 반인 10장의 색상을 slice( ) 메소드로 나누어준 값을 concat( ) 메소드로 복사합니다..
-
JavaScript 입문 : 카드맞추기 게임 - 이벤트루프를 통한 버그 수정 (동시 3번이상 클릭했을 경우 버그)컴퓨터 알아가기/JavaScript 2022. 10. 12. 19:30
지난 시간 이벤트루푸에 대해 나름 깊이 공부를 해 보있습니다. 나름대로 이해를 돕기위해 나만의 Oredr Table도 만들어 결과값도 도출해 보았구요. 이제는 다음 그림과 같이 연속으로 3번이상 클릭하였을 경우 3번째부터 카드가 원상태로 돌아가지 않는 경우입니다. 예를 들어 동시에 4개를 찍으면 2개의 카드가 원상태로 돌아가지 않습니다. 예상되는 원인은 기본적으로 자바스크립트는 순서대로 코드에 따라 작동하지만 이벤트루프 이론에 따르면 setTimeout( )같은 함수가 사용될 경우 Background와 Task Que를 거쳐 호출스택으로 들어가서 동작을 하기 때문에 이런 현상이 벌어지는 경우로 추측 할 수 있습니다. 한번 이러한 버그에 대한 수정을 해 보도록 하겠습니다. 본 글은 제로초 TV 자바스크립트..
-
JavaScript 입문 : 이벤트루프 (Event Loop) 이해하기 2 - 3개요소(호출스택, 백그라운드, 태스크큐)를 이용한 테이블 이용하기컴퓨터 알아가기/JavaScript 2022. 10. 11. 19:30
자바스크립트에서는 이벤트루프(Event Loop)에 대한 이해가 상당히 중요합니다. 이전시간 이벤트루프 구성도를 공부하면서 간단한 동작원리를 이해 하였습니다. 이제부터는 이벤트루프 테이블을 개발하여 좀 더 쉽게 다가설 수 있는 방법이 없는지 고민해 보도록 하겠습니다. 이번에 들 예제는 제로초TV 자바스크립트 강좌를 참고 하였습니다. 1. 이벤트 루프 테이블 (Event Loop Table) 구성 Event Loop Table을 만들고자 하는 목적은 아직 머리속으로 계산이 어렵기 때문에 좀 더 쉽게 다가설 수 있는 방법이 있는지의 고민에서 출발 하였습니다. 지나시간 console.trace( )에 대한 내역을 table을 구성해 보겠습니다. 상기 함수식에 대한 Event Loop Table은 다음과 같습니..
-
JavaScript 입문 : 이벤트루프 (Event Loop) 이해하기 1 - 이론적 접근 (호출스택, 백그라운드, 태스크큐)컴퓨터 알아가기/JavaScript 2022. 10. 10. 19:30
이벤루프에 대한 이론적 도움은 제로초TV 자바스크립트 강좌를 참고 하였습니다. 자바스크립트에서 가장 중요한 이론 중 하나가 이벤트루프라고 합니다. 풀어쓰자면 이벤트가 행해지는 반복틀의 원리를 이해하고 틀린곳이 있다면 바르게 수정할 수 있는 능력을 키우자입니다. 다음 그림을 기준으로 이벤트루프를 이해해 보도록 하겠습니다. 1. 이벤트 루프 이론적 접근 이베트루프는 호출스택(Call Stack)과 백그라운드(Background) 태스크 큐(Task Que)로 이루어진 루프 관계를 뜻합니다. ① 호출스택 (Call Stack) 이벤트가 실행된다는 것은 함수호출이 이루어진다는 것이며 이는 Call Stack에서 함수가 실행이 된다는 뜻입니다. 자바스크립트에서는 모든 함수가 실행되기전 먼저 실행되는 함수가 있는데..