LabEx
로그인무료 가입

웹 페이지에서 키보드 이벤트 처리

JavaScriptBeginner
지금 연습하기

소개

이 랩에서는 참가자들이 사용자 키 입력을 처리하는 대화형 HTML 인터페이스를 생성하여 웹 페이지에서 키보드 이벤트를 처리하는 방법을 배우게 됩니다. 이 랩은 onkeydown 및 onkeyup와 같은 이벤트 핸들러를 구현하여 텍스트 색상을 동적으로 변경하고 실시간 키보드 상호 작용을 시연하는 데 중점을 둡니다. 참가자들은 입력 요소와 스타일링을 갖춘 구조화된 HTML 문서를 설정하는 것으로 시작하여 키보드 이벤트를 캡처하고 응답하기 위해 점진적으로 JavaScript 기능을 추가할 것입니다.

이 랩은 키 누름 감지, 페이지 요소 수정, 이벤트 리스너 (event listeners) 구현과 같은 주요 기술을 다루면서 키보드 이벤트 관리를 이해하는 실습 방식을 제공합니다. 단계별 프로세스를 따르면 학습자는 사용자 키보드 상호 작용을 감지하고 반응할 수 있는 반응형 웹 인터페이스를 생성하는 실질적인 경험을 얻어 웹 개발에서 클라이언트 측 이벤트 처리 (client-side event handling) 에 대한 이해를 높일 수 있습니다.

입력 요소가 있는 HTML 구조 설정

이 단계에서는 키보드 이벤트 처리 랩을 위한 기본 HTML 구조를 생성합니다. 키보드 이벤트를 위한 대상으로 사용될 입력 요소가 있는 HTML 파일을 설정합니다.

WebIDE 를 열고 ~/project 디렉토리에 index.html이라는 새 파일을 만듭니다. 기본 구조와 입력 요소가 있는 간단한 HTML5 문서를 생성하는 것으로 시작합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Keyboard Events Lab</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      .container {
        text-align: center;
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      input {
        padding: 10px;
        font-size: 16px;
        width: 300px;
        margin-bottom: 10px;
      }
      #output {
        margin-top: 10px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Keyboard Events Lab</h1>
      <input type="text" id="keyboardInput" placeholder="Type something here" />
      <div id="output"></div>
    </div>
  </body>
</html>

이 HTML 구조의 주요 구성 요소를 살펴보겠습니다.

  1. 컨테이너 div 를 사용하여 간단하고 중앙 정렬된 레이아웃을 만들었습니다.
  2. ID 가 keyboardInput인 <input> 요소가 주요 상호 작용 지점으로 추가되었습니다.
  3. ID 가 output인 <div>가 이벤트 관련 정보를 표시하기 위해 포함되었습니다.
  4. 시각적 외관과 레이아웃을 개선하기 위해 기본 CSS 가 추가되었습니다.

이 초기 설정은 키보드 이벤트 시연을 위한 깔끔하고 사용자 친화적인 인터페이스를 제공합니다. 다음 단계에서는 이 입력 요소에서 키보드 이벤트를 처리하기 위해 JavaScript 를 추가할 것입니다.

onkeydown 이벤트를 구현하여 텍스트 색상 변경

이 단계에서는 입력 요소에 대한 onkeydown 이벤트 핸들러를 구현하기 위해 JavaScript 를 추가합니다. 이 이벤트는 키를 누르면 텍스트 색상을 변경합니다.

WebIDE 에서 index.html 파일을 열고 닫는 </body> 태그 바로 앞에 <script> 태그를 추가하여 JavaScript 코드를 포함합니다.

<script>
  // Get references to the input element and output div
  const inputElement = document.getElementById("keyboardInput");
  const outputElement = document.getElementById("output");

  // Add onkeydown event listener to change text color
  inputElement.onkeydown = function (event) {
    // Change the input text color to red when a key is pressed
    this.style.color = "red";

    // Display information about the key pressed
    outputElement.textContent = `Key pressed: ${event.key} (KeyCode: ${event.keyCode})`;
  };
</script>

이 코드의 주요 부분을 살펴보겠습니다.

  1. document.getElementById()는 입력 및 출력 요소에 대한 참조를 가져오는 데 사용됩니다.
  2. inputElement.onkeydown은 keydown 이벤트에 대한 이벤트 리스너 (event listener) 를 추가합니다.
  3. 이벤트 핸들러 내부:
    • this.style.color = 'red'는 키를 누르면 텍스트 색상을 빨간색으로 변경합니다.
    • outputElement.textContent는 누른 키에 대한 정보를 표시합니다.

입력 필드에 입력할 때의 예시 출력:

  • 입력하는 동안 텍스트가 빨간색으로 바뀝니다.
  • 출력 div 는 마지막으로 누른 키와 해당 keyCode 를 표시합니다.

이는 onkeydown 이벤트가 어떻게 작동하는지 보여줍니다.

  • 키를 누를 때마다 트리거됩니다.
  • 누른 키와 같은 이벤트 세부 정보에 대한 액세스를 제공합니다.
  • 요소 스타일을 동적으로 조작할 수 있습니다.

onkeyup 이벤트를 구현하여 원래 텍스트 색상 복원

이 단계에서는 키를 놓았을 때 입력 텍스트 색상을 원래 상태로 복원하기 위해 onkeyup 이벤트 핸들러를 추가합니다. index.html 파일의 기존 스크립트를 수정하여 이 기능을 포함시킵니다.

index.html 파일의 <script> 섹션을 다음 코드로 업데이트합니다.

<script>
  // Get references to the input element and output div
  const inputElement = document.getElementById("keyboardInput");
  const outputElement = document.getElementById("output");

  // Add onkeydown event listener to change text color
  inputElement.onkeydown = function (event) {
    // Change the input text color to red when a key is pressed
    this.style.color = "red";

    // Display information about the key pressed
    outputElement.textContent = `Key pressed: ${event.key} (KeyCode: ${event.keyCode})`;
  };

  // Add onkeyup event listener to restore original text color
  inputElement.onkeyup = function (event) {
    // Restore the input text color to black when the key is released
    this.style.color = "black";

    // Update the output with key release information
    outputElement.textContent = `Key released: ${event.key} (KeyCode: ${event.keyCode})`;
  };
</script>

새로운 onkeyup 이벤트 핸들러를 살펴보겠습니다.

  1. inputElement.onkeyup는 keyup 이벤트에 대한 이벤트 리스너를 추가합니다.
  2. 이벤트 핸들러 내부:
    • this.style.color = 'black'은 키를 놓았을 때 텍스트 색상을 검정색으로 복원합니다.
    • outputElement.textContent는 놓은 키에 대한 정보를 표시합니다.

예시 상호 작용:

  • 키를 누르면 텍스트가 빨간색으로 바뀝니다.
  • 키를 놓으면 텍스트가 검정색으로 돌아갑니다.
  • 출력 div 는 키 누름 및 놓음 이벤트에 대한 세부 정보를 모두 표시합니다.

이는 onkeydown 및 onkeyup 이벤트 간의 차이점을 보여줍니다.

  • onkeydown은 키를 누를 때 트리거됩니다.
  • onkeyup는 키를 놓을 때 트리거됩니다.
  • 두 이벤트 모두 키 정보에 대한 액세스를 제공합니다.

Window Onload 이벤트 핸들러 추가

이 단계에서는 전체 웹 페이지 로딩이 완료된 후 JavaScript 코드를 실행하는 방법을 보여주기 위해 window.onload 이벤트 핸들러를 소개합니다. 초기 메시지를 제공하고 일부 기본 스타일을 설정하는 초기화 함수를 추가합니다.

index.html 파일의 <script> 섹션을 다음 코드로 업데이트합니다.

<script>
  // Window onload event handler
  window.onload = function () {
    // Get references to the input element and output div
    const inputElement = document.getElementById("keyboardInput");
    const outputElement = document.getElementById("output");

    // Set initial message when page loads
    outputElement.textContent = "Page loaded! Start typing in the input field.";
    outputElement.style.color = "green";

    // Add onkeydown event listener to change text color
    inputElement.onkeydown = function (event) {
      // Change the input text color to red when a key is pressed
      this.style.color = "red";

      // Display information about the key pressed
      outputElement.textContent = `Key pressed: ${event.key} (KeyCode: ${event.keyCode})`;
      outputElement.style.color = "blue";
    };

    // Add onkeyup event listener to restore original text color
    inputElement.onkeyup = function (event) {
      // Restore the input text color to black when the key is released
      this.style.color = "black";

      // Update the output with key release information
      outputElement.textContent = `Key released: ${event.key} (KeyCode: ${event.keyCode})`;
      outputElement.style.color = "green";
    };
  };
</script>

이 단계의 주요 변경 사항:

  1. 기존 이벤트 핸들러를 window.onload 함수 내부에 래핑했습니다.
  2. 페이지가 로드될 때 초기 메시지를 추가했습니다.
  3. 더 나은 시각적 피드백을 위해 출력 요소에 색상 변경을 도입했습니다.

window.onload 이벤트는 다음을 보장합니다.

  • 모든 페이지 요소가 JavaScript 를 실행하기 전에 완전히 로드됩니다.
  • DOM 이 준비되기 전에 스크립트가 실행될 경우 발생할 수 있는 오류를 방지합니다.
  • 페이지 기능을 초기화하는 안정적인 방법을 제공합니다.

예시 상호 작용:

  • 페이지가 로드되면 녹색 "Page loaded!" 메시지가 표시됩니다.
  • 입력하면 텍스트 색상과 출력 메시지가 변경됩니다.
  • 키를 누르면 파란색 메시지가 표시됩니다.
  • 키를 놓으면 녹색 메시지가 표시됩니다.

키보드 이벤트 상호 작용 테스트 및 검증

이 마지막 단계에서는 랩 전체에서 구현한 키보드 이벤트 상호 작용을 테스트하고 확인합니다. 이벤트 핸들러가 어떻게 작동하는지 보여주고 동작을 이해하기 위해 다양한 시나리오를 탐색합니다.

WebIDE 에서 index.html 파일을 열고 이전 단계의 전체 스크립트가 있는지 확인합니다. 이제 다양한 키보드 상호 작용을 테스트해 보겠습니다.

  1. 페이지 로드 상호 작용

    • 페이지가 로드되면 녹색 메시지 "Page loaded! Start typing in the input field."가 표시됩니다.

  2. 키 누름 상호 작용

    • 입력 필드에 아무 키나 입력합니다.
    • 다음 변경 사항을 확인합니다.
      • 텍스트 색상이 빨간색으로 변경됩니다.
      • 출력 메시지는 누른 키와 해당 keyCode 를 표시합니다.
      • 출력 메시지 색상이 파란색으로 변경됩니다.

  3. 키 놓음 상호 작용

    • 누른 키를 놓습니다.
    • 다음 변경 사항을 확인합니다.
      • 텍스트 색상이 검정색으로 돌아갑니다.
      • 출력 메시지는 놓은 키와 해당 keyCode 를 표시합니다.
      • 출력 메시지 색상이 녹색으로 돌아갑니다.

예시 상호 작용 시나리오:

Scenario 1: Typing "Hello"
- First 'H' pressed: Text turns red, blue output message
- 'H' released: Text turns black, green output message
- Continue for each letter...

Scenario 2: Special keys
- Try arrow keys, shift, ctrl, etc.
- Observe how different keys trigger events

주요 학습 내용:

  • onkeydown: 키를 누를 때 트리거됩니다.
  • onkeyup: 키를 놓을 때 트리거됩니다.
  • window.onload: 스크립트를 실행하기 전에 페이지가 완전히 로드되었는지 확인합니다.

랩을 완료하려면:

  1. 웹 브라우저에서 HTML 파일을 엽니다.
  2. 입력 필드와 상호 작용합니다.
  3. 색상 및 메시지 변경 사항을 확인합니다.
  4. 모든 이벤트 핸들러가 예상대로 작동하는지 확인합니다.

요약

이 랩에서는 참가자가 JavaScript 이벤트 리스너를 사용하여 대화형 HTML 인터페이스를 생성하여 웹 페이지에서 키보드 이벤트를 처리하는 방법을 배웁니다. 랩은 입력 요소와 출력 div 를 특징으로 하는 구조화된 HTML 문서를 설정하는 것으로 시작하며, 깨끗하고 중앙에 배치된 사용자 인터페이스를 제공하기 위해 반응형 CSS 로 스타일링됩니다. 참가자는 텍스트 색상의 동적 조작과 실시간 이벤트 추적을 허용하는 onkeydown 및 onkeyup와 같은 주요 이벤트 처리 기술을 탐색합니다.

학습 목표는 브라우저 이벤트 메커니즘 이해, 이벤트 리스너 구현, 반응형 웹 상호 작용 생성에 중점을 둡니다. 랩 단계를 진행하면서 개발자는 키보드 입력을 캡처하고, 페이지 요소를 동적으로 수정하며, 대화형 웹 애플리케이션을 만드는 데 필수적인 기술인 window-level 이벤트 핸들러를 구현하는 실질적인 경험을 얻게 됩니다.

관련 JavaScript 코스
초보자를 위한 JavaScript

초보자를 위한 JavaScript

javascriptweb-development
틱택토 웹 앱 만들기

틱택토 웹 앱 만들기

javascriptweb-development
두더지 잡기 웹 게임 만들기

두더지 잡기 웹 게임 만들기

javascriptweb-development