1.마우스를 이미지에 오버하면 이미지가 바뀌게 하기
<!DOCTYPE html>
<html lang="ko">
<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">
<title>퀴즈테스트</title>
<style>
#container {
width: 600px;
margin: 0 auto;
}
img {
width: 600px;
}
h3 {
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<h3>마우스 오버하면 이미지 랜덤으로 바꾸기</h3>
<img src="../mouse/img/mouseEffect01-min.jpg" alt="">
</div>우선 텍스트와 이미지을 넣어줍니다.
<script>
const cover = document.querySelector("#container img");
const covers = [
"../mouse/img/mouseEffect02-min.jpg",
"../mouse/img/mouseEffect03-min.jpg",
"../mouse/img/mouseEffect04-min.jpg",
"../mouse/img/mouseEffect05-min.jpg"
]
cover.addEventListener("mouseover", () =>{ //화살표함수
let random = Math.floor(Math.random()*4);
//console.log(random);
cover.src = covers[random]
// "../mouse/img/mouseEffect02-min.jpg"
});
cover.addEventListener("mouseout", function(){
cover.src = "../mouse/img/mouseEffect01-min.jpg"
});
</script>
</body>
</html>그 후 상수 cover를 만들어 querySelector를 이용해 아이디가container안에 img에 값을 가져오거나 변경 할 수 있습니다.
또 하나의 상수 covers 를 만들어 마우스를 오버 했을때 바뀔 이미지들을 배열에 넣어줍니다.
그리고 이벤트 함수인 'addEventListener' 를 이용해 이벤트 용어중 하나인 'mouseover'를 이용해 마우스를 오버 했을때 cover에 있는 이미지 src를 covers에있는 배열의 이미지로 랜덤하게 바뀌게 해주었습니다.
그리고 마우스가 이미지를 벗어낫을때 다시 원래 이미지로 바꾸기 위해 'mouseout' 을 사용하였습니다.
| 'addEventListener()' | HTML 요소에 이벤트 핸들러를 등록할 수 있도록 하는 내장 함수입니다. |
| 'mouseover' | HTML 요소에 마우스 커서가 올라갈 때 발생하는 이벤트입니다. |
| 'mouseout' | HTML 요소에서 마우스 커서가 벗어날 때 발생하는 이벤트입니다. |
| Math.random() | 내장된 함수 중 하나로, 0과 1 사이의 무작위 숫자를 반환합니다. 반환되는 값은 0보다 크거나 같고 1보다 작은 숫자입니다. |
| Math.floor() | 주어진 숫자를 내림하여 정수로 반환하는 자바스크립트 내장 함수입니다. 반환되는 값은 입력된 값과 같거나 작은 정수입니다. |
사이드에 숨어있는 메뉴창 클릭해서 불러오기
<!DOCTYPE html>
<html lang="ko">
<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">
<title>퀴즈테스트</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
margin:0;
min-height:100vh;
}
button {
position:fixed;
top:20px;
right:20px;
background-color:rgb(207, 114, 176);
padding:15px;
border:none;
outline: none;
color:white;
transition: transform 0.3s ease-in-out;
}
button.active {
transform:translateX(-110px);
}
nav {
position:fixed;
top:0;
right:0;
background-color:rgb(207, 114, 176);
height:100vh;
padding:2em;
transform:translateX(100%);
transition: transform 0.3s ease-in-out;
}
nav.active {
transform:translateX(0);
}
nav ul {
padding:0;
margin:0;
list-style: none;
}
nav ul li {
padding:1em 0;
}
nav a {
color:white;
text-decoration: none;
}
</style>
</head>
<body>
<button id="bttn">☰</button>
<nav id="nav">
<ul>
<li><a href="#">Javascript</a></li>
<li><a href="#">Typescript</a></li>
<li><a href="#">Node.js</a></li>
</ul>
</nav>
<script>
const bttn = document.querySelector('#bttn');
const nav = document.querySelector('#nav');
bttn.addEventListener('click', () => {
nav.classList.add('active'); //add 대신 toggle 을사용하면 클릭했을때 active를 지우거나 넣을수있습니다.
bttn.classList.add('active');
});
bttn.addEventListener('mouseout', () => {
nav.classList.remove('active');
bttn.classList.remove('active');
});
</script>
</body>
</html>우선 style에 사이드 메뉴를 만들고 class에 active값을 넣어주면 메뉴가 나오게 하도록 해주었습니다.
그후 위와 마찬가지로 상수를 만들어 값을 넣거나 가져오도록 querySelector를 사용해 id가 bttn인 것과 nav인것을 저장하였습니다.
그리고 'addEventListener()'를 사용해 메뉴 버튼을 'click'했을때 nav와 bttn의 클라스리스트에 active가 들어가도록 하였습니다. 그러면 css에 있는 active가 적용이 되어 사이드에서 메뉴가 나옵니다.
그리고 마우스가 메뉴와 메뉴버튼에서 벗어 났을때'mouseout'을 했을때 nav와bttn에 있는 클라스 리스트에서 active를 지우도록 하였습니다. 그러면 메뉴가 다시 사이드로 사라지는 것을 볼수있습니다.
| 'click' | HTML 요소를 마우스 클릭했을 때 발생하는 이벤트입니다. |
| 'add' | 데이터나 값을 추가하는 데 사용됩니다. |
| 'remove' | 요소에서 클래스를 제거하는 데 사용됩니다 |
| 'toggle' | 메소드를 사용하여 요소에 클래스를 추가하거나 제거하는 작업을 수행합니다 |
출처:Do it! 한권으로 끝내는 웹 개발 교과서 웹 개발모던 자바스크립트 프로그래밍의 정석 책