JavaScript/정예반 수업

[정예반]

heediv 2023. 6. 23. 11:15
반응형

목차

1. 모달창 외부 클릭 닫기로 이벤트 버블링 학습하기

2. 배달팁 계산기로 함수의 return 학습

3. 스크롤 이벤트 학습

4. 탭 메뉴로 마우스오버와 for문 학습

5. setTimeout으로 광고창 자동 닫기

6. setInterval로 10초 타이머 만들기

7. 캐러셀 구현으로 이벤트와 애니메이션 학습

 

1. 모달창 외부 클릭 닫기로 이벤트 버블링 학습

event.target 사용자가 누른 태그, 내가 클릭한 그놈

event.currentTarget 이벤트 등록된 태그 선택, 이벤트 등록한 그놈

event.preventDefault 기본동작막음

event.stopPropagation 이벤트 버블링을 막아줌

 

 

참고. <input placeholder = ""> input 창 내부에 글씨 입력

 

const btn = document.querySelector("button");
const span = document.querySelector("span");

btn.addEventListener("click", () => {
	//클릭했을 때 -> input의 입력한 값을 가져와야함
	const input = document.querySelector("input");
	if (input.value < 10000) {
		span.innerHTML = 3000;
	} else if (input.value >= 10000 && input.value < 30000) {
		span.innerHTML = 2000;
	} else if (input.value >= 30000 && input.value < 50000) {
		span.innerHTML = 1000;
	} else {
		span.innerHTML = 0;
	}
});

 

함수로 빼기

const btn = document.querySelector("button");
const span = document.querySelector("span");

function 배달팁계산() {
	const result = document.querySelector("input").value;
	if (result < 10000) {
		span.innerHTML = 3000;
	} else if (result >= 10000 && result < 30000) {
		span.innerHTML = 2000;
	} else if (result >= 30000 && result < 50000) {
		span.innerHTML = 1000;
	} else {
		span.innerHTML = 0;
	}
}

btn.addEventListener("click", () => {
//클릭했을 때 -> input의 입력한 값을 가져와야함
배달팁계산();
});

return 새로운값으로 교체

const btn = document.querySelector("button");
const span = document.querySelector("span");

function 배달팁계산() {
  const result = document.querySelector("input").value;
  if (result < 10000) {
    return 3000;
  } else if (result >= 10000 && result < 30000) {
    return 2000;
  } else if (result >= 30000 && result < 50000) {
    return 1000;
  } else {
    return 0;
  }
}

btn.addEventListener("click", () => {
  //클릭했을 때 -> input의 입력한 값을 가져와야함
  span.innerHTML = 배달팁계산();
});​

return이 되어버리면 끝남! 뒤로 안넘어감

3. scroll 이벤트

JS에서 전체 브라우저에 적용하려면 window사용 (예: window.addEventListner)

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" />
    <title>Document</title>
    <link rel="stylesheet" href="scroll.css" />
  </head>
  <body>
    <main>
      <h1>본문입니다.</h1>
      <button class="up-button">업!</button>
    </main>
    <script src="scroll.js"></script>
  </body>
</html>

JavaScript

// document.querySelector(".up-button").classList.add("show");
const upButton = document.querySelector(".up-button");

window.addEventListener("scroll", () => {
  //현재 스크롤위치 확인하기
  console.log(scrollY);
  //스크롤이 100쯤 됐을때 버튼 나오게하기
  if (scrollY > 100) {
    upButton.classList.add("show");
  } else {
    upButton.classList.remove("show");
  }
});

//버튼을 클릭하면 올라오기(scrollTo)
upButton.addEventListener("click", () => {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth",
  });
});

CSS

main {
  height: 300vh;
  /* view height 보이는 것의 3배 */
  background-color: bisque;
}

.up-button {
  /* 1. 스크롤 상관없이 우리가 보는 화면에서 특정 위치 고정 */
  position: fixed;
  /* 2. 우측 아래에 두기 */
  right: 24px;
  bottom: 24px;

  display: none;
}

.show {
  display: block;
}

 

4. 5초후에 광고 닫기 setTimeout

setTimeout(() => {
  console.log("뙇!");
}, 3000);

3초후에 console에 뙇! 이 뜬다

 

 

반응형