<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typing-pong</title>
<link rel="stylesheet" href="type.css">
</head>
<body>
<div class="game-title">
<h1>Typing-pong</h1>
</div>
<div class="word-display">
단어
</div>
<input type="text" id="word-input" placeholder="Type here..." autofocus>
<button id="start-button">Start</button>
<div class="game-info">
<p> 점수: <span class="score">0</span>점</p>
<p> 시간: <span class="time">0</span>초</p>
</body>
</html>
<script src="type.js"></script>
const wordDisplay = document.querySelector('.word-display');
let wordList = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
console.dir(wordDisplay);
const wordDisplay = document.querySelector('.word-display');
let wordList = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
console.dir(wordDisplay);
wordDisplay.innerText = wordList[0];
엔터 감지
const wordDisplay = document.querySelector('.word-display');
let wordList = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
console.dir(wordDisplay);
wordDisplay.innerText = wordList[0];
function onKeyDown(event)
{
if(event.key === 'Enter')
{
alert("pressed");
}
}
event.keycode = deprecated로
직관적인 event.key로 사용
const wordDisplay = document.querySelector('.word-display');
const wordInput = document.querySelector('#word-input'); /// 변수 선언
let wordList = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
console.dir(wordDisplay);
wordDisplay.innerText = wordList[0];
wordInput.addEventListener("keydown", function() {
alert("pressed");
}) /// 선언된 변수 호출
wordInput.addEventListener("keydown", function(event) {
if(event.key === 'Enter') {
alert("pressed");
}
})
엔터키 입력 시에만 알림 확인
addEventListener의 동작 원리
- 익명 함수 (Anonymous Function)
wordInput.addEventListener("keydown", function() {}) alert("pressed");
여기서 function() { alert("pressed"); }는 익명 함수입니다.
함수 이름이 없지만 함수 자체는 존재합니다.
- 콜백 함수 (Callback Function):
- addEventListener의 두 번째 매개변수로 전달된 함수는 콜백 함수입니다
- 이벤트가 발생할 때마다 브라우저가 이 함수를 자동으로 호출합니다
- 이벤트 리스너 등록:
- addEventListener는 해당 요소에 이벤트 리스너를 등록합니다
- "keydown" 이벤트가 발생하면 등록된 함수가 실행됩니다
기존 방식과의 차이점
기존 방식 (HTML 속성):
html
<input onKeyDown="onKeyDown();">
javascript
function onKeyDown() { ... }
현재 방식 (addEventListener):
javascript
wordInput.addEventListener("keydown", function() { ... })
- 두 방식 모두 같은 결과 생성
- addEventListener 방식이 더 현대적이고 유연한 방법입니다.
- 함수가 정의되어 있지않은 것으로 보일뿐
- 실제로는 익명 함수로 정의되어 있고 이벤트가 발생할 때마다 실행되는 구조
'알토르' 카테고리의 다른 글
| 알토르 1주차 - Typing game 3 (0) | 2025.08.12 |
|---|---|
| 알토리 1주차 Typing game -2 (0) | 2025.08.12 |
| 알토르 1주차 인스타 (0) | 2025.08.11 |
| 알토리 0주차 JavaScript (5) | 2025.08.11 |
| 알토르 0 주차 CSS (2) | 2025.08.10 |
