* 실습 1 - 메뉴를 선택할 때마다 밑에 div가 메뉴 이름으로 나오고 애니메이션 추가해줌.
<!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>
.toggle li {
display: inline-block;
padding: 15px 20px 14px;
width: 25%;
text-align: center;
border: 1px solid #333;
cursor: pointer;
}
.toggle-menu {
display: none;
}
.active {
display: block;
animation: fadeIn 1s ease-in-out;
background-color: aquamarine;
}
/* 애니메이션 */
@keyframes fadeIn {
from {
opacity: 0;
background-color: aqua;
margin-left: -100px;
} to {
opacity: 1;
background-color: aquamarine;
margin-left: 0;
}
}
</style>
</head>
<body>
<section>
<ul class="toggle">
<li data-id="#toggle1">메뉴1</li>
<li data-id="#toggle2">메뉴2</li>
<li data-id="#toggle3">메뉴3</li>
</ul>
<div>
<div class="toggle-menu active" id="toggle1">
토글메뉴1
</div>
<div class="toggle-menu" id="toggle2">
토글메뉴2
</div>
<div class="toggle-menu" id="toggle3">
토글메뉴3
</div>
</div>
</section>
<script>
var toggle = document.querySelector(".toggle");
toggle.onclick = function(){
if(event.target.tagName != "LI") return;
var trigger = event.target.dataset.id;
var tag = document.querySelector(trigger); //id를 가지고 있는 태그
//다른 태그는 active 삭제
var menu = document.querySelectorAll(".toggle-menu");
for(var i = 0; i < menu.length; i++){
menu[i].classList.remove("active");
}
tag.classList.add("active"); //active 추가
}
</script>
</body>
</html>1. DOM
- DOM은 문서 객체 모델이라 하며, document객체를 의미합니다.
- DOM은 요소(element)의 선택, 삭제 생성 등을 위해 사용합니다.
- DOM객체를 이용한 요소의 접근은 자바스크립트의 강력한 기능이며 반드시 외워야 하는 기능입니다.
1) form 객체
- form객체는 document 객체의 하위 객체 중 하나 입니다.
- form을 이용하면 form 유효성 검사 등을 할 수 있습니다.
- form객체는 document의 하위 객체이므로 유일하게 name속성으로 선택이 가능합니다
ex) document.폼명.요소명
* 예제(form 객체)
<!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>
<form action="list.board" 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.actionForm.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.value = "";
document.actionForm.phone.focus();
return;
} else { //체크박스
var check = document.actionForm.check;
var cnt = 0;
for (var i = 0; i < check.length; i++) {
if (check[i].checked) {
cnt++;
}
}
if (cnt == 0) {
alert("분야를 하나 이상 선택해주세요");
return;
}
}
document.actionForm.submit(); //폼.submit 하면 제출 가능
}
//위에 onclick 괄호에 event라고 썼을 때 phoneFunc() 괄호에 e라고 넣고 밑에 변수에 e라고 작성해주면 됨
//
function phoneFunc(e) {
e.target.value = e.target.value.replaceAll("-", ""); //하이픈 들어가 있으면 제거해줌
// e.target.value = e.target.value.replace(/[^0-9]/g, '').replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
}
</script>
</body>
</html>
2) 정규 표현식
* 예제(정규표현식) - test() 메소드는 인수로 전달된 문자열에 특정 패턴과 일치하는 문자열이 있는지를 검색하고 다 작성 후에 엔터 누르면 list.board로 넘어가는 메서드 사용
<!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>
<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}$/;
// if( !regExp.test("aaabbb1!") ) {
// 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) {
if(e.keyCode == 13) { //keycode는 사용자가 누른 키보드 번호 enter == 13
joinCheck();
}
}
</script>
</body>
</html>
3) 날짜 객체
* 예제 - 날짜 객체(~String: 똑같은 날짜인데 보여주는 형식이 다름)
<!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); //년월일 (월은 0부터)
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; //월
var day = date.getDate();
var hour = date.getHours(); //시간
var minute = date.getMinutes(); //분
var seconds = date.getSeconds(); //초
console.log(year + "년" + month + "월" + day + "일" + hour + ":" + minute + ":" + seconds);
</script>
</body>
</html>
2. BOM
- BOM은 브라우저 객체 모델이라 하며, 내장객체들을 의미합니다.
- window, location. history, document 등이 포함됩니다.
- window 객체는 웹브라우저에 대한 전반적인 정보 취득이나 제어에 관련된 객체이며 하위 객체에는 location, history, document 등이 있습니다.
1) window 팝업
* 예제(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>
<script>
window.onload = function(){
// window.open("popup.html"); //open("띄울 창", "별칭", "옵션")
window.open("popup.html", "별칭", "width=200px, height=300px, left=100px, top=100px, location=no");
}
</script>
</body>
</html><!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>
팝업창
<input type="checkbox" class="x">오늘 하루 이 창을 열지 않기
<script>
var x = document.querySelector(".x");
x.onclick = function () {
//쿠키
window.close();
//opener - 주창과 보조창 간의 데이터 전달이 가능합니다.
}
</script>
</body>
</html>
2) window 인터벌(주기적으로 실행)
* 예제(window 인터벌) - 버튼을 누르면 동작이 멈춤, 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); //(실행시킬 함수, 인터벌); 1초마다 동작
//인터벌 중지
var stop = document.querySelector(".stop");
stop.onclick = function(){
window.clearInterval(id); //버튼을 누르면 중지 됩니다.
}
</script>
</body>
</html>
3) window 타임아웃
* 예제(window 타임아웃) - setTimeout: 경고창이 5초 뒤에 출력 됨
<!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>
//5000은 5초 뒤에 실행 하겠다는 의미(경고창이 5초 뒤에 나옴)
//window 생략 가능
var id = setTimeout(function() {
alert("5초 후 출력됨")
}, 5000)
var stop = document.querySelector(".stop");
stop.onclick = function(){
clearTimeout(id); //settimeout이 가지고 있는 고유 값을 넣어 줘야 함
}
</script>
</body>
</html>
* 실습 2 - interval로 이미지 변경하기
<!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> //내 답안, 선생님 답안 1
* {padding: 0; margin: 0;}
.bgimg {
animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
} to {
opacity: 1;
}
}
</style> -->
<style>
.slideImg {display: none;}
.slideImg.active {display: inline; animation: fadeIn 0.5s ease-in-out;}
@keyframes fadeIn {
from {
opacity: 0;
} to {
opacity: 1;
}
}
</style>
</head>
<body>
<h3>애니메이션이 주기적으로 동작하려면 태그가 변경되야 합니다.</h3>
<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>
//내 답안
//원래 div에 <img src= "img/slide1.jpg" class ="bgimg"> 한줄 있음
// var bgImg = document.querySelector(".bgImg");
// var slide = document.querySelector(".slide");
// var count = 1;
// var a = function(){
// slide.innerHTML = '<img src = img/slide' + count + '.jpg class = bgimg>';
// count++;
// if(count == 5) {
// count = 1;
// }
// }
// var id = setInterval(a, 2000);
//선생님 답안 1
// var num = 0;
// 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(); //slide의 첫번째 자식
// //append
// slide.appendChild(img);
// num++;
// if(num == arr.length-1) num = 0;
// }, 1000);
//선생님 답안 2
var arr = document.querySelectorAll(".slide > .slideImg"); //배열
console.log(arr);
var i = 0;
setInterval(function() {
arr[i].classList.remove("active");
i++;
arr[i].classList.add("active");
if(i == arr.length) {
i = 0;
}
}, 1000);
</script>
</body>
</html>