본문 바로가기

전체 글1017

자바스크립트 키보드 이벤트 사용법 자바스크립트에서는 키보드 이벤트를 다룰 수 있습니다. 키보드 이벤트는 사용자가 키보드에서 키를 눌렀거나 떼는 등의 동작을 했을 때 발생합니다. 키보드 이벤트는 keydown, keyup, keypress 이벤트로 나뉘며, 각 이벤트는 다음과 같은 시점에서 발생합니다. 사용법 keydown: 사용자가 키를 누를 때 발생합니다. keyup: 사용자가 키를 뗄 때 발생합니다. keypress: 사용자가 키를 누르고 떼는 동작이 완료될 때 발생합니다. 이벤트 발생 시, 해당 이벤트에 대한 정보를 담고 있는 이벤트 객체(event object)가 생성됩니다. 이벤트 객체를 사용하여 사용자가 입력한 키의 정보를 얻거나, 이벤트 발생 시 추가적으로 수행해야 할 작업을 처리할 수 있습니다. keydown 이벤트에서는 .. 2023. 4. 15.
자바스크립트 계층 이동하는 방법 웹 페이지에서 DOM을 다룰 때, 때로는 요소의 위치를 이동해야하는 경우가 있습니다. 이를 위해 자바스크립트에서는 계층 이동(hierarchy traversal) 메서드를 제공합니다. 이들 메서드는 요소를 찾거나, 요소의 위치를 변경하거나, 그 하위 요소들을 다루는 데 사용됩니다. 사용법 다음은 계층 이동 메서드들입니다. parentNode 부모 요소를 선택합니다. 예시: element.parentNode parentElement parentNode와 같지만, 요소노드만 선택합니다. 예시: element.parentElement childNodes 모든 자식 요소를 선택합니다. 예시: element.childNodes children 자식 요소노드만 선택합니다. 예시: element.children fi.. 2023. 4. 14.
자바스크립트 classList JavaScript의 classList는 DOM 요소의 클래스를 조작하는 데 사용되는 속성입니다. 이 속성을 사용하면 요소에 대한 클래스 이름을 추가, 제거, 교체, 토글 할 수 있습니다. 사용법 classList에는 add(), remove(), toggle(), contains(), replace() 등의 다양한 메소드가 있습니다. add(className): 클래스 이름을 추가합니다. remove(className): 클래스 이름을 제거합니다. toggle(className): 클래스 이름이 요소에 있는 경우 제거하고 없는 경우 추가합니다. contains(className): 클래스 이름이 요소에 있는지 확인합니다. replace(oldClassName, newClassName): 클래스 이름을 .. 2023. 4. 14.
자바스크립트 이벤트 핸들러 this JavaScript에서 이벤트가 발생하면, 이벤트 핸들러 함수 내부에서 this 키워드를 사용할 수 있습니다. this는 이벤트가 발생한 HTML 요소(element)를 가리킵니다. this를 이용하면, 이벤트 핸들러 함수 내에서 이벤트가 발생한 요소의 속성을 변경하거나, 다른 요소와 상호작용하는 등 다양한 작업을 수행할 수 있습니다. 사용법 예를 들어, 아래 코드는 버튼이 클릭될 때마다 해당 버튼의 텍스트를 변경하는 예시입니다. Click me Click me too 위 코드에서, querySelectorAll() 함수를 사용하여 버튼 요소를 선택하고, forEach() 함수를 사용하여 각 버튼에 이벤트 리스너를 등록합니다. 그리고 이벤트 핸들러 함수 내에서 this를 사용하여 해당 버튼의 textCo.. 2023. 4. 14.
자바스크립트 addEventListener addEventListener는 자바스크립트에서 이벤트를 처리하는 메소드 중 하나로, 지정된 이벤트에 대한 이벤트 핸들러를 등록하는 역할을 합니다. 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수를 의미합니다. 사용법 이 메소드는 다음과 같은 구조를 가집니다. element.addEventListener(event, function, useCapture); element: 이벤트를 등록할 HTML 요소입니다. event: 등록할 이벤트의 종류를 문자열로 지정합니다. function: 이벤트 핸들러로 등록할 함수입니다. useCapture: 이벤트 버블링과 관련된 옵션입니다. 기본값은 false입니다. 예를 들어, 버튼을 클릭했을 때 콘솔에 로그를 출력하는 이벤트 핸들러를 등록하고 싶다면 다음과 같이 .. 2023. 4. 14.
자바스크립트 onclick onclick은 자바스크립트에서 가장 많이 사용되는 이벤트 중 하나입니다. 이벤트는 특정 동작이나 상황이 발생했을 때 자동으로 실행되는 코드를 말합니다. onclick은 HTML 요소가 클릭되었을 때 실행되는 이벤트입니다. 사용법 onclick 이벤트를 사용하기 위해서는 HTML 요소에 onclick 속성을 추가하고, 그 값으로 실행하고자 하는 코드를 입력해야 합니다. 아래는 예시 코드입니다. 클릭하세요 위 코드는 "클릭하세요"라는 문구가 적힌 버튼을 클릭하면 "Hello World!"라는 경고창이 뜨도록 설정한 것입니다. 하지만 위와 같은 방식은 코드가 길어지고 복잡해지면 유지보수하기 어려워질 수 있습니다. 대신 자바스크립트 파일에서 onclick 이벤트를 정의하는 것이 좋습니다. 클릭하세요 const.. 2023. 4. 14.
리눅스 find 명령어 사용법 리눅스에서 find 명령어는 파일 시스템에서 파일이나 디렉토리를 검색하는데 사용됩니다. 이 명령어는 사용자가 지정한 디렉토리와 하위 디렉토리의 모든 파일 및 디렉토리를 검색하며, 조건에 맞는 파일 또는 디렉토리의 경로를 출력합니다. 사용법 사용법: find [경로] [조건] 경로: 검색할 디렉토리 또는 파일의 경로를 지정합니다. 기본값은 현재 디렉토리입니다. 조건: 검색 조건을 지정합니다. 옵션 -name: 파일 이름으로 검색합니다. -type: 파일 타입으로 검색합니다. f는 일반 파일, d는 디렉토리를 의미합니다. -mtime: 수정된 시간으로 검색합니다. +n은 n일 전 이전에 수정된 파일, -n은 n일 이내에 수정된 파일을 의미합니다. -size: 파일 크기로 검색합니다. +n은 n바이트보다 큰 .. 2023. 4. 13.
자바스크립트 remove vs removeChild 차이점 JavaScript에서 remove()와 removeChild() 메소드는 DOM(Document Object Model)에서 요소를 제거하는 데 사용됩니다. 그러나 두 메소드는 약간의 차이가 있습니다. removeChild() removeChild() 메소드는 지정된 부모 요소의 자식 요소 중 하나를 제거합니다. 예를 들어, 다음과 같이 body 요소의 첫 번째 자식 요소를 제거할 수 있습니다. var parent = document.getElementsByTagName("body")[0]; var child = parent.childNodes[0]; parent.removeChild(child); removeChild() 메소드는 반드시 지정된 부모 요소의 자식 요소 중 하나를 제거해야 합니다. 즉,.. 2023. 4. 13.

티스토리툴바