오늘은 자바스크립트의 함수를 정의하고 회원 가입창을 만들어 보도록 합니다.
함수정의 그리고 if조건문으로 회원에 가입하기 위한 조건 만족시의 실행을 시키는 방법과 테이블을 이용해 회원에 가입 하도록 하는 창을 만들고 가상 실현을 시켜 보도록 합니다.
아래는 회원 가입 창의 폼 테이블 모습입니다.
아래는 테이블에 적용 하는 스타일 부분 의 소스 입니다.
원래는 헤드부에 위치 해야 하지만 오늘은 가상으로 이 위치를 헤드로 간주 하여 소스를 위치 시켰습니다..
<style>
.big{width:130px; font-size:17px; border:1px solid gray; padding:3px; margin:2px; text-align:center;}
.int{border:1px solid gray; padding:3px; margin:2px;text-align:center;}
.red{color:red;
}
.blue{color:blue;
}
</style>
아래는 함수를 정의한후 메소드를 생성 하고 인풋창에 메소드로 이벤트를 주어 조건을 만족할 경우 임의의 홈 페이지로 이동 하도록 설정 했습니다.
메소드 소스와 함께 prompt 창에 만든 회원가입 조건 소스 입니다.
스크립트는 헤드부나 바디부 어디든 배치 해도 무방 합니다.
<script>
function gourl(a, b){
prompt=(a); location.href=b;}//함수를 정의 하고 조건 만족시 회원 가입창 으로 이동 하는 메소드를 생성
var nai=prompt('당신의 나이를 입력 하세요');
if (nai>=18){document.write('회원되실 자격이 있습니다.');
}else{document.write('여기는 성인들 만을 위한 사이트 입니다.');}
function kelick(){
document.write('감사 합니다. 회원이 되셨 습니다.'+'<a href="./86#6">홈으로</a>');
}//함수를 정의 하여 메소드 생성 조건 만족시 회원가입 정보 입력후 마지막 확인 버튼으로 이동후 홈으로 이동
</script>
이페이지는 모바일의 세로 모드에 맞도록 테이블의 크기를 맞추었기 때문에 감안해서 보아야 합니다.
그리고 모바일에서는 구현이 되지 않는 부분이 있기 때문에 자바 스크립트로 완벽 하게 구현이 되지 않는 부분이 있다는점
감안 해서 보아야 합니다.
모바일 에서 경고창 alert이 뜨지 않아 prompt창 만 으로 만들다보니 완전 하지 못 합니다.
아래는if조건문으로 회원에 가입 시키기 위한 prompt창 만들기입니다.
조건 문의 동작 순서는 아래와 같습니다.
<script>
var var명령어는 변수를 정의 하는 명령문 입니다. nai=prompt('당신의 나이를 입력 하세요'); //프롬프트 창은 사용자들로 부터 정보를 입력 받는 창입니다.
if (nai>=18){//if문은 만약 나이가 18세이거나 이상 이면 아래의 내용을 출력 히라는 조건 명령 문 입니다.
document.write구문 은document.write브라우져에 출력 하도록 명령하는메소드입니다.('회원되실 자격이 있습니다.');이 내용이 브리우져에 출력 됩니다.
}else{ //else명령어는 if 문의 내용대로 조건이 맞지 않을경우 아래의 내용을 브라우져에 출력 하라는 명령문 입니다.
document.write('여기는 성인들 만을 위한 사이트 입니다.');}이 내용 이 브라우져에 출력 됩니다.
</script>
아래는 현재 창에 만든 회원가입 폼테이블의 소스 입니다.
<center>
<from>
<table style="width:320px; height:450px; border:1px solid red; cellpadding:0px; cellspacing:0px;">
<tbody>
<tr><td colspan="3" style="width:320px; height:60px; border-bottom:2px orange solid; font-size:20px; text-align:center; ">회원가입</td></tr>
<tr><td class="big" height="50px" width="130px">아이디</td><td colspan="2"><input name="id" size="20"></td></tr>
<tr><td class="big" height="50px" width="130">비번</td><td colspan="2"><input name="pw" size="20"></td></tr>
<tr><td class="big" height="50px" width="130px">성명</td><td colspan="2"><input name="sung" size="20"></td></tr>
<tr><td class="big" height="50px" width="130px">성별</td><td><input type="checkbox" name="man" value="checkbox">남자</td><td><input type="checkbox" name="mail" value="checkbox">여자</td></tr>
<tr><td class="big" width="130px">취미</td><td><input type="checkbox" name="yuheng">여행</td><td><input type="checkbox" name="jamagi" value="checkbox">잠자기</td></tr>
<tr><td class="big" width="130px" height="80px" valign="middle">자기소개</td><td colspan="2"><textarea name="soge" rows="5" cols="20"></textarea></td></tr>
<tr><td colspan="2" align="center"><input type="button" value="확인"></td><td><input type="button" value="취소"></td></tr></tbody>
</table>
</from>
</center>
아래는 회원 가입 창의 폼 테이블 모습입니다.