728x90 반응형 프로그래밍/[javascript] 자바스크립트51 [JavaScript] 자바스크립트 class로 값 가져오기 자바스크립트 class로 값 가져오기class는 여러 요소에 동일하게 적용될 수 있습니다. 이를 통해 여러 요소를 한꺼번에 선택하고 처리할 수 있습니다. 사용 예제 Get All Valuesdocument.getElementsByClassName('className'): 지정된 클래스 이름을 가진 모든 요소 선택(HTMLCollection 반환).elements[i]: HTMLCollection에서 특정 요소에 접근..value: 각 요소의 값을 가져옴. 관련글[JavaScript] 자바스크립트 id로 값 가져오기[JavaScript] 키보드 이벤트 총정리 (keypress, keyup, keydown)[JavaScript] 자바스크립트 페이지 로드 이벤트 총정리 2024. 12. 10. [JavaScript] 자바스크립트 id로 값 가져오기 자바스크립트 ID로 값 가져오기id는 고유한 값을 가지므로, 특정 요소를 정확하게 선택할 수 있습니다. 사용 예제 Get Valuedocument.getElementById('id'): id 속성으로 요소 선택..value: 입력 필드의 값을 가져오거나 설정. 관련글[JavaScript] 키보드 이벤트 총정리 (keypress, keyup, keydown)[JavaScript] 자바스크립트 페이지 로드 이벤트 총정리[JavaScript] 텍스트 복사 예제 소스 2024. 12. 10. [JavaScript] 키보드 이벤트 총정리 (keypress, keyup, keydown) 목 차1. 자바스크립트 키보드 이벤트란?2. 키보드 이벤트 유형2-1. keydown2-2. keypress2-3. keyup3. 기본 키보드 이벤트 속성3-1. key3-2. code3-3. keyCode3-4. altKey3-5. ctrlKey3-6. shiftKey3-7. metaKey4. 기본 동작 제어4-1. preventDefault()4-2. stopPropagation()5. 사용 예제5-1. 키 입력 방지5-2. 특정 키 조합 방지 (단축키 구현)5-3. 입력 필드의 실시간 문자 감지5-4. 방향키 감지5-5. Caps Lock 감지5-6. Enter 키로 폼 제출 방지5-7. 백스페이스로 페이지 이동 방지 1. 자바스크립트 키보드 이벤트란?JavaScript의 키보드 이벤트는 사용자가 .. 2024. 12. 7. [JavaScript] 자바스크립트 페이지 로드 이벤트 총정리 목 차1. DOMContentLoaded 이벤트2. load 이벤트3. beforeunload 이벤트4. unload 이벤트5. pageshow 이벤트6. pagehide 이벤트7. error 이벤트8. abort 이벤트 1. DOMContentLoaded 이벤트 설명: HTML 문서의 구조가 모두 로드되고, DOM이 완전히 생성되었을 때 발생합니다. CSS와 스크립트는 아직 로드되지 않았을 수도 있습니다.특징: 페이지의 기본 DOM 요소와 상호작용을 시작하기에 적합한 시점입니다.사용 예제document.addEventListener("DOMContentLoaded", function () { console.log("DOM is fully loaded and parsed"); // DOM 요소.. 2024. 12. 3. [JavaScript] 텍스트 복사 예제 소스 목 차1. 개요2. 주요 코드 설명3. 예제 소스4. 예제 소스 실행 테스트 1. 개요클립보드 API를 사용해서 자바스크립트로 간단하게 텍스트 복사하는 방법에 대해 소개하겠습니다.예제 소스를 사용해서 여기 블로그에도 바로 테스트할 수 있도록 마지막에 구현해 놓도록 하겠습니다. 2. 주요 코드 설명 navigator.clipboard.writeText() : 클립보드 API로 텍스트를 복사합니다. 최신 브라우저에서 지원됩니다. select()와 setSelectionRange() : input 요소의 내용을 선택하는 데 사용되며, 모바일 환경에서도 복사를 지원합니다.참고글 : [JavaScript] select()와 setSelectionRange() 메서드 catch() 블록 : 복사 실패 시 오류를 .. 2024. 11. 29. [JavaScript] html 요소에 focus 주는 방법 목 차1. focus 메서드란?2. 문법3. 주요 특징3-1. 포커스 가능한 요소에만 동작3-2. 자동 스크롤3-3. 유효성 검사와 함께 작동4. 예제4-1. 입력 필드에 포커스 설정4-2. 포커스 자동 설정4-3. preventScroll 사용4-4. tabindex로 포커스 설정5. 주의 사항 1. focus 메서드란?JavaScript의 focus 메서드는 특정 HTML 요소에 프로그래밍적으로 포커스를 설정하는 데 사용됩니다. 일반적으로 입력 필드(예: , 등)나 버튼과 같은 요소에서 활용되며, 사용자 입력이나 접근성을 개선하는 데 유용합니다. 2. 문법element.focus(options); element: 포커스를 설정하려는 HTML 요소.options (선택 사항): 포커스 동작을 제어하.. 2024. 11. 28. 이전 1 2 3 4 5 ··· 9 다음 728x90 반응형