dev-hpk 님의 블로그

안녕하세요! 이번 포스팅에서는 JavaScript 키보드 이벤트에 대해 알아보려고 해요. 키보드 이벤트는 사용자가 키보드를 통해 입력하거나 조작할 때 발생하는 이벤트를 의미해요. 우리가 로그인할 때 비밀번호를 입력하거나, 어떤 텍스트 필드를 작성할 때 모두 키보드 이벤트가 발생하는 거죠! 그럼 JavaScript에서 키보드 이벤트를 어떻게 다루는지 알아보겠습니다.   JavaScript 키보드 이벤트  키보드 이벤트  1. 자주 쓰는 키보드 이벤트 2. 키보드 이벤트 속성 3. 실전 코딩해보기마무리추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 자주 쓰는 키보드 이벤트keydownkeydown 이벤트는 사용자가 키보드의 키를 눌렀을 때 발생하는 이벤트입니다. 키를 눌렀을 때 바로 이벤트가 발생하..

안녕하세요! 이번 포스팅에서는 웹 개발에서 정말 자주 쓰이는 JavaScript 마우스 이벤트에 대해 알아볼게요. 우리가 웹 페이지에서 마우스를 클릭하거나 움직일 때, 다양한 이벤트가 발생하는데요, 이 이벤트들을 잘 활용하면 훨씬 더 인터랙티브한 웹 페이지를 만들 수 있어요. 그럼 이제 하나씩 쉽게 설명해 드릴게요!   JavaScript 마우스 이벤트  javaScript 마우스 이벤트  1. 자주 쓰이는 마우스 이벤트 2. 이벤트 객체 3. 실전 코딩 해보기 4. 마무리추천글  자주 쓰이는 마우스 이벤트clickclick 이벤트는 대상을 클릭했을 때 발생하는 이벤트입니다.document.querySelector('.element').addEventListener('click', function() {..

자바스크립트에서 버블링과 캡처링 개념은 초보 개발자들 이벤트를 이해하는데 어려움을 겪는 주요 원인입니다. 이 글에서는 자바스크립트의 버블링과 캡처링의 개념을 소개하고 추가적으로 이벤트 위임에 대해서 설명 드리겠습니다. 버블링 & 캡처링 이벤트 버블링과 캡처링  1. 버블링 2. 캡처링 3. 이벤트 위임추천글 버블링버블링의 원리는 간단합니다. 이벤트가 발생한 요소부터 점점 상위 요소로 거슬러 올라가 window까지 이벤트를 전파하는 것입니다. 거품(Bubble)이 물 아래에서부터 위로 올라가는 것 같다고 해서  버블링이라는 이름이 붙었다고 합니다.  See the Pen Untitled by sumin (@hp2580) on CodePen." data-ke-type="html">HTML 삽입미리보기..

HTML 속성 다루기element.hasAttribute('속성'): 속성이 존재하는지 확인합니다.element.getAttribute('속성'): 속성값을 반환합니다. 속성값이 없다면 null을 반환합니다.element.setAttribute('속성', '값'): 속성을 추가합니다. 속성이 존재한다면 기존 값을 새로 추가하는 값으로 수정합니다.element.removeAttribute('속성'): 속성을 삭제합니다.HTML 비표준 속성 다루기비표준 속성을 다룰 때는 dataset 프로퍼티( data-* 속성)을 사용합니다.dataset testconst content = document.querySelector('.content');console.log(content.dataset.status) // ..

노드 탐색자바스크립트를 이용하면 요소 노드를 취득한 다음, 취득한 요소 노드를 기점으로 DOM 트리의 노드를 옮겨 다니며, 부모, 형제, 자식 노드 등을 탐색할 수 있습니다. 자식 노드(child node, children)는 바로 아래의 자식 요소를 나타냅니다. 자식 노드는 부모 노드의 바로 아래에서 중첩 관계를 만듭니다. 와 는 요소의 자식 노드입니다.후손 노드(descendants)는 중첩 관계에 있는 모든 요소를 의미합니다. 자식 노드, 자식 노드의 모든 자식 노드 등이 후손 노드가 됩니다.자식 노드 탐색자식 노드를 탐색하기 위해서 다음과 같은 프로퍼티들을 사용합니다.element.children: element의 자식 요소 모음(HTMLCollection)을 반환합니다. 자식 요소 모음은 텍스트..

웹 브라우저의 구조Window 객체 window 객체는 루트 객체로 최상단에 위치하며 브라우저 창을 대변합니다. window 객체는 다음과 같은 기능을 합니다.자바스크립트 코드의 전역 객체로 자바스크립트 코드 어디서나 접근이 가능합니다.브러우저 창을 대변하고, 이를 제어할 수 있는 기능을 제공합니다.(프로퍼티나 메소드 모두 전역 객체 내부의 것이기 때문에 window.을 생략 할 수 있습니다.) DOM 트리구조DOM은 노드 객체의 계층적인 구조로 구성되는데 이러한 계층 구조를 나무에 비유해 DOM 트리라고 합니다. DOM (Document Object Model)DOM은 한국어로 문서 객체 모델로 웹 페이지 내의 모든 콘텐츠를 객체로 표현한 것입니다. 각 객체를 노드(Node)라는 용어로 표현하고, 태그..

JavaScript란? JavaScript는 “HTML과 CSS로 구성된 웹 페이지를 동적으로 만들어주는 스크립트 언어” 다. 현재는 웹 브라우저에서만 동작하는 반쪽짜리 프로그래밍 언어가 아닌, 프론트엔드 영역은 물론 백엔드 영역까지 아우르는 웹 프로그래밍 언어의 표준으로 자리를 잡고 있다.JavaScript로 브라우저에서 가능한 동작페이지에 새로운 HTML을 추가하거나 기존 HTML, 혹은 스타일 수정하기마우스 클릭이나 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동에 반응하기네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운로드, 업로드하기(AJAX나 COMET과 같은 기술 사용)쿠키를 가져오거나 설정하기사용자에게 질문을 건네거나 메시지 보여주기 클라이언트 측에 데이터 저장하기(로컬 스..