이벤트 활용시 사용 될 랜덤 숫자 생성 & 랜덤 색상 생성 함수
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS 이벤트 01</title>
<style>
button {
margin: 5px;
padding: 20px;
}
div {
width: 50px;
height: 50px;
border: 1px solid black;
margin: 10px;
display: inline-block;
}
</style>
</head>
<body>
<!-- 1. HTML 이벤트 핸들러 프로퍼티 -->
<button id="bgChange">Change Background Color</button>
<span id="keydown"></span>
<hr />
<!--
2. 인라인 이벤트 핸들러
: on속성을 버튼 태그에서 지정하고
: 해당 속성에서 사용할 기능(함수)을 js파일에서 작성
>> 유지보수가 어렵고, 코드가 복잡해지기 때문에 권장하지 X
-->
<button
id="textChange"
style="font-size: 20px;"
onclick="colorChange()"
>Change Text Color</button>
<hr />
<button onclick="alert('버튼을 클릭하였습니다.')">Press Me</button>
<hr />
<div>1</div>
<div>2</div>
<div>3</div>
<hr />
<!-- 3. addEventListener 메서드 사용 -->
<button class="btnsChange">쿼리셀렉터</button>
<button class="btnsChange">쿼리셀렉터</button>
<button class="btnsChange">쿼리셀렉터</button>
<!-- 4. 이벤트 제거 -->
<hr />
<button id="remove">이벤트 제거</button>
<script src="./event01.js"></script>
</body>
</html>
1)
- random 함수: 랜덤 숫자 생성
Math.reandom(): 0이상 1미만의 부동 소수점 난수(랜덤 숫자)을 반환
Math.random() * (number + 1): 0dltkd number + 1 미만의 범위의 난수가 반환
ex) number = 100인 경우
>> 0이상 101미만의 실수 생성
- Math.floor(): 괄호 안의 주어진 숫자를 내람하여 가장 가까운 정수를 생성(반환)
ex) 위의 식에 이어서 0부터 101미만의 정수 생성
function random(number) {
return Math.floor(Math.random() * (number + 1));
}
2) generateRandomColor 함수의 정의: 랜덤 색상 생성
function generateRandomColor() {
// 'rgb(x, y, z)'의 형식과 동일
// : x, y, z의 값에 0부터 255까지의 무작위 정수를 사용
return `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
}
1. 이벤트 정의
: 웹 페이지에서 발생하느 대부분의 일(사건)을 의미
ex) 사용자가 버튼 클릭, 웹 페이지가 로드, input필드에 입력하는 것 등
2. 이벤트 핸들링 (handle: 다루다)
- 특정 이벤트에 반응해서 특정 동작을 실행하는 것을 의미
- 이벤트 핸들러(이벤트 리스너)는 특정 이벤트가 발생했을 때 호출되는 함수
ex) '사용자가 버튼을 클릭'했을 때 'alret창이 실행'되도록 작성
3. 이벤트 핸들러 '등록' 방법
1) HTML 이벤트 핸들러 속성(프로퍼티)
- HTML 요소에 직접 onclick, onload, onchange 등의 이벤트 핸들러 속성을 설정하는 방법
- HTML 요소를 JS의 객체로 가졀와서 이벤트 핸들러 프로퍼티 함수를 할당
>> HTML과 CSS분리 가능 - 유지 보수 쉬움
- 웹문서에 가져오느 HTML요소는 객체로 저장
const bgButton = document.querySelector("#bgChange");
bgButton.onmouseover = function () {
const randomColor = generateRandomColor(); // rgb(x, y, z)
document.body.style.backgroundColor = randomColor;
};
> bgButton 상수에 버튼 태그에 대한 참조(주소값)를 저장
> onclick, onmounseout 프로퍼티는 이벤트 핸들러 속성
on키워드 - 이벤트 핸들러
