1. SetTimeout()
1-1. setTimeout()이란?
자바스크립트 기본 함수중에 setTimeout()이라는게 있는데
x초 후에 코드를 실행해준다.
시간은 ms 단위로 적으면된다. (1ms는 1000분의 1초)
위처럼 적으면 1초후에 콘솔창에 '안녕'이 뜬다.
2. X초마다 코드를 실행시키고 싶다면?
2-1. setInterval()
x초마다 코드를 실행하고 싶으면 setTimeout()을 연달아서 여러개 쓰거나,
위처럼 setInterval()을 사용해도된다.
그러면 x초마다 안에있는 코드를 실행시켜준다.
위처럼 적으면 1초 마다 콘솔창에 '안녕'이 뜬다.
3. 문자 검사하기
3-1. .includes()
아무 문자나 뒤에 .includes()를 붙일 수 있습니다.
문자에 찾을 단어가 들어있는지 검사해주고 있으면 true/없으면 false를 남겨준다.
하지만
-한글이 들어있냐
-영어가 들어있냐
-A로 끝나냐
-마침표 다음에 영어가 있냐
이런건 includes()만으로 검사하기 어렵다
3-2. 정규표현식 (regular expression)
줄여서 정규식은 문자를 검사하고 싶을 때 사용하는 식이다.
'어떤 문자에 abc라는 단어가 들어가있어?'라고 물어보고 싶을 때 쓰면 된다.
자바스크립트로 정규식을 어떻게 표현하냐면
이게 끝이다.
이제 abc라는 단어가 들어가있어? 라고 물어볼 준비가 된거다.
어떤 문자에 abc라는 단어가 있는지 검사하는 방법은
/정규식/.test('정규식으로 검사해볼 문자')를 쓰면 된다.
들어있으면 true , 없으면 false를 남겨준다
3-3. 정규식 문법
[]기호를 이용하여 문자 범위를 지정할 수 있다.
[a-z]는 a부터 z까지 아무문자 하나를 의미한다.
[a-zA-Z] 이건 아무 알파벳 하나라는 뜻이고
[ㄱ-ㅎ가-힣ㅏ-ㅣ] 이건 아무 한글 하나라는 뜻이다.
백슬래시S 는 특수문자 포함 아무문자 1개라는 뜻이다.
^a 라고 적으면 a로 시작하는지 검사할 수 있고
e$ 라고 적으면 e로 끝나는지 검사할 수 있다.
| 이건 or 기호인데
위 코드는 e 또는 f중 아무거나 한 문자가 있나 검사한다.![]
+ 기호를 붙여주시면 뒤에 오는 글자들도 a와 일치하면 반복해서 쭉 찾아달라는 뜻이다.
aaaaa 이런걸 찾고 싶으면 /a+/ 쓰면 된다.
3-4. 간단히 작성해보는 이메일 정규식
이메일은 어쩌구@어쩌구.어쩌구 이렇게 되어야하는데
모든 문자 사이에 @ 그리고 .이라는 특수문자가 와야한다.
. 이라는 기호는 왜 이렇게 썼냐면 마침표는 정규식에서 특수한 문법이기 때문에
마침표 문법을 쓰는게 아니라 진짜 마침표를 찾아달라라는 의미로 쓰려면 백슬래시를 앞에 붙여야 한다.
4. 소수점 반올림
4-1. .toFixed()
숫자를 반올림 하고싶다면 숫자.toFixed(몇자리) 이거 쓰면 됩니다 모든 숫자 뒤에 붙일 수 있다.
근데 문제점은 이렇게 하고 나면 '문자'로 변환해준다
'123'과 123은 다른 타입이라 주의해서 써야한다.
4-2. '숫자'를 숫자로 변환하고 싶으면
이렇게 쓰면 123을 그자리에 남겨준다
문자처럼생긴 숫자를 숫자로 변경해주는 유용한 함수이다.
parselnt()는 정수로, parseFloat()는 실수로 변환해 준다.
5.Scroll
5-1. 스크롤 이벤트리스너
스크롤바를 조작하면 scroll 이벤트가 발생한다
그래서 scroll 이벤트리스너를 전체 페이지에 달면
전체 페이지를 스크롤할 때마다 원하는 코드를 실행할 수 있다.
참고로 window는 그냥 전체 페이지를 의미한다.
document도 전체 페이지이지만 window가 약간 더 큰 개념인데 scroll 이벤트리스너는 관습적으로 window에 붙인다.
5-2. 스크롤 관련 유용한 기능들
window.scrollY 사용하면 현재 페이지를 얼마나 위에서 부터 스크롤했는지 px 단위로 알려준다.
window.scrollX 는 가로로 얼마나 스크롤했는지 알려줍니다. (가로 스크롤바가 있으면)
window.scrollBy(x, y) 실행하면 현재 위치에서부터 스크롤해준다
위 코드는 현재 위치에서부터 +100px 만큼 스크롤해준다
div 박스의 스크롤바 내린양은?
박스를 셀렉터로 찾고 .scrollTop 붙이면 스크롤바를 위에서 부터 얼마나 내렸는지 알려준다.
현재 페이지 스크롤양도 .scrollTop으로 구할 수 있는데 html 태그 찾아서 .scrollTop 붙이면 된다.
div 박스 높이 구하는 법
div박스의 스크롤 가능한 실제 높이를 구하는 방법은 셀렉터로 찾아서 .scrollHeiht붙이면 나온다.
화면에 보이는 부분의 높이는 .clientHeight 하면 나온다.
좋은 관습 : 반복적인 셀렉터는 변수에 넣어서 쓰기
셀렉터 문법은 기본적으로 작동시간이 오래걸립니다.
셀렉터 하나 쓸 때 마다 html을 쭉 읽고 찾아야해서 오래걸리는 것입니다.
html이 길고 복작할수록 더 오래걸립니다.
그래서 셀렉터가 반복적으로 등장하면 그냥 변수에 넣어서 쓰면된다.
6. for 반복문
6-1. 코드를 복붙하고 싶으면 for반복문
for(횟수){
반복할 코드
{이렇게 쓰면 안의 코드를 반복실행해준다.
횟수 넣는 부분은 위 이미지처럼 써야한다.
i를 0부터시작해서 / i에 1씩 더해가면서 반복실행해라 / 근데 i<3까지
라는뜻이라 3번 반복실행하라는 뜻이다.
7. 이벤트 버블링
7-1. 이벤트 버블링이란?
어떤 HTML 태그에 이벤트가 발생하면
그의 모든 상위요소까지 이벤트가 실행되는 현상을 이벤트 버블링이라고 한다.
click이라는 이벤트로 예를 들어보면,
HTML 태그에 클릭이 발생하면 그의 모든 상위요소까지 자동으로 클릭된다.
7-2. 이벤트리스터 안에서 쓰는 이벤트 함수들
이벤트리스너의 콜백함수에 파라미터 아무거나 추가하면
이벤트관련 유용한 함수들을 사용가능하다
파라미터 이름은 아무렇게나 작명하면 되는데 보통 e라고 합니다.
e.target은 실제 클릭한 요소 알려줌 (이벤트 발생한 곳)
e.currentTarget은 지금 이벤트리스너가 달린 곳 알려줌 (참고로 this라고 써도 똑같음)
e.preventDefault() 실행하면 이벤트 기본 동작을 막아줌
e.stopPropagation() 실행하면 내 상위요소로의 이벤트 버블링을 중단해줌
