JS 6일차

기본 함수 중에 setTimeout() 이런게 있는데

 

자바스크립트 기본 함수 중에 setTimeout() 이라는게 있습니다.

이거 쓰면 X초 후에 코드를 실행해줍니다.

 

setTimeout(function(){ 실행할코드~ }, 기다릴시간);
위처럼 사용하면 됩니다.

시간은 ms 단위로 적으면 됩니다. (1ms는 1000분의 1초)

 

 

 

setTimeout(function(){ 
  console.log('안녕')
}, 1000);
위처럼 쓰면 1초 후에 콘솔창에 '안녕'이 뜹니다.

진짜인지 확인합시다. 

 

 

 

 

<div class="alert alert-danger">
  5초 이내 구매시 사은품 증정
</div>
그럼 이렇게 html을 짜놓고 이런 문제를 풀어봅시다. 

Q. 페이지 방문 5초 후에 위의 <div>를 숨기려면 코드를 어떻게 짜야할까요?

 

어떻게 했냐면
 

 

 

 

 

 

X초마다 코드를 실행하고 싶으면 setInterval()

 

X초마다 코드를 실행하고 싶으면 setTimeout() 을 연달아서 여러개 쓰거나

 

setInterval(function(){ 실행할코드~ }, 기다릴시간);
위처럼 setInterval 써도 됩니다.

그럼 X초마다 안에 있는 코드를 실행해줍니다. 

 

 

setInterval(function(){ 
  console.log('안녕')
}, 1000);
위처럼 쓰면 1초 마다 콘솔창에 '안녕'이 뜹니다.

진짜인지 확인합시다. 

 

 

 

 

 

 

잠깐상식 : 자바스크립트 문법 vs 브라우저 사용법

 

var let const if function

이런건 자바스크립트 프로그래밍 문법입니다.

 

document.querySelector()

alert()

setTimeout()

addEventListener()

이런건 웹브라우저 사용법입니다.

 

여러분들 웹개발 잘하고 싶으면 자바스크립트 문법만 배우면 안됩니다.

웹브라우저 사용법도 많이 알아야 이쁜 UI도 만들고 폼 기능도 만들고 이벤트도 걸고 그럴 수 있으니까요.

 

웹브라우저 사용법가지고 코드짜다가 

코드 약간 줄이고 싶으면 function

자료를 잠깐 보관하고 싶으면 var

코드를 조건부로 실행하고 싶으면 if

이런거 쓰면 되는 것일 뿐입니다. 

 

 

 

 

 

 

콜백함수관련 짧은 테크닉

 

그냥 함수 파라미터 자리에 들어가는 함수를 콜백함수라고 합니다.

addEventListener(), setTimeout() 이런건 안에 콜백함수를 요구합니다.

왜 콜백함수가 필요하냐고요? setTimeout 이런거 만든 사람이 그래야 작동하도록 만들어놔서 그렇습니다.

불만이 있으면 그 사람에게 따지도록 하고

 

 

중요한 점은 콜백함수도 일종의 함수기 때문에

다른 곳에서 만든 함수를 집어넣어도 잘 작동한다는 겁니다. 

 

 

 

 

setTimeout(함수, 1000);

function 함수(){ 
  console.log('안녕')
}
예를 들어 아까랑 다르게 이렇게 써도 잘 됩니다. 1초 후에 '안녕' 잘 출력됨

그래서 콜백함수자리에 있는 코드가 좀 더러우면 

다른 곳에서 함수로 만들어놓고 그 함수 이름만 콜백함수자리에 집어넣는 식으로 코드짜도 됩니다.

저렇게 코드짜는건 자기 맘이니 싫으면 말도록 합시다

문자 검사하는 가장 쉬운 방법 

 

'문자'.includes('찾을단어')
아무 문자나 뒤에 .includes() 붙일 수 있습니다.

그럼 문자에 찾을 단어가 들어있는지 검사해주고 있으면 true / 없으면 false 남겨줍니다.

진짜인지 콘솔창에 출력해보든 해서 확인해봅시다. 

 

하지만

- 한글이 들어있냐

- 영어가 들어있냐

- A로 끝나냐

- 마침표 다음에 영어가 있냐 

이런건 includes() 만으로 검사하기 어렵습니다. 

 

 

 

 

 

정규표현식 (regular expression)

 

줄여서 정규식은 문자를 검사하고 싶을 때 사용하는 식입니다. 

"어떤 문자에 'abc'라는 단어가 들어가있냐?" 라고 물어보고 싶을 때 쓰시면 됩니다.

 

자바스크립트로 정규식을 어떻게 표현하냐면 

/abc/
이게 끝입니다.

그러면 이제 abc라는 단어가 있냐~? 라고 물어볼 준비가 된겁니다.

 

 

그럼 abcdef라는 문자에 abc라는 단어가 있는지 검사해보도록 합시다. 

/abc/.test('abcdef')
/정규식/.test(정규식으로 검사해볼문자) 쓰면 됩니다.

진짜 들어있으면 true를 남기고 없으면 false를 남겨줍니다. 

 

 

 

 

 

몇개만 배워보는 정규식 문법

 

정규식 문법은 너무 많아서 필요할 때 찾아쓰면 족합니다. 

자주 쓰는 몇개만 알아보도록 합시다. 

 

 

/a/.test('abcde')  //true 
영어나 한글의 경우 그냥 쓰면 글자가 있는지 없는지 물어볼 수 있습니다. 

 

 

/[a-d]/.test('aefg')  //true
/[가-다]/.test('다라마바')  //true
[ ] 기호를 이용해서 문자 범위를 지정할 수 있습니다.

[a-z] 는 a부터 z까지 아무문자 하나를 의미합니다.

 

/[a-d]/.test('aefg')

▲ 그래서 이건 a부터 d까지의 아무 문자하나가 저기 있냐라고 검사하는 겁니다. 

 

 

/[a-zA-Z]/.test('반가워요')  //false
/[a-zA-Z]/.test('반가워요a') //true
/[ㄱ-ㅎ가-힣ㅏ-ㅣ]/.test('반가워요')  //true
[a-zA-Z] 이건 아무 알파벳 하나라는 뜻입니다. 

[ㄱ-ㅎ가-힣ㅏ-ㅣ] 이건 아무 한글 하나라는 뜻입니다. 

 

 

 

/\S/.test('abcde')   //true  
백슬래시S 는 특수문자 포함 아무문자 1개라는 뜻입니다. 

자판의 원화기호가 백슬래시입니다.

 

 

 

 

/^a/.test('abcde')   //true
/e$/.test('abcde') //true  
^a 라고 적으면 a로 시작하는지 검사할 수 있습니다.

e$ 라고 적으면 e로 끝나는지 검사할 수 있습니다.

 

 

 

/(e|f)/.test('abcde')   //true
| 이건 or 기호입니다.

그래서 위 코드는 e 또는 f중 아무거나 한 문자가 있나 검사가능합니다.

정규식에선 괄호맘대로 칠 수 있습니다. 

 

 

 

/a+/
+ 기호를 붙여주시면 뒤에 오는 글자들도 a와 일치하면 반복해서 쭉 찾아달라는 뜻입니다.

왜냐면 /a/는 a를 다 찾으라는게 아니라 a 한개를 찾으라는 뜻입니다.

aaaaa 이런걸 찾고 싶으면 /a+/ 쓰면 됩니다. 

 

 

 

/\S+t/
이건 그럼 뭘까요.

-> 모든 문자 여러개 다음에 t라는 글자가 있냐를 검사해주는 정규식입니다. 

aaaaat 

bbt

이런 것들을 잘 찾아주겠군요. 

 

 

 

 

간단히 작성해보는 이메일 정규식 

 

이메일은 어쩌구@어쩌구.어쩌구 이렇게 되어야합니다.

모든 문자 사이에 @ 그리고 .이라는 특수문자가 와야합니다. 

 

/\S+@\S+\.\S+/
이렇게 쓰면 되겠습니다.

\. 이라는 기호는 왜 이렇게 썼냐면 마침표는 정규식에서 특수한 문법이기 때문에

마침표 문법을 쓰는게 아니라 진짜 마침표를 찾아달라라는 의미로 쓰려면 백슬래시를 앞에 붙여야합니다.

 

 

 

 

그럼 폼전송시 이메일 형식 검증은 어떻게 할까요

 

 

공백검사랑 별 차이가 없습니다.

저번 강좌에서 공백검사 부분을 작성했는데 공백검사 부분 대신에 

이메일 정규식과 부합하는지 검사를 해주시면 되겠죠? 

 

 

$('form').on('submit',function(e){

  var 입력한값 = document.getElementById('email').value;
  if ( /\S+@\S+\.\S+/.test(입력한값) ){
    alert('이메일형식아님')
    e.preventDefault();
  }

});
예전 코드를 살짝 업그레이드했습니다.

- form 전송시

- 유저가 <input>에 입력한걸 찾아서

- 정규식으로 이메일 테스트했을 때 false가 나오면 

- 폼 전송을 막거나 alert() 를 띄우거나 맘대로 하면 됩니다. 
  스크롤 이벤트리스너 

 

window.addEventListener('scroll', function(){
  console.log('안녕')
});
스크롤바를 조작하면 scroll 이벤트가 발생합니다.

그래서 scroll 이벤트리스너를 전체 페이지에 달면

전체 페이지를 스크롤할 때마다 원하는 코드를 실행할 수 있습니다.

진짜 스크롤바 만질 때 마다 '안녕' 출력되나 봅시다. 

 

참고로 window는 그냥 전체 페이지를 의미합니다.

실은 document도 전체 페이지입니다. window가 약간 더 큰 개념인데 scroll 이벤트리스너는 관습적으로 window에 붙임 

 

 

 

 

 

 

스크롤 관련 유용한 기능들

 

스크롤 이벤트리스너안에서 쓰는 유용한 기능들이 몇개 있습니다. 

 

window.addEventListener('scroll', function(){
  console.log( window.scrollY )
});
window.scrollY 사용하면 현재 페이지를 얼마나 위에서 부터 스크롤했는지 px 단위로 알려줍니다.

매우유용

window.scrollX 는 가로로 얼마나 스크롤했는지 알려줍니다. (가로 스크롤바가 있으면)

 

 

window.scrollTo(0, 100)
window.scrollTo(x, y) 실행하면 강제로 스크롤바를 움직일 수 있습니다.

위 코드는 위에서부터 100px 위치로 스크롤해줍니다.

 

 

window.scrollBy(0, 100)
window.scrollBy(x, y) 실행하면 현재 위치에서부터 스크롤해줍니다.

위 코드는 현재 위치에서부터 +100px 만큼 스크롤해줍니다.

 

 

근데 원래 저거 실행하면 스크롤 위치가 순간이동해야되는데

bootstrap을 설치했을 경우 이상하게 천천히 이동할 수 있습니다.

그게 싫으면 :root { scroll-behavior : auto } 이걸 css 파일 맨 위에 추가합시다. 

 

 

 

 

$(window).on('scroll', function(){
  $(window).scrollTop();
})
jQuery 버전은 더 짧습니다.

$(window).scrollTop() 이거 쓰면 아까처럼 현재 페이지 스크롤 양을 알려줍니다.

근데 간편한건 $(window).scrollTop(100) 이러면 페이지 강제이동도 해줌 

 

필요한건 다 알려줬으니 오늘 숙제로 문제1 기능 완성해오면 됩니다. 

 

 

 

 

 

 

문제 2. 박스 끝까지 스크롤시 알림띄우기

 

<div class="lorem" style="width: 200px; height: 100px; overflow-y: scroll">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae voluptas voluptatum minus praesentium fugit debitis at, laborum ipsa itaque placeat sit, excepturi eius. Nostrum perspiciatis, eligendi quae consectetur praesentium exercitationem.
</div> 
위 박스를 아무데나 추가합시다.

회원약관인데 이 박스를 끝까지 스크롤하면 alert() 이런걸 띄우고 싶은겁니다.

그럼 코드를 어떻게 짜야할까요 

 

 

div 스크롤바 내린 양 == div 실제높이일 경우 alert 띄워주세요~

이렇게 짜면 될듯요? 근데 

"페이지 스크롤바 내린 양" 구하는건 배웠는데 

"div 박스 스크롤바 내린 양" 구하는 법은 안배웠습니다. 

 

 

 

 

div 박스의 스크롤바 내린 양은 

 

박스를 셀렉터로 찾고 .scrollTop 붙이면 스크롤바를 위에서 부터 얼마나 내렸는지 알려줍니다.

 

$('.lorem').on('scroll', function(){
  var 스크롤양 = document.querySelector('.lorem').scrollTop;
  console.log(스크롤양);
});
콘솔창에 진짜 출력되는군요.

실은 현재 페이지 스크롤양도 .scrollTop으로 구할 수 있습니다. html 태그 찾아서 .scrollTop 붙이면 됩니다. 

 

 

 

 

 

div 박스 높이 구하는 법 

 

스크롤바가 생긴 박스의 경우 실제 높이같은게 궁금할 수 있습니다. 

박스에 스타일로 넣은 height : 100px 이거 말고 스크롤가능한 실제높이 말입니다.

그럴 땐 셀렉터로 찾아서 .scrollHeight 붙이면 나옵니다.

 

$('.lorem').on('scroll', function(){
  var 스크롤양 = document.querySelector('.lorem').scrollTop;
  var 실제높이 = document.querySelector('.lorem').scrollHeight;
  console.log(스크롤양, 실제높이);
});
콘솔창에 진짜 출력되는군요.

참고로 박스가 화면에 보이는 부분 높이는 .clientHeight 하면 나옵니다.

document.querySelector('.lorem').scrollHeight; 해보셈 

 

 

 

이제 아까 짜려던 코드를 봅시다. 

 

 

div 스크롤바 내린 양 == div 실제높이일 경우 alert 띄워주세요~

▲ 뭔가 이상한데요 

스크롤바를 끝까지 내려도

스크롤바 내린 양은 188.x

div 실제높이는 288이 나옵니다. 

같다고 비교하면 뭔가 안될 것 같군요.

 

 



 

▲ 왜냐면 스크롤바 내린 양은 진짜 스크롤바 내린 양일 뿐이라 그렇습니다. 

거기에 박스가 보이는 높이는 포함안함 

 

 

 

div 스크롤바 내린 양 + div가 화면에 보이는 높이 == div 실제높이일 경우 alert 띄워주세요~

라고 코드짜면 될듯 합니다. 

알아서 숙제로 기능구현해오면 되겠습니다. 

 

하지만

스크롤 내린 양은 정수단위로 나오지 않고

OS 마다 부정확해서 여유를 두고 비교하는게 좋습니다. 

그래서 끝까지 스크롤했냐~ 체크하는 것 보다 

끝에서 10px 정도 남기고 스크롤했냐~ 라고 체크해봅시다.