js DOM 이벤트
랜덤 컬러 연습하기
<!DOCTYPE html>
<head>
<title>100 Buttons!</title>
</head>
<body>
<h1>Click me!</h1>
<button>change</button>
<script>
const button = document.querySelector('button');
const h1 = document.querySelector('h1');
button.addEventListener('click', function() {
const newColor = randColor();
document.body.style.backgroundColor = newColor;
h1.innerText = newColor;
})
const randColor = () => {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
return `rgb(${r}, ${g}, ${b})`
}
</script>
</body>
</html>
이벤트와 this 키워드
https://m.blog.naver.com/nuberus/221463728867
[JavaScript] this 키워드 / Event
1. JavaScript 에서의 this 의 의미 - 기본적으로 this 키워드는 JAVA 나 JavaScript 나 객체 자기...
blog.naver.com
이벤트 객체
https://tangoo91.tistory.com/32
[JavaScript] 자바스크립트 이벤트 객체
앞의 포스팅에서 이벤트가 발생했을 때 실행하는 함수에는 이벤트 핸들러와 이벤트 리스너가 있다고 설명했다. 이들도 함수이기 때문에 인수를 받을 수 있는데 그 인수를 이벤트 객체라고 한다
tangoo91.tistory.com
e.preventDefault()
https://programming119.tistory.com/100
[JS] event.preventDefault() 간단 설명 😊/ preventDefault란?
preventDefault 란? a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다. preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다. 주로 사용되는 경우는 1. a 태
programming119.tistory.com
이벤트 버블링 & 이벤트 위임
https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지
(기본) 이벤트 버블링, 이벤트 캡처링, 그리고 이벤트 위임까지 이벤트 전달 방식과 관련된 모든 것을 파헤쳐 봅니다.
joshua1988.github.io
점수 관리자 제작하기
<!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><span id="p1display">0</span> to <span id="p2display">0</span></h1>
<button id="p1button">+1 Player One</button>
<button id="p2button">+1 Player Two</button>
<select id="winScoreSelect"></select>
<button id="reset">reset</button>
<script src="temp.js"></script>
</body>
</html>const resetButton = document.querySelector('#reset');
let isGameOver = false;
let winPoint = 3;
const winScoreSelect = document.querySelector('#winScoreSelect');
for (let i = 3; i <= 11; i += 2) {
const newOption = document.createElement('option');
newOption.setAttribute('value', i);
newOption.innerText = newOption.value;
winScoreSelect.append(newOption);
}
const p1 = {
score: 0,
button: document.querySelector('#p1button'),
display: document.querySelector('#p1display'),
}
const p2 = {
score: 0,
button: document.querySelector('#p2button'),
display: document.querySelector('#p2display'),
}
function updateScores(player, opponent) {
if (!isGameOver) {
player.score += 1;
if (player.score === winPoint) {
isGameOver = true;
player.disabled = true;
opponent.disabled = true;
}
player.display.textContent = player.score;
}
}
p1button.addEventListener('click', function () {
updateScores(p1, p2);
})
p2button.addEventListener('click', function () {
updateScores(p2, p1);
})
winScoreSelect.addEventListener('change', function (e) {
winPoint = parseInt(e.target.value);
reset();
})
resetButton.addEventListener('click', reset)
function reset() {
isGameOver = false;
for (let p of [p1, p2]) {
p.score = 0;
p.display.textContent = p.score;
}
}