컴퓨터 알아가기
-
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 입문 : 자바스크립트에서 ..
-
JavaScript 입문 : addEventListener를 통한 이벤트 객체에 대한 이해컴퓨터 알아가기/JavaScript 2022. 10. 1. 19:30
자바스크립트를 공부하면서 많은 내용들이 머리속에 맴돌다 나가는 경우가 허다합니다. 이런경우는 다시 보면 이해가 되기도 합니다만 초보인 저로서는 지금 이순간 잘 이해가 안가는 두가지 내용이 있는데 하나는 이벤트타겟이라는 개념과 this라는 개념입니다. 해서 가능한 다른 자료를 찾아보고 이해를 하고자 하고 노력을 합니다만 지속적으로 상황에 따라 필요자료가 있으면 업데이트를 하면서 이해해 보도록 노력할 예정입니다. ▒ 이벤트 객체에 대한 이해 이벤트 객체에 대한 내용은 한번 정리를 한 적이 있습니다. 관련된 내용과 같이 보는게 좋을 듯 합니다 2022.07.12 - [컴퓨터 알아가기/JavaScript] - JavaScript 입문 : 이벤트 타겟 (event.target) 요소, textContent 사용 ..
-
JavaScript 입문 : Add( ), Remove( ), Toggle( ) 메소드컴퓨터 알아가기/JavaScript 2022. 9. 30. 19:30
자바스크립트를 사용하다보면 클래스명을 이용하여 어떤 기능을 활성화 시키거나 비활성화 시키는 메소드가 필요할 때가 있습니다. 이럴때 자주 사용하는 3종 세트 add( ), remove( ), toggle( )의 3종류가 있습니다. 각각의 기능을 확인해 보도록 하겠습니다. 기본적인 형태를 다음과 같이 만들어 놓고 3종세트의 역할을 보도록 하겠습니다. 상기 코드를 보면 HTML에는 3개의 태그를 만들어 놓았구요 각각 클래스명을 만들어 놓았습니다. 아울러 태그는 각각 색이 다른 사각형을 만들어 다음과 같이 브라우자상 나타나게 하였습니다.
-
JavaScript 입문 : 카드맞추기 게임 - 카드 기본데이터, 카드 생성, 카드 섞기, 카드맞추기 게임 시작 함수컴퓨터 알아가기/JavaScript 2022. 9. 29. 19:30
이 글은 제로초TV 자바스크립트 강좌를 기본으로 공부하고 있습니다. 지난시간까지 카드맞추기 게임 순서도와 카드가 뒤집히는 애니메이션인 CSS를 다뤄 봤습니다. 지금부터는 순수하게 자바스크립트만을 이용하여 카드맞추기 게임을 만들어 가도록 하겠습니다. 1. 카드 구성요소 만들기 카드 구성요소로는 전체 카드갯수와 색상이 들어간 배열이 필요합니다. 아울러 짝을 맞추는 게임이니 같은 색을 두번 사용해야 합니다. 여기서는 concat( ) 함수를 이용해 봅니다. 이제는 내가 쓰는 코드가 에러가 있는지 미리 확인하는 습관도 중요합니다. 강좌등을 보면 코드에 console.log( ) 메소드를 이용하라는 지침이 많은데 직접 코드에 쓰는 것 보다 콘솔에 타이핑해보면 쉽니다. 위 구성요소가 잘 되었는지는 다음과 같이 콘솔..
-
JavaScript 입문 : 카드맞추기 게임 - 기본프레임 잡기 (카드뒤집기 애니메이션 CSS 포함)컴퓨터 알아가기/JavaScript 2022. 9. 28. 19:30
이 글은 제로초 TV 자바스크립트 강좌를 기본으로 공부하고 있습니다. 지난시간 순서도 기본이 완성이 되었으니 본격젹으로 카드맞추기 게임에 대한 코딩을 시작하도록 합니다. 1. HTML CSS JS 기본 형태만들기 이번 시간에는 HTML 파일 한곳에 CSS와 자바스크립트 코드인 script 태그를 같이 써 보도록 하겠습니다. 상기 코드를 보면 CSS코드는 태그에 기입하고 자바스크립트 코드는 태그에 기입할 예정입니다. 태그는 하나만 만들었으며 향후 이 곳에 카드 12장을 자바스크립트를 통하여 반영할 예정입니다. 2. 카드 애니메이션 CSS 자바스크립트 코드만으로 카드를 뒤집는 애니메이션은 만들기 상당히 어렵다고 합니다. 전문가들조차 그런 말을 하니 저로서는 엄두도 내기 싫네요 ㅎ. 이제부터 CSS를 작성하고..