- input.html -
<script language = "javascript">
function output(form) {
var string = form.hobby.value;
if(!string) {
alert("취미를 입력하세요!");
form.hobby.focus();
return;
} else {
form.submit();
}
}
</script>
<form name = "input_form" method = "post" action = "./output.html">
취미 : <input type = "text" name = "hobby">
<input type = "button" value = "확인" onclick = "output(this.form)">
</form>
- output.html -
<?
echo("당신의 취미 : $hobby");
?>
위 예제는 앞 강좌의 마지막 예제에 몇 가지가 추가되고 수정된 부분이 있습니다.
먼저, 앞 강좌에서는 output() 함수 내에서 hobby 이름을 가진 텍스트 박스의 객체를 표현할 때 document.input_form.hobby.value 라고 써줬습니다.
그런데, 위 예제에서는 조금 단축해서, form.hobby.value 라고 쓰여진 것을 볼 수 있습니다.
왜냐하면, 위 예제의 <form> .. </form> 태그 안에 기술된 button 객체의 onclick 이벤트의 호출 함수 즉, output() 함수의 인자로 this.form 이라는 것을 써 주었으며, 그 호출 함수의 형식과 일치하게 자바스크립트의 코드에 선언된 output() 함수 역시 form 이라는 인자를 가지도록 써 주었기 때문입니다.
즉, 버튼을 눌렀을 때 그 버튼(button) 객체를 포함하고 있는 상위 객체 즉, input_form 객체명을 this.form 이라는 인자에 실어서 실제로 선언된 output() 함수의 form 인자로 전달하기 때문에, 그 output() 함수 안에서 input_form 객체에 포함된 button 객체나 hobby(텍스트 박스) 객체를 표현할 때, 굳이 그 상위 객체의 실제 이름을 명시해 줄 필요가 없는 것입니다.
(이해하시기가 좀 어렵나요?..^^;)
암튼, 위 예제에서 form.hobby.value 라는 코드는 input_form.hobby.value 와 동일한 의미를 가집니다.
다음으로, form.hobby.focus(); 코드가 보이죠. 이 focus() 라는 새로운 메소드(method)는 해당 객체에 커서를 위치시키는 역할을 합니다.
따라서, 위 예제에서 form.hobby.focus(); 코드는 hobby 라는 이름을 가진 텍스트 박스로 커서를 위치시키라는 의미가 되겠죠.
다음, return; 구문이 보이죠. 이 return 명령어는 전에 함수(function) 부분을 설명하는 강좌에서 잠깐 말씀드린 것처럼, 함수의 반환값을 되돌려 주거나, 함수의 실행을 중지시킬 때 사용되는 명령어입니다.
다음으로 form.submit(); 이라는 코드도 보이죠. 이 submit() 메소드는 해당 form 객체안에 있는 하위 객체의 입력 혹은 선택값들을 전송하라는 의미입니다.
여기에서는, hobby 이름을 가진 텍스트 박스의 입력값을 전송하라는 의미가 되겠죠.
그리고, form.submit(); 에 의해 전송될 값들은 <form> 태그안의 action = "..." 에 명시된 웹 페이지로 전송되게 됩니다.
따라서, 위 예제에서는 hobby 텍스트 박스에 입력한 문자열이 같은 디렉토리에 존재하는 output.html 파일로 전송되게 됩니다.
그 결과, 텍스트 박스 객체명에 해당되는 hobby 가 output.html 파일 내에서는 $hobby 라는 변수가 되며, echo() 명령어에 의해 $hobby 변수값 즉, 사용자가 입력한 문자열이 출력되게 됩니다.
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 430 | 19년 전 | 4097 | ||
| 429 | 19년 전 | 3297 | ||
| 428 | 19년 전 | 4132 | ||
| 427 | 19년 전 | 3467 | ||
| 426 | 19년 전 | 3101 | ||
| 425 | 19년 전 | 3403 | ||
| 424 | 19년 전 | 2438 | ||
| 423 | 19년 전 | 2861 | ||
| 422 | 19년 전 | 2347 | ||
| 421 | 19년 전 | 3707 | ||
| 420 | 19년 전 | 4735 | ||
| 419 | 19년 전 | 3793 | ||
| 418 |
 醉生夢死™ |
19년 전 | 1742 | |
| 417 | 19년 전 | 2743 | ||
| 416 | 19년 전 | 2388 | ||
| 415 | 19년 전 | 2605 | ||
| 414 | 19년 전 | 4408 | ||
| 413 |
醉生夢死™ |
19년 전 | 2596 | |
| 412 | 19년 전 | 3046 | ||
| 411 |
 강강술냄세 |
19년 전 | 2991 | |
| 410 |
 somang |
19년 전 | 3681 | |
| 409 |
 Photofly |
19년 전 | 3632 | |
| 408 |
강강술냄세 |
19년 전 | 1853 | |
| 407 | 19년 전 | 2226 | ||
| 406 | 19년 전 | 2781 | ||
| 405 | 19년 전 | 2443 | ||
| 404 | 19년 전 | 4297 | ||
| 403 | 19년 전 | 3301 | ||
| 402 |
NeoGenesis
|
19년 전 | 4088 | |
| 401 | 19년 전 | 2606 | ||
| 400 |
 꿈꾸는비행기 |
19년 전 | 2493 | |
| 399 | 19년 전 | 2953 | ||
| 398 | 19년 전 | 2483 | ||
| 397 | 19년 전 | 2778 | ||
| 396 | 19년 전 | 2470 | ||
| 395 | 19년 전 | 3176 | ||
| 394 | 19년 전 | 1717 | ||
| 393 | 19년 전 | 2992 | ||
| 392 | 19년 전 | 2249 | ||
| 391 | 19년 전 | 2176 | ||
| 390 | 19년 전 | 2284 | ||
| 389 | 19년 전 | 2644 | ||
| 388 | 19년 전 | 2174 | ||
| 387 | 19년 전 | 4484 | ||
| 386 |
醉生夢死™ |
19년 전 | 2689 | |
| 385 |
醉生夢死™ |
19년 전 | 2480 | |
| 384 | 19년 전 | 3008 | ||
| 383 | 19년 전 | 3052 | ||
| 382 | 19년 전 | 3105 | ||
| 381 |
 태엽푸는새 |
19년 전 | 2629 | |
| 380 |
태엽푸는새 |
19년 전 | 3014 | |
| 379 | 19년 전 | 2546 | ||
| 378 | 19년 전 | 2205 | ||
| 377 | 19년 전 | 2776 | ||
| 376 | 19년 전 | 2467 | ||
| 375 |
태엽푸는새 |
19년 전 | 2557 | |
| 374 | 19년 전 | 3815 | ||
| 373 | 19년 전 | 3264 | ||
| 372 | 19년 전 | 4985 | ||
| 371 |
세은아빠2
|
19년 전 | 2412 | |
| 370 | 19년 전 | 4496 | ||
| 369 | 19년 전 | 3109 | ||
| 368 | 19년 전 | 2900 | ||
| 367 | 19년 전 | 3722 | ||
| 366 | 19년 전 | 2649 | ||
| 365 | 19년 전 | 3735 | ||
| 364 | 19년 전 | 4009 | ||
| 363 | 19년 전 | 3435 | ||
| 362 | 19년 전 | 3474 | ||
| 361 | 19년 전 | 4106 | ||
| 360 |
hwatta
|
19년 전 | 2360 | |
| 359 | 19년 전 | 5099 | ||
| 358 | 19년 전 | 3654 | ||
| 357 | 19년 전 | 2595 | ||
| 356 |
sdesign1s
|
19년 전 | 2274 | |
| 355 | 20년 전 | 2749 | ||
| 354 | 20년 전 | 3028 | ||
| 353 | 20년 전 | 2788 | ||
| 352 |
 bbking |
20년 전 | 5768 | |
| 351 |
 damoa.biz |
20년 전 | 2700 | |
| 350 |
bbking |
20년 전 | 4290 | |
| 349 |
hwatta
|
20년 전 | 2180 | |
| 348 | 20년 전 | 7306 | ||
| 347 | 20년 전 | 2412 | ||
| 346 | 20년 전 | 3502 | ||
| 345 | 20년 전 | 4305 | ||
| 344 | 20년 전 | 2642 | ||
| 343 | 20년 전 | 3918 | ||
| 342 | 20년 전 | 3065 | ||
| 341 | 20년 전 | 4086 | ||
| 340 |
damoa.biz |
20년 전 | 5138 | |
| 339 |
damoa.biz |
20년 전 | 4231 | |
| 338 | 20년 전 | 5867 | ||
| 337 | 20년 전 | 2043 | ||
| 336 |
damoa.biz |
20년 전 | 3315 | |
| 335 |
damoa.biz |
20년 전 | 3536 | |
| 334 |
damoa.biz |
20년 전 | 2919 | |
| 333 |
hwatta
|
20년 전 | 2432 | |
| 332 | 20년 전 | 4653 | ||
| 331 | 20년 전 | 2267 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기