오늘은 event에 대해서 배워보도록 하겠습니다.
| 목차 | |
| 1. | event |
| 2. | 예제 문제 |
| 3. | 느낀 점 |
1. event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
document에서 사용되는 이벤트를 정의
</h1>
<ul>
<li>
마우스 이벤트 : click(), focus(), input(), change(), mouseover(), mouseout(), scroll() ...
</li>
<li>
키보드 이벤트 : keyDown(), keyPress(), keyUp()
</li>
<li>
기타 이벤트 : preventDefault(), target, submit()
</li>
<li>
addEventListener('eventName', callback Function);
메서드를 사용하여 이벤트 구현을 권장
</li>
<li>
이벤트 중복 부여 가능
</li>
</ul>
<div id="container">
<img src="../image/지친고양이.jpg" alt="" id="pic">
</div>
<script>
// 이미지에 마우스를 올리면 그림을 변경
// 마우스가 이미지 영역을 벗어나면 기존 그림으로 변경
const pic = document.getElementById('pic');
pic.addEventListener('mouseover', ()=>{
pic.src="../image/따봉고양이.jpg";
});
pic.addEventListener('mouseout', ()=>{
pic.src="../image/지친고양이.jpg";
});
</script>
</body>
</html>
▷ 출력
◈ move
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
body{
background-color: antiquewhite;
}
.icon{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.icon>svg{
color: brown;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart-plus" viewBox="0 0 16 16">
<path d="M9 5.5a.5.5 0 0 0-1 0V7H6.5a.5.5 0 0 0 0 1H8v1.5a.5.5 0 0 0 1 0V8h1.5a.5.5 0 0 0 0-1H9z"/>
<path d="M.5 1a.5.5 0 0 0 0 1h1.11l.401 1.607 1.498 7.985A.5.5 0 0 0 4 12h1a2 2 0 1 0 0 4 2 2 0 0 0 0-4h7a2 2 0 1 0 0 4 2 2 0 0 0 0-4h1a.5.5 0 0 0 .491-.408l1.5-8A.5.5 0 0 0 14.5 3H2.89l-.405-1.621A.5.5 0 0 0 2 1zm3.915 10L3.102 4h10.796l-1.313 7zM6 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0m7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
</svg>
</div>
<script>
document.body.addEventListener('mousemove',(e)=>{
console.log(e.pageX, e.pageY);
document.querySelector('.icon').style.left = e.pageX+'px';
document.querySelector('.icon').style.top = e.pageY+'px';
});
</script>
</body>
</html>※ pageX, pageY
: 뒤에 'px'를 붙어야함
▷ 출력
◈ keyEvent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
키보드 이벤트
</h1>
<ul>
<li>
keyDown : 키를 눌렀을 때
</li>
<li>
keyPress : 키를 누르고 있는 시점
</li>
<li>
keyUp : 키가 올라오는 순간
</li>
</ul>
<h1>
e.type : <span id="type1"></span>,
e.key : <span id="key1"></span>,
e.code : <span id="code1"></span>
</h1>
<h1>
e.type : <span id="type2"></span>,
e.key : <span id="key2"></span>,
e.code : <span id="code2"></span>
</h1>
<h1>
e.type : <span id="type3"></span>,
e.key : <span id="key3"></span>,
e.code : <span id="code3"></span>
</h1>
입력값 : <input type="text" id="str">
<script>
const type1 = document.getElementById('type1');
const key1 = document.getElementById('key1');
const code1 = document.getElementById('code1');
const type2 = document.getElementById('type2');
const key2 = document.getElementById('key2');
const code2 = document.getElementById('code2');
const type3 = document.getElementById('type3');
const key3 = document.getElementById('key3');
const code3 = document.getElementById('code3');
document.getElementById('str').addEventListener('keydown', (e)=>{
type1.innerText = e.type;
key1.innerText = e.key;
code1.innerText = e.code;
});
document.getElementById('str').addEventListener('keypress', (e)=>{
type2.innerText = e.type;
key2.innerText = e.key;
code2.innerText = e.code;
});
document.getElementById('str').addEventListener('keyup', (e)=>{
type3.innerText = e.type;
key3.innerText = e.key;
code3.innerText = e.code;
});
</script>
</body>
</html>
▷ 출력
◈ element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button type="button" id="makeBtn">element</button>
<div id="zone"></div>
<script>
document.getElementById('makeBtn').addEventListener('click',()=>{
let newBtn = `<button type ="button" id="newBtn" onclick="make()">newBtn</button>`;
document.getElementById('zone').innerHTML = newBtn;
// 이 위치에서는 가능
// document.getElementById('newBtn').addEventListener('click', ()=>{})
});
// 현 위치에서 newBtn이 생성되어 있는 상태가 아님. 인지 불가
/*
document.getElementById('newBtn').addEventListener('click', ()=>{
console.log(111);
});
*/
// 문서 전체에 리스너를 장착하여 엘리먼트 선택한 후 id 검사
/*
document.addEventListener('click', (e)=>{
if(e.target.id == 'newBtn'){
document.getElementById('zone').innerHTML +=
`<h3>생성된 버튼을 클릭<h3>`;
}
});
*/
// 생성된 엘리머트에 onclick 가능
function make(){
document.getElementById('zone').innerHTML +=
`<h3>생성된 버튼을 클릭<h3>`;
}
</script>
</body>
</html>
▷ 출력
2. 예제 문제
◎ 문제
▶ 1번
▶ 2번
◎ 정답
▶ 1번
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: beige;
}
.container{
width: 300px;
background-color: bisque;
/* 화면 정중앙 배치 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
border-radius: 10px;
padding: 20px 30px;
}
.container .text-field, .btn{
width: 100%;
padding: 10px;
box-sizing: border-box;
margin-bottom: 10px;
border: none;
outline: none;
border-radius: 5px;
font-size: 15px;
}
.container .btn{
/* background-color: rgb(245, 173, 86); */
background-color: rgb(242, 197, 143);
color: rgb(255, 255, 255);
font-weight: 700;
cursor: pointer;
}
.container .link{
margin-top: 30px;
}
.container .link>a{
color: rgb(141, 141, 141);
text-decoration: none;
font-size: 13px;
}
</style>
</head>
<body>
<div class="container">
<form action="">
<input type="text" class="text-field" name="id" placeholder="아이디 8자이상">
<input type="password" class="text-field" name="pw" placeholder="비밀번호">
<input type="submit" class="btn" value="login" disabled>
</form>
<div class="link">
<a href="">비밀번호를 잊어버리셨나요</a>
</div>
</div>
<script>
//id규칙 8자 이상
//pw규칙 숫자, 문자, 특수문자 포함 8자이상
//^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*].{8,}$
const input = document.querySelectorAll('.text-field');
const btn = document.querySelector('.btn');
console.log(input);
console.log(btn);
input[0].addEventListener('input',()=>{
console.log("1111")
//id규칙 8자 이상
let pwVaild = passwordValid();
if(input[0].value.length > 7 && pwVaild){
btn.style.setProperty('background-color', 'rgb(245, 173, 86)');
btn.disabled = false;
}else{
btn.style.setProperty('background-color', ' rgb(242, 197, 143)');
btn.disabled = true;
}
});
function passwordValid(){
let reg = new RegExp(/^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*].{7,}$/);
console.log(input[1].value, reg.test(input[1].value));
if(reg.test(input[1].value)){
return true;
}
return false;
}
input[1].addEventListener('input', ()=>{
let pwVaild = passwordValid();
if(input[0].value.length > 7 && pwVaild){
btn.style.setProperty('background-color', 'rgb(245, 173, 86)');
btn.disabled = false;
}else{
btn.style.setProperty('background-color', ' rgb(242, 197, 143)');
btn.disabled = true;
}
});
</script>
</body>
</html>
▶ 2번
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button type="button" id="startBtn">게임시작</button>
<h1 id="comMsg"></h1>
숫자입력 : <input type="text" id="myNum">
<button type="button" id="tryBtn">게임확인</button>
<ol id="ol"></ol>
<script>
const comSet = new Set();
let comNums = [];
const comMsg = document.getElementById('comMsg');
const ol = document.getElementById('ol');
document.getElementById('startBtn').addEventListener('click', makeGame);
document.getElementById('tryBtn').addEventListener('click', compareNum);
//비교
function compareNum(){
console.log(comNums);
if(comSet.size<=0){
comMsg.innerText = "게임시작버튼을 클릭해주세요.";
return; //함수종료
}
let myNum = document.getElementById('myNum');
//유효성 검증
if(validMyNum(myNum.value)){
console.log("검증통과!!");
//비교
let myNumsArr = myNum.value.split("");
console.log(myNumsArr);
let strike = 0, ball =0;
//com
for(let i=0; i<comNums.length; i++){
//my
for(let j=0; j<myNumsArr.length; j++){
if(comNums[i] == myNumsArr[j]){
if(i==j){
strike++;
}else{
ball++;
}
break;
}
}
}
if(strike == 0 && ball==0){
ol.innerHTML += `<li>${myNumsArr} => OUT!!</li>`;
}else{
if(strike == 3){
ol.innerHTML += `<li>${myNumsArr} => SUCCESS!!</li>`;
}else{
ol.innerHTML += `<li>${myNumsArr} => ${strike}Strike, ${ball}Ball</li>`;
}
}
}else{
console.log("검증실패!!");
comMsg.innerText="유효하지 않은 숫자입니다.";
}
myNum.value="";
myNum.focus();
}
function makeGame(){
//기존 값 초기화
comNums = [];
comSet.clear();
ol.innerText='';
while(comSet.size < 3){
let rNum = Math.floor(Math.random()*10);
comSet.add(rNum);
}
console.log(comSet);
//set => arr 저장
comSet.forEach((e)=>{
comNums.push(e);
});
comMsg.innerText = "컴퓨터가 숫자를 결정하였습니다."
}
//검증
//숫자는 3자리, 숫자만 가능, 비어있으면 안됨, 중복 안됨
function validMyNum(myNum){
if(myNum==''){
return false;
}else if(myNum.length != 3){
return false;
}else if(isNaN(myNum)){
return false;
}else if(new Set(myNum.split("")).size != 3){
return false;
}else{
return true;
}
}
// console.log(validMyNum('q'));
</script>
</body>
</html>
3. 느낀 점
다음 주동안 화면 프로젝트를 시작하게 되기에 열심히 문제 위주로 복습하며 어떤 컨셉의 화면을 만들지 고민을 해봐야겠다. 특히 API에 관한 내용에 대해서 공부를 해봐야겠다.
'Front-end > Js' 카테고리의 다른 글
| Js 기초(BOM, DOM, classList)- AWS 풀스택 과정 23일차 (0) | 2024.08.14 |
|---|---|
| Js 기초(JSON, AJAX)- AWS 풀스택 과정 22일차 (0) | 2024.08.13 |
| Js 기초(class)- AWS 풀스택 과정 21일차 (0) | 2024.08.12 |
| Js 기초(set, map)- AWS 풀스택 과정 20일차 (0) | 2024.08.09 |
| Js 기초(array)- AWS 풀스택 과정 19일차 (0) | 2024.08.08 |