자바스크립트(java script)는 HTML 언어에 추가되서 웹페이지를 동적으로 다양하게 제작할 수 있게 도와주는 스크립트 언어이다. 스크립트 언어는 혼자 실행될 수 없어서 다른 언어에 포함되어 실행되고, 문법이 복잡하지 않은 특징을 가지고 있다. 즉, 자바스크립트는 HTML 안에서만 구현된다. 공식 명칭은 [ECMAScript]
<html 문서 내의 언어들>
이름
특징
태그
태그
컨텐츠 출력
<hr>, <font> 등
CSS
디자인 담당
<style="color: blue">~</style>
java script
동적인 조작 기법
<script> ~ </script>
자바 스크립트 기능
1. 유효성 체크 : 데이터가 DB에 저장될 수 있는지, 부족한 것은 없는지 검사
2. 태그 속성값 또는 태그 자체의 입력/수정/삭제 : html의 태그 컨트롤
3. AJAX를 통한 웹서버와의 데이터 통신
4. 동적인 메뉴 제작, 이미지 효과 등
AJAX: 비동기 방식으로 웹서버와 통신한 후에 통신 결과물을 화면에 반영하는 기술들의 총칭.
비동기 방식: 페이지 이동 없이 웹서버와 통신하는 방식 (예 : ID 중복 검사, 연관검색어 등)
자바 스크립트 특징
HTML 소스 코드 안에 삽입되어 웹브라우저에 결과 출력 -> 소스가 클라이언트에게 노출. 보안성이 낮다.
AJAX를 사용하여 간접 DB연동 가능(자바는 직접 DB 연동)
문법이 자바나 C보다 쉽다. 모든 변수의 형식을 검사하지 않기 때문. 때문에 에러 발생 시 찾기가 힘들다.
화면 출력이 목적!
자바스크립트 형식
자바 스크립트 형식
<script> ~ </script> 안에 삽입되어 사용된다.
함수인 경우 관용적으로 head 안에 있는 편.
자바 스크립트 수입
스크립트가 너무 길면 확장자를 js로 설정하여 독립된 파일을 만든다.
필요 시에 html 파일에 수입해서 삽입할 수 있다.
<자바스크립트 자료형>
자료형 종류
설명
숫자형
정수, 실수 데이터.
문자형
문자데이터. "로 감싼다. ""는 길이 없는 문자데이터.
boolean 형
true / false 데이터.
함수형
function(){실행구문;} 형태의 데이터. 1. 함수 전체를 데이터의 한 종류로 취급 (변수에 저장 가능) 2. 이름이 없을 수 있음.(=익명함수)
객체형
속성변수와 메소드로 구성된 단위 프로그램을 객체화했을 때 객체가 차지하는 메모리 공간의 위치 주소값. ex) var aaa = new nnn();
undefined 형
알수없는 데이터. 프로그램에서 사용할 수 없는 데이터. 위의 5가지가 아닌 모든 것의 자료형을 말한다.(null이 아님)
자바스크립트 변수
var 변수명 = 데이터;
변수는 세 종류가 있다.
1. 전역변수 : var가 있거나 없거나. 모든 자바스크립트에서 공유 가능한 변수
2. 지역변수 : 함수 안에서 var로 선언되어 함수 안에서만 사용되는 함수. 전역변수랑 헷갈릴 수 있음.
3. 매개변수 : 함수 호출 시 전달되는 데이터를 저장하는 변수다. 함수 안에서만 사용 가능(함수 오른쪽에 위치). 앞에 var 없음.
변수 선언 형식
var aaa; //undefined
var aaa = 5; //변수 선언
var aaa; //선언 후 데이터 넣기
aaa = 5;
데이터 자료형
var aaa = "123"; //문자형
var aaa = "123"; //숫자형
var aaa = boolean("n"); //논리형
논리형의 경우, 하단 "자바스크립트 조건문" 참고.
<참고> 자료형을 출력해보려면 typeOf를 사용한다. ex) document.write( typeOf aaa );
자바스크립트 연산자
1. ===연산자
자바와 동일.
단, 비교 연산자에서 ===의 경우 좌우가 같으면 true를 리턴한다. (자바에 없는 연산자)
true가 리턴되려면 자료형이 같아야한다. 자료형이 다르면 다른 유형의 데이터를 비교하는 것으로, 무조건 false가 리턴된다.
자바스크립트 BOM 객체(브라우저 객체)중웹화면에서 발생하는 모든 움직임을 관리하는 객체.
객체 생성은 없음.
<속성변수 호출>
event.속성변수
event 종류
abort
이미지 로드 실패
blur
입력양식에 있던 커서가 빠져나감(예 : 검색창에 검색어를 치다가 검색버튼을 누름)
change
입력양식의 내용 변경(value 값 변경)
click
마우스 왼쪽버튼 클릭
dbclick
마우스 왼쪽버튼 더블클릭
dragdrop
마우스 드래그
error
에러 발생
focus
입력창양식에 없던 커서가 생겨남(예 : 네이버 들어가면 자동으로 검색창에 커서가 가 있음)
keydown
키보드 누름
keypress
키보드 누름
keyup
키보드에서 눌렀다가 손을 뗌
load
웹브라우저에서 html 문서가 읽혀짐
unload
웹브라우저에서 html 문서가 없어짐
mousedown
마우스 누름
mousemove
마우스 움직임
mouseout
마우스가 지정한 영역을 벗어남(왔다 땜)
mouseover
마우스가 지정한 영역에 들어옴(갖다댐)
mouseup
마우스를 누른 후 뗌
reset
form 태그 내부의 입력양식을 초기화 즉, 체크는 풀고 키보드로 입력한 데이터는 지움
resize
화면의 크기를 변경
scroll
스크롤
select
입력양식의 내용 중 특정 내용을 선택
submit
서버로 폼의 데이터를 전송
기타 등등
event 객체의 속성변수
button
클릭한 마우스 버튼의 고유번호 저장 (왼쪽 : 1번, 오른쪽 : 2번, 가운데 : 3번)
keyCode
누른 키보드의 고유번호가 저장
clientX
html 문서의 기준으로 이벤트가 발생한 X좌표 저장
clientY
html 문서의 기준으로 이벤트가 발생한 Y좌표 저장
screenX
웹 화면을 기준으로 이벤트가 발생할 X좌표 저장
screenY
웹 화면을 기준으로 이벤트가 발생할 Y좌표 저장
altKey
Alt 키의 누름 상태 여부가 true, false 값으로 저장
ctrlKey
ctrl 키의 누름 상태 여부가 true, false 값으로 저장
shiftKey
Shift 키의 누름 상태 여부가 true, false 값으로 저장
type
이벤트 종류 저장
기타 등등
<예제> 이벤트 객체를 이용해서 다음 화면을 만들고 기능을 구현하라.
-> 마우스 클릭 위치 : 마우스를 클릭하는 곳 좌표 출력
-> 클릭한 마우스 고유 번호 : 좌클릭, 우클릭, 가운데 클릭 시 고유번호 출력
-> 누른 키보드 번호 : 키보드 입력 시 고유번호 출력
<html>
<head>
<script>
//-----------------------------
//마우스 클릭 위치
//-----------------------------
function show1(){
//이벤트가 발생한 위치의 x 좌표를 구해 변수에 저장하기
var x = event.screenX;
//이벤트가 발생한 위치의 y 좌표를 구해 변수에 저장하기
var y = event.screenY;
//name="info1" 을 가진 입력양식의 value 속성에 클릭이 이벤트가 발생한 위치의 x좌표, y 좌표를 삽입
document.myForm.info1.value = "x좌표 : " + x + ", " + "Y좌표 : " + y ;
}
//-----------------------------
//마우스 고유번호
//-----------------------------
function show2(){
document.myForm.info2.value = event.button;
}
//-----------------------------
//누른 키보드 번호
//-----------------------------
function show3(){
document.myForm.info3.value = event.keyCode;
}
</script>
</head>
입력을 위해 메모리 위치 주소값의 경로를 작성해준다.
x와 y의 경우 event 객체의 속성변수 screenX또는 screenY 안에 이벤트가 발생한 곳의 x,y 좌표가 저장되어있다.
var sungjuk1 = new Sungjuk(1,"김솨솨",90,99,100);
var sungjuk2 = new Sungjuk(2,"전뫄뫄",99,88,77);
var sungjuk3 = new Sungjuk(3,"윤봐봐",100,22,11);
3. Sungjuk 객체의 메소드를 호출하여 얻은 데이터를 출력
<1>sungjuk 이란 변수 선언 <2>Sungjuk 이란 생성자함수를 메모리 공간에 올려 객체화 <3>메모리 공간에 올려진 Sungjuk이란 생성자 함수를 (1,90,20,77) 형식으로 호출 <4>Sungjuk 객체의 메모리 위치 주소값을 리턴하여 sungjuk 변수에 저장
[생성자 함수] 메소드 선언 형식은 this.메소드명 = function(~) {실행구문} 이다.
바디로 넘어가서 다시 스크립트를 연다.
2. Sungjuk 객체의 메모리 위치 주소값을 저장할 Array 객체 생성
-> 일단 Sungjuk 객체를 200개 만들기 전에 이것들을 넣어줄 집부터 만들어주자.
-> Array 객체는 빈집으로 만들어준다.
<body>
<script>
//Array 객체 생성
var sungjuks = [];
3.Sungjuk 객체를 생성하고 반복문을 이용해서 200개 생성 후 Array 객체에 저장하기
-> 김뫄뫄씨 뒤에 숫자를 붙여서 구분해보자.
-> 점수 범위는 0~100사이로 설정해준다.
//------------------------------------------
//200개의 Sungjuk 객체를 생성하여 Array 객체에 저장하기
//------------------------------------------
for (var i=1; i<=200; i++){
//랜덤한 국어점수 영어점수 수학점수 구하기
var kor_tmp = Math.ceil( Math.random()*100 );
var eng_tmp = Math.ceil( Math.random()*100 );
var mat_tmp = Math.ceil( Math.random()*100 );
//Sungjuk 객체를 생성하여 Array 객체에 저장하기
sungjuks.push( new Sungjuk(i+3, "전동순" +i, kor_tmp, eng_tmp, mat_tmp) );
}
꼭 Sungjuk 객체는 반복문 안에 생성해야 한다. 200개를 일일히 만드는 것과 다름이 없기 때문이다.
4.Array 객체 안의 배열변수에 저장된 Sungjuk 객체의 순서를 평균에 따라 내림차순으로 바꾸기
-> 즉, 평균이 높은 Sungjuk 객체의 메모리 위치 주소값을 맨 앞 배열변수로 옮기는 작업
-> i번째 배열변수의 평균과 j번째 배열변수의 평균 두개를 비교해서 j가 크면, 저장된 메모리 위치 주소값을 바꾼다.
-> 알맹이를 바꿔서 큰 것이 i로 가게 한 뒤 다시 다른것과 비교한다. 이러한 과정이 계속해서 반복되면 내림차순이 된다.
//------------------------------------------
//평균에 따라 내림차순으로 바꾸기
//------------------------------------------
//a번째와 a-1번째 비교
for( var i=0; i<sungjuks.length-1 ; i++){
for( var j=i+1; j<sungjuks.length ; j++){ //i보다 +1로 겹치지 않게
//i번째 배열변수에 저장된 Sungjuk 객체의 평균 얻기
var avg1 = sungjuks[i].getAvg();
//j번째 배열변수에 저장된 Sungjuk 객체의 평균 얻기
var avg2 = sungjuks[j].getAvg();
//i번째 < j번째 이면, 서로의 값을 바꾸기
if (avg1<avg2){
var tmp = sungjuks[i];
sungjuks[i] = sungjuks[j];
sungjuks[j] = tmp;
}
}
}
//-----------------------------
//평균이 같으면 같은 등수로 두기
//-----------------------------
for (var i=0; i<sungjuks.length; i++){
//등수를 저장할 변수를 선언하고 0 저장.
var rank = 0;
//i번째 Sungjuk 객체의 평균 얻기.
var avg1 = sungjuks[i].getAvg();
//i번째 Sungjuk 객체의 평균과 다른 Sungjuk 객체의 평균을 비교해서
//i번째 Sungjuk 객체의 평균보다 큰 놈이 있다면 rank 변수 안의 데이터 1 증가시키기
for( var j=0; j<sungjuks.length ; j++){
//만약 나의 평균이면 그냥 건너 뛰기
if(i==j){continue;}
//j번째 Sungjuk 객체의 평균 얻기
var avg2 = sungjuks[j].getAvg();
//i번째 Sungjuk 객체의 평균보다 j번째 Sungjuk 객체의 평균이 크면
//rank 변수 안의 데이터 1 증가하기
if (avg1<avg2){rank++;}
}
웹브라우저가 html 파일의 태그들을 읽어 객체를 생성하고, 이 객체에 대응하는 컨텐츠를 웹브라우저 화면으로 출력하는 일련의 과정 또는 모형을 말한다.
즉, XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이며, 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.
DOM 객체는 DOM API 를기반으로 생성되며 대부분의 웹브라우저는 동일한 DOM API 를 가지고 있다.
DOM 객체
HTML 문서 안의 태그를 읽어 만들어지는 객체를DOM 객체라고 부른다.
유효성 체크
DB에 저장될 수 있는 데이터인가 아닌가를 체크하는 일련의 검사.
입력양식들의 유효성 체크를 한 후 모두 유효성에 합당하면 서버로 전송된다.
<예제> 회원가입창 유효성 체크하기
1. 유효성 체크를 위한 checkForm 함수 선언. 입력 양식들의 검사 방법을 정의한다.
<html>
<meta charset="UTF-8">
<head>
<script>
//저장 버튼을 누르면 호출되는 checkForm 함수 선언
function checkForm(){
alert( "로그인 가능 이상 없음" );
저장버튼을 누르면 알림창이 뜬다.
에러가 없다면 또다른 메시지가 떠오르지 않지만 에러가 있다면 유효성 체크를 위한 새로운 창이 뜨도록 만든다.
1-1. 아이디
조건 : 첫글자 영어 소문자
두번째는 영어소문자 또는 숫자 또는 _ 중 하나
두번째 문자가 6~14개 나와야함. 즉, 전체문자 길이는 첫글자 포함 7~15자.
//사용자가 웹브라우저 화면에서 입력한 [아이디값]을 가져와 uid 변수에 저장
var uid = document.memberRegForm.uid.value;
//공백 제거
uid = uid.trim();
//아이디 유효성 체크를 위해 RegExp 객체 생성
var regExp = new RegExp( /^[a-z][a-z0-9_]{6,14}$/ );
//만약 아이디가 잘못된 문자 패턴이면 경고하고 함수 중단
if( regExp.test(uid)==false ){
alert( "[아이디] 입력 규칙에 맞지 않음.\n<1> 영소문자 또는 숫자 또는 언더바(_)로 구성되어야함.\n<2> 글자수는 7~15자 사이 이어야함\n<3> 첫글자가 영문이어야함.\n" );
//<유효성체크> 입력한 아이디 비우고 길이없는문자데이터 붙이기.
//focus 사용해서 커서 아이디창에 있을 수 있도록 설정해주기.
document.memberRegForm.uid.value="";
document.memberRegForm.uid.focus();
return;
}
trim( ) : 앞 뒤 공백을 제거하는 제이쿼리 구문. 중간의 공백만 남기고 앞과 뒤의 공백은 모두 제거됨.
조건에 맞는 id 입력조건에 맞지 않는 id 입력
1-2. 암호
조건 : 첫글자 영어 소문자 또는 숫자 중 하나
첫번째 문자가 6~14개, 즉, 전체 문자 길이는 7개~15개.
//사용자가 웹브라우저 화면에서 입력한 [암호값]을 가져와 pwd 변수에 저장
var pwd = document.memberRegForm.pwd.value;
//공백 제거
pwd = pwd.trim();
//암호 유효성 체크를 위해 RegExp 객체 생성
var regExp = new RegExp( /^[a-z0-9_]{8,15}$/ );
//만약 암호가 잘못된 문자 패턴이면 경고하고 함수 중단
if( regExp.test(pwd)==false ){
alert( "[암호] 입력 규칙에 맞지 않음.\n<1> 영소문자 또는 숫자로 구성되어야함.\n<2> 글자수는 8~15자 사이 이어야함.\n" );
//<유효성체크> 입력한 아이디 비우고 길이없는문자데이터 붙이기.
//focus 사용해서 커서 아이디창에 있을 수 있도록 설정해주기.
document.memberRegForm.pwd.value="";
document.memberRegForm.pwd.focus();
return;
}
조건에 맞지 않는 암호 입력
1-3. 암호확인
조건 : 1. 암호 확인창이 빈칸이거나 2. 띄어쓰기로만 이루어져 있을 경우에는 [값 입력]유도
그 외의 경우(암호와 암호확인값이 같지 않을 경우)에는 에러메시지 출력.
//사용자가 웹브라우저 화면에서 입력한 [암호확인값]을 가져와 pwd_confirm 변수에 저장
var pwd_confirm = document.memberRegForm.pwd_confirm.value;
if( pwd_confirm=="" || new RegExp(/^[ ]+$/).test(pwd_confirm) ){
alert("[암호확인]을 입력해주세요.");
//다시 빈칸으로 지워주기
document.memberRegForm.pwd_confirm.value="";
return;
}
else{
if(pwd!=pwd_confirm){
alert("[암호]와 [암호확인] 값이 같지 않습니다!");
return;
}
}
암호와 암호확인이 동일하지 않을 때
1-4. 스킬
1개 이상 선택하게 하기. 체크박스를 사용한다.
//스킬체크 변수 선언
var skillCnt = 0;
// i번째 스킬이 체크되어 있으면 변수 skillCnt 에 1 업데이트하기
for( var i = 0 ; i < document.memberRegForm.skill.length ; i++ ){
if( document.memberRegForm.skill[i].checked==true ) {
skillCnt++;
}
}
// skillCnt 가 0 이면(=아무것도 체크되어 있지 않으면) 경고하고 함수중단
if(skillCnt==0) {
alert("소유 스킬은 1개 이상 선택요망!");
return;
}
소유스킬을 선택하지 않음
1-5. 학력
1개는 무조건 선택하게 하기. 라디오 버튼을 이용한다.
// 체크한 학력의 개수를 저장하는 변수 선언
var schoolCnt = 0;
// i번째 학력이 체크되어 있으면 변수 schoolCnt 1 업데이트하기
for( var i = 0 ; i <document.memberRegForm.school.length ; i++ ){
if( document.memberRegForm.school[i].checked ) {
schoolCnt++;
break;
}
}
// schoolCnt 가 0 이면(=아무것도 체크되 있지 않으면) 경고하고 함수중단
if(schoolCnt==0) {
alert("최종 학력은 1개 선택요망!");
return;
}
라디오버튼은 한번 선택하면 선택하지 않았던 상태로 돌아갈 수 없는 점이 특징이다.
최종학력 선택을 하지 않았을 때
1-6. 거주지
목록 작성 후 저장한다. 1개는 무조건 선택한다.
// 선택한 [거주지]를 변수 addr 에 저장.
var addr = document.memberRegForm.addr.value;
// 선택한 [거주지]가 없으면 경고하고 함수 중단
if( addr=="" ){
alert( "거주지 입력요망");
return;
}
1-7. 생일
가장 복잡하다. 생일은 단순하게 1월~12월, 1일~31일까지만 등록하면 될 것 같지만, 연도의 경우 몇년도까지 나오게 할 것인지, 2월 31일 등의 없는 날짜를 걸러주는 등의 추가 기능이 필요하다.
새로운 function이 필요하다.
유효성 체크를 위한 checkForm 함수 밖에 날짜 관련 함수를 선언한다.
//--------------------------------
// 년월일의 미래 날짜 여부 리턴하는 함수 선언하기
//--------------------------------
function is_future(year,month,date) {
var result = false;
var interval =
new Date().getTime()
-
new Date(
parseInt(year,10)
,parseInt(month,10)-1
,parseInt(date,10)
).getTime();
if( interval<0 ){result = true;}
return result;
}
//--------------------------------
// 생일의 유효성을 체크하는 함수 선언하기
//--------------------------------
function checkBirth(){
//선택한 [생일]의 년,월,일을 변수 birth_year, birth_month, birth_date에 저장
var birth_year = document.memberRegForm.birth_year.value;
var birth_month = document.memberRegForm.birth_month.value;
var birth_date = document.memberRegForm.birth_date.value;
if( birth_year=="" || birth_month=="" || birth_date==""){
return;
}
if( is_valid_date(birth_year,birth_month,birth_date)==false ) {
alert("존재하지 않는 생일입니다. 다시 선택해 주삼!" );
document.memberRegForm.birth_year.value = "";
document.memberRegForm.birth_month.value = "";
document.memberRegForm.birth_date.value = "";
return;
}
}
//--------------------------------
// 년월일이 실존 하는지의 여부를 체크하는 함수
//--------------------------------
function is_valid_date(year,month,date) {
// 매개변수로 들어온 년도,월, 일을 진짜 정수 숫자로 바꾸기
year = parseInt(year,10);
month = parseInt(month,10);
date = parseInt(date,10);
// 매개변수로 들어온 년,월,일을 가지고 Date 객체 생성하기.
var dateObj = new Date( year,month-1,date );
// Date 객체에서 년월일을 뽑아내기
var year2 = dateObj.getFullYear();
var month2 = dateObj.getMonth()+1;
var date2 = dateObj.getDate();
// Date 객체에서 뽑아낸 년월일이 매개변수들어온 년,월,일과 같으면 true 리턴하기
if( year==year2 && month==month2 && date==date2 ){return true;}
// Date 객체에서 뽑아낸 년월일이 매개변수들어온 년,월,일과 같지 않으면 false 리턴하기
else{return false;}
}
checkForm 함수안에서는 각 변수를 선언하고 빈칸일 경우 입력을 유도하는 경고창을 띄운다.
// 선택한 생일의 년,월,일을 변수 birth_year,birth_month,birth_date 에 저장.
var birth_year = document.memberRegForm.birth_year.value;
var birth_month = document.memberRegForm.birth_month.value;
var birth_date = document.memberRegForm.birth_date.value;
if( birth_year=="" ){
alert( "생일 년도 입력요망");
return;
}
if( birth_month=="" ){
alert( "생일 월 입력요망");
return;
}
if( birth_month=="" ){
alert( "생일 일 입력요망");
return;
}
2020년 2월 31일은 존재하지 않는 날짜이다.
1-8.주민번호
주민번호는 여러 조건이 있다. 입력창이지만 숫자만 입력해야하며, 뒷자리는 나와서는 안되고, 위의 생일처럼 존재하지 않는 날짜는 걸러줘야한다. 또한 미래 날짜라면 경고창을 띄워야 한다.
<조건>
1) 앞자리는 정수 숫자 6개, 뒷자리는 정수 숫자 7개 이어야함.
2) 주민번호에서 출생년도 2자리를 구한 후 19 또는 20을 붙여 온전한 출생년도 찾기.
3) 출생년월일이 존재하지 않는 날짜면 멈추고 경고창을 띄운다.
4) 출생년월일이 아직 오지 않은 미래 날짜면 멈추고 경고창을 띄운다.
조건을 하나하나 해결해보자.
0)변수선언
// 입력된 주민번호 얻어와 변수 앞자리는 jumin_num1에 뒷자리는 jumin_num2에 저장
var jumin_num1 = document.memberRegForm.jumin_num1.value;
var jumin_num2 = document.memberRegForm.jumin_num2.value;
1) 앞자리는 정수 숫자 6개, 뒷자리는 정수 숫자 7개 이어야함.
// 정수 숫자 6개를 검사하는 RegExp 객체 생성하기
var regExp1 = new RegExp(/^[0-9]{6}$/);
// 만약 주민번호 앞자리가 6자리 숫자가 아니면 경고하고 주민번호 초기화하고 함수 중단하기
if( regExp1.test(jumin_num1)==false ){
alert("주민번호 앞자리는 6자리 숫자이어야 합니다.재 입력바람!");
//주민번호 초기화
document.memberRegForm.jumin_num1.value = ""
//함수 중단
return;
}
// 정수 숫자 7개를 검사하는 RegExp 객체 생성하기
var regExp1 = new RegExp(/^[1-4][0-9]{6}$/);
// 만약 주민번호 뒤자리가 7자리 숫자가 아니면 경고하고 주민번호 초기화하고 함수 중단하기
if( regExp1.test(jumin_num2)==false ){
alert("주민번호 뒤자리는 첫 숫자는 1~4이어야하고, 모두 7자리 숫자이어야 합니다. 재입력바람!");
//주민번호 초기화
document.memberRegForm.jumin_num2.value = "";
//함수 중단
return;
}
2) 주민번호에서 출생년도 2자리를 구한 후 19 또는 20을 붙여 온전한 출생년도 찾기.
// 주민번호에서 출생년도,월,일 2자리씩 구하기
var jumin_year = jumin_num1.substr(0,2);
var jumin_month = jumin_num1.substr(2,2);
var jumin_date = jumin_num1.substr(4,2);
// 주민번호에서 출생년도 19 또는 20 구해서 출생년도 앞에 붙이기
var first_num = jumin_num2.substr(0,1);
//만약 주민번호 뒷자리 첫째자리(first_num)이 1또는 2라면 19, 3 또는 4라면 20을 붙여라.
if( first_num=="1" || first_num=="2" ){
jumin_year = "19" + jumin_year;
}
if( first_num=="3" || first_num=="4" ){
jumin_year = "20" + jumin_year;
}
3) 출생년월일이 존재하지 않는 날짜면 멈추고 경고창을 띄운다.
// 출생년월일이 존재하지 않는 날짜면 경고하고 함수 중단하기
if( is_valid_date(jumin_year,jumin_month,jumin_date)==false ){
alert("주민번호 앞자리는 존재하지 않는 년월일 입니다.");
document.memberRegForm.jumin_num1.value = ""
document.memberRegForm.jumin_num2.value = ""
return;
}
4) 출생년월일이 아직 오지 않은 미래 날짜면 멈추고 경고창을 띄운다.
//출생년월일이 미래 날짜면 경고하고 함수 중단하기
if( is_future(jumin_year,jumin_month,jumin_date) ){
alert("주민번호 출생년월일이 미래 입니다.");
document.memberRegForm.jumin_num1.value = ""
document.memberRegForm.jumin_num2.value = ""
return;
}
