컴퓨터 알아가기/JavaScript
-
JavaScript 입문 : 카드맞추기 게임 - 버그 수정 2 (셔플되는 동안 클릭방지, 완성된 카드 클릭방지, 동일한 카드 연달아 클릭방지)컴퓨터 알아가기/JavaScript 2022. 10. 9. 19:30
이 글은 제로초 TV 자바스크립트 강좌를 참고하고 있습니다. 카드맞추기 게임 버그수정 2번째입니다. 가능한 많은 버그를 발견하는 것이 완벽한 프로그램을 위한 첫걸음입니다. 버그수정 1탄에서는 마지막 카드가 넘어가지 않았는데 MIssion Clear로 뜨는 원인을 setTimeout( ) 메소드로 1초의 여유를 두어 해결했고 셔플이 되는 동안 클릭을 방지하기 위해서 플래그변수를 활용하여 콘트롤 하였습니다. 버그수정 2만으로 다음 그림과 같이 같은 그림을 찾았으나 클릭을 하면 다시 뒤집어 지고 또 한 카드만 계속 클릭을 하여도 계속 이벤트클릭이 이루어지는 것을 방지해 보겠습니다. 1. 버그 현상 다음 그림에서 녹색으로 짝을 찾았으나 카드를 클릭하면 다시 뒤집어집니다. 아울러 임의의 주황색카드를 계속 클릭하여..
-
JavaScript 입문 : 카드맞추기 게임 - 버그 수정 1 (마지막카드 뒤집히기 전 완료메시지, 셔플되는 동안 클릭금지)컴퓨터 알아가기/JavaScript 2022. 10. 8. 19:30
이 글은 제로초 TV 자바스크립트 강좌를 참고로 공부하고 있습니다. 지난시간까지 카드맞츠기 게임에 대한 기본적인 코딩을 완료 하였습니다. 순서도상에 나와 있는 기본 프로그래밍을 다루어 보면서 흐름에 대한 느낌을 이해할 수 있는 시간이었습니다. 이제부터는 만들어진 게임에 대한 버그가 있는지를 최대한 확인하면서 각걱의 에러를 수정하도록 하겠습니다. 이 과정이야말로 좀 더 코딩에 대한 이해도가 높아질 수 있다고 보여지네요. 1. 마지막 카드가 뒤집히 전 게임 완료 우선 눈에 가장 먼저 띄는 버그는 마지막 카드가 넘겨지기 전에 게임이 미리 끝났다고 alert창이 뜨는 현상입니다. (원인 추축) 이는 마지막 카드가 뒤집히는 시간과 Mission Clear가 나오는 시간이 거의 동시에 이루어지기 때문으로 추측이 됩..
-
JavaScript 입문 : 플래그 변수 (Flag Variables) 복습컴퓨터 알아가기/JavaScript 2022. 10. 7. 19:30
자바스크립트에서 플래그 변수를 사용하는 경우가 있는데 개념에 대해 좀 더 공부를 하고 넘어 가도록 하겠습니다. 과거 틱택토( TicTacToe) 게임에서 사용이 되었고 지금 공부하고 있는 카드맞추기 게임에서도 반드시 필요한 기능입니다. 여러 자료를 찾아보면 어렵게 설명한 내용이 많아서 완전초보인 입장에서는 더 헷갈리기도 합니다. 가능한 완전 초보 개념에서 정리를 해 보고자 합니다. 1. 플래그 변수 (Flag Variables)란 블린(Boolean)값을 이용하여 프로그램의 흐름을 제어할 수 있습니다. 플래그 변수는 for 반목문 등에서 코드가 반복되면서 시간이 지체되거나 코드 자체가 무거워지는 것을 방지할 수 있습니다. 아울러, 원하는 결과 도출을 위해 플래그를 지정하는 방법을 사용합니다. 무슨말이냐 ..
-
JavaScript 입문 : 카드맞추기 게임 - 카드뒤집기(setTimeout( )이용), 클릭이벤트 (onclickCard 함수) 만들기 (2)컴퓨터 알아가기/JavaScript 2022. 10. 6. 19:30
지난시간 이어서 카드 짝 맞추기에 대한 본격적인 코드를 공부해 보도록 하겠습니다. 참고로 본 글은 제로초 TV 자바스크립트 강좌를 참고로 하고 있습니다. 다시 순서도를 보겠습니다. 순서도 상 다음 주황색 영역을 만들어 보고자 합니다. 1. 카드 짝 맞추기 이제부터는 본격적으로 뒤집힌 카드가 2장인지 여부와 2장이 색이 다르면 다시 카드앞면으로 돌아가고 같은 색이면 완료배열에 넣고 return하는 프로그램을 만들도록 하겠습니다. 아래 코드는 onclickCard( ) 함수내에서 이루어지는 코드입니다. ① 카드가 2장인가 보통 코드의 기본을 만들때 반대로 하더군요. 즉, 카드가 2장인가의 코드는 카드가 2장이 아니면으로 하는게 풀어가는게 쉽습니다. ② 같은색인가 clicked에 넣은 색상이 첫번째 카드와 두..
-
JavaScript 입문 : 카드맞추기 게임 - 카드뒤집기(setTimeout( )이용), 클릭이벤트 (onclickCard 함수) 만들기 (1)컴퓨터 알아가기/JavaScript 2022. 10. 5. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 공부하고 있습니다. 이제부터는 일정시간을 두고 카드를 뒤집는 자바스크립트를 만들어 볼 예정이고 에러없이 작동한다면 각각 카드를 클릭할 수 있는 클릭이벤트 기능을 넣을 차례입니다. 1. 카드 뒷면 보여주기 일정 시간 동안 카드의 뒷면을 보여주는 script를 작성합니다. 한꺼번에 뒤집을 수 있지만 시각적 효과를 위해서 1초후 첫 카드가 뒤집히면서 이후 0.1초 간격으로 전체 12장의 카드를 뒤집도록 하겠습니다. 시간이 들어간다는 이야기는 setTimeout( ) 함수를 활용합니다. startGame( ) 함수내에 작성해야 되겠죠. 4개의 태그 중 전체 프레임을 나타내는 container 클래스명을 기준으로 움직이며 지난시간 공부했던 add( ) 메소드를 ..
-
JavaScript 입문 : 객체를 가리키는 this - 확실하게 개념 익히기 (3) : 화살표 함수 및 Strict Mode컴퓨터 알아가기/JavaScript 2022. 10. 4. 19:30
이제 this의 개념이 어느정도 잡혀 가는 느낌입니다. 만일 this라는 개념이 헷갈리거나 하면 반드시 확실하게 개념익히기 1탄과 2탄을 꼭 읽어보시기 바랍니다. this라는 개념의 범위가 넓겠지만 1탄과 2탄이 전부이고요. 금일 정리할 사항은 중요하지만 잘 모르는 경우 잘 사용안해도 될 것 같습니다. 자바스크립트 처음 공부할 때 함수사용에 있어 function( ) { }나 ( ) => { }함수는 같게 사용한다고 일단 머리속에 넣오 놓았습니다만 사실 약간의 차이가 있다고 했는데 그 중 하나가 this를 활용할 때 일반함수식과 화살표 함수식에서 차이를 볼 수 있습니다. 2탄에서 사용한 예제를 가지고 보겠습니다. 1. 화살표 함수에서의 this 다음 코드를 보면 첫번째 콘솔은 fruit 객체를 나타내고 ..
-
JavaScript 입문 : 객체를 가리키는 this - 확실하게 개념 익히기 (2)컴퓨터 알아가기/JavaScript 2022. 10. 3. 19:30
현재까지 이해한 this를 다시한번 3가지 정리를 해 보겠습니다. ① this는 객체를 가리키는 지시대명사이고 키워드이다. ② this는 그래서 호출한 키워드이고 호출이 없으면 전체를 나타내는 window를 지칭한다. 쉽게 보면 window는 브라우저 자체를 가리킨다 보면 됩니다. ③ 대부분의 this값은 함수를 호출한 방법에 의해 결정된다. 상기 3가지를 이전시간 실습을 통하여 확인할 수 있었습니다. 좀 더 this에 대해 알고 가보자 합니다. 역시 this의 정의공부는 짐코딩 강의를 통하여 참조하고 있습니다. 1. 클릭이벤트를 통한 this 확인 클릭이벤트를 확인하기 위해서 HTML상 태그를 만들고 를 다음과 같이 작성해 보겠습니다. addEventListener( )메소드를 통한 this는 무엇을 ..
-
JavaScript 입문 : 객체를 가리키는 this - 확실하게 개념익히기 (1)컴퓨터 알아가기/JavaScript 2022. 10. 2. 19:30
코드를 따라하면 이해가 되기도 하는데 또 곰곰히 생각해 보면 도대체 자바스크립트상에서 this가 무엇일까하는 의문이 종종 듭니다. 이는 this를 이해하지 못했기 때문이라고 생각이 드네요. 2022년 자바스크립트를 공부하면서 과거에 사용되었던 변수 앞 지정하는 'var'도 이제는 사용안한다고 하고 대신 새롭게 this라는 지정대명사(?)가 생겨나서 이 내용을 반드시 이해하고 넘어가야 마음이 편할 것 같습니다. 최대한 이해해 볼려고 노력하고 잊지 않도록 여기에 기록을 해 보고자 합니다. 이전 발행글에도 사실 this를 다루었지만 뭔가 완벽하지 않다라는 느낌이 들어 다시 정리해 보는 개념이겠지요. 2022.09.02 - [컴퓨터 알아가기/JavaScript] - JavaSCript 입문 : 자바스크립트에서 ..