분류 전체보기
-
JavaScript 입문 : 틱택토(TicTacToe) 게임 - 이차원 배열을 테이블에 적용컴퓨터 알아가기/JavaScript 2022. 8. 17. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 3 by 3 테이블을 만들어 클릭이벤트가 이루어지도록 공부를 해 보았습니다. 이제는 각 칸별로 모양(또는 숫자)가 들어가는 target을 확인하기 위하여 배열을 이차원 배열을 이용한 중복구문을 사용할 예정입니다. 1. 이차원 배열 활용 3 by 3 테이블의 구조는 다음과 같습니다. 첫번째 row에 해당되는 빈배열을 만들고 데이터를 push하고 두번째 column인 cell에 들어가는 빈배열을 추가로 만들어 주어야 합니다. cell에 push하는 데이터가 최종적으로는 row에 push하는 결과를 가져오겠죠. 2. addEventListener( ) 이벤트함수 외부로 함수가 길어지면 외부에 선언하고 콜백으로 받아서 함수를 실행시키는게 좋습니..
-
JavaScript 입문 : 틱택토(TicTacToe) 게임 - 구조분해할당 적용컴퓨터 알아가기/JavaScript 2022. 8. 16. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 조금 쉬어가는 페이지로 현재 만들고 있는 자바스크립트에서 구조분해할당이 가능한 내역은 정리하고 가도록 하겠습니다. 구조분해할당(Destructuring Assignment) 은 배열과 객체에서 유용하게 사용된다고 기 설명 드렸습니다. 2022.08.11 - [컴퓨터 알아가기/JavaScript] - JavaScript 입문 : 구조분해할당 (Destructuring Assignment) - 배열 2022.08.12 - [컴퓨터 알아가기/JavaScript] - JavaScript 입문 : 구조분해할당 (Destructuring Assignment) - 객체 오늘은 기존 JS 코딩 내역 중 Destructuring이 가능한 부분을 살펴 볼..
-
JavaScript 입문 : 틱택토(TicTacToe) 게임 - 이차원 배열 이해 및 클릭이벤트 설정컴퓨터 알아가기/JavaScript 2022. 8. 15. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 이제 본격적으로 틱택토 게임을 만들어가고자 합니다. 먼저 기본적 HTML / CSS 만들고 그에 필요한 내용들을 JS내에 만들어갑니다. 1. 기본 HTML / CSS 이번 HTML에는 필요한 최소 프레임만 만들고 CSS에서는 테이블에 들어갈 속성만 지정해 주고 나머지는 JS에서 다루도록 합니다. 2. 이차원 배열 이해 ① 3 by 3 테이블 3 by 3 테이블 모양을 다음과 같이 나타내고자 합니다. 기본적으로 HTML에서는 다음과 같이 나타낼 수 있습니다. 이렇게 만들고 각 태그에 id나 class를 지정해 주어 JS에서 코딩을 할 수 있었지만 이번에는 전부 JS에서 만들어 사용하는 방법을 공부하도록 하겠습니다. 각 칸에 숫자나 문자 등..
-
JavaScript 입문 : 틱택토(TicTacToe) 게임 - 순서도컴퓨터 알아가기/JavaScript 2022. 8. 14. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 아직 미진하지만 약간은 이제 코딩의 세계가 그리 낯설지만은 않네요. 제가 강좌에서 나온 내용을 공부하고 정리하는 이유는 정말 만들고 싶은 프로그램이 있는데 그러기 위해서는 어떻게 사용되어야 하는지 이해를 하지 않으면 안되기 때문입니다. 오늘은 새로운 게임인 틱택토(TikTacToe) 게임을 배우면서 안에 사용되는 항목들을 익히고자 합니다. ▒ 틱택토(TikTacToe) 게임이란 사실 저는 처음 들어 보았습니다만, 일종의 보드게임이더군요. 상대방과 같이 오목같은 형태의 게임을 하는데 가로줄이든 세로줄이든 대각선이든 연속으로 같은 문양을 만들면 됩니다. (누구는 3목이라고 합니다만) 3 by 3 2인 전용 게임이라고 보면 됩니다. 구글에서 ..
-
JavaScript 입문 : 이벤트 버블링 (Event Bubbling) 이해컴퓨터 알아가기/JavaScript 2022. 8. 13. 19:30
이 글은 제로초 TV 자바스크립트 강좌를 기본으로 하고 있습니다. 이벤트 버블링 (Event Bubbling)이라는 개념이 있습니다. 이벤트란 어떤 동작이 발생한다는 의미로 이해를 하면됩니다. 클릭이벤트 등 무의식적으로 사용하고 있구요. 2 by 2 테이블로 간단히 예를 들자면 칸안에서 클릭이벤트 함수를 만들고자 하면 다음과 같이 만들 수 있습니다. 참고로 테이블은 태그의 자식 태그인 태그와 손자 태그인 로 이루어져 있습니다. 테이블 칸에 이벤트가 벌어지는 것은 기본적으로 테이블에서 이루지기 때문에 addEventListener 또한 태그에 반영을 하였습니다. 지난시간 addEvetListener( ) 함수가 사용이 되면 어느시점에 removeEventListener( )를 적용해 줘야함을 공부한 적이 ..
-
JavaScript 입문 : 구조분해할당 (Destructuring Assignment) - 객체컴퓨터 알아가기/JavaScript 2022. 8. 12. 19:30
지난시간에 이어 오늘은 객체의 구조분해할당에 대해 공부를 해 보고자 합니다. ▒ 객체 구조분해할당 (Object Destructuring Assignment) ① 일반적인 형태 배열에서는 순서가 중요 하였습니다. 처음 나오는 변수가 첫번째 배열의 요소를 취하는 형태였습니다. 객체는 기본적으로 순서와 상관없이 속성(Property)을 분해해서 변수에 할당을 하는 개념으로 보면 됩니다. 예를 가지고 이해를 하도록 하겠습니다. 다음은 기존처럼 구조분해를 하지 않고 변수를 만드는 방법이었습니다. 이를 구조분해할당 방식으로 변수에 지정하도록 하겠습니다. ② 새로운 변수명 지정 속성, 성질 등을 나타내는 Property를 분해하는 개념이기 때문에 새로운 변수를 다음과 같이 지정할 수 있습니다. ③ 속성 기준 배열에..
-
JavaScript 입문 : 구조분해할당 (Destructuring Assignment) - 배열컴퓨터 알아가기/JavaScript 2022. 8. 11. 19:30
자바스크립트를 독학해 가면서 공부를 해야될 포인트가 참 많다는 것을 느끼고 있습니다. 천천히 이해하다 보면 언젠가는 알게 되겠죠. 또한 한 언어의 기본구조를 알면 다른 언어 또한 다가서는데 크게 부담이 없을 듯 합니다만.. 오늘은 자바스크립트에서 중요한 문법 중 하나인 구조분해할당에 대해 알고 가고자 합니다. ▒ 배열 구조분해할당 (Array Destructuring Assignment) 말 그대로 구조를 분해해서 할당을 하는 겁니다. 좀 더 자바스크립트 용어를 사용하자면 배열(Array)의 value나 element를 또는 객체(Object)의 Property(속성)을 분해해서 손쉽게 변수에 할당을 하는 개념으로 보면 됩니다. 예를 들면 쉬울 듯 합니다. ① 일반적인 형태 일반적인 다음 배열 구조에서는..
-
JavaScript 입문 : 테이블 그리기컴퓨터 알아가기/JavaScript 2022. 8. 10. 19:30
다음과 같이 3 by 3 테이블을 만들고자 하면 두가지 방법을 사용할 수 있습니다. 첫번째는 다음과 같이 HTML / CSS에서 만들 수 있습니다. 두번째는 이러한 내용을 자바스크립트내에서 3 by 3 표로 만들수 있습니다. 태그에서 작업합니다. ① 테이블 태그에 사용되는 , , 태그를 document 객체를 이용하여 만듭니다. ② 먼저 태그를 반복문을 통하여 만듭니다. ③ 태그를 반복문을 통하여 만듭니다. ④ 활성화된 태그(데이터)를 화면에 반영힙니다. 즉, 3 by 3 테이블은 이중구조이며 이중 반복문으로 보면 됩니다. tr은 한줄, 두줄 하는 rows를 말하고 먼저 그려지는 기준점입니다. 다음과 같이 작업할 수 있습니다. 중요한 점을 정리하자면 태그를 만들어 가는 과정은 부모 >> 자식 태그순이입니..