컴퓨터 Form의 유효성 체크
2003.12.17 00:05
어제 양갱에게 1:1 과외를 해준 대화 내용이다. 남들에게도 이해가 쉬운 내용이었으면
좋을 듯하지만, 어쨌거나 이런 형식의 강좌도 한 번쯤. ^_^
일단은 양갱 정도의 HTML 실력은 있어야 이해가 조금 되겠지만... 어쨌거나 강의를
제대로 이해하기 위해 아래 URL을 클릭해서 Form을 연 후에 Source 보기를 선택해서
Source를 열어놓은 후에 이해해보도록 하자.
http://akira.yang2.com/mail/form.htm
RanomA: 자... 2강 들을 준비가 됐나?
Akira : 오
Akira : 들어오셨습니까 스승님
RanomA: ㅋㅋㅋ...
RanomA: 아까 그 Form URL 부터 불러주고, 그 다음에 노트 준비해.
Akira : 응
Akira : http://akira.yang2.com/mail/form.htm
RanomA: 자... 시작한다.
Akira : 앙
RanomA: Form 값 체크하는 방식은 여러 가지가 있는데
Akira : 응
RanomA: 크게 Form 자체에서 체크하는 방법이랑
Akira : 앙
RanomA: Form 에서 값을 넘긴 프로그램에서 처리하는 방법이 있을 수 있어.
RanomA: 그러니까 지금 저 URL 내에서 Submit 하기 전에
Akira : 응
RanomA: 자바스크립트로 체크하는 법이랑
RanomA: mail_send.php 에서 값을 검사한 후에 back 시키는 방법이 있는데
Akira : 응
RanomA: 나는 앞의 것이 좋아. 왜냐하면 history.back() 했다가
Akira : 응
RanomA: 되돌아 왔더니 앞의 값이 몽창 날라가는 경우가 왕왕 있거든.
Akira : 그럼 나도 앞의 것이 좋아 -ㅁ-;;;;;;;
RanomA: 그 왜... 회원가입한다고 이것저것 다 써놨더니만
Akira : 그래~!
RanomA: 잘못됐다고 해서 Back 했더니만 홀라당
Akira : 낭패지
RanomA: 날라가는 경우 있잖아.
Akira : 글쓸때도
RanomA: 그래서 넘기기 전에 체크하는 걸 만드는 거야.
Akira : 아주 안조타
Akira : 엉
RanomA: 일단 이게 기본적인 거야.
RanomA:
<script language="javascript">
function checkIt(form)
{
if(!form.subject.value)
{
alert('제목을 입력하세요!');
form.subject.focus();
return;
}
if(!form.comment.value)
{
alert('메시지본문을 입력하세요!');
form.comment.focus();
return;
}
if(!form.post_name.value)
{
alert('이름을 입력하세요!');
form.post_name.focus();
return;
}
if(!form.post_password.value)
{
alert('글쓰기 암호를 입력하세요!');
form.post_password.focus();
return;
}
form.submit();
}
</script>
RanomA: 이 걸 HTML에서
Akira : 응
Akira : 어따넣어? 헤드 안에 넣어?
RanomA: 이건 내 프로그램에서 돌아가니까 그대로 안돼.
RanomA: 엉.
Akira : 응
RanomA: 내가 할 말을 미리 알고 있네. (^_^)
RanomA: 자... 내용을 설명해줄께.
Akira : 꺄~
RanomA: function 이라고 된 부분은 다음과 같은 동작을 하는 함수를 만들겠다고 정의하는 거야.
Akira : 응
RanomA: function (인자) { }
RanomA: 안에 넣는 거지.
RanomA: 인자는 조건을 얘기하는 거야.
Akira : 응
RanomA: 뭐 function a(인자) 해놓고는
RanomA: 인자가 1일 때에는 어떻게, 2일 때에는 어떻게
Akira : 아~
RanomA: 혹은 갑 일 때에는 어떻게, 을일 때에는 어떻게
RanomA: 이런 식으로 처리하라는 거야.
Akira : 응
RanomA: 옛날에
RanomA: 산수시간에 계산상자
RanomA: 기억나?
RanomA: 상자 위에 숫자 넣으면 아래에는 무슨 값이 나오는가...
Akira : 앙
RanomA: 그 상자가 일종의 함수이고 거기에 들어가는 값을 인자라고 보면 돼.
RanomA: 그런 계산상자처럼 값이 튀어나오는 경우도 있고, 그냥 동작만 하는 경우도 있고...
RanomA: 서론이 길었다...
Akira : 응
RanomA: 자...
Akira : ㅎㅎㅎ
RanomA: checkIt 이라는 함수를 선언하는 거야...
Akira : 엉
RanomA: 내가 불러준 스크립트를 왼쪽에 펼쳐놓고 봐.
RanomA: 그게 편할 거야.
Akira : 응
Akira : 펼쳐놓고있어
Akira : ㅎㅎㅎ
RanomA: 그리고 인자를 form 이라는 변수로 쓰는 거야.
Akira : 엉
Akira : 그건 그냥 폼이야?
RanomA: 음... form 이라는 글자가 의미가 있는 건 아냐.
RanomA: parameter 라고 써도 돼.
Akira : 응
RanomA: 그냥 이름이야. 단지 저 인자가 받을 것이 form 이기때문에 이름을 저렇게 지어놓은 것이지
Akira : 응
RanomA: checkIt (parameter) {} 해놓고는
RanomA: { } 안에서 parameter를 form 대신에 쓰면 돼.
Akira : 옹
Akira : 그렇군..
RanomA: if(!form.subject.value)
RanomA: 이 부분이 무슨 뜻일 것 같애?
Akira : 제목폼
Akira : 캬캬캬
RanomA: ! 가 뜻하는 바는?
Akira : 글쎄..
RanomA: PHP나 Java나 모두 C에서 나왔기때문에
Akira : 엉
RanomA: 서로 문법이 닮아 있기는 해.
RanomA: ! 를 아까 설명할 때에
RanomA: "뭐뭐가 아니다"
RanomA: "값이 없다"
Akira : 엉
RanomA: "값이 false이다"
RanomA: "값이 0이다"
RanomA: 이런 뜻이 된다고 했지?
Akira : 응
Akira : ~`~~
Akira : 그래그래
RanomA: form 은 위에서 checkIt(form)에서 form이라고
RanomA: 썼기때문에 form 이라고 하는 거야.
Akira : 응
RanomA: checkIt(parameter) 라고 했으면 parameter.subject.value 가 되는 거야.
Akira : 응
RanomA: 나중에 이 함수를 호출할 때에 이 form 이라는 이름의 변수에 무엇을 넘겨주느냐 하면
RanomA: <form> 을 넘겨줘.
RanomA: 이제부터 머리가 아파지가 시작한다. (^_^)
Akira : ㅎㅎㅎ
RanomA: 크게 봐서 HTML 문서를 Java Script 에서 지칭할 때에 document라고 해
RanomA: document 안에는 또 여러 가지가 있지.
RanomA: HTML 문서 안에 있는
RanomA: body, head, title 등의 태그 있지?
Akira : 응
RanomA: 그게 다 크게 보면 document 안에 들어가 있는
RanomA: 요소들이거든.
RanomA: 그걸 표현할 때에 document.title
Akira : 응
RanomA: document.head
RanomA: document.body
RanomA: 이렇게 해.
Akira : 아아~
RanomA: 창의 제목에 뜨는 <title> 태그 있지?
RanomA: 그걸 JavaScript에서 수시로 바꿀 수 있는 것도 저런 걸 이용하는 거야.
RanomA: document.title = test;
Akira : 응
Akira : 오오~~
Akira : 글쿠나~!
RanomA: 해버리면 창의 타이틀이 test로 바뀌지. title에 시계표시하는 것도 저걸 이용하는 거야
Akira : 아아~~~
RanomA: head나 title, body 같은 건 document 안에
RanomA: 하나만 있으니까 바로 document.title 이라고 해주면 되는데
Akira : 응
RanomA: 여러개 있을 수 있는 것들
RanomA: 그러니까 뭐 <table>, <form>, <img> 등은
Akira : 응
RanomA: 이름을 붙여줘서 구별시켜줘야 해
RanomA: 그게 바로 id = 혹은 name= 속성이지.
RanomA: <form name=mail_form> 해놓으면
RanomA: 그걸 지칭할 때에
RanomA: document.mail_form 할 수 있어.
Akira : 응
RanomA: 아까 우리가 <form> 태그에 이름을 뭘로 줬지?
Akira : 폼 이름??
RanomA: 엉
Akira : 뭐 이름 쓰고
Akira : 메일 쓰는 그 이름?
RanomA: 아니~~~
Akira : <form name="mail_form" action="mail_send.php" method=post>
Akira : 이거이거?
RanomA: <form> 자체의 이름
RanomA: 어.
Akira : 응 메일폼
RanomA: 거기에서 우리가 이름을 mail_form 이라고 줬지?
Akira : 응
RanomA: document.mail_form 이 가리키는 바는 바로 그 <form>에서 </form> 사이 통째를 가리키는 거야.
Akira : 응
RanomA: 그리고 checkIt 이라는 함수에서 form 이라고 하는 인자변수는 document.mail_form 을 넘겨줄 거고
Akira : 응
RanomA: 그냥
RanomA: form.subject.value 대신에
Akira : 응
RanomA: document.mail_form.subject.value 라고 해도 돼.
Akira : 아..~
RanomA: 통째의 이름인데
RanomA: document.mail_form 이라는 걸 닉을 줘서
RanomA: form 이라고 해버리는 거야.
Akira : 응
Akira : 그럼 만약에 한문서에 폼이 여러개면 어떻게 해?
RanomA: 여기서 form 이라는 건 곧 document.mail_form의 줄임이지.
RanomA: 그러니까 변수이지. 값이 변하니까.
Akira : 꺅~ ㅠ.ㅠ
RanomA: 만약에 form1, form2 이렇게 두 개가 있다면
Akira : 응
RanomA: checkIt(form1) 이렇게 호출하면
RanomA: form 에 form1 이 들어가.
Akira : 아아~
RanomA: checkIt(form2) 이렇게 하면 form 안에 form2 가 들어가고.
RanomA: 함수가 이래서 편한 거야.
RanomA: 그렇지 않으면 form1 에도 하나 만들고, form2 에도 하나 만들어야 하는데
RanomA: 저렇게 인자만 바꿔주면 간단하게 해결되니까.
Akira : 응
RanomA: checkIt(form2) 하면
RanomA: 그때의 form.subject는 실제로는 form2.subject일 거고
RanomA: checkIt(form1) 하면
RanomA: form1.subject 인 거지.
Akira : 응
RanomA: 어려웠다...
Akira : ㅎㅎㅎㅎ
RanomA: 이해 안되면 얘기해.
RanomA: 다시 설명해줄께
Akira : 응
RanomA: 자... 어쨌거나
RanomA: form.subject 라는 건 실제로 document.mail_form.subject 라는 건 알았지?
Akira : 응
RanomA: 자... 그럼 subject는 뭔가...
RanomA: 그건 바로 <form name=mail_form> 아래에 있는
RanomA: 요소의 이름이겠지
RanomA: <input type=text name=subject> 이든지
RanomA: <select name=subject> 이든지 그렇겠지.
Akira : 응
Akira : 응~
RanomA: subject 역시 이름인 게야
Akira : 그 이름을 ㅈ각각 넣어주면 되지?
RanomA: 엉.
RanomA: advice_name
RanomA: advice_addr
RanomA: 등의 이름을 뜻하는 거지.
RanomA: 자... 그리고 그 subject 라는 것도 가지고 있는 성질이 여러개 있을 거야.
RanomA: 그 값. 색깔. 크기. 넓이.
RanomA: 그림 같으면 소스 URL 등등
Akira : 응
Akira : 다 바꿨어~
Akira : 응
RanomA: 지금 현재는 subject 만 있는데
RanomA: 아니 4개만 있는데
RanomA: 네 form 은 7개이지?
RanomA: 그중에서 필수적으로 입력해야 할 것만 골라서
RanomA: 해.
Akira : 응
Akira : 응~
RanomA: 자... 그럼 다시...
Akira : 앙
RanomA: if(!form.subject.value)
Akira : 응
RanomA: form 안에 있는 subject 요소 (뭐 텍스트 박스나 콤보박스 라디오버튼의 이름이지)의
Akira : form.subject.focus();
RanomA: 값이 없다면?
Akira : 여기도 바꿔줘야돼?
RanomA: 어허... 진도가 빠르다.
Akira : 켜켜
RanomA: 값이 없다면?
Akira : 없으면
RanomA: 경고 메시지를 띄워줘야겠지?
Akira : 응
RanomA: alert는 아까 봤지?
Akira : 응
Akira : 그것도 이미 다 바꿨어~
Akira : 캬캬캬캬
RanomA: subject는 제목이니까 그에 맞게 바꾸면 되지?
Akira : 응
RanomA: 자... 그 다음에...
RanomA: 잘못입력했다고 메시지만 뿌리면 불친절하지.
Akira : 응
Akira : 오~
RanomA: 친절하게 그 요소로 커서를 옮겨줘야겠지
Akira : 아아~ 그게 form.subject.focus();이거야?
RanomA: 그게 바로 focus() 라는 행동이야.
RanomA: 그렇지.
Akira : 응
RanomA: subject 로 focus를 옮겨라.
RanomA: 지금 양갱 폼에 저거 바로 쓰면 에러 날 거야.
RanomA: subject 라는 요소도 없는데 focus를 옮기라고 하니까.
Akira : 응
RanomA: 그러니 이름을 적절히 바꿔주셔야죠.
Akira : 응
Akira : 다 바꿔줬어요
Akira : ㅎㅎㅎ 캬캬
RanomA: 그런 식으로 다 바꿨어?
Akira : 응
RanomA: 그리고 맨 마지막을 주목하시라...
Akira : 앙
RanomA: 아, 아니...
Akira : 리턴은 뭐야?
RanomA: 아닐 경우에는
RanomA: 암짓도 하지 말고 다시 그 폼으로 되돌아가라...
RanomA: 그런 뜻이야.
RanomA: exit 인 거지...
RanomA: 지금 이 함수의 진행과정을 그만두라는 거야...
Akira : 응
RanomA: 왜냐하면...
RanomA: 맨 마지막에...
RanomA: 저 테스트를 다 통과해서, 즉 중간에 return 당할 일이 없다면?
RanomA: form.submit() 를 실행하는 거야.
RanomA: form 이 원래 submit (제출) 되기 위해 있는 거잖아.
Akira : 으ㅜㅇ
RanomA: 그래서 <input type=submit> 을 넣든지
Akira : 아아!~~
Akira : 응
RanomA: 아니면 너처럼 <input type=image> 이걸 넣는 거지.
Akira : 응
Akira : 근데~궁금한게 있어
Akira : 밑에 보면 내가 지금 취소버튼이랑 보내기 버튼 두개를 만들었잖아
Akira : 근데 지금은 <input type=image>
Akira : 이거를 보내기 버튼에 한개만 해줬잖아?
Akira : 그럼 지가 알아서 그거 누르면
Akira : 그 mail_send.php 로
Akira : 가지는거야??
Akira : 그럼 그 버튼이 여러개면 어떻게 돼?
RanomA: 자자... 하나를 가르쳐주면 10개를 아는 학생이 지금 월반하려고 하고 있습니다.
Akira : 아무거나 누를ㄸㅒ마다 다 가버리나?
RanomA: 앞의 테스트를 다 거쳐 무사회 통과된 녀석들은
RanomA: form.submit() 즉 document.mail_form.submit() 을 만나서 제출이 되겠지.
RanomA: 그런데...
Akira : 엉
RanomA: <input type=image> 나
RanomA: <input type=submit>은 메시지는 뿌려주되
RanomA: 그래고 강제로 submit 시켜버리고 말아.
RanomA: '틀렸어. 틀렸어. 그래도 제출할께.'
RanomA: 이렇게 되버리거든?
Akira : 응
RanomA: 그러니까 저 폼에서 <input type=image>를 고쳐줘야 해.
Akira : 응
RanomA: 강제로 submit 시키지는 않고 그냥 저 함수만 호출하는 기능으로.
RanomA: 클릭할 때에 저거 체크하면 되겠지?
Akira : 응
RanomA: 그럼 이렇게 말해주면 되는 거야.
RanomA: 클릭할 때에 checkIt 이라는 함수를 실행시켜서
Akira : 응
RanomA: 값을 체크하고는 통과하면 form을 submit 시켜라.
Akira : 오~
RanomA: 아니면 말고.
RanomA: 그래서...
Akira : 응
RanomA: 그걸 뜻하는 게
RanomA: onClick= 이라는 거야.
RanomA: 클릭했을 때...
Akira : 아~ 클릭했을때~!
RanomA: onClick = "checkIt(this.form)" 이라고 추가하는 거지.
Akira : 응
RanomA: 여기서 this는 지금 이 폼... 이라는 뜻이야.
Akira : 응
RanomA: 이것도 일종의 변수 같은 거지.
RanomA: 만약에 form1 과 form2 가 있을 때
RanomA: 실제로 넘길려면
Akira : 으,ㅇ
RanomA: onClick="checkIt(document.form1)"
RanomA: onClick="checkIt(document.form2)" 이렇게 각각
RanomA: 써줘야 하는 건데
Akira : 응
RanomA: 저렇게 onClick="checkIt(this.form)" 해버리면
RanomA: form1 이나 form2 나 다 동일하게 쓸 수 있지.
Akira : 응
RanomA: 지금 이 폼을 넘겨라...
Akira : 그럼 다 된거야???????????
RanomA: 아니...
RanomA: 아까도 말했듯이
Akira : 앙
RanomA: <input type=image>나 <input type=submit>은 무조건 강제로 넘긴다고 했지?
Akira : 응
RanomA: 그래서 지금 현재 <input type=image>를 바꿔줘야 해
RanomA: 그림이니까
RanomA: 그냥
Akira : 엉
RanomA: <img src=... onClick = "checkIt(this.form)">
RanomA: 해주는 거야.
RanomA: 그러면 그냥 그림인데
Akira : 응
Akira : 아 그냥 그림에?
RanomA: 다만 클릭했을 때에
Akira : 인풋 타입 이거 빼고?
RanomA: 어떤 동작을 하라고 지정해주는 거지.
RanomA: 그렇지.
RanomA: input type 을 해버리면 그거 자체가 하나의 동작을 가지는 의미가 있지만
Akira : <img src="advice_submit.gif" width="96" height="43" border="0" onClick="checkIt(this.form)">
Akira : 응
RanomA: 그냥 <img> 는 그냥 그림이니까.
RanomA: 그렇지.
Akira : 앙
RanomA: 저렇게 되면 모든 요소를
Akira : 글쿠나
RanomA: 각종 동작을 하는 걸로 만들어버릴 수 있지.
Akira : 응 진짜 신기한 프로그램의 세계야
Akira : ㅜ.ㅜ
RanomA: 만약에 테이블을 <table id=test onClick=checkIt(this.form)>
RanomA: 해버리면
Akira : 응
RanomA: 테이블을 클릭했을 때에도 똑같은 짓을 할 수 있는 거지.
Akira : 오오..
RanomA: 이런 거도 나중에 해봐.
RanomA: 만약에 radio 버튼이 있다...
RanomA: <input type=radio value=1 onClick=alert(this.value)> 하면
Akira : 응
RanomA: 저 라디오 버튼 클릭할 때에 값을 띵 경고창으로 띄워주지.
RanomA: 저기서는 value = 1이라고 했으니 1이 경고창에 나타나겠지.
RanomA: 함수를 호출하면 함수가 호출되고...
Akira : 응
RanomA: 자... 그렇게 바꿨어?
RanomA: 올려봐.
Akira : 응
Akira : 알았어 지금 올릴게
Akira : 올렷어
Akira : 보내기가
Akira : 아예 안눌러지는걸?
RanomA: 에러났네...
Akira : 소스봐봐
Akira : 어디가 틀린거야?
RanomA: 흐흠...
RanomA: this.form
RanomA: 이라는 건 input type=button에서 먹는 건가 보다.
RanomA: document.mail_form
Akira : 앙
RanomA: 이라고 강제로 지정하다.
Akira : 그걸로 바꿔?
RanomA: input, select는 form일 기본으로 하니까
RanomA: this.form을 인식하는데
RanomA: img 는 그게 아니니까
RanomA: 인식을 못하나보다.
Akira : 오오오
Akira : 된다 된다
Akira : 되는거 같아~~!
RanomA: (^_^)
Akira : 오오
Akira : 근데
Akira : 보내기 버튼에
Akira : 손가락 나오게 못해?
RanomA: style="cursor: hand" 를 추가해봐.
Akira : 된다된다~~!!
Akira : ㅠ.ㅠ
Akira : 오노 행복해~
Akira : 메일이 왓어~!!
Akira : 이제 취소 버튼 알려줘~
RanomA: style 추가했어?
RanomA: (^_^)
RanomA: 자... 그럼 취소는...
RanomA: 일단 style 넣으면 될 거고...
Akira : 응응
Akira : ㄷㅙㅅ어ㄷㅙㅅ어
RanomA: 그리고 취소에 해당하는 행동을 하라고 지정하면 되겠지...
Akira : 손가락 표시 나왓어
RanomA: onClick 을 넣는 건 마찬가지이겠지?
Akira : 응
RanomA: 아까 form.submit() 이나 form.subject.focust() 를 기억해보면
Akira : 응
RanomA: form 은 submit의 기능을 갖고 있고
RanomA: subject 같은 것들은 focus() 라는 기능을 갖고 있지?
Akira : 응
RanomA: form 이 submit을 갖고 있으면
Akira : 응
RanomA: submit 을 하기 위해서 <Input type=submit> 을 갖고 있듯이
RanomA: 취소를 하기 위해서
Akira : 응
RanomA: <input type=reset> 이 있지?
Akira : 아아..
Akira : 리셋!
RanomA: 그럼... 어떻게 표시할 것 같애?
RanomA: 짜잔... 돌아온 퀴즈시간~~~
Akira : 꺅
RanomA: 힌트~~~
Akira : 힌트~
RanomA: form.submit() 이 그 폼의 submit 하는 기능을 구현하는 거니까...
RanomA: 그럼 reset은?
Akira : form.ㄱㄷㄴㄷㅅ()
Akira : 허걱
RanomA: 강의 종료!!!
Akira : form.reset()
Akira : znffnr
Akira : 쿨룩
Akira : 요상한 표정이 잔뜩 나왓네
RanomA: 아무리 실수라도 저런 표정이 나오다닛!!!
RanomA: 용서할 수 없다.
Akira : 꽥
Akira : ㅋㅋㅋ
RanomA: 용녀에게 일러줄테닷!!!
Akira : 꺅 용녀
Akira : 용녀는 대장금 보러갔다 ㅋㅋㅋㅋㅋㅋ
RanomA: 헛
RanomA: 지금 대장금해?
RanomA: 저런... 드라마광인 양갱이 대장금도 안보고 이 강의를 듣다니...
RanomA: 영광인 걸...
Akira : 응
Akira : 난 원래 대ㅈㅏㅎ금 안본다 캬캬캬캬캬
Akira : *- -*
RanomA: ㅋㅋㅋ... 다모에 마음을?
Akira : ㅎㅎㅎ
RanomA: 자, 어쨌거나 드라마도 제끼고 강의를 듣는 양갱을 위해 속개...
Akira : 앙
RanomA: form.reset() 이라고 했는데
RanomA: form은 그냥 이름이지?
Akira : ㄹ응
RanomA: 그러니까 form이 실제로 뜻하는 건 document.mail_form 이었잖아...
RanomA: 그걸 대치하면?
Akira : 응
Akira : document.mail_form.reset
RanomA: 괄호를 뺐다!!!
Akira : 오~
Akira : document.mail_form.reset()
RanomA: 저 기능은 이미 구현되어 있는 거니까 굳이
RanomA: function을 만들 필요가 없는 거지.
RanomA: 그러니까 바로
RanomA: onClick="document.mail_form.reset()" 을 하면 되는 거지.
Akira : 오...
RanomA: 올려봐...
Akira : 오오
Akira : 됩니다 됩니다
Akira : 스승님
Akira : 아흙흙흙
Akira : ㅠ.ㅠ
Akira : 아흙흙~~~~~
Akira : 대 성공~ 아흙흙~~~
RanomA: 메일 갔다...
Akira : 기뻐라~~
Akira : 니나노~~
RanomA: 메일성공 후에 history.back() 하지 말고
RanomA: 아까 갈쳐준 <meta> 태그를 이용해서
RanomA: 다른 URL 로 보내게 하는 게 맞겠지
RanomA: 그치?
Akira : 응
Akira : 응~
Akira : 메일이 왓어요~ 왔어요~
Akira : 얼씨구 절씨구
RanomA: 크크크...
RanomA: 그러나...
Akira : 흑흑~
RanomA: 나중에 보면...
RanomA: <select> 태그 같은 경우에는 또 다르게 해줘야 할 거야.
Akira : 아아~~
RanomA: 그건 콤보박스이니까
Akira : 응
RanomA: 물론 value도 갖고 있기는 하지만
Akira : 그건 또 다르겠지?
RanomA: 몇번째를 선택했느냐에 따라 달라지니까.
RanomA: 그건 또 다른 속성이 있지. selectedIndex 라는 건데...
Akira : 응
RanomA: 그건 나중에 필요할 때에 얘기하자.
RanomA: 힌트만 말하자면...
RanomA: if (form.combox.selectedIndex == 0)
RanomA: 이렇게 하면
Akira : 응
RanomA: combobox 라는 이름을 가진 녀석이 선택된 게
RanomA: 0 (첫번째는 0으로 시작해)이면
RanomA: 어떻게 저렇게 해라...
RanomA: 라고 할 수 있을 거야...
RanomA: 1이면 두번째
RanomA: 2이면 세번째... 0부터 시작하니까...
Akira : 응
RanomA: 이해되남?
Akira : 오..
RanomA: 지금 이해해도 나중에 가면 어려울테니까 그건 그때 가서 하자고. (^_^)
Akira : 오~~
Akira : 응 넘 고마워
Akira : 땡큐땡큐 ㅠ.ㅠ
RanomA: 자, 강의 종료.
좋을 듯하지만, 어쨌거나 이런 형식의 강좌도 한 번쯤. ^_^
일단은 양갱 정도의 HTML 실력은 있어야 이해가 조금 되겠지만... 어쨌거나 강의를
제대로 이해하기 위해 아래 URL을 클릭해서 Form을 연 후에 Source 보기를 선택해서
Source를 열어놓은 후에 이해해보도록 하자.
http://akira.yang2.com/mail/form.htm
RanomA: 자... 2강 들을 준비가 됐나?
Akira : 오
Akira : 들어오셨습니까 스승님
RanomA: ㅋㅋㅋ...
RanomA: 아까 그 Form URL 부터 불러주고, 그 다음에 노트 준비해.
Akira : 응
Akira : http://akira.yang2.com/mail/form.htm
RanomA: 자... 시작한다.
Akira : 앙
RanomA: Form 값 체크하는 방식은 여러 가지가 있는데
Akira : 응
RanomA: 크게 Form 자체에서 체크하는 방법이랑
Akira : 앙
RanomA: Form 에서 값을 넘긴 프로그램에서 처리하는 방법이 있을 수 있어.
RanomA: 그러니까 지금 저 URL 내에서 Submit 하기 전에
Akira : 응
RanomA: 자바스크립트로 체크하는 법이랑
RanomA: mail_send.php 에서 값을 검사한 후에 back 시키는 방법이 있는데
Akira : 응
RanomA: 나는 앞의 것이 좋아. 왜냐하면 history.back() 했다가
Akira : 응
RanomA: 되돌아 왔더니 앞의 값이 몽창 날라가는 경우가 왕왕 있거든.
Akira : 그럼 나도 앞의 것이 좋아 -ㅁ-;;;;;;;
RanomA: 그 왜... 회원가입한다고 이것저것 다 써놨더니만
Akira : 그래~!
RanomA: 잘못됐다고 해서 Back 했더니만 홀라당
Akira : 낭패지
RanomA: 날라가는 경우 있잖아.
Akira : 글쓸때도
RanomA: 그래서 넘기기 전에 체크하는 걸 만드는 거야.
Akira : 아주 안조타
Akira : 엉
RanomA: 일단 이게 기본적인 거야.
RanomA:
<script language="javascript">
function checkIt(form)
{
if(!form.subject.value)
{
alert('제목을 입력하세요!');
form.subject.focus();
return;
}
if(!form.comment.value)
{
alert('메시지본문을 입력하세요!');
form.comment.focus();
return;
}
if(!form.post_name.value)
{
alert('이름을 입력하세요!');
form.post_name.focus();
return;
}
if(!form.post_password.value)
{
alert('글쓰기 암호를 입력하세요!');
form.post_password.focus();
return;
}
form.submit();
}
</script>
RanomA: 이 걸 HTML에서
Akira : 응
Akira : 어따넣어? 헤드 안에 넣어?
RanomA: 이건 내 프로그램에서 돌아가니까 그대로 안돼.
RanomA: 엉.
Akira : 응
RanomA: 내가 할 말을 미리 알고 있네. (^_^)
RanomA: 자... 내용을 설명해줄께.
Akira : 꺄~
RanomA: function 이라고 된 부분은 다음과 같은 동작을 하는 함수를 만들겠다고 정의하는 거야.
Akira : 응
RanomA: function (인자) { }
RanomA: 안에 넣는 거지.
RanomA: 인자는 조건을 얘기하는 거야.
Akira : 응
RanomA: 뭐 function a(인자) 해놓고는
RanomA: 인자가 1일 때에는 어떻게, 2일 때에는 어떻게
Akira : 아~
RanomA: 혹은 갑 일 때에는 어떻게, 을일 때에는 어떻게
RanomA: 이런 식으로 처리하라는 거야.
Akira : 응
RanomA: 옛날에
RanomA: 산수시간에 계산상자
RanomA: 기억나?
RanomA: 상자 위에 숫자 넣으면 아래에는 무슨 값이 나오는가...
Akira : 앙
RanomA: 그 상자가 일종의 함수이고 거기에 들어가는 값을 인자라고 보면 돼.
RanomA: 그런 계산상자처럼 값이 튀어나오는 경우도 있고, 그냥 동작만 하는 경우도 있고...
RanomA: 서론이 길었다...
Akira : 응
RanomA: 자...
Akira : ㅎㅎㅎ
RanomA: checkIt 이라는 함수를 선언하는 거야...
Akira : 엉
RanomA: 내가 불러준 스크립트를 왼쪽에 펼쳐놓고 봐.
RanomA: 그게 편할 거야.
Akira : 응
Akira : 펼쳐놓고있어
Akira : ㅎㅎㅎ
RanomA: 그리고 인자를 form 이라는 변수로 쓰는 거야.
Akira : 엉
Akira : 그건 그냥 폼이야?
RanomA: 음... form 이라는 글자가 의미가 있는 건 아냐.
RanomA: parameter 라고 써도 돼.
Akira : 응
RanomA: 그냥 이름이야. 단지 저 인자가 받을 것이 form 이기때문에 이름을 저렇게 지어놓은 것이지
Akira : 응
RanomA: checkIt (parameter) {} 해놓고는
RanomA: { } 안에서 parameter를 form 대신에 쓰면 돼.
Akira : 옹
Akira : 그렇군..
RanomA: if(!form.subject.value)
RanomA: 이 부분이 무슨 뜻일 것 같애?
Akira : 제목폼
Akira : 캬캬캬
RanomA: ! 가 뜻하는 바는?
Akira : 글쎄..
RanomA: PHP나 Java나 모두 C에서 나왔기때문에
Akira : 엉
RanomA: 서로 문법이 닮아 있기는 해.
RanomA: ! 를 아까 설명할 때에
RanomA: "뭐뭐가 아니다"
RanomA: "값이 없다"
Akira : 엉
RanomA: "값이 false이다"
RanomA: "값이 0이다"
RanomA: 이런 뜻이 된다고 했지?
Akira : 응
Akira : ~`~~
Akira : 그래그래
RanomA: form 은 위에서 checkIt(form)에서 form이라고
RanomA: 썼기때문에 form 이라고 하는 거야.
Akira : 응
RanomA: checkIt(parameter) 라고 했으면 parameter.subject.value 가 되는 거야.
Akira : 응
RanomA: 나중에 이 함수를 호출할 때에 이 form 이라는 이름의 변수에 무엇을 넘겨주느냐 하면
RanomA: <form> 을 넘겨줘.
RanomA: 이제부터 머리가 아파지가 시작한다. (^_^)
Akira : ㅎㅎㅎ
RanomA: 크게 봐서 HTML 문서를 Java Script 에서 지칭할 때에 document라고 해
RanomA: document 안에는 또 여러 가지가 있지.
RanomA: HTML 문서 안에 있는
RanomA: body, head, title 등의 태그 있지?
Akira : 응
RanomA: 그게 다 크게 보면 document 안에 들어가 있는
RanomA: 요소들이거든.
RanomA: 그걸 표현할 때에 document.title
Akira : 응
RanomA: document.head
RanomA: document.body
RanomA: 이렇게 해.
Akira : 아아~
RanomA: 창의 제목에 뜨는 <title> 태그 있지?
RanomA: 그걸 JavaScript에서 수시로 바꿀 수 있는 것도 저런 걸 이용하는 거야.
RanomA: document.title = test;
Akira : 응
Akira : 오오~~
Akira : 글쿠나~!
RanomA: 해버리면 창의 타이틀이 test로 바뀌지. title에 시계표시하는 것도 저걸 이용하는 거야
Akira : 아아~~~
RanomA: head나 title, body 같은 건 document 안에
RanomA: 하나만 있으니까 바로 document.title 이라고 해주면 되는데
Akira : 응
RanomA: 여러개 있을 수 있는 것들
RanomA: 그러니까 뭐 <table>, <form>, <img> 등은
Akira : 응
RanomA: 이름을 붙여줘서 구별시켜줘야 해
RanomA: 그게 바로 id = 혹은 name= 속성이지.
RanomA: <form name=mail_form> 해놓으면
RanomA: 그걸 지칭할 때에
RanomA: document.mail_form 할 수 있어.
Akira : 응
RanomA: 아까 우리가 <form> 태그에 이름을 뭘로 줬지?
Akira : 폼 이름??
RanomA: 엉
Akira : 뭐 이름 쓰고
Akira : 메일 쓰는 그 이름?
RanomA: 아니~~~
Akira : <form name="mail_form" action="mail_send.php" method=post>
Akira : 이거이거?
RanomA: <form> 자체의 이름
RanomA: 어.
Akira : 응 메일폼
RanomA: 거기에서 우리가 이름을 mail_form 이라고 줬지?
Akira : 응
RanomA: document.mail_form 이 가리키는 바는 바로 그 <form>에서 </form> 사이 통째를 가리키는 거야.
Akira : 응
RanomA: 그리고 checkIt 이라는 함수에서 form 이라고 하는 인자변수는 document.mail_form 을 넘겨줄 거고
Akira : 응
RanomA: 그냥
RanomA: form.subject.value 대신에
Akira : 응
RanomA: document.mail_form.subject.value 라고 해도 돼.
Akira : 아..~
RanomA: 통째의 이름인데
RanomA: document.mail_form 이라는 걸 닉을 줘서
RanomA: form 이라고 해버리는 거야.
Akira : 응
Akira : 그럼 만약에 한문서에 폼이 여러개면 어떻게 해?
RanomA: 여기서 form 이라는 건 곧 document.mail_form의 줄임이지.
RanomA: 그러니까 변수이지. 값이 변하니까.
Akira : 꺅~ ㅠ.ㅠ
RanomA: 만약에 form1, form2 이렇게 두 개가 있다면
Akira : 응
RanomA: checkIt(form1) 이렇게 호출하면
RanomA: form 에 form1 이 들어가.
Akira : 아아~
RanomA: checkIt(form2) 이렇게 하면 form 안에 form2 가 들어가고.
RanomA: 함수가 이래서 편한 거야.
RanomA: 그렇지 않으면 form1 에도 하나 만들고, form2 에도 하나 만들어야 하는데
RanomA: 저렇게 인자만 바꿔주면 간단하게 해결되니까.
Akira : 응
RanomA: checkIt(form2) 하면
RanomA: 그때의 form.subject는 실제로는 form2.subject일 거고
RanomA: checkIt(form1) 하면
RanomA: form1.subject 인 거지.
Akira : 응
RanomA: 어려웠다...
Akira : ㅎㅎㅎㅎ
RanomA: 이해 안되면 얘기해.
RanomA: 다시 설명해줄께
Akira : 응
RanomA: 자... 어쨌거나
RanomA: form.subject 라는 건 실제로 document.mail_form.subject 라는 건 알았지?
Akira : 응
RanomA: 자... 그럼 subject는 뭔가...
RanomA: 그건 바로 <form name=mail_form> 아래에 있는
RanomA: 요소의 이름이겠지
RanomA: <input type=text name=subject> 이든지
RanomA: <select name=subject> 이든지 그렇겠지.
Akira : 응
Akira : 응~
RanomA: subject 역시 이름인 게야
Akira : 그 이름을 ㅈ각각 넣어주면 되지?
RanomA: 엉.
RanomA: advice_name
RanomA: advice_addr
RanomA: 등의 이름을 뜻하는 거지.
RanomA: 자... 그리고 그 subject 라는 것도 가지고 있는 성질이 여러개 있을 거야.
RanomA: 그 값. 색깔. 크기. 넓이.
RanomA: 그림 같으면 소스 URL 등등
Akira : 응
Akira : 다 바꿨어~
Akira : 응
RanomA: 지금 현재는 subject 만 있는데
RanomA: 아니 4개만 있는데
RanomA: 네 form 은 7개이지?
RanomA: 그중에서 필수적으로 입력해야 할 것만 골라서
RanomA: 해.
Akira : 응
Akira : 응~
RanomA: 자... 그럼 다시...
Akira : 앙
RanomA: if(!form.subject.value)
Akira : 응
RanomA: form 안에 있는 subject 요소 (뭐 텍스트 박스나 콤보박스 라디오버튼의 이름이지)의
Akira : form.subject.focus();
RanomA: 값이 없다면?
Akira : 여기도 바꿔줘야돼?
RanomA: 어허... 진도가 빠르다.
Akira : 켜켜
RanomA: 값이 없다면?
Akira : 없으면
RanomA: 경고 메시지를 띄워줘야겠지?
Akira : 응
RanomA: alert는 아까 봤지?
Akira : 응
Akira : 그것도 이미 다 바꿨어~
Akira : 캬캬캬캬
RanomA: subject는 제목이니까 그에 맞게 바꾸면 되지?
Akira : 응
RanomA: 자... 그 다음에...
RanomA: 잘못입력했다고 메시지만 뿌리면 불친절하지.
Akira : 응
Akira : 오~
RanomA: 친절하게 그 요소로 커서를 옮겨줘야겠지
Akira : 아아~ 그게 form.subject.focus();이거야?
RanomA: 그게 바로 focus() 라는 행동이야.
RanomA: 그렇지.
Akira : 응
RanomA: subject 로 focus를 옮겨라.
RanomA: 지금 양갱 폼에 저거 바로 쓰면 에러 날 거야.
RanomA: subject 라는 요소도 없는데 focus를 옮기라고 하니까.
Akira : 응
RanomA: 그러니 이름을 적절히 바꿔주셔야죠.
Akira : 응
Akira : 다 바꿔줬어요
Akira : ㅎㅎㅎ 캬캬
RanomA: 그런 식으로 다 바꿨어?
Akira : 응
RanomA: 그리고 맨 마지막을 주목하시라...
Akira : 앙
RanomA: 아, 아니...
Akira : 리턴은 뭐야?
RanomA: 아닐 경우에는
RanomA: 암짓도 하지 말고 다시 그 폼으로 되돌아가라...
RanomA: 그런 뜻이야.
RanomA: exit 인 거지...
RanomA: 지금 이 함수의 진행과정을 그만두라는 거야...
Akira : 응
RanomA: 왜냐하면...
RanomA: 맨 마지막에...
RanomA: 저 테스트를 다 통과해서, 즉 중간에 return 당할 일이 없다면?
RanomA: form.submit() 를 실행하는 거야.
RanomA: form 이 원래 submit (제출) 되기 위해 있는 거잖아.
Akira : 으ㅜㅇ
RanomA: 그래서 <input type=submit> 을 넣든지
Akira : 아아!~~
Akira : 응
RanomA: 아니면 너처럼 <input type=image> 이걸 넣는 거지.
Akira : 응
Akira : 근데~궁금한게 있어
Akira : 밑에 보면 내가 지금 취소버튼이랑 보내기 버튼 두개를 만들었잖아
Akira : 근데 지금은 <input type=image>
Akira : 이거를 보내기 버튼에 한개만 해줬잖아?
Akira : 그럼 지가 알아서 그거 누르면
Akira : 그 mail_send.php 로
Akira : 가지는거야??
Akira : 그럼 그 버튼이 여러개면 어떻게 돼?
RanomA: 자자... 하나를 가르쳐주면 10개를 아는 학생이 지금 월반하려고 하고 있습니다.
Akira : 아무거나 누를ㄸㅒ마다 다 가버리나?
RanomA: 앞의 테스트를 다 거쳐 무사회 통과된 녀석들은
RanomA: form.submit() 즉 document.mail_form.submit() 을 만나서 제출이 되겠지.
RanomA: 그런데...
Akira : 엉
RanomA: <input type=image> 나
RanomA: <input type=submit>은 메시지는 뿌려주되
RanomA: 그래고 강제로 submit 시켜버리고 말아.
RanomA: '틀렸어. 틀렸어. 그래도 제출할께.'
RanomA: 이렇게 되버리거든?
Akira : 응
RanomA: 그러니까 저 폼에서 <input type=image>를 고쳐줘야 해.
Akira : 응
RanomA: 강제로 submit 시키지는 않고 그냥 저 함수만 호출하는 기능으로.
RanomA: 클릭할 때에 저거 체크하면 되겠지?
Akira : 응
RanomA: 그럼 이렇게 말해주면 되는 거야.
RanomA: 클릭할 때에 checkIt 이라는 함수를 실행시켜서
Akira : 응
RanomA: 값을 체크하고는 통과하면 form을 submit 시켜라.
Akira : 오~
RanomA: 아니면 말고.
RanomA: 그래서...
Akira : 응
RanomA: 그걸 뜻하는 게
RanomA: onClick= 이라는 거야.
RanomA: 클릭했을 때...
Akira : 아~ 클릭했을때~!
RanomA: onClick = "checkIt(this.form)" 이라고 추가하는 거지.
Akira : 응
RanomA: 여기서 this는 지금 이 폼... 이라는 뜻이야.
Akira : 응
RanomA: 이것도 일종의 변수 같은 거지.
RanomA: 만약에 form1 과 form2 가 있을 때
RanomA: 실제로 넘길려면
Akira : 으,ㅇ
RanomA: onClick="checkIt(document.form1)"
RanomA: onClick="checkIt(document.form2)" 이렇게 각각
RanomA: 써줘야 하는 건데
Akira : 응
RanomA: 저렇게 onClick="checkIt(this.form)" 해버리면
RanomA: form1 이나 form2 나 다 동일하게 쓸 수 있지.
Akira : 응
RanomA: 지금 이 폼을 넘겨라...
Akira : 그럼 다 된거야???????????
RanomA: 아니...
RanomA: 아까도 말했듯이
Akira : 앙
RanomA: <input type=image>나 <input type=submit>은 무조건 강제로 넘긴다고 했지?
Akira : 응
RanomA: 그래서 지금 현재 <input type=image>를 바꿔줘야 해
RanomA: 그림이니까
RanomA: 그냥
Akira : 엉
RanomA: <img src=... onClick = "checkIt(this.form)">
RanomA: 해주는 거야.
RanomA: 그러면 그냥 그림인데
Akira : 응
Akira : 아 그냥 그림에?
RanomA: 다만 클릭했을 때에
Akira : 인풋 타입 이거 빼고?
RanomA: 어떤 동작을 하라고 지정해주는 거지.
RanomA: 그렇지.
RanomA: input type 을 해버리면 그거 자체가 하나의 동작을 가지는 의미가 있지만
Akira : <img src="advice_submit.gif" width="96" height="43" border="0" onClick="checkIt(this.form)">
Akira : 응
RanomA: 그냥 <img> 는 그냥 그림이니까.
RanomA: 그렇지.
Akira : 앙
RanomA: 저렇게 되면 모든 요소를
Akira : 글쿠나
RanomA: 각종 동작을 하는 걸로 만들어버릴 수 있지.
Akira : 응 진짜 신기한 프로그램의 세계야
Akira : ㅜ.ㅜ
RanomA: 만약에 테이블을 <table id=test onClick=checkIt(this.form)>
RanomA: 해버리면
Akira : 응
RanomA: 테이블을 클릭했을 때에도 똑같은 짓을 할 수 있는 거지.
Akira : 오오..
RanomA: 이런 거도 나중에 해봐.
RanomA: 만약에 radio 버튼이 있다...
RanomA: <input type=radio value=1 onClick=alert(this.value)> 하면
Akira : 응
RanomA: 저 라디오 버튼 클릭할 때에 값을 띵 경고창으로 띄워주지.
RanomA: 저기서는 value = 1이라고 했으니 1이 경고창에 나타나겠지.
RanomA: 함수를 호출하면 함수가 호출되고...
Akira : 응
RanomA: 자... 그렇게 바꿨어?
RanomA: 올려봐.
Akira : 응
Akira : 알았어 지금 올릴게
Akira : 올렷어
Akira : 보내기가
Akira : 아예 안눌러지는걸?
RanomA: 에러났네...
Akira : 소스봐봐
Akira : 어디가 틀린거야?
RanomA: 흐흠...
RanomA: this.form
RanomA: 이라는 건 input type=button에서 먹는 건가 보다.
RanomA: document.mail_form
Akira : 앙
RanomA: 이라고 강제로 지정하다.
Akira : 그걸로 바꿔?
RanomA: input, select는 form일 기본으로 하니까
RanomA: this.form을 인식하는데
RanomA: img 는 그게 아니니까
RanomA: 인식을 못하나보다.
Akira : 오오오
Akira : 된다 된다
Akira : 되는거 같아~~!
RanomA: (^_^)
Akira : 오오
Akira : 근데
Akira : 보내기 버튼에
Akira : 손가락 나오게 못해?
RanomA: style="cursor: hand" 를 추가해봐.
Akira : 된다된다~~!!
Akira : ㅠ.ㅠ
Akira : 오노 행복해~
Akira : 메일이 왓어~!!
Akira : 이제 취소 버튼 알려줘~
RanomA: style 추가했어?
RanomA: (^_^)
RanomA: 자... 그럼 취소는...
RanomA: 일단 style 넣으면 될 거고...
Akira : 응응
Akira : ㄷㅙㅅ어ㄷㅙㅅ어
RanomA: 그리고 취소에 해당하는 행동을 하라고 지정하면 되겠지...
Akira : 손가락 표시 나왓어
RanomA: onClick 을 넣는 건 마찬가지이겠지?
Akira : 응
RanomA: 아까 form.submit() 이나 form.subject.focust() 를 기억해보면
Akira : 응
RanomA: form 은 submit의 기능을 갖고 있고
RanomA: subject 같은 것들은 focus() 라는 기능을 갖고 있지?
Akira : 응
RanomA: form 이 submit을 갖고 있으면
Akira : 응
RanomA: submit 을 하기 위해서 <Input type=submit> 을 갖고 있듯이
RanomA: 취소를 하기 위해서
Akira : 응
RanomA: <input type=reset> 이 있지?
Akira : 아아..
Akira : 리셋!
RanomA: 그럼... 어떻게 표시할 것 같애?
RanomA: 짜잔... 돌아온 퀴즈시간~~~
Akira : 꺅
RanomA: 힌트~~~
Akira : 힌트~
RanomA: form.submit() 이 그 폼의 submit 하는 기능을 구현하는 거니까...
RanomA: 그럼 reset은?
Akira : form.ㄱㄷㄴㄷㅅ()
Akira : 허걱
RanomA: 강의 종료!!!
Akira : form.reset()
Akira : znffnr
Akira : 쿨룩
Akira : 요상한 표정이 잔뜩 나왓네
RanomA: 아무리 실수라도 저런 표정이 나오다닛!!!
RanomA: 용서할 수 없다.
Akira : 꽥
Akira : ㅋㅋㅋ
RanomA: 용녀에게 일러줄테닷!!!
Akira : 꺅 용녀
Akira : 용녀는 대장금 보러갔다 ㅋㅋㅋㅋㅋㅋ
RanomA: 헛
RanomA: 지금 대장금해?
RanomA: 저런... 드라마광인 양갱이 대장금도 안보고 이 강의를 듣다니...
RanomA: 영광인 걸...
Akira : 응
Akira : 난 원래 대ㅈㅏㅎ금 안본다 캬캬캬캬캬
Akira : *- -*
RanomA: ㅋㅋㅋ... 다모에 마음을?
Akira : ㅎㅎㅎ
RanomA: 자, 어쨌거나 드라마도 제끼고 강의를 듣는 양갱을 위해 속개...
Akira : 앙
RanomA: form.reset() 이라고 했는데
RanomA: form은 그냥 이름이지?
Akira : ㄹ응
RanomA: 그러니까 form이 실제로 뜻하는 건 document.mail_form 이었잖아...
RanomA: 그걸 대치하면?
Akira : 응
Akira : document.mail_form.reset
RanomA: 괄호를 뺐다!!!
Akira : 오~
Akira : document.mail_form.reset()
RanomA: 저 기능은 이미 구현되어 있는 거니까 굳이
RanomA: function을 만들 필요가 없는 거지.
RanomA: 그러니까 바로
RanomA: onClick="document.mail_form.reset()" 을 하면 되는 거지.
Akira : 오...
RanomA: 올려봐...
Akira : 오오
Akira : 됩니다 됩니다
Akira : 스승님
Akira : 아흙흙흙
Akira : ㅠ.ㅠ
Akira : 아흙흙~~~~~
Akira : 대 성공~ 아흙흙~~~
RanomA: 메일 갔다...
Akira : 기뻐라~~
Akira : 니나노~~
RanomA: 메일성공 후에 history.back() 하지 말고
RanomA: 아까 갈쳐준 <meta> 태그를 이용해서
RanomA: 다른 URL 로 보내게 하는 게 맞겠지
RanomA: 그치?
Akira : 응
Akira : 응~
Akira : 메일이 왓어요~ 왔어요~
Akira : 얼씨구 절씨구
RanomA: 크크크...
RanomA: 그러나...
Akira : 흑흑~
RanomA: 나중에 보면...
RanomA: <select> 태그 같은 경우에는 또 다르게 해줘야 할 거야.
Akira : 아아~~
RanomA: 그건 콤보박스이니까
Akira : 응
RanomA: 물론 value도 갖고 있기는 하지만
Akira : 그건 또 다르겠지?
RanomA: 몇번째를 선택했느냐에 따라 달라지니까.
RanomA: 그건 또 다른 속성이 있지. selectedIndex 라는 건데...
Akira : 응
RanomA: 그건 나중에 필요할 때에 얘기하자.
RanomA: 힌트만 말하자면...
RanomA: if (form.combox.selectedIndex == 0)
RanomA: 이렇게 하면
Akira : 응
RanomA: combobox 라는 이름을 가진 녀석이 선택된 게
RanomA: 0 (첫번째는 0으로 시작해)이면
RanomA: 어떻게 저렇게 해라...
RanomA: 라고 할 수 있을 거야...
RanomA: 1이면 두번째
RanomA: 2이면 세번째... 0부터 시작하니까...
Akira : 응
RanomA: 이해되남?
Akira : 오..
RanomA: 지금 이해해도 나중에 가면 어려울테니까 그건 그때 가서 하자고. (^_^)
Akira : 오~~
Akira : 응 넘 고마워
Akira : 땡큐땡큐 ㅠ.ㅠ
RanomA: 자, 강의 종료.






