✔ setTimeout (2강)
▶ setTimeout
- X 초 후에 코드를 실행해주는 자바스크립트 기본 함수
setTimeout(function(){}, 시간);- 시간은 ms단위 (1ms는 1000분의 1초)
- 이 div를 5초 뒤에 숨기려면
setTimeout(function(){ // 새로고침 시 1회 실행! $('.alert').hide(); }, 1000);jQuery 함수인
.hide는diaplay:none과 비슷하게 작동
▶ setInterval
- X 초 마다 코드를 실행하고 싶을 때
setInterval(function(){
console.log('안녕') // 1초 마다 한 번씩 작동
}, 1000);▶ clearTimeout
- 타이머를 삭제하고 싶을 때
var timer = setInterval(function(){}, 5000); // 변수에 저장하고
clearTimeout(timer); // 삭제하고 싶을때 실행하는 코드▶ 사용 예
- 1초마다 5라는 문자를 1씩 감소시키고 0이 되면
<div>를 안보이게
var sec = 4;
setInterval(function(){
if(sec>0){
$('.alert').html(`${sec--}초 이내 구매 시 사은품 증정`);
} else {
$('.alert').hide();
}
}, 1000);
▶ 자바스크립트 문법 VS 브라우저 사용법
자바스크립트 문법
var,let,const,if,function등
웹브라우저 사용법
document.querySelector(),alert(),setTimeout(),addEventListener()등
▶ 콜백함수
- 함수 파라미터 자리에 들어가는 함수
- addEventListener(), setTimeout() 등에서 사용
- 다른 곳에서 만든 함수를 넣어 사용할 수 있음
setTimeout(hello, 1000); // function 자리에 다른 곳에서 정의한 함수명 들어감
function hello(){
console.log('안녕')
}✔ 정규식으로 이메일형식 검증 (3강)
▶ includes
'문자'.includes('찾을 단어')- 문자에 찾을 단어가 있으면 true 없으면 false 반환
- but. 한글이 들어있는지, 마침표 다음이 영어인지 등 판단 어려움
▶ 정규표현식(reqular expression)
- 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용됨
정규식/.test(정규식으로 검사해볼문자)로 확인 가능
정규식으로 이메일 & 비밀번호 검증
$('form').on('submit', function(e){
var userInputId = document.getElementById('firstInput').value;
var emailPattern = /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
var userInputPw = document.getElementById('secondInput').value;
if (userInputId == ''){
alert("아이디를 입력하세요.")
e.preventDefault(); // 폼 전송 막음
} else if (!emailPattern.test(userInputId)){
alert("유효한 이메일 형식을 입력하세요.");
e.preventDefault();
}else if (userInputPw == ''){
alert("비밀번호를 입력하세요.")
e.preventDefault();
} else if (userInputPw.length < 6){
alert("비밀번호는 6자리 이상 입력하세요.")
e.preventDefault();
} else if (!/[A-Z]/.test(userInputPw)){
alert("비밀번호에는 대문자가 1개 이상 포함되어야 합니다.")
e.preventDefault();
}
});이메일 패턴 -
/^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/
1. 로컬파트^[a-zA-Z0-9+-\_.]
: 첫 글자는 영어 대소문자 ,숫자 또는+``-,_,.중 하나로 시작하며 하나이상 나올 수 있음
2.@
3. 도메인의 첫 번째 부분[a-zA-Z0-9-]+
: 영어 대소문자, 숫자,-중 하나 이상 나올 수 있음
4.\.
:\는.문자를 이스케이프하여 실제 점을 찾도록 함
5. 도메인의 최상위 도메인[a-zA-Z0-9-.]+
: 영어 대소문자, 숫자,-,.중 하나 이상 올 수 있음
6.$문자열의 끝, 패턴 종료
정규식 더 알아보기
✔ 캐러셀 - 이미지 슬라이드 1 (4강)
▶ One-way 애니메이션
-
애니메이션 시작 전 화면 만들기
-
애니메이션 종료 후 화면 만들기
-
언제 종료화면으로 변할지 JS 코드짜기
-
transition 추가하기
▶ 이미지 슬라이드
JavaScript
<div class="slide-container">
<div class="slide-box">
<img src="laptop (2).jpeg">
</div>
<div class="slide-box">
<img src="laptop (3).jpeg">
</div>
<div class="slide-box">
<img src="laptop (4).jpeg">
</div>
</div>
<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>
<script>
$('.slide-2').on('click', function(){
$('.slide-container').css('transform', 'translateX(-100vw)');
});
$('.slide-3').on('click', function(){
$('.slide-container').css('transform', 'translateX(-200vw)');
});
$('.slide-1').on('click', function(){
$('.slide-container').css('transform', 'translateX(0vw)');
});
</script>- transform: translateX(200vw);
: 해당 요소를 화면에서 왼쪽으로 viewport 너비의 200% 만큼 이동시키는 CSS 설정
CSS
.slide-container{
width : 300vw; /*slide-box가 3개*/
/*margin-left:-100vw; 왼쪽으로 박스 이동*/
transition: all 1s; /* 1초 동안 모든 속성에 대해 부드럽게 전환 */
overflow : hidden;
}
.slide-box{
width:100vw;
float : left; /*왼쪽으로 박스 배치*/
}
.slide-box img{
width:100%;
}vw단위
: 브라우저 폭에 비례한 단위, 100vw는 브라우저 폭의 100%margin-left,transform속성
: html 요소를 왼쪽으로 이동시킴
✔ 캐러셀 - 이미지 슬라이드 2 (5강)
이전 & 다음 버튼
var currentPic = 1; // 현재 사진
var totalSlides = $('.slide-box').length; // 총 슬라이드 개수
// 이전버튼
$('.before').on('click', function() {
if (currentPic > 1) {
currentPic--;
$('.slide-container').css('transform', `translateX(-${(currentPic - 1)}00vw)`);
}
});
// 다음버튼
$('.next').on('click', function() {
if (currentPic < totalSlides) {
$('.slide-container').css('transform', `translateX(-${currentPic * 100}vw)`);
currentPic++;
}
});
ByeolGyu