Javscript 변수 var let const 차이점 / 타이머 / 정규표현식 / 스크롤이벤트

변수선언 var let const 차이점

타이머 명령어

setTimeout(function(){ 실행할코드 }, 기다릴시간); // '실행할 코드'를 '기다릴시간' 후에 출력

setInterval(function(){ 실행할코드 }, 기다릴시간); // '실행할 코드'를 '기다릴시간' 마다 출력

응용예제

5초 카운트다운을 만들고 0초가 될시 해당 div display none

• HTML

<div class="alert">
    <span class="count">5</span>초 카운트다운
</div>

• JavaScript

var count = 5; // count 변수에 5 입력
setInterval(function(){ // 1초마다 해당 코드 반복실행
    count--; // count 의 값을 1씩 감소
    if ( count > 0 ){ // 카운트 값이 0보다 클시
        document.querySelector('.count').innerHTML = count; // class = count 의 html을 count 변수값 삽입
    } else{
        document.querySelector('.alert').style.display = 'none'; // class = alert 코드를 display none
    }
}, 1000);

정규표현식 (regular expression)

/a/.test('abcde')  // 입력값에 a 가 포함되어있는지 true
/[a-z]/.test('abcdefz')  // 입력값에 a - z 가 포함되어있는지 true
/[a-zA-Z]/.test('반가워요')  //false
/[a-zA-Z]/.test('반가워요a') //true

/\S/.test('abcde')   // \S - 특수문자 포함 아무문자 1개라도 있을경우 true
/^a/.test('abcde')   // a로 시작하는 경우 true
/e$/.test('abcde') // e로 끝나는 경우 true  

/(e|f)/.test('abcde')   // e 또는(or) f 가 있을경우 true
/a+.test('aaaaaa') // a 라는 입력값을 반복해서 찾는경우 true

스크롤 이벤트

스크롤바를 조작하면 scroll 이벤트가 발생한다.
scroll 이벤트리스너를 통하여 스크롤 할때 이벤트를 발생시킬 수 있다.

window.addEventListener('scroll', function(){ // 화면 스크롤을 내릴 시 console.log '안녕' 출력
  console.log('안녕')
});

window.scrollTo(0, 100) // 위에서부터 100px 위치로 스크롤해줌
window.scrollBy(0, 100) // 현재위치에서부터 100px 위치로 스크롤해줌
window.scrollTop // 위에서부터 얼마나 내렸는지 알려줌
window.scrollHeight // 스크롤가능한 실제높이를 알려줌
window.clientHeight // 현재보이는화면의 높이를 알려줌

• 주의사항

1. 웹페이지 scrollHeight 구할 땐 브라우저마다 아주 약간의 오차가있을 수 있어서 꼭 테스트 해보기

2. 웹페이지 scrollHeight 구하는 코드는 페이지 로드가 완료되고나서 실행해야 정확하다. 항상 태그 끝나기 전에 적는게 좋다