TIL 18 - Javascript

TIL | 07.12의 기록

setTimeout

• 설정한 시간 간격으로 함수 반복 실행한다.
• setTimeout('호출할 함수명', 밀리초)
• clearTimeout(timeout객체) : 반복 호출 중지

scroll(스크롤)

• 스크롤 이동하기(상대위치) : window.scrollBy(x,y)
• 스크롤의 위치
  • 세로 스크롤 : window.scrollY, document.documentElement.scrollTop
  • 가로 스크롤 : window.scrollX
• 스크롤의 높이 : document.body.clientHeight, document.body.scrollHeight

cookie

• 쿠키정보를 확인하여 팝업창 띄우기 (쿠키정보가 존재하면 팝업을 띄우지 않음)
• var 변수명 = "name=value;path=/;expires=쿠키를 만료기간;...."
• document.cookie = 변수명; -> 쿠키 기록되는 시점

Document

• document의 다양한 메서드
  • document.title : 제목 설정하기
  • document.location / document.URL : 프로토콜, URL, port, 경로, 파일명
  • document.domain : 도메인
  • document.lastModified : 마지막 수정일시
  • document.bgColor : 배경색
  • document.linkColor/alinkColor/vlinkColor : 방문하지 않은 링크, 클릭하고 있는 링크, 방문한 링크 컬러 설정
  • document.cookie : 쿠키 저장
  • document.getElementById('id'), querySelector(#id) : 아이디 선택
  • document.getElementsByTagName('tag')[선택 태그의 인덱스] : 태그 선택
  • document.getElementsByClassName('class')[선택 클래스 인덱스] : 클래스 선택

Location

• URL 주소가 있는 부분을 뜻한다.
• location.protocol
• location.hostname
• location.port
• location.host : hostname+port
• location.reload : 현재 페이지 재실행
• location.href="이동할 사이트" : 페이지 이동

JS Event (이벤트)

• onclick : 마우스 클릭하면 이벤트 발생
• onmouseover : 마우스가 객체에 들어가면 이벤트 발생 (하위객체마다 이벤트 각각 발생함)
• onmouseout : 마우스가 객체에서 나오면 이벤트 발생 (하위객체마다 이벤트 발생)
• onmouseenter : 마우스가 객체에 들어가면 이벤트 발생 (하위객체에 이벤트 발생 안함)
• onmouseleave : 마우스가 객체에서 나오면 이벤트 발생 (하위객체에 이벤트 발생 안함)
• onmousedown : 마우스를 누른 상태일 때 이벤트 발생
• onmouseup : 마우스를 누른 후 놓으면 이벤트 발생
• onmousemove : 마우스를 움직이면 이벤트 발생