[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() : 사용자가 리스트 박스에서 다른 항목을 선택했을때 실행 되는
이벤트 헨들러
![[html] 스타일 시트 활용 하기 -6](http://nblog.syszone.co.kr/wp-content/themes/hueman/assets/front/img/thumb-medium-empty.png)
study music