form 관련 자바 스크립트 강좌

운영자

| 기사입력 2005/02/13 [15:55]

form 관련 자바 스크립트 강좌

운영자

ㅣ 기사입력

2005/02/13 [15:55]

javascript

자바스크립트는 netscape사에서 브라우저의 기능을 항상시킬 목적으로 LiveScript라는 언어를 만들었는데 이후 자바가 나오면서 이름을 자바 스크립트로 변경을 하였는데 자바와는 전혀 관계가 없는 브라우져 스크립트 언어이다.

기본 구조

<html>

<body>

<script language="javascript">



</script>

</body>

</html>

데모 보기

주석처리

// 주석 입니다.

/* 주석 입니다.

자스스크립드 */

<html>
<body>
<script language="javascript">

</script>
</body>
</html>

데모보기

　

문서헤드에 선언을 이용한 구조
(head 에 변수을 선언 후 body 에서 출력을 함 )

변수 : 자바스크립트는 html 와 같이 대소문자를 구분하지 않지만
         변수는 대소문자를 구분하며 처음 시작은 Aa -Zz 나 _ 로
         시작할 수있으며 나머지는 문자와 숫자로 구성된다.

<html>
<head>
<script language="javascript">

</script>

</head>
<body>
<script language="javascript">

</script>
</body>
</html>

데모보기

html 과 자바스크립트 나누기

<html>
<body>
<script language="javascript" src="script.js" >
</script>

</body>

</html>

script.js



데모보기

     연산자

　연산자 설명

    + 더하기

    - 빼기

   * 곱하기

/ 나누기

% 나머지

++ 증가 연산

-- 감소 연산

&& 논리곱

|| 논리합

! 부정

== 같다.

!= 같지 않다.

< 크다

<= 작거나 같다.

> 크다

<= 크거나 같다

         논리문
        if 문
       if(조건 ) {
       참입니다.
      } else {
      거짓입니다.
     }　
==================================
<html>
<body>
<script language="javascript" >

    hi="9"

if( hi > 1 ) {

document.write(" 참입니다. ")

} else {

document.write(" 거짓입니다. ")

}

</script>
</body>
</html>
   데모보기

while
조건이 참인 동안 반복적으로 실행
while (조건) {
}
============================================
<html>
<body>
<script language="javascript" >
hi="1"

while( hi < 9 ) {

document.write(" 참입니다. <br>")
hi++

}

</script>
</body>
</html>

데모 보기
do while 문
while 문과 시슷하며 do 문은 적어도 do안에 문장이 한번은 실행이 되나는 것이다.
do{
　
    } while ( 조건 ) ;

   ====================================
<html>
<body>
<script language="javascript" >
hi=1

do{
hi++
document.write(" 안녕하세요<br> ")

}while( hi < 3 );

</script>
</body>
</html>
　
데모보기
　
for 문
while 문과 같이 반복 실행과 같은 의미 이지만 조건 부분이 다르다.
   for(변수 초기화 ; 조건 ; 변수 증감소    ) {
　
}
　
==============================
<html>
<body>
<script language="javascript" >

for( i =0 ; i <9 ; i++ ) {

document.write(" 안녕하세요<br> ")

}

</script>
</body>
</html>

데모보기
　
switch 문
switch(조건) {
    case 0 :
         break
    case 1 : x=
       break

     default:
    }
============================================

<html>
<body>
<script language="javascript" >

i= 2

switch(i) {

case 1:
document.write(" 안녕하세요 case1<br> ")
break

case 2:

document.write(" 안녕하세요 case 2<br> ")

break

default:

document.write(" 안녕하세요 default<br>i ")

}

</script>
</body>
</html>

데모보기
　
   function 함수

function 함수를 이요하여 자신만의 함수를 선언 할 수 있다.
　
function   function이름 ( f1 , f2, f2,.. ) {
}
=================================================
<html>
<head>
<title> 자바 스크립드 데모 </title>
<script language="javascript" >

function say(p1 , p2) {

document.write(p1 ,p2 );

}

</script>
</head>

<body>

<script language="javascript" >

say("<h2>" ,"안녕하세요<br>");
say ("<font size=\"4\" color=\"#800000\"> ", " 안녕하세요 ");
</script>
</body>
</html>

　
　
데모 보기

윈도우 관련 함수
새창 열기
window.open ( "연결페이지","윈도우이름"," 가로크기 )
window.open('poll_view.html','poll','marginwidth=0,marginheight=0,resizable=no,scrollbars=yes,width=435,height=350')
=================================================
<html>
<head>
<title> 자바 스크립드 데모 </title>
<script language="javascript" >

function winopen() {

window.open('j1.html','poll','scrollbars=yes,width=435,height=350')

}

</script>
</head>

<body>
<h1><center> 새창 열기
<form>
<input type=button value=새창열기 onClick=winopen() >

</form>

</body>
</html>

데모보기
　
이미지로 새창 열기
=================================================
<html>
<head>
<title> 자바 스크립드 데모 </title>
<script language="javascript" >

function winopen() {

window.open('j1.html','poll','scrollbars=yes,width=435,height=350')

}

</script>
</head>

<body>
<h1><center> 이미지로 새창 열기 <P>

<a href="#" onClick="winopen()" >
<img src="login.gif" border="0"></a>

</body>
</html>
데모보기
     다른 유형 새창열기
<input type='button' value='결과보기' onclick="window.open('poll_view.html','poll','marginwidth=0,marginheight=0,resizable=no,scrollbars=yes,width=435,height=350')
　
   창 닫기
　
<INPUT TYPE="button" VALUE="닫기" onClick="window.close()">
　
       앞 뒤로 이동하기
window.history(-1);
window.history(1);
==============================================
<head>
<title> 자바 스크립드 데모 </title>

</head>

<body>
<h1><center> 앞 뒤로 가기 <P>

<form>
<input type=button onclick=window.history.go(-1) value=이전화면 ><p>
<input type=button onclick=window.history.go(1) value=앞화면 ><p>
</form>
<a href="#" onclick=window.history.go(-1) ><img src="login.gif" border="0" value=이전화면 ></a><p>

<a href="#" onclick=window.history.go(-1)>이전화면</a>

</body>
</html>

데모보기
　
        alert
<html>
<head>
<title> 자바 스크립드 데모 </title>

<script language="javascript">

</script>

</head>

<body>
<h1><center> alert <P>

<form>
<input type=button value="alert 데모" onclick=al("안녕하세요") ><p>
</form>

<a href="#" onclick=al("안녕하세요") >클릭 </a>
</body>
</html>

데모보기

                 폼 관련 자바스크립드
    자바스크립트로 폼을 검증하여 서버쪽에서 에러 처리 하는
     것보다 효율적이다.
     폼입력 ----> 자바스크립트로 검사 --> 서버에전송

     p1.html
( 자바스크립드가 없는 일반적인 구조 )
    <html>
     <body>
      <form name="fname" action="add.php" >
   <br>이름 <input type='text' name="username" size='25'>
    <br>메일<input type="text" name="email" size="25">
   <br><input type="submit" value="보내기" >
    </form>
   </body>
   </html>
     ===================================
          add.php
   <?
   echo(" 당신의 이름은 $username 이고 메일은 $email 입니다. ");
    ?>
    데모보기
　

   서버에서 폼 검사
p2.html

( 자바스크립드가 없는 일반적인 구조 )
    <html>
     <body>
      <form name="fname" action="addcheck.php" >
   <br>이름 <input type='text' name="username" size='25'>
    <br>메일<input type="text" name="email" size="25">
   <br><input type="submit" value="보내기" >
    </form>
   </body>
   </html>
     ===================================
     //     addcheck.php
   <?
    if(!$username) {
echo("
     <script language='javascript'>
      window.alert(' 이름이 없습니다')
      history.go(-1)
       </script>
      ");
    exit;
}
　
<?
    if(!$email) {
echo("
     <script language='javascript'>
      window.alert(' 메일 없습니다')
      history.go(-1)
       </script>
      ");
    exit;
}
　
　
   echo(" 당신의 이름은 $username 이고 메일은 $email 입니다. ");
    ?>
    데모보기
　
　
　

      자바 스크립드 이용
   jp1.html

//첫번제 폼 document.forms[0].elements[0].value

//두번째 폼 document.forms[1].elements[0].value
<html>

<script language="javascript" >

function check() {

if(!document.forms[0].username.value)
{

alert(' 이름을 입력해 주십시오');

return;

}

if(!document.forms[0].elements[1].value) {
alert(' 메일을 입력해 주십시오');

return;

}

document.forms[0].submit();

}
</script>

<body>
<form name="fname" action="add.php" >
<br>이름 <input type='text' name="username" size='25'>
<br>메일<input type="text" name="email" size="25">
<br><input type="button" value="보내기" onclick="check()">
</form>
</body>
</html>

     ===================================
          add.php
   <?
   echo(" 당신의 이름은 $username 이고 메일은 $email 입니다. ");
    ?>
    데모보기
　
===============================================================
// 직접 폼이름지정 document.fname.username.value
// 이름폼

// document.fname.email.value
// 메일 폼

<html>

<script language="javascript" >

function check() {

if(!document.fname.username.value)
{

alert(' 이름을 입력해 주십시오');

return;

}

if(!document.fname.email.value) {
alert(' 메일을 입력해 주십시오');

return;

}

document.fname.submit();

}
</script>

<body>
<form name="fname" action="add.php" >
<br>이름 <input type='text' name="username" size='25'>
<br>메일<input type="text" name="email" size="25">
<br><input type="button" value="보내기" onclick="check()">
</form>
</body>
</html>

데모보기
======================================================
// focus 함수를 이용하여 return 후 커서 위치 지정
　
<html>

<script language="javascript" >

function check() {

if(!document.fname.username.value)
{

alert(' 이름을 입력해 주십시오');

document.fname.username.focus();

return;

}

if(!document.fname.email.value) {
alert(' 메일을 입력해 주십시오');

document.fname.email.focus();
return;

}

document.fname.submit();

}
</script>

<body>
<form name="fname" action="add.php" >
<br>이름 <input type='text' name="username" size='25'>
<br>메일<input type="text" name="email" size="25">
<br><input type="button" value="보내기" onclick="check()">
</form>
</body>
</html>

　
   데모보기

=================================================================
     this
this 라는 함수를 이용하면 document.fname 을
form 함수로 줄여 쓸 수 있다.
// document.fname.email.focus();
// form.username.focus();
<html>

<script language="javascript" >

function check(form) {

if(!form.username.value)
{

alert(' 이름을 입력해 주십시오');

form.username.focus();

return;

}

if(!form.email.value) {
alert(' 메일을 입력해 주십시오');

form.email.focus();
return;

}

document.fname.submit();

}
</script>

<body>
<form name="fname" action="add.php" >
<br>이름 <input type='text' name="username" size='25'>
<br>메일<input type="text" name="email" size="25">
<br><input type="button" value="보내기" onclick="check(this.form)">
</form>
</body>
</html>

데모보기

================================================================
        confirm
// confirm 전송전 form 다시 확인 후 yes 면 true 을 반환
　
<html>

　

<script language="javascript" >

function check(form) {

if(!form.username.value)
{

alert(' 이름을 입력해 주십시오');

form.username.focus();

return;

}

if(!form.email.value) {
alert(' 메일을 입력해 주십시오');

form.email.focus();
return;

}

if( confirm(" 등록을 하시겠습니다.")) {

form.submit();

} else {

return;
}

}
</script>

<body>
<form name="fname" action="add.php" >
<br>이름 <input type='text' name="username" size='25'>
<br>메일<input type="text" name="email" size="25">
<br><input type="button" value="보내기" onclick="check(this.form)">
</form>
</body>
</html>

   데모보기
　

　

                 라디오 폼 검사
　
<html>

<script language="javascript" >

function check(form) {

for( var i=0 ; i<form.ra.length ; i++ ) {

if(form.ra[i].checked == true ) {

alert ( i+1 + "선택 " );

break;
}

}

if(i == form.ra.length) {
alert(' 선택을 해야 합니다.');

return;

}

form.submit();

}
</script>

<body>
<form name="fname" action="add.php" >

<input type="radio" name="ra" value="a"> A 번<br>
<input type="radio" name="ra" value="b"> b 번<br>
<input type="radio" name="ra" value="c"> c 번<br>
<input type="radio" name="ra" value="d"> d 번<br>

<input type="button" value="선택하기" onClick="check(this.form)" >

</form>
</body>
</html>

　
　
    데모보기
　

checkbox 검사
<html>

<script language="javascript" >

function check(form) {

for( var i=0 ; i<form.ra.length ; i++ ) {

if(form.ra[i].checked == true ) {

alert ( i+1 + "선택 " );

}

}

form.submit();

}
</script>

<body>
<form name="fname" action="add.php" >

<input type="checkbox" name="ra" value="a"> A 번<br>
<input type="checkbox" name="ra" value="b"> b 번<br>
<input type="checkbox" name="ra" value="c"> c 번<br>
<input type="checkbox" name="ra" value="d"> d 번<br>

<input type="button" value="선택하기" onClick="check(this.form)" >

</form>
</body>
</html>

데모보기
　
　
　
　

기타 문의는 byun@iwav.co.kr (2001.2.5)

트위터

페이스북

카카오톡