🤓천재교육 풀스택 1기 노트

천재교육 풀스택 과정 1기 Day7

개발자는신이야 2023. 5. 18. 16:23

Event Listener

https://yoonjong-park.tistory.com/entry/addEventListener-%EC%9D%B4%EB%B2%A4%ED%8A%B8%EB%A6%AC%EC%8A%A4%EB%84%88-%EC%A2%85%EB%A5%98

 

addEventListener 이벤트리스너 종류

개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고,

yoonjong-park.tistory.com

 

Window 객체

  • 열려 있는 브라우저 윈도우나 탭 윈도우의 속성을 나타내는 객체
  • 브라우저 윈도우나 탭 윈도우마다 별도의 window 객체 생성

Window 객체의 생성 - 3가지의 경우

  • 브라우저가 새로운 웹 페이지를 로드할 때
  • <iframe> 태그 당 하나의 window 객체 생성
  • 자바스크립트 코드로 윈도우 열기 시 window 객체 생성
    • window.open("웹페이지 url", "윈도우 이름", "윈도우 속성");

자바스크립트 코드로 윈도우 객체에 대한 접근

  • window, 혹은 window.self 혹은 self

윈도우의 모양

Window 객체의 타이머 활용

  • 타임아웃 코드 1회 호출: setTimeout()/clearTimeout()
  • 타임아웃 코드 반복 호출: setInterval()/ckearInterval()

웹 페이지 스크롤

  • window.scrollBy(0,10); // 옆으로 0, 위로 10px
  • window.scrollBy(10, -15); // 윈쪽으로 10 아래로 15px 휠
  • window.scrollTo(0,200);

navigator 객체

screen, history