반응형
Event
* window시스템과 javascript의 event system은 동일하다.
메시지가 라우팅 된다.
Event : 어떤 조건이 만족될 때 발생되는 신호 // 마우스 왼쪽 버튼 클릭
더보기
1개의 이벤트는 1개의 메시지와 2개의 옵션 값을 가진다. - Linux
Message : 이벤트의 값. //마우스 왼쪽 버튼 클릭의 다운 신호 값
= 메시지 코드 + 32Bit Parameter + 32Bit Parameter
Event Handler : 이벤트 발생 시 호출되는 함수 event listene라고도 함.
자바스크립트의 이벤트 처리 시스템은 callback 함수를 통해 구현된다.
이는 윈도 시스템의 이벤트 처리 시스템과 거의 유사하다.
Window의 메시지 처리 루틴
WM_LBUTTON DOWN →
+ = Click
WM_LBUTTON UP →
≪LOW Message≫ ≪ Virtual Message≫
사용자가 이용
키보드 이벤트
키보드 이벤트의 종류
keydown : 키가 눌렸을 때
keyup : keydown 후 복귀되었을 때
keypress : 키가 입력되었을 때 (Shift, Ctrl, Fn 키 등 특수키 제외)
▶ down -> press -> up
키보드 이벤트의 처리
event 객체에서 정보를 얻음.
일반적으로 keyup에서 처리.
keydown으로 처리 시 한국어나 중국어의 경우 처리를 못하는 경우가 있음. (글자를 조합하기 때문에 이벤트를 처리 못할 수 있다.)
Key Code
- code : 입력한 키
- keyCode : 키의 실제값
- altkey, ctrlkey, shiftkey
키보드 이벤트 예제
key code 이용한 별 이동.
<body>
<h1>★</h1>
<script>
const [left, up, right, down, q] = [37, 38, 39, 40, 81]
const star = document.querySelector('h1');
star.style.position = 'absolute'
let x = 0;
let y = 0;
let = offset = 20;
const print = function(_x, _y){
star.style.left = `${_x * offset}px`;
star.style.top = `${_y * offset}px`;
}
print(x, y)
const moveStar = function(event){
switch (event.keyCode){
case left : x -= 1; break;
case up : y -= 1; break;
case right : x += 1; break;
case down : y += 1; break;
case q : y = 0, x = 0; break;
default : return; break;
}
print (x, y)
}
document.addEventListener('keydown', moveStar)
</script>
</body>
이벤트 수신 객체
이벤트 핸들러에서 이벤트를 받은 객체가 누구인지 알아내는 기법
- object
- this
- event.currentTarget
<body>
<h1>Num of char</h1>
<textarea name="" id="" cols="30" rows="10"></textarea>
<script>
const tarea = document.querySelector('textarea');
const h1 = document.querySelector('h1');
tarea.addEventListener('keyup', (event) => {
h1.textContent = `Num of Char : ${event.currentTarget.value.length}`;
});
// tarea.addEventListener('keyup', (event) => {
// h1.textContent = `Num of Char : ${tarea.value.length}`;
// });
</script>
</body><body>
<h1>Num of char</h1>
<textarea name="" id="" cols="30" rows="10"></textarea>
<script>
const tarea = document.querySelector('textarea');
const h1 = document.querySelector('h1');
tarea.addEventListener('keyup', function(event){
h1.textContent = `Num of Char : ${this.value.length}`;
});
</script>
</body>
form 처리
form의 값 얻어오기
input.value를 통해 form의 값을 얻어온다.
<body>
<h1>Circles Area</h1>
<label>Radius : <input type="text"></label>
<button>Calculation</button>
<h3></h3>
<script>
document.addEventListener('DOMContentLoaded', () => {
const input = document.querySelector('input');
const button = document.querySelector('button');
const h3 = document.querySelector('h3');
const onButtonClick = function(event){
const Radius = Number(input.value);
if (isNaN(Radius)) {
h3.textContent = 'Please enter a NUMBER.'
return;
}
h3.textContent = `Width of a Circle = ${(Radius * Radius * 3.14).toFixed(2)}`
}
button.addEventListener('click', onButtonClick);
})
</script>
</body>
selcet 처리
oprions 객체의 정보를 이요하여 현재 선택한 option, index를 구한다.
<body>
<select>
<option>IMAC PRO</option>
<option>MAC BOOK PRO</option>
<option>IPAD</option>
<option>IPHONE 14</option>
</select>
<p>APPLE : </p>
<script>
document.addEventListener('DOMContentLoaded', () => {
const select = document.querySelector('select');
const p1 = document.querySelector('p');
select.addEventListener('change', (event) => {
const options = event.currentTarget.options;
const index = event.currentTarget.options.selectedIndex;
p1.textContent = `Your choice : ${options[index].textContent}`;
})
})
</script>
</body>
multi-select 처리
option 속성에는 forEach()와 같은 callback 기능이 없으므로 loop문으로 처리한다.
<body>
<select multiple>
<option>IMAC PRO</option>
<option>MAC BOOK PRO</option>
<option>IPAD</option>
<option>IPHONE 14</option>
</select>
<p>APPLE : </p>
<script>
document.addEventListener('DOMContentLoaded', () => {
const select = document.querySelector('select');
const p1 = document.querySelector('p');
select.addEventListener('change', (event) => {
const options = event.currentTarget.options;
const list = [];
for (const option of options){
if (option.selected){
list.push(option.textContent);
}
}
p1.textContent = `Your choice : ${list.join(', ')}`;
})
})
</script>
</body>
Check Box
<body>
<label>Checkbox<input type="checkbox"></label>
<p>Uncheked</p>
<script>
document.addEventListener('DOMContentLoaded', () => {
const checkbox = document.querySelector('input');
const p1 = document.querySelector('p');
let msg = '';
checkbox.addEventListener('change', (event) => {
if (event.currentTarget.checked)
msg = 'Checked';
else
msg = 'Unchecked';
p1.textContent = msg;
})
})
</script>
</body>
Radio Button
<body>
<label>No Select <input type="radio" name="brand" value="nobrand"> </label>
<label>Apple<input type="radio" name="brand" value="Apple"> </label>
<label>Samsung<input type="radio" name="brand" value="Samsung"> </label>
<p></p>
<script>
document.addEventListener('DOMContentLoaded', () => {
const radios = document.querySelectorAll('input[name=brand]');
const p1 = document.querySelector('p');
radios.forEach((radio) => {
radio.addEventListener('change', (event) => {
if (event.currentTarget.checked){
p1.textContent = `${event.currentTarget.value}`;
}
});
});
});
</script>
</body>
예제
이메일을 입력받아 ID와 Domain을 추출하는 코드를 작성하시오.
단 이메일은 prompt()로 입력받으시오.
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const input = document.querySelector('input');
const button = document.querySelector('button')
const p = document.querySelector('p');
button.addEventListener('click', (event) => {
const inch = input.value
p.textContent = `RESULT : ${inch * 2.54} Cm`
});
});
</script>
</head>
<body>
<input type="text">inch <br>
<button>inch to cm</button>
<p>RESULT : </p>
</body>
인치를 센티로 바꾸는 코드를 입력하시오.
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
const isEmailFormat = function (email) {
if (email.includes('@') === true){
const nextV = email.split('@')
console.log(nextV[1].length)
if (nextV[1].includes('.') === true && nextV[1].length > (nextV[1].indexOf('.')+1)){
return true;
}
else{
return false;
}
}
else{
return false;
}
}
document.addEventListener('DOMContentLoaded', () => {
const input = document.querySelector('input')
const p = document.querySelector('p');
input.addEventListener('keyup', (event) => {
if (true === isEmailFormat(event.currentTarget.value)){
p.textContent = `type of the Email`;
}
else{
p.textContent = `is not type of the Email`;
}
});
});
</script>
</head>
<body>
<h1>Is this in email format?</h1>
<input type="text"> E-mail
<p></p>
</body>
이메일을 입력 받아 이메일 형식이 맞는지 확인하시오.
- @가 있어야 함
- @뒤에 .이 있어야 함
- 마지막에 .com, .kr, .net, .org 가 있어야 함
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
const isEmailFormat = function (email) {
//조건 배열 1
const ar = ['com', 'kr', 'net', 'org', 'jp']
//@입력 검사.
if (email.includes('@') === true){
const nextV = email.split('@')
//.뒤에 입력여부 검사.
if (nextV[1].includes('.') === true && nextV[1].length > (nextV[1].indexOf('.') + 1)){
let nextS = nextV[1].split('.')
//마지막에 조건 배열 1 이 입력되었는지 검사.
for (let i = 0; i < ar.length; i++){
if (nextS[nextS.length -1] === ar[i]){
return true;
}
else{
return false;
}
}
}
else{
return false;
}
}
else{
return false;
}
}
document.addEventListener('DOMContentLoaded', () => {
const input = document.querySelector('input')
const p = document.querySelector('p');
input.addEventListener('keyup', (event) => {
if (true === isEmailFormat(event.currentTarget.value)){
p.textContent = `type of the Email`;
}
else{
p.textContent = `is not type of the Email`;
}
});
});
</script>
</head>
<body>
<h1>Is this in email format?</h1>
<input type="text"> E-mail
<p></p>
</body>
체크박스를 클릭하면 “x초”라고 초단위로 시간이 흐르고 다시 클릭하여 체크를 풀면 중지하는 코드를 작성하시오.
<head>
<meta charset="UTF-8">
<title>체크박스 초단위 체크</title>
<script>
document.addEventListener('DOMContentLoaded', ()=>{
const chkvalue = document.querySelector('input');
const temp = document.querySelector('#timevalue');
let timer = 0;
let seconds = 0;
function OnClick(event)
{
// 1. 체크박스를 체크 했을때
if(event.currentTarget.checked)
{
timer = setInterval(()=>{
seconds += 1;
temp.textContent = `${seconds} 초`;
}, 1000)
}
else
{
// 2. 체크박스의 체크를 풀었을때
clearInterval(timer);
}
}
chkvalue.addEventListener('change', OnClick);
})
</script>
</head>
<body>
<input type="checkbox">
<span id="timevalue">초</span>
</body>
반응형
'JavaScript' 카테고리의 다른 글
| [JavaScript] 주사위의 값 구하기 (0) | 2022.05.01 |
|---|---|
| [JavaScript] 원주율에 따른 원의 넓이, 둘레 구하기 (예제) (0) | 2022.04.27 |
| [JavaScript] DOM (문서 객체) (0) | 2022.04.25 |
| [JavaScript] Static (0) | 2022.04.21 |
| [JavaScript] 상속(Inheritance), super() (0) | 2022.04.21 |