728x90
오랜만에 하는 예제입니다!! 문제는 모던 자바스크립트 프로그래밍의 정석 고경희님의 책에서 가져왔습니다.
1번 문제 : 마우스를 사진 위에 올렸을 때 다른사진이 나오게 하는 문제입니다.
<main>
<img src="../assets/img/svg-bread-egg.svg" alt="">
</main>
<script>
// 마우스를 올렸을 때
document.querySelector("img").addEventListener("mouseenter",()=>{
document.querySelector("img").setAttribute("src","../assets/img/svg-cheeseburger.svg");
});
// 마우스를 내렸을 때
document.querySelector("img").addEventListener("mouseout",()=>{
document.querySelector("img").setAttribute("src","../assets/img/svg-bread-egg.svg");
});
</script>- document.querySelector으로 img요소를 선택해 주었습니다.
- 그 후 addEventListener에 mouseenter를 사용하여 마우스를 가져다 놓았을 때 함수가 실행되도록 하였습니다.
- setAttribute를 사용하여 src라는 속성의 값을 원하는 속성값으로 바꾸어 주었습니다.
- 원하는 속성 값을 바꾸고 싶은 이미지 파일의 경로로 설정해주면 됩니다.
- 반대로 마우스가 사진을 벗어났을 때 는 mouseout를 사용해서 똑같이 만들어 주면 됩니다.
2번 문제 : 클릭하였을 때 nav가 나타나게해주는 문제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습문제 2</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:#639;
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:#639;
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>
document.querySelector("#bttn").addEventListener("click",()=>{
document.querySelector("#bttn").classList.toggle("active");
document.querySelector("#nav").classList.toggle("active");
});
</script>
</body>
</html>- 클릭했을 때 버튼과 nav에 active라는 클라스를 추가해주고 다시한번 클릭했을 때 없애주는 방식입니다.
- 그러면 클릭이라는 동일한 방법으로 클라스를 추가해주고 없애주어야 하는데 add와 remove로는 할 수 가 없습니다.
- 그럴 때 classList.toggle이라는 것을 사용하여야 합니다.
- toggle은 이벤트가 작동했을 때 class의 유무를 판단하여 있다면 없애주고 없다면 추가해주는 아주 멋찐 기능입니다.
- 그렇게 버튼을 클릭했을 때 함수를 실행시켜 주면 끝이납니당
- 끝!!