setTimeout()
X초 후에 코드를 실행해줍니다.
setTimeout(function(){ 실행할코드~ }, 기다릴시간);
// 시간은 ms 단위페이지 방문 5초 후에 <div>를 숨기기
<div class="alert alert-danger">
5초 이내 구매시 사은품 증정
</div>
<script>
setTimeout(function(){
$('.alert').hide();
}, 5000);
</script><script> 안에 적은 코드는 페이지 새로고침시 1회 실행됨
그러니 페이지 방문시 5초 후에 숨겨질 것이다
jQuery 함수인 .hide() 는 display : none 준거랑 비슷하게 동작
setInterval()
X초마다 코드를 실행
setInterval(function(){ 실행할코드~ }, 기다릴시간);X초마다 코드를 실행하고 싶으면 setTimeout() 을 연달아서 여러개 쓰거나 위처럼 setInterval 쓰면 됨.
숙제
<div>안에 "5초 이내 구매시 사은품 증정" 이라는 문자가 있는데,
1초마다 5라는 문자를 1씩 감소시키고 0이 되면<div>를 안보이게 처리하기
<div class="alert alert-danger">
<span id="num">5</span>초 이내 구매시 사은품 증정
</div>
<script>
let count = 5;
setInterval(function(){
count -= 1;
if (count >= 0){
document.querySelector('#num').innerHTML = count;
}
}, 1000);
</script>타이머 삭제
타이머를 삭제하고 싶으면
var 타이머 = setInterval(어쩌구);
이렇게 변수에 저장해둔 다음
타이머 삭제하고 싶을 때 clearTimeout(타이머) 이 코드 실행
정규표현식으로 includes
'문자'.includes('찾을단어')
/정규식/.test(정규식으로 검사해볼문자)
예제
abcdef라는 문자에 abc라는 단어가 있는지
/abc/.test('abcdef')들어있으면 true, 없으면 false
추가 정규표현식
/[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(\S) 는 특수문자 포함 아무 문자 1개라는 뜻
```js /^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라는 글자가 있냐를 검사해주는 정규식
이메일 정규식
/\S+@\S+\.\S+/ 어쩌구@어쩌구.어쩌구
어쩌구 사이에 .
.은 문법으로 쓰이면 안되니 백슬래시와 함께!
폼전송시 이메일 형식 검증
$('form').on('submit',function(e){
var 입력한값 = document.getElementById('email').value;
if ( /\S+@\S+\.\S+/.test(입력한값) ){
alert('올바른 이메일')
e.preventDefault();
}
});- form 전송시
- 유저가
<input>에 입력한걸 찾아서 - 정규식으로 이메일 테스트 후 alert()
영어 대문자가 적어도 1개 있는지 검사
$('form').on('submit',function(e){
let 비번 = document.getElementById('pw').value;
if ( /[A-Z]/.test(비번) === false ){
alert('대문자를 추가하세여~')
}
});숙제 (로그인 페이지)
<html>
...
<body>
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<form action="success.html">
<div class="my-3">
<input type="text" class="form-control" id="email" />
</div>
<div class="my-3">
<input type="password" class="form-control" id="pw" />
</div>
<button type="submit" class="btn btn-primary" id="send">전송</button>
<button type="button" class="btn btn-danger" id="close">닫기</button>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$("form").on("submit", function (e) {
let 입력한값 = document.getElementById("email").value;
if (입력한값 === "") {
alert("아이디를 입력하세여~");
e.preventDefault();
}
if (/\S+@\S+\.\S+/.test(입력한값)) {
alert("이메일 잘 썼다~");
} else {
alert("이메일 형식에 맞게 제대로 쓰세여~");
e.preventDefault();
}
});
$("form").on("submit", function (e) {
let 비번 = document.getElementById("pw").value;
if (/[A-Z]/.test(비번) == false) {
alert("대문자를 입력하셔야 됩니당");
e.preventDefault();
} else {
alert("올바른 비밀번호입니다~");
}
});
</script>
</body>
</html>e.preventDefault()를 입력해야 틀렸을 때 form 이 전송되지 않음!
