자바스크립트 "Keyboard API"
JavaScript Keyboard API는 웹 개발자가 키보드 이벤트 및 사용자 입력과 상호 작용할 수 있는 방법을 제공합니다. 이를 통해 개발자는 키보드 이벤트를 수신하고, 어떤 키가 눌렸는지 감지하고, 키 누름에 따라 특정 코드를 실행할 수 있습니다. 이러한 방식으로 Keyboard API를 사용하여 대화형 반응형 웹 애플리케이션을 만들 수 있습니다.
다음은 JavaScript Keyboard API를 사용하는 방법에 대한 몇 가지 예입니다.
1. 키 누름 감지
document.addEventListener('keydown', function(event) {
console.log('Key pressed: ' + event.key);
});
이 예제에서는 'keydown' 이벤트를 수신하는 문서 객체에 이벤트 리스너를 추가합니다. 키를 누르면 이벤트 객체가 매개변수로 함수에 전달되며, 어떤 키가 눌렸는지 확인하기 위해 'key' 속성에 액세스하는 데 사용됩니다.
2. 기본 조치 방지
document.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
event.preventDefault();
}
});
이 예제에서는 'keydown' 이벤트를 수신하는 문서 객체에 이벤트 리스너를 추가합니다. 'Enter' 키를 누르면 'preventDefault()' 메서드를 사용하여 기본 작업(이 경우 양식 제출)이 발생하지 않도록 합니다.
3. CSS 스타일 수정
document.addEventListener('keydown', function(event) {
if (event.key === 'ArrowUp') {
document.querySelector('body').style.backgroundColor = 'red';
} else if (event.key === 'ArrowDown') {
document.querySelector('body').style.backgroundColor = 'blue';
}
});
이 예제에서는 'keydown' 이벤트를 수신하는 문서 객체에 이벤트 리스너를 추가합니다. '위쪽 화살표' 키를 누르면 본문 요소의 배경색을 빨간색으로 수정하고 '아래쪽 화살표' 키를 누르면 배경색을 파란색으로 수정합니다.
4. 키 코드 사용
document.addEventListener('keydown', function(event) {
if (event.keyCode === 32) {
console.log('Space bar pressed');
}
});
이 예제에서는 'keydown' 이벤트를 수신하는 문서 객체에 이벤트 리스너를 추가합니다. 스페이스바(키 코드 32)를 누르면 메시지가 콘솔에 기록됩니다.
전반적으로 JavaScript Keyboard API는 웹 개발자가 반응형 및 대화형 웹 응용 프로그램을 만들 수 있는 강력한 도구입니다.