연습용 코드 :
- html 코드 :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>JS with Codeit</title>
</head>
<body>
<div id="form">
<h1 class="title">Hello !</h1>
<input type="text" id="username" class="input" placeholder="Username">
<input type="password" id="password" class="input" placeholder="Password">
<input type="button" id="submit" class="btn" value="Sign in">
<input type="checkbox" id="checkbox">
<label for="checkbox">Stay Signed in</label>
</div>
<script>
</script>
</body>
</html>
- CSS 코드 :
#form {
width: 250px;
height: 250px;
margin: 70px 30px;
padding: 30px;
box-shadow: 2px 2px 10px #bfbfbf;
border-radius: 5px;
}
.title {
margin: 10px 0 15px;
text-align: center;
color: #6502C2;
}
.input {
width: 100%;
height: 35px;
margin: 5px 0;
padding: 5px 10px;
box-sizing: border-box;
cursor: pointer;
}
.btn {
width: 100%;
height: 40px;
margin: 15px 0 10px;
color: #FFFFFF;
border: none;
background-image: linear-gradient(276deg, #710AD2, #8E43E6);
}● Input의 Focus 동작 관련 event.type
○ 버블링 동작 event.type //즉, 부모 Box or Form 태그에 핸들러 적용 상황
=> 'focusin' , 'focusout'
const form = document.querySelector('#form');
//가장 부모 Box에 핸들러 등록
form.addEventListener('focusin',function(event){
console.log(event.target);
console.log(event.type);
});
form.addEventListener('focusout',function(event){
console.log(event.target);
console.log(event.type);
});
○ 버블링 X 동작 event.type //즉 ,직접 input 노드에 핸들러 적용 상황
=> 'focus' , 'blur'
//각 input 웹폼 태그에 핸들러 적용
const useName = document.querySelector('#username');
const passWord = document.querySelector('#password');
useName.addEventListener('focus', function (event) {
console.log(event.target);
console.log(event.type);
});
useName.addEventListener('blur', function (event) {
console.log(event.target);
console.log(event.type);
});
passWord.addEventListener('focus', function (event) {
console.log(event.target);
console.log(event.type);
});
passWord.addEventListener('blur', function (event) {
console.log(event.target);
console.log(event.type);
});● Input의 입력값 관련 event.type
○ 버블링 동작 event.type //즉, 부모 Box or Form 태그에 핸들러 적용 상황
- 전제 조건 : Form 태그에 핸들러 적용
- 'input' : Input 태그의 입력값이 변할 시, 발생
- 'change' : focus가 되기 전, 후 || Enter 키를 누르기 전과 후의 input.value값을 체크한 후, 달라지면, 발생
const form = document.querySelector('#form');
form.addEventListener('input', function (event) {
console.log(event.type);
});
form.addEventListener('change', function (event) {
console.log(event.type);
});
● 연습문제 :
산성비라는 게임을 아시나요? 마치 비처럼 하늘에서 바닥으로 천천히 단어가 떨어지는데 시간이 지날수록 점점 더 속도가 빨라집니다. 그리고 사용자가 입력창에서 그 단어를 입력하면 사라지죠. 최대한 빨리 입력해서 단어가 바닥에 닿지 않도록 하는 타자 연습 게임입니다.
이번 실습에서는 단어가 떨어지는 건 아니지만, 그동안 배운 것들을 활용해서 input 태그에 단어 입력이 완료되면 화면에 있는 단어들이 사라지도록 만들어 봅시다.
단어들을 만드는 로직은 initializer.js에 있는데요. 각 단어가 만들어진 특징을 정리해보면 다음과 같습니다.
- 각 단어들은 span 태그로 만들어져 있다.
- 각 단어들은 웹 페이지가 갱신될 때마다 랜덤한 위치를 가진다.
- 각 단어들은 data-word라는 속성을 가지고 값은 그 단어를 담고 있다.
- 각 단어들은 div#container 태그의 자식 태그들이다.
위 특징을 활용해서 단어 입력이 완료되면 화면에 있는 단어들이 사라지는 이벤트 핸들러를 만들고, input 태그에 적절한 타입으로 이벤트 핸들러를 등록해 주세요.
이벤트 핸들러가 갖추어야 하는 기능은 다음과 같습니다.
- 입력값과 일치하는 단어를 가진 요소가 있으면 그 요소를 삭제해야 한다.
- 이벤트 핸들러가 호출되면 input 태그는 매번 초기화되어야 한다.
- 단어를 삭제했다면 checker 함수가 호출되어야 한다.
● 답 :
const input = document.querySelector('#input');
function checker() {
const words = document.querySelectorAll('.word');
if (words.length === 0) {
alert('Success!👏');
if (confirm('retry?')) {
window.location.reload();
}
}
}
// 여기에 코드를 작성하세요
function removeWord()
{
//input.value로 data-word 속성값 가진 태그 찾는 방법
const word = document.querySelector(`[data-word="${input.value}"]`);
//word에 들어간 요소노드가 존재한다면,
if(word)
{
//노드 삭제
word.remove();
//게임 정보 업데이트
checker();
}
//입력 창의 text값 reset
input.value = '';
}
//'change' 이벤트 type에 핸들러 적용
input.addEventListener('change',removeWord);
'CodeIt_Sprint > 인터렉티브_자바스크립트' 카테고리의 다른 글
| (11)인터렉티브_자바스크립트_키보드 관련 event (1) | 2024.12.04 |
|---|---|
| (10)인터렉티브_자바스크립트_마우스 클릭 관련 세부 event.type 3가지, 마우스 포인터 이동 관련 세부 event.type (1) | 2024.12.03 |
| (9)인터렉티브_자바스크립트_event객체프로퍼티메소드 preventDefault() 메소드를 이용하여, 실습 3개 해보기(작성중) (2) | 2024.11.29 |
| (8)인터렉티브_자바스크립트_이벤트 버블링 (0) | 2024.11.29 |
| (7)인터렉티브_자바스크립트_태그에 이벤트 핸들러 등록,제거하기, 이벤트객체 => 동작에 대하여, 어떤 event동작, 태그항목이 관련되어있는지의 정보 객체 (0) | 2024.11.29 |
