본문 바로가기

JavaScript

[Javascript] 초간단 메모리 카드 게임 만들기

Javascript 2023. 1. 28. [Javascript] 초간단 메모리 카드 게임 만들기 최소한의 코드로 카드를 뒤집어서 맞는 짝을 찾는 메모리 카드 게임을 만듭니다. 자바스크립트 코드 100줄 이내로 구현하는 간단한 게임 구현으로 랜덤으로 카드 셔플을 해서 배치를 하고, 짝을 맞추는 방식을 알 수 있습니다. 카드 숫자 배열을 랜덤으로 섞는 방법에 대한 자세한 내용은 다음 글을 참고하면 도움이 됩니다. > [Javascript] 배열을 이용한 카드 섞기(Card Shuffle) 구현 알고리즘 기초 0. 완성 코드 다운로드 완성 코드를 보면서 글 내용을 보면 이해가 조금 더 쉽습니다. 2023-01-28 - 3D 카드 플립 효과 개선 1. 카드 매칭 상태 이해하기 카드 게임은 뒷면이 보이는 카드들에서 임의의 두 장을 클릭해서 숫자가 맞는지를 맞추는 게임입니다. 카드는 뒷면이 보이고 있고, 클릭..

[Javascript] 화면 갱신을 하거나 웹페이지를 벗어나려고 할 때 알림창을 표시하는 방법 - beforeunload 이벤트 핸들링

Javascript 2022. 11. 17. [Javascript] 화면 갱신을 하거나 웹페이지를 벗어나려고 할 때 알림창을 표시하는 방법 - beforeunload 이벤트 핸들링 자바스크립트의 "beforeunload" 이벤트를 이용하면 방문자가 화면 갱신을 하려고 하거나 현재 페이지에서 벗어나려고 할 때 저장되지 않은 데이터가 있는지 확인하는 알림을 표시할 수 있습니다. 회원 가입 폼을 작성 중이었거나, 장바구니에서 결제를 하던 도중 벗어날 때, 화면 갱신, 또는 페이지를 벗어날 것인지 확인하는 알림 창을 표시해서 실수로 작성 중이던 데이터를 잃어버리는 일이 없도록 방지할 수 있습니다. beforeunload 알림창 표시 이 이벤트는 페이지가 정상적으로 닫히는 상태, 즉 사용자 액션에 의해서 다른 페이지로 이동하거나 윈도우가 닫히는 상태에서만 정상 호출되어 실행됩니다. 웹 브라우저 창을 작업 관리자에서 강제 종료하거나, 모바일 기기의 경우 다른 앱으로 이동한 후 앱 관리자에서 ..

[Javascript] 소수점 반올림, 그리고 부동소수점 보정 - Math.round(1.005 * 100)/100 == 1.01 은 true 인가?

Javascript 2022. 11. 15. [Javascript] 소수점 반올림, 그리고 부동소수점 보정 - Math.round(1.005 * 100)/100 == 1.01 은 true 인가? 부동소수점의 이해 자바스크립트에서 다음 계산 결과는 얼마일까요? 0.2 - 0.3 + 0.1 유사한 결과를 표시하는 계산식이 많이 있지만 의도하는 결과는 동일합니다. 답부터 말하면 다음과 같습니다. 2.7755575615628914e-17 지수로 표현되어 있어서 숫자가 커보이지만 아주 아주 작은 숫자, 정확하게는 아주 작은(0에 가까운) 부동소수점 숫자입니다. 우리의 상식으로는 0이어야 하지만 0이 아닙니다. 왜 0이 아닌가에 대한 의문이 생겼다면, 컴퓨터가 표현하는 2진수 부동소수점 숫자에 대한 이해가 없기 때문입니다. 앞의 계산식을 순서를 바꿔서 계산을 하면 어떻게 될까? 0.2 + 0.1 - 0.3 우리의 상식은 0이거나, 또는 0이 아니라면 앞의 계산식 결과와 같아야 하지만 실제 계산 결과는 다음..

[Javascript] HTML 내용의 글자 수 카운팅과 글자 수 자르기

Javascript 2022. 11. 11. [Javascript] HTML 내용의 글자 수 카운팅과 글자 수 자르기 폼 입력 필드인 , 에 입력하는 실시간 글자 수 확인 및 글자 수 입력 제한을 하는 이벤트 처리는 다음 글을 참고하시기 바랍니다. > 입력 필드 글자수 카운팅과 입력 길이 제한 폼 입력 필드는 입력된 글자 수를 알기가 쉽습니다. 다음과 같이 쿼리 선택자로 해당 입력 요소의 문자열 값을 얻어서 문자열 길이 속성(length)으로 손쉽게 길이 정보를 얻을 수 있습니다. document.querySelector('textarea[name=comment]').value.length 폼 입력 필드에는 입력하는 모든 문자가 개별 문자로 처리되기 때문에 문자 수 카운팅이 비교적 쉽지만, HTML 요소 안에 있는 내용의 글자 수 카운팅은 조금 다릅니다. 다음과 같은 태그 안의 글자 수는 몇 자가 될까요? 코멘트 추가 ..

[Javascript] innerHTML, innerText, textContent 의 차이

Javascript 2022. 11. 10. [Javascript] innerHTML, innerText, textContent 의 차이 자바스크립트로 HTML 문서 안의 내용을 가져오거나 적용할 수 있는 속성은 3가지가 있습니다. 어떤 것은 자주 사용하기 때문에 비교적 잘 알지만, 어떤 것은 또 전혀 잘못 알고 있는 것들도 있습니다. 원하는 데이터를 가져오려면 가져오는 데이터에 어떤 차이가 있는지 분명히 구분할 수 있어야 합니다. 조금 극단적인 다음 HTML 내용을 기준으로 각각의 속성이 어떤 데이터를 가져오는지 확인해보겠습니다. 코멘트 작성 * 100자를 초과할 수 없습니다. 코멘트 입력 innerHTML 태그를 포함한 모든 HTML 내용을 가져옵니다. 자바스크립트로 HTML 페이지를 동적으로 생성할 때 간편하게 내용을 추가할 수 있기 때문에 많이 사용하는 속성입니다. 태그 전체 내용을 가져와서 콘솔에 출력하면 다음과 같이 출력됩니다...

event.keyCode 코드표

Javascript 2018. 9. 9. event.keyCode 코드표 작업할 때마다 찾아보기 귀찮은 자바스크립트 코드 리스트입니다. 구글 검색하면 다 나오지만, 매번 찾으러 가기 귀찮으므로... 티스토리 반응형 UI 작업을 하게 되면 13(엔터키), 27(Esc) 키값 정도는 외워두면 좋습니다. KeyCodeKeyCodeKeyCode 백스페이스(←)8e69숫자패드 8104 탭(TAB)9f70숫자패드 9105 엔터(Enter)13g71숫자패드곱하기(*)106 쉬프트(SHIFT)16h72숫자패드더하기(+)107 컨트롤(CTRL)17i73숫자패드빼기(-)109 알트(ALT)18j74숫자패드소수점(.)110 Pause/Break19k75숫자패드나누기(/)111 대소문자(CapsLock)20l76F1112 ESC27m77F2113 Page Up33n78F3114 Page Down3..

이전 1 다음

❌ 닫기

티스토리툴바