[java] 강좌 – Cgi 와 자바 스크립트 활용

zb4_program_1.zip### cgi 와 자바스크립트의 활용

                             –  작성자 : 서 진우 ( alang@sysmng.com)

사용자와 상호작용에 충실한 웹프로그램의 구현을 위해서는 필수적으로 텍스트 박스,

radio 버튼, 체크박스 등 다양한 사용자 입력 양식의 특징을 이해하고 이들 객체를

제어 할 수 있어야 한다.  이런 객체를 웹 프로그램과 자연스럽게 중간에서 연결을

해주는 자바스크립트 대해 알아보자.

  참고 – 샘플 소스를 첨부 자료로 올립니다.

1. 자바스크립트로 입력 양식 다루기.

자바스크립트는 다음과 같은 형식으로 시작하여 끝난다.

<script language=”javascript”>

.

.

</script>

다음 예로 자바스크립트에서 객체를 다루는지 살펴보자

<html>

<head>

<script language=”javascrip”>

<!–

function checkIt( ) {

        var name=document.forms[0].elements[0].value;

        var email=document.forms[0].elements[1].value;

        if(!name || !email) {

                alert(‘값을 입력하지 않았습니다. ‘);

                return;

                }

        document.forms[0].submit( );

        }

// –>

</script>

<body>

<form name=”signform” action=”checkin.php3″>

<input type=”text” name=”name” size=25>

<input type=”text” name=”email” size=30>

<input type=”button” value=”항목눌러봐” onClick=”checkIt()”>

</form>

</body>

아래 부분은 자바스크립트에서 객체를 다루는 형식을 대표적으로 나타낸다.

        var name=document.forms[0].elements[0].value;

        var email=document.forms[0].elements[1].value;

자바스크립트에서는 변수선언시 변수 앞에 var 를 사용한다.

위의 구문은 먼저 변수 name 선언하고 변수에 해당되는 객체를 지정한것이다.

document.forms[0].elements[0].value;

document : 현재 문서를 나타내는 객체

forms[0] : 현재 문서에서 첫번째 <form>~~</form> 구문을 나타내는 객체

elements[0] :  현재 문서에서 첫번째 입력양식을 나타내는 객체

value : 입력양식에 해당되는 값을 나타내는 객체

<form name=”signform” action=”checkin.php3″>

<input type=”text” name=”name” size=25>

<input type=”text” name=”email” size=30>

<input type=”button” value=”항목눌러봐” onClick=”checkIt()”>

</form>

자바 스크립트에서는 웹부라우져에 나타나는 모든 내용을 객체로서 나타낼수

있다…

이미지 : images[0]

링크 : links[0]

부라우저창 : window

2. 텍스트 입력양식

<input   type=”text”

        name=”username”

        size=”10″

        maxlength=”20″

        value=”서진우”

>

텍스트 입력양식 객체가 가지고 있는 속성과 메쏘드

속성

name:텍스트 입력 양식 객체가 가지는 고유이름

value:텍스트 입력 양식에 사용자가 입력한 값

매쏘드

focus() :method 를 호출한 해당 객체가 가리키는 텍스트 입력박스에 cus 를 위치함

select():method 를 호출한 해당 객체가 가리키는 텍스트 입력 박스에 문자열이 있는

             경우 이 문자열을 선택한다.

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

        alert (“Name 란이 비어 있습니다. \\nName란을 채워주셔야 합니다. “);

        document.signform.username.focus();

        return;

        }

<form name=signform action=checkin.php3>

<input type=text name=username size=13>

</form>

3. textarea  입력 양식

<textarea  name=”comment”

            rows=”10″

            cols=”60″

            wrap=”on”

>

</textarea>

rows : 텍스트 박스의 세로 길이

cols : 텍스트 박스의 가로 길이

wrap : on 일때는 문자열이 cols 에 지정된 길이 부다 더 길 경우 다음 줄에 계속

           이어 입력 할수 있도록 한다. off는 스크롤바가 생기며 계속 입력이 되어진다.

텍스트 영역 입력 양식 객체가 가지고 있는 속성과 메쏘드

속성

name:텍스트영역  입력 양식 객체가 가지는 고유이름

value:텍스트영역  입력 양식에 사용자가 입력한 값

매쏘드

focus() :method 를 호출한 해당 객체가 가리키는 텍스트 입력박스에 cus 를 위치함

select():method 를 호출한 해당 객체가 가리키는 텍스트 입력 박스에 문자열이 있는

         경우 이 문자열을 선택한다.

<html>

<head>

        <script language=”javascript”>

        <!–

        function focusIt() {

                document.guestbook.comment.focus();

                document.guestbook.comment.select();

                return;

                }

        function checkIt(form) {

                var str = form.comment.value;

                alert(str);

                }

        // –>

        </script>

</head>

<body onload=”focusIt()”>

<form name=”guestbook”>

<textarea name=”comment” rows=10 cols=60>

안녕하세요? 무천과 아랑이 함께하는 즐거운 세상입니다. 모두들 즐겁운 마음으로

생활할수 있도록 해요..

</textarea><br>

<input type=”bottom” value=”다음” onClick=”checkIt(this.form)”>

</form>

4. password 입력 양식

<input type=”password”

                name=”passwd”

                size=”10″

                maxlength=”20″

                >

<html>

<head>

<script language=”javascript”>

<!–

function checkIt(form) {

        var pass = form.passwd.value;

        alert(pass);

        }

// –>

</script>

</head>

<body>

<form name=signform>

패스워드 :

<input type=”password” name=”passwd” size=”10″ maxlength=”20″>

<input type=”botton” value=”눌러봐” onClick=”checkIt(this.form)”>

</form>

</body>

</html>

5. button 입력 양식

<input type=”button”

                value=”눌러줘”

                onClick=”checkIt(this.form)”

        >

버튼양식의 속성과 메쏘드

속성

name : 버튼 입력 양식의 고유이름

value: 버튼 위에 쓰여지는 무자열

이벤트헨들러

onClick : 사용자가 버튼을 클릭하는 순간 발생하는 이벤트 헨들러로

                  여기서 설정한 함수를 호출, 실행한다.

<script language=”javascript”>

<!–

function checkIt(form) {

    if(!form.username.value) {

        form.username.focus();

        alert (“이름을 입력하지 않으셨습니다.!”);

        return;

    }

if(!form.email.value) {

    form.email.focus();

        alert (“이메일을 입력하지 않으셨습니다.!”);

        return;

    }

alert (“입력하신 이름은” + form.username.value + “이고 이메일은”

                + form.email.value + “입니다.”);

}

// –>

</script>

<form name=”signform”>

이름 : <br>

<input type=”text” name=”username”><br>

이메일: <br>

<input type=”text” name=”email”><br>

<input type=”button” value=”눌러” onClick=”checkIt(this.form)”>

</form>

6. submit 전송 및 reset 버튼

데이타 전송 버튼은 입력 양식에 사용자가 입력 또는 선택한 값들을 CGI

프로그램에 넘겨 주기 위해서 사용된다. 취소 값은 초기화 할때 사용된다.

<input type=”submit”

                value=”날려줘”

        >

<input type=”reset”

                value=”사라져”

        >

7. hidden 입력양식

hidden 은 브라우저에 입력양식은 나타나지 않고, 그값만  

<input type=”hidden”

                name=”username”

                value=”아랑”

        >

8. radio 버튼 양식

<input type=”radio”

                name=”rdo”

                value=”1번째”

                checked

        >

radio 버튼 양식은 여러 항목 중에서 한가지만을 선택하수 있는 특징을 가진

입력 양식이다.  radio 버튼의 경우 다른 입력 양식과 달리 여러 개의 항목

중 반드시 하나를 선택해야 하므로 선택 대상이 되는 모든 항목은 모두 동일

한 name 값을 갖는다.

속성 및 메쏘드

속성

name : radio 버튼 객체가 가지는 고유 이름으로 HTML 의 <input> 태그에서

           name 속성으로 설정한 값을 가리킨다.

value : radio 버튼의 각각의 항목이 저장하고 있는 값

length : 하나의 radio 버튼 그룹 내에서 선택할 수 있는 총 항목수

                 즉 radio 버튼의 총 개수를 의미한다.

checked : 해당 객체의 radio 버튼 항목이 선택되어 있는지 여부를 저장한다.

                  만일 해당 항목이 선택되어 있으면 이 값은 true를 가지고, 그렇지

                  않으면 false 를 가진다.

이벤트 헨들러

onClick : 사용자가 radio 버튼을 클릭하는 순간에 발생하는 이벤트에 의한

                  이벤트 핸들러로 여기서 지정한 함수가 radio 버튼을 클릭하는

                  순간 호출, 실행된다.

<html>

<head>

<script langauge=”javascript”>

<script language=”javascript”>

<!–

function checkIt() {

    if(document.forms[0].obj1[0].checked == true) {

        alert(‘도메인을 가지고 계시네요.!!’);

        location=’server002.htm’;

        return false;

    }

    if(document.forms[0].obj1[1].checked == true) {

        alert(‘도메인이 없으시다구요.!!’);

        location=’server003.htm’;

        return false;

    }

    document.forms[0].submit();

}

// –>

</script>

</head>

<body>

<form name=chkform>

yes 

<input type=”radio” name=”obj1″ onClick=”checkIt()”>

no 

<input type=”radio” name=”obj1″ onClick=”checkIt()”>

</form>

</body>

</html>

9. checkbox 입력 양식

checkbox 는 하나만 선택할 수 있는 radio 버튼과 달리 여러 개의 항목을

함께 선택할수 있는 특징을 갖는 입력 양식이다. 이런점에서 radio버튼이

동일한 name 명을 갖는거와 달리 checkbox 는 모두 서로 다른 이름을 갖

는다.

<input type=”checkbox”

                name=”chkb1″

                value=”1101″

                checked

        >

여기서 name 은 다른 checkbox 와 구별하기 위한 checkbox의 고유이름이고

value 는 해당 체크박스를 선택했을때 전달 되는 값이다. checked 옵션은

checkbox 를 생성할때 미리 check 가 된 상태로 표시하고자 할때 설정한다.

속성 및 메쏘드

속성

name : checkbox 객체가 가지는 고유 이름으로 HTML 의 <input> 태그에서

       name 속성으로 설정한 값을 가리킨다.

value : checkbox 의 각각의 항목이 저장하고 있는 값

checked : 해당 객체의 checkbox 항목이  선택되어 있는지 여부를 저장한다.

          만일 해당 항목이 선택되어 있으면 이 값은 true를 가지고, 그렇지

          않으면 false 를 가진다.

이벤트 헨들러

onClick : 사용자가 checkbox 를  클릭하는 순간에 발생하는 이벤트에 의한

          이벤트 핸들러로 여기서 지정한 함수가 checkbox 를  클릭하는

          순간 호출, 실행된다.

<html>

<head>

<script language=”javascript”>

<!–

function checkIt(form) {

    

    var str=””;

    

    for(var i = 1; i <= 5; i++) {

        if(eval(“form.chk” + i + “.checked”) == true) {

            str  += i + “번째 항목을 선택하셨습니다. 선택하신 항목의 값은” +

                   eval(“form.chk” + i +”.value “) + ” 입니다.\\n”;

                }

            }

        alert(str);

    }

//–>

</script>

</head>

<body>

<form name=chkform>

<b>아래 버튼 중 하나를 눌러봐..!!</b><br>

<input type=”checkbox” name=”chk1″ value=”1101″>첫번째 항목<br>

<input type=”checkbox” name=”chk2″ value=”1102″>두번째 항목<br>

<input type=”checkbox” name=”chk3″ value=”1103″>세번째 항목<br>

<input type=”checkbox” name=”chk4″ value=”1104″>네번째 항목<br>

<input type=”checkbox” name=”chk5″ value=”1105″>다섯번째 항목<br>

<input type=”button” value=”결과확인” onClick=”checkIt(this.form)”>

</form>

</body>

</html>

eval() 함수는 문자열을 속성을 가진 변수로 만들어 준다.

10. 리스트박스 양식

리스트 박스는 여러개의 목록 중에서 하나만 선택하거나 또는 여러개를

동시에 선택할수 있는 선택입력 양식입니다. 만일 여러개중 하나만을 선

택해야 하는 상황에서 선택 항목이 10개 이상 나오면 라디오 버튼 보다

는 리스트 박스를 사용하는 것이 공간 절약면에서 좋다.

<select name=”listbox” size=”1″ [multiple]>

<option value=”101″ selected>선택항목 1

<option value=”102″>선택항목 2

<option value=”103″>선택항목 3

</select>

리스트 박스에 사용되는 <select> 와 <option> 두 태그의 속성에 대해

알아보자.

<select> 속성

name : 생성할 리스트 박스의 고유이름.

size : 전체 항목주에서 화면에 나타나도록 표시할 항목수

multiple : 하나이상 여러개를 동시에 선택할 수 있도록 리스트 박스를

                   생성하고자 할때 선언한다.

onChange : 리스트박스 항목중에서 사용자가 다른 항목을 선택했을때 발생

                   하는 이벤트에 대한 이벤트 헨들러 (즉 리스트 항목에서 다른

                   항목을 선택하면 여기서 지정한 함수가 실행된다.

<option> 속성

value : 해당 리스트항목이 가지고 있는 값을 가리킨다.

selectde : 해당 리스트항목중 초기에 선택된 상태로 지정하고자 할때 선언

리스트 박스의 속성과 이벤트 헨들러.

속성

name : 리스트박스 객체가 가지는 고유 이름으로 HTML의 <select>태그에서

           name 속성으로 설정한 값을 가리킨다.

length : 리스트박스에 있는 항목의 총 개수

selectedIndex : 현재의 리스트 박스에서 선택되어 있는 항목의 index  값

           값으로 index 는 0 부터 시작한다.

option[i].text : 리스트박스에서 index 값이 i인 항목의 문자열

option[i].value : 리스트박스에서 index 값이 i로 할당된 항목의 값

option[i].selected : 리스트박스에서 인덱스 값이 i인 항목이 현재 선택되어

           있으면 true를, 그렇지 않으면 false 를 갖는다.

이벤트 헨들러

onCange() : 사용자가 리스트 박스에서 다른 항목을 선택했을때 실행 되는

                    이벤트 헨들러

서진우

슈퍼컴퓨팅 전문 기업 클루닉스/ 상무(기술이사)/ 정보시스템감리사/ 시스존 블로그 운영자

You may also like...

1 Response

  1. study music 말해보세요:

    study music

페이스북/트위트/구글 계정으로 댓글 가능합니다.