✔ 오늘의 강의
강의: 바닐라 JS로 크롬앱 만들기 3.0 ~ 3.5
✔ 목표
제공되는 보일러 플레이트를 사용해 애플리케이션을 만들자
✔ 조건
- 마우스가 title 위로 올라가면 텍스트가 변경되어야 한다.
- 마우스가 title을 벗어나면 텍스트가 변경되어야 한다.
- 브라우저 창의 사이즈가 변하면 title이 바뀌어야 한다.
- 마우스 우클릭하면 title이 바뀌어야 한다.
- title의 색상은 colors 배열에 있는 색을 사용해야 한다.
- .css와 .html 파일은 수정하면 안 된다.
- 모든 함수 핸들러는 superEventHandler 내부에 작성해야 한다.
- 모든 조건이 충족되지 못하면 ❌를 받는다.
참고 링크
https://developer.mozilla.org/en-US/docs/Web/Events
[Event reference | MDN
Events are fired to notify code of "interesting changes" that may affect code execution. These can arise from user interactions such as using a mouse or resizing a window, changes in the state of the underlying environment (e.g. low battery or media events
developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/Events)
✔ 과정
html
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<h2>Hello!</h2>
<script src="src/index.js"></script>
</body>
</html>JS
// <⚠️ DONT DELETE THIS ⚠️>
import "./styles.css";
const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"];
// <⚠️ /DONT DELETE THIS ⚠️>
/*
✅ The text of the title should change when the mouse is on top of it.
✅ The text of the title should change when the mouse is leaves it.
✅ When the window is resized the title should change.
✅ On right click the title should also change.
✅ The colors of the title should come from a color from the colors array.
✅ DO NOT CHANGE .css, or .html files.
✅ ALL function handlers should be INSIDE of "superEventHandler"
*/
const superEventHandler = {};
const title = document.querySelector("h2");
// 1. 마우스가 title(h2) 위로 올라가면 텍스트가 변경되어야 한다.
title.addEventListener("mouseover", function () {
title.innerText = "마우스가 위에 있다.";
});
// 2. 마우스가 title(h2)을 벗어나면 텍스트가 변경되어야 한다.
title.addEventListener("mouseout", function () {
title.innerText = "마우스가 떠났다.";
});
// 3. 브라우저 창의 사이즈가 변하면 title(h2)이 바뀌어야 한다.
window.addEventListener("resize", function () {
title.innerText = "사이즈를 변경했다.";
});
// 4. 마우스 우클릭하면 title(h2)이 바뀌어야 한다.
window.addEventListener("contextmenu", function () {
title.innerText = "우클릭을 했다.";
});7. 모든 함수 핸들러는 superEventHandler 내부에 작성해야 한다.
superEventHandler로 이동
// <⚠️ DONT DELETE THIS ⚠️>
import "./styles.css";
const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"];
// <⚠️ /DONT DELETE THIS ⚠️>
/*
✅ The text of the title should change when the mouse is on top of it.
✅ The text of the title should change when the mouse is leaves it.
✅ When the window is resized the title should change.
✅ On right click the title should also change.
✅ The colors of the title should come from a color from the colors array.
✅ DO NOT CHANGE .css, or .html files.
✅ ALL function handlers should be INSIDE of "superEventHandler"
*/
const title = document.querySelector("h2");
const superEventHandler = {
// 1. 마우스가 title(h2) 위로 올라가면 텍스트가 변경되어야 한다.
mouseOver: function () {
title.innerText = "마우스가 위에 있다.";
title.style.color = colors[0];
},
// 2. 마우스가 title(h2)을 벗어나면 텍스트가 변경되어야 한다.
mouseLeave: function () {
title.innerText = "마우스가 떠났다.";
title.style.color = colors[1];
},
// 3. 브라우저 창의 사이즈가 변하면 title(h2)이 바뀌어야 한다.
resize: function () {
title.innerText = "사이즈를 변경했다.";
title.style.color = colors[2];
},
// 4. 마우스 우클릭하면 title(h2)이 바뀌어야 한다.
contextMenu: function () {
title.innerText = "우클릭을 했다.";
title.style.color = colors[3];
}
};
title.addEventListener("mouseenter", superEventHandler.mouseOver);
title.addEventListener("mouseleave", superEventHandler.mouseLeave);
window.addEventListener("resize", superEventHandler.resize);
window.addEventListener("contextmenu", superEventHandler.contextMenu);✔ 기억하고 싶은 점
- console.dir(document)와 console.log(document)의 차이점
dir은 객체의 속성을 확인
log는 객체의 요소를 확인
✔ 완성 화면
반응형
'STUDY 📒 > Javascript' 카테고리의 다른 글
| [바닐라JS 챌린지] DAY 11 - Randomness (1) | 2024.03.01 |
|---|---|
| [바닐라 JS챌린지] DAY10 - Time Until Christmas! (1) | 2024.02.29 |
| [바닐라JS 챌린지] DAY 8, 9 - 카지노 (0) | 2024.02.27 |
| [바닐라JS 챌린지] DAY5 과제 (0) | 2024.02.23 |
