분류 전체보기
-
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를 작성하고..
-
JavaScript 입문 : 카드맞추기 게임 - 순서도컴퓨터 알아가기/JavaScript 2022. 9. 27. 19:30
이 글은 제로초TV 자바스크립트 강좌를 기본으로 공부하고 있습니다. 자바스크립트를 이용하여 뒤집혀진 카드의 짝을 찾는 '카드맞추기' 게임을 만들어 보고자 합니다. 다음과 같은 결과물을 예상 할 수 있는데요. 첫 화면에 12개의 카드가 엎어져 있고 전체 색을 보여준 후 다시 뒤집어 진 상태에서 같은 색을 맞추는 게임입니다. 강좌에 따르면 자바스크립트의 가장 중요한 요소 중 하나인 '이벤투 루프, Event Loop'에 대해 이해를 해야 완벽한 게임을 만들 수 있다고 합니다. 이론과 원리를 안다면 에러가 나는 상황에서 답답한 마음도 아느정도 해소될 것으로 기대해 봅니다. ▒ 카드맞추기 게임 완성 결과물 첫 화면에는 다음과 같이 12개의 카드가 엎어진 상태로 보입니다. (편의상 카드앞면이라고 하겠습니다. ) ..
-
<HTML/CSS> Animation : 카드 뒤집기컴퓨터 알아가기/HTML CSS 2022. 9. 25. 19:30
CSS Animation 기초는 Rock's Easy Web을 기본으로 공부하고 있습니다. 오늘 배울 내용은 마우스를 올렸을때 카드가 뒤집히는 Animation을 공부하고자 합니다. 이 효과를 공부하기 위해 지금까지 CSS의 Animation 효과의 기본을 여러가지로 공부해 보았습니다. 카드가 뒤집혀지는 효과를 통하여 자바스크립트 카드뒤집기 게임을 만들기 위한 기본과정을 살펴본 겁니다. ▒ 카드 뒤집기 CSS에서 카드를 뒤집는 효과는 그동안 배웠던 Animation 속성중 Transition, Transform, Rotation을 전부 응용하는 작업입니다. 이를 위해서 아무 그림이나 사용할 수 있게 작업하는 폴더에 그림파일을 저장합니다. 저는 첫화면은 다음과 같은 그림을 올리고 마우스를 올리면 뒷면의 글..