setTimeout이란 어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야 하는 경우에 사용하는 자바스크립트 함수입니다.
setTimeou(); 이렇게 작성하고 괄호 안에 실행할 코드와 시간을 작성합니다. 시간은 ms로 되어 있습니다.
작성방법
setTimeout(function(){실행할 코드}, ms);
setTimeout(함수, 1000);
function 함수() {
console.log('안녕');
}
// 또는
setTimeout(function(){
실행할 코드
}, 1000);
setInterval이란 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용합니다.
setInterval(); 이렇게 작성하고 괄호 안에 실핼할 코드와 시간을 작성합니다. 이 함수 또한 시간은 ms로 되어 있습니다.
작성방법
setInterval(함수1, 1000);
function 함수1() {
console.log('안녕');
}
// 또는
setInterval(function() {
console.log('안녕');
}, 1000)
정규표현식 (정규식)
정규표현식이란 사전적인 의미로 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어라고 합니다. 사용자의 전화번호 검색, 패스워드 사용, 사용 등록과 같은 문자열에서 특정한 조건을 표현해야 되는 경우에 일반적인 반복문, 조건문의 구현으로는 다소 복잡해질 수 있습니다. 이 부분에서 정규표현식의 사용이 매우 간단하게 특정 조건들을 표시하고, 빠르고 효율적인 기능 수행을 할 수 있도록 도울 수 있습니다.
리터럴을 이용한 생성 방법 리터럴이란 변수의 값이 변하지 않는 데이터 그 자체를 의미합니다. 슬래시(/)와 슬래시(/) 사이에 검색할 문자열 패턴을 넣고, 슬래시가 끝나는 순서에 필요에 따라 플래그를 추가할 수 있습니다. 정규표현식은 리터럴을 사용하는 것이 일반적인 방법이며, 리터럴을 사용하면 정규표현식 객체가 생성됩니다.
플래그 플래그란 정규표현식의 옵션이므로 선택적으로 사용이 가능합니다. 순서와 상관없이 하나 이상의 플래그를 동시에 설정할 수 있습니다. 플래그를 사용하지 않는 경우에는 문자열 내 검색 대상이 1개 이상이더라도 첫번째 조건 대상만을 검색하고 종료하게 됩니다. 대표적인 플래그는
밑 코드에서 jquery 문법을 보면 css 이벤트를 볼 수 있는데 Jquery 문법에서 css 변화를 위한 코드 작성법은 $('선택자').css(css문법); 이렇게 작성하고 괄호 안에는 한가지 css 변화는 '변화시키고 싶은 기능', '변화시킬 값' 이렇게 작성하시면 됩니다.
css의 transform : translate()
transform : translate() = translate(x, y) 함수는 요소를 왼쪽에서부터 x거리, 위에서부터 x 거리만큼 상대적으로 위치를 정하거나, 이동 및 재배치를 지정합니다. y 방향의 거리는 생략할 수 있지만, 이 경우의 y 방향의 거리는 0이 됩니다.
transform : translateX() = translateX(거리) 함수는 좌우(수평방향)의 이동 거리 값을 지정합니다.
transform : translateY() = translateY(거리) 함수는 상하(수직방향)의 이동 거리 값을 지정합니다.
transform : translateZ() = translateZ(거리) 함수는 z 방향의 거리로 이동을 지정합니다. 이 함수는 백분율 값으로 지정할 수 없습니다. 백분율로 값을 지정해도 0이 됩니다.
우선 스크롤은 Jquery나 js 형식에 따라서 생성하는 방법도 있지만 css로 생성하는 방법도 있습니다. css 파일에 overflow: scroll;를 입력하면 됩니다.
scroll의 몇가지 기능
scrollTo(x좌표, y좌표) = 괄호 안에 원하는 좌표값(숫자)를 입력하면 스크롤이 지정 위치로 이동합니다. 만약 y스크롤이 없다면 괄호 안에 숫자값 하나만 이력하면 지정한 x좌표로 이동하고 만약 x스크롤이 없다면 괄호 안에 숫자값 하나만 이력하면 지정한 y좌표로 이동합니다.
scrollTop; = 선택한 요소 집합의 첫 번째 요소의 수직 스크롤 바의 위치를 얻거나, 선택된 요소의 수직 스크롤 바의 위치를 인수로 전달받은 값으로 설정합니다. 즉, 맨 처음부터 ~ 현재 화면에 보이는 부분까지의 길이를 말합니다.
scrollHeight; = 요소에 들어있는 컨텐츠의 전체 높이를 말합니다. 패딩과 테두리가 포함됩니다. 마진은 제외됩니다. 즉, 내용이 많아서 화면 바깥으로 빠져나간 부분까지를 포함한 전체 내용의 길이를 말합니다.
clientHeight; = 요소의 내부 높이를 말합니다. 패딩 값은 포함됩니다. 스크롤바, 테두리, 마진은 제외됩니다. 즉, 현재 화면에서 보이는 높이만을 말합니다.
scrollTop / scrollHeight / clientHeight
css에 대해서 한가지 말씀드리면, 위에서의 css는 한가지 css를 변화시키기 위한 코드이고 두가지 이상 css를 변경하고 싶으면 한가지 : 선택자.css('변경하고 싶은 기능', '변경할 값'); 두가지 이상 : 선택자.css('변경하고 싶은 기능' : '변경할 값', '변경하고 싶은 기능' : '변경할 값'); 이렇게 작성해서 사용하시면 됩니다.
scroll 이벤트 주의점이 있다면
scroll 이벤트리스너 안의 코드는 1초에 60번 이상 실행되기 때문에 컴퓨터에 부담을 줄 수 있습니다. 그렇기 때문에 바닥체크도 여러번 중복으로 해줄 수 있습니다.
<!document html>
<html lang="en">
<head>
<!--Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="main.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<title>scroll</title>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">JSLecture</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<div class="lorem">
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>
<script>
$('.lorem').on('scroll', function() {
var 스크롤양 = document.querySelector('.lorem').scrollTop;
var 실제높이 = document.querySelector('.lorem').scrollHeight;
var 높이 = document.querySelector('.lorem').clientHeight;
if (스크롤양 + 높이 == 실제높이) {
alert("약관에 동의");
}
});
// 여기서 window란 현재 열려 있는 페이지
// 즉, 현재 화면
// window.addEventListener('scroll', function() {});
// Jquery 사용한 방법
$(window).on('scroll', function() {
if ($(window).scrollTop() >= 110) {
$('.navbar-brand').css({'transition':'0.5s','font-size':'15px'});
$('.navbar').css('height','50px');
} else {
$('.navbar-brand').css({'transition':'0.5s','font-size':'25px'});
$('.navbar').css('height','65px');
}
});
document.querySelector('.navbar-toggler').addEventListener('click', function() {
document.querySelector('.list-group').classList.toggle('show');
});
</script>
<div style="height: 1000px;"></div>
<div style="overflow: hidden">
<div class="slide-container">
<div class="slide-box"></div>
<img src="image/1.png">
<div class="slide-box"></div>
<img src="image/2.png">
<div class="slide-box"></div>
<img src="image/3.png">
</div>
</div>
<button class="before">이전</button>
<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>
<button class="next">다음</button>
<script>
var count = 0;
$('.slide-1').on('click', function() {
$('.slide-container').css('transform', 'translateX(0vw)');
});
$('.slide-2').on('click', function() {
$('.slide-container').css('transform', 'translateX(-100vw)');
});
$('.slide-3').on('click', function() {
$('.slide-container').css('transform', 'translateX(-200vw)');
});
$('.before').on('click', function() {
$('.slide-container').css('transform', `translateX(-${count}00vw)`);
count--;
});
$('.next').on('click', function() {
$('.slide-container').css('transform', 'translateX(-' + count + '00vw)');
count++;
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
