반응형
HTML코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Momentum</title>
</head>
<body>
<div class="divClass">
<h1 class="h1Class" id="line1">this is h1 1</h1>
<h1 class="h1Class">this is h1 2</h1>
<h1 class="h1Class">this is h1 3</h1>
<h1 id="clickChangeColor">click to change color</h1>
<h1 id="clickChangeClass">click to change class</h1>
<h1 id="mouseOver">mouse over</h1>
<h2>this is h2</h2>
<h3>this is h3</h3>
</div>
<h2>this is h2(out of div)</h2>
<script src="app.js"></script>
</body>
</html>
JS코드
// -------------------------------[이벤트동작]-------------------------------
// 1. 클릭으로 색깔 바꾸기
function handleTitleClickColor() {
// element가 블루면 토마토, 토마토면 블루로
const nowColor = changeColorElement.style.color;
let newColor;
if (nowColor==="blue") {
newColor = "tomato";
}
else {
newColor = "blue";
}
changeColorElement.style.color = newColor
}
const changeColorElement = document.getElementById("clickChangeColor");
changeColorElement.addEventListener("click",handleTitleClickColor);
// 2. 클릭으로 클래스 추가, 제거하기
function handleTitleClickAdd() {
//clicked가 없을때 추가 있으면 제거
const clickedClass = "clicked";
if (changeColorElement.classList.contains(clickedClass)) {
changeColorElement.classList.remove(clickedClass)
} else {
changeColorElement.classList.add(clickedClass)
}
}
function handleTitleClickToggle() {
//clicked가 없을때 추가 있으면 제거
changeColorElement.classList.toggle("clicked")
}
const changeClassElement = document.getElementById("clickChangeClass");
changeClassElement.addEventListener("click",handleTitleClickAdd);
// changeClassElement.addEventListener("click",handleTitleClickToggle);
// 3. 마우스오버로 글자 바꾸기
function handleMouseEnter() {
mouseOverElement.innerText = "mouse is here!"
}
function handleMouseLeave() {
mouseOverElement.innerText = "mouse is out!"
}
const mouseOverElement = document.getElementById("mouseOver");
mouseOverElement.addEventListener("mouseenter",handleMouseEnter);
mouseOverElement.addEventListener("mouseleave",handleMouseLeave);
// 4. 윈도우 크기를 변화시키면 배경색이 바뀜
function changeBackColor() {
// 배경색깔을 바꿈
document.body.style.backgroundColor = "tomato";
}
window.addEventListener("resize",changeBackColor); // 윈도우 크기를 변화시키면
// 5. 복사를 하면 알람이 옴
function makeAlert() {
alert("copier!")
}
window.addEventListener("copy",makeAlert); // 복사를 하면 알람
// 6. 와이파이 끊기거나 연결되면 알람이 옴
function allertNoWifi() {
alert("no wifi!")
}
function allertYesWifi() {
alert("yes wifi!")
}
window.addEventListener("offline",allertNoWifi); //와이파이가 끊기면 알람
window.addEventListener("online",allertYesWifi); //와이파이가 연결되면 알람
반응형