23-01-04 DOM- form객체, 정규표현식, 날짜객체 / BOM - window팝업, window인터벌, window타임아웃
<css animation>
*css의 애니메이션에대해서 참고하고싶을 때 아래 참고.
-w3school
-https://michalsnik.github.io/aos/
AOS - Animate on scroll library
AOS Animate On Scroll Library Scroll down
michalsnik.github.io
Whirl: CSS loading animations with minimal effort!
You need to enable JavaScript to run this app. WhirlCSS loading animations with minimal effort!
whirl.netlify.app
-또는 구글에 무료 CSS animation 치고 들어가면 또 많이 나옴.
<오늘 수업>
#form 객체
*form은 document의 하위 객체이므로 유일하게 name속성으로 선택이 가능합니다.
-document.폼의name.요소명 이렇게 form에 접근이 가능.
-input 태그도 폼의 자식이므로 위와 같은 내용이 동일하게 적용 됩니다.
코드
<body>
<form action="#" name="actionForm">
<h3>가입창</h3>
이름:<input type="text" name="name"><br>
번호:<input type="text" name="phone" onblur="phoneFunc(event)"><br>
분야:
<input type="checkbox" name="check">CSS
<input type="checkbox" name="check">JS
<input type="checkbox" name="check">HTML
<input type="submit" value="submit">
</form>
<script>
/*
1.form태그는 document의 자식이라서 form의 name으로 접근이 가능합니다.
2.input은 form의 자식이라서 document.폼명.태그name 으로 접근이 가능합니다.
*/
// console.log(document.actionForm);
// console.log(document.actionForm.name);
// console.log(document.actionForm.phone);
var submit = document.querySelector("input[type='submit']");
submit.onclick = function(){
event.preventDefault();//서브밋의 고유 이벤트 제거
if(document.actionForm.name.value.length <= 0 ){
alert("이름은 필수 입니다.");
document.actionForm.name.focus();//포커싱
return;//함수종료
} else if(document.actionForm.phone.value.length != 11){
alert("번호는 - 없이 11글자로 입력하세요");
document.actionForm.phone.focus();
return;
} else {//체크박스
var cnt = 0;
// var check = document.querySelectorAll("input[name='check']");
var check = document.actionForm.check;
for(var i = 0; i < check.length; i++){
if(check[i].checked){
cnt++;
}
}
if(cnt == 0){
alert("적어도 하나의 분야를 선택하세요");
return;
}
}
document.actionForm.submit();//폼.submit();
}
function phoneFunc(e){
console.log(e.target.value.replaceAll("-",""));
}
</script>
</body>결과
#정규표현식
*정규표현식은 w3school 에서 내용을 참고해서 하거나 블로그에서 정규표현식을 가져와서 대입했다.
*사용방식
var regExp = 정규표현식; //정규표현식을 변수에 담아준다.
regExp.test(입력된문자열); // test() 함수를 이용해서 입력된 문자열이 정규표현식에 규정된데로 작성되었는지 검증한다.
정규표현식을 만족하면 true 반환 , 아니면 false반환.
* 아이디나 비밀번호 입력 부분에서 enter 키를 눌렀을 때 처리.
- 입력 부분에서 특정한 키를 누르면 이벤트가 발생하도록 태그안에 이벤트를 선언해주었다.
-키를 입력하고 이벤트 객체를 출력해보면 눌린 키의 key 이름과 , key의 값을 찾아 볼 수 있다.
-특정한 키에대해서 이벤트를 처리해주는 조건을 건다.
현재는 enter키를 누르면 함수가 실행되도록 조건을 걸어주었다.
-코드
<body>
<form action="list.board" name="joinForm">
<h3>가입창</h3>
아이디:<input type="text" name="id" placeholder="문자와 숫자" onkeypress="enter(event)"><br>
비밀번호:<input type="password" name="pw" placeholder="숫자, 영문자, 특수문자 최소한개" onkeypress="enter(event)"><br>
생략....
<button type="button" onclick="joinCheck()">가입</button>
</form>
<script>
function joinCheck(){
// var regExp = /^(?=.*[a-zA-z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&\\(\\)\-_=+]).{4,8}$/;// 끝에 {4,8}$/가 길이라는것만 알면됨.
// if(!regExp.test("aaabbb")){
// console.log("정규표현식 만족하지 않음");
// }
var regExp1 = /^[A-Za-z0-9]{5,10}$/;
var regExp2 = /^(?=.*[a-zA-z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&\\(\\)\-_=+]).{4,8}$/;
var form = document.joinForm; //폼태그
if( !regExp1.test( form.id.value ) ) {
alert("영문자 숫자 5-10글자 사이입니다");
form.id.focus();
return;
} else if(!regExp2.test(form.pw.value)){
alert("영문자 숫자 특수문자 포함 4~8글자 입니다");
form.pw.focus();
return;
} else {
form.submit();//폼을 전송..
}
}
//UX 엔터키값 처리
function enter(e){
// console.log(e)
if(e.keyCode == 13){ //keyCode는 사용자가 누른 키보드 번호 enter == 13
joinCheck();
}
}
</script>
</body>-결과
#날짜객체 다루기
*자세한 내용들은 아래의 MDN 에서 Date 카테고리에서 찾아서 보고 사용할 수 있도록 하자.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
Date - JavaScript | MDN
JavaScript Date 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타냅니다. Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담습니다.
developer.mozilla.org
-코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var date = new Date(2023, 0, 4);//년월일
var date = new Date(2023, 1, 4, 14, 22, 0);//년월일시분초
var date = new Date();//현재시간
console.log(date);
//날짜의 포맷형식 변한 함수
console.log(date.toUTCString()); //우리가 자주 쓰는게 이거.
console.log(date.toLocaleTimeString);
console.log(date.toISOString());
//년 월 일을 얻는 getter
var milis = date.getTime();
console.log(milis); //1970.1.1 ~ 현재까지 지난시간을 밀리초
var year = date.getFullYear();//년
var month = date.getMonth() + 1;//월 -> getMonth()에서 월은 0부터 시작하기 때문에 표기할 땐 1을 + 해줌.
var day = date.getDate();//일 , getDay는 요일을 나타냄
var hour = date.getHours(); //시간
var minutes = date.getMinutes(); //분
var seconds = date.getSeconds(); //초
console.log(year +"년"+ month + "월" + day + "일" + hour + ":" + minutes + ":" +seconds );
console.log(date.getMonth()); // month를 가져오면 0으로 나옴. 이거 주의하기.
</script>
</body>
</html>-결과
#BOM
* BOM은 브라우저 상에서 일어나는 사건들을 다룰 때 많이 사용.
- DOM 은 태그를 다룰 때 많이 사용.
*JS에서는 window 객체가 최상위(최고 부모) 객체임.
원래는 window.document 이렇게 사용하지만 생략이 가능하다.
생략해서
document.querySelector(); 이런식으로 사용 가능한 것.
#팝업창
*window.open() 해주면 새로운 창이 팝업 됩니다.
*window.close() - <위에 없는 내용>
window.close() 를 만나면 브라우저 창이 꺼집니다.
주의할 점은 window.close()를 작성한 창이 꺼진다는 점.
기존 페이지에서에서 이벤트 발생시 window.open()으로 팝업창을 새로 열어주고.
그 다음에 이벤트 효과로 window.close()를 작성해주면
새로 생성된 팝업창이 닫히는 것이 아니라.
기존의 window.close()를 작성해놨던 창. 즉 기존의 창이 닫힙니다.
* opener - > 부모창 과 자식창 서로 값 전달하기
- 이내용은 필요할 때 찾아서 한번 봐보자.
참고 싸이트:
*사용예시
-코드
(기존창)
<body>
<script>
window.onload = function(){
// window.open("popup.html");//open("띄울창", "별칭", "옵션")
window.open("popup.html", "별칭", "width=500px, height=300px, left=100px, top=100px");
// window.close(); //이 함수가 적용되면 현재 창이 종료됩니다.
}
</script>
</body>(팝업창)
<body>
팝업창
<input type="checkbox" class="x">오늘 하루 이창을 열지않기
<script>
var x = document.querySelector(".x");
x.onclick = function(){
//쿠키..
window.close();
//opener -> https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B6%80%EB%AA%A8%EC%B0%BD-%E2%9E%9C-%EC%9E%90%EC%8B%9D%EC%B0%BD%EC%9D%98-%EA%B0%92-%EC%A0%84%EB%8B%AC 참고
}
</script>
</body>-결과
#윈도우 객체의 함수들
*윈도우 - 인터벌
-setInterval(), clearInterval()
-일정시간마다 함수 반복 실행
-코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="stop">멈춰</button>
<script>
var id = window.setInterval(function () {
console.log('실행됨');
}, 1000); //(실행시킬 함수, 인터벌);
//인터벌 중지
var stop = document.querySelector(".stop");
stop.onclick = function(){
window.clearInterval(id);
}
</script>
</body>
</html>-결과
*윈도우-타임아웃
-setInterval() , clearInterval()
-window는 생략가능.
-일정시간 뒤에 함수가 실행되는 것.
-코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="stop">5초뒤에 경고창이 나오는데 중지하려면 누르세요</button>
<script>
//window생략가능
//5초뒤에 동작
var id = setTimeout(function(){
alert("5초후 출력됨");
}, 5000);
//타임아웃 중지
var stop = document.querySelector(".stop");
stop.onclick = function(){
clearTimeout(id);
}
</script>
</body>
</html>-결과
# setInteval() 실습
-코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <style>
*{padding: 0; margin: 0;}
.bgImg{
animation: fadeIn 0.5s ease-in-out;
width: 100.0000%;
height: 300px;
}
@keyframes fadeIn{
from{
opacity: 0;
} to {
opacity: 1;
}
}
</style> -->
</head>
<body>
<h3>애니메이션이 주기적으로 동작하려면 태그가 변경되야합니다.</h3>
<style>
.slideImg{display:none; }
.slideImg.active{display:inline; animation: fadeIn 0.5s ease-in-out;}
@keyframes fadeIn{
from{
opacity: 0;
} to {
opacity: 1;
}
}
</style>
<div class="slide">
<img src="img/slide1.jpg" class="slideImg active">
<img src="img/slide2.jpg" class="slideImg">
<img src="img/slide3.jpg" class="slideImg">
<img src="img/slide4.jpg" class="slideImg">
</div>
<script>
var arr = document.querySelectorAll(".slide > .slideImg"); //배열..
var i = 0;
setInterval(function(){
arr[i].classList.remove("active");//기존 active 삭제
i++;
if(i == arr.length) i = 0;
arr[i].classList.add("active");//다음 active 추가
},1000);
</script>
<!-- <div class="slide">
<img src="img/slide1.jpg" class="bgImg">
</div>
<div>
<button id="stop">중지</button>
</div> -->
<!-- <script>
var slide = document.querySelector(".slide");
var existingImg = document.querySelector(".bgImg");
// console.log(existingImg);
var cnt = 2;
var operation = window.setInterval(function(){
// var existingImg = document.querySelector(".bgImg");
var newImgTag = document.createElement("img");
newImgTag.classList.add("bgImg");
newImgTag.src = "img/slide"+cnt+".jpg"
slide.firstElementChild.remove();
// slide.removeChild(existingImg);//이게 작동하려면 기존 img 태그를 가져오는 문장이 이벤트함수 안에 있어야함.
slide.appendChild(newImgTag);
cnt++;
if(cnt == 5) cnt = 1;
},1000);
//중지버튼
var stop = document.querySelector("#stop");
stop.onclick = function(){
window.clearInterval(operation);
}
</script> -->
<!-- <script> //선생님이 작성하신 내용
var num = 1;
var arr = ['img/slide1.jpg', 'img/slide2.jpg', 'img/slide3.jpg', 'img/slide4.jpg'];
setInterval(function(){
var img = document.createElement("img");//태그생성
img.src = arr[num];
img.classList.add("bgImg")
//remove
var slide = document.querySelector(".slide");
slide.firstElementChild.remove();
//append
slide.appendChild(img);
num++;
if(num == arr.length) num = 0;
},1000);
</script> -->
</body>
</html>-결과
