728x90
form 객체
- document 객체의 하위 객체 중 하나이므로
- 유일하게 name 속성으로 선택 가능
document.폼name.요소명
document.body; = document.querySelector("body");
| 속성값 | 설명 |
| value | input, textarea 요소의 value값 반환 |
| checked | checkbox, radio 체크되어 있으면 true, 아니면 false |
| disabled | 요소가 활성화 상태이면 false, 비활성화 상태이면 true |
| length | 요소의 개수 |
| focus() | 요소의 포커스 맞춤 |
| blur() | 요소의 포커스 없애줌 |
| submit() | form의 값을 전송 javascript로 form 전송 가능 |
| reset() | form의 값을 초기화 |
"input[ type='submit' ]" - input태그의 타입이 submit 인 것
제목2
제목2
<!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> <!-- 포커스가 아웃될 때 사용 onblur -->
분야:
<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); //form 태그를 바로 얻어옴
// console.log(document.actionForm.name); //하위 input의 name도 이름으로 접근 가능
// console.log(document.actionForm.phone);
var submit = document.actionForm.querySelector("input[type='submit']") //input 태그의 타입 submit 인것
submit.onclick = function() {
event.preventDefault(); //submit의 고유이벤트 제거, 제거안하면 바로 넘어가버림
if(document.actionForm.name.value.length <= 0) { //document.actionForm.name = name이 name인 input을 가리킴
alert("이름은 필수입니다");
document.actionForm.name.focus(); //포커싱을 name으로 가게끔 해줌
return; //함수 종료 (필수), return 안하면 아래의 코드를 실행함
} else if(document.actionForm.phone.value.length != 11) { //phone번호가 11개가 아니라면
alert("번호는 - 없이 11글자로 입력하세요");
document.actionForm.phone.focus();
return;
} else { //체크박스
var cnt = 0;
// var check = document.querySelectorAll("input[name='check']"); //배열로 얻어옴
var check = document.actionForm.check; //배열로 나옴
console.log(check);
for(var i = 0; i < check.length; i++) {
if(check[i].checked == false) { //checked 가 falser이면
cnt++;
}
}
if(cnt == 0) {
alert("적어도 하나의 분야를 선택하세요");
return; //함수 종료(필수), return 안하면 아래의 코드를 실행함
}
}
document.actionForm.submit(); //폼.submit();
}
function phoneFunc(e) {
e.target.value = e.target.value.replaceAll("-", ""); //대상의 value값을 얻어서 replaceAll로 하이픈을 없애서 다시 value값에 넣어줌
}
</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>
<form action="list.board" name="joinForm">
<h3>가입창</h3>
아이디: <input type="text" name="id" placeholder="문자와 숫자" onkeypress="enter(event)"><br>
비밀번호: <input type="password" name="pw" placeholder="숫자,영문,특수문자 1개이상" onkeypress="enter(event)"><br>
<생략><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-z]+[A-Za-z0-9]{5,10}$/g; //id 정규표현식, 6~11글자
var regExp2 = /^(?=.*[a-zA-z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&\\(\\)\-_=+]).{4,8}$/; //pw 정규표현식
var form = document.joinForm; //폼태그
//1. id 검사
if( !regExp1.test(form.id.value) ) { //폼의 id속성의 value가 맞지않다면
alert("영문자, 숫자 5~11글자 사이입니다.");
form.id.focus();
return;
//2. pw 검사
} else if( !regExp2.test(form.pw.value) ) {
alert("숫자, 영문자, 특수문자 포함 4~8글자 입니다.");
form.pw.focus();
return;
//3. form 보내기
} else { //위에서 검사를 다 하면
form.submit(); //폼을 전송
}
}
//UX 엔터키값 처리 - 엔터는 키보드 이벤트
function enter(e) {
console.log(e); //KEY, KEYCODE 확인, enter=13번임
if(e.keyCode == 13) { //entet event 객체 안에 keyCode, keyCode는 사용자가 누른 키보드 번호
joinCheck();
}
}
</script>
</body>
</html>
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>
//월은 0부터 시작 (0~11)
var date = new Date(2023, 0, 4); //23년, 1월, 4일
var date = new Date(2023, 0, 4, 14, 22, 0); //년월일 시, 분, 초
var date = new Date(); //현재시간
console.log(date);
//날짜의 형식이 다른 것, 날짜의 포멧형식 변환 함수
console.log(date.toUTCString()); //Wed, 04 Jan 2023 05:22:00 GMT
console.log(date.toLocaleDateString()); //2023. 1. 4.
console.log(date.toISOString()); //timestamp형: 2023-01-04T05:22:00.000Z
//년 월 일을 얻는 getter
var milis = date.getTime();
console.log(milis); //1997.1.1 ~ 현재까지 지난 시간을 밀리초로 표현
var year = date.getFullYear(); //년
var month = date.getMonth() + 1; //월
var day = date.getDate(); //일
var week = date.getDay(); //요일 - 숫자로 나옴(월요일부터 1~7)
console.log(year);
console.log(month);
console.log(day);
console.log(week); //수요일 3
var hour = date.getHours(); //시간
var minute = date.getMinutes(); //분
var sec = date.getSeconds(); //초
console.log(year + "년" + month + "월" + day + "일 " + hour + ":" + minute + ":" + sec);
</script>
</body>
</html>오늘 하루
더보기
기억에 남는 부분
-
-
어려운 부분
-
-
문제 해결 부분
-
-
728x90
'클라이언트 > JavaScript' 카테고리의 다른 글
| [JavaScript] AJAX, API, fetch, Promise, then, json, xml (0) | 2023.01.06 |
|---|---|
| [JavaScript] BOM - window, location, history, navigator, document callback, cookie&session (0) | 2023.01.04 |
| [JavaScript] 이벤트 객체 (0) | 2023.01.03 |
| [JavaScript] node remove, select(parent,children), class 속성제어 (1) | 2023.01.02 |
| [JavaScript] node select, create, onfocus&onblur (0) | 2022.12.30 |
