2.2 웹 어플리케이션과 자바스크립트
자바스크립트의 필요성
- 필요 이유
- FORM 태그가 사용되는 대부분의 문서들은 자바스크립트를 사용해 입력된 데이터에 오류가 있는지 검사
- 입력 상황에서 발생하는 단순한 오류까지 서버가 처리하면 서버의 성능이 저하됨
- 따라서 자바스크립트를 사용해 사용자가 입력한 데이터에 오류가 있는지 검사 → 서버 부하 줄임
- 정보가 일치하는지는 DB 내용을 알 수 있는 서버에서 처리
- 자바스크립트는 입력 되었는지, 형식이 맞는지 등 확인
- 자바스크립트로 입력 오류 검사를 하는 경우
//use_javascript.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트를 사용한 데이터 전송</title>
// 입력 데이터 오류 검사
<SCRIPT LANGUAGE="javascript">
// check 함수 정의
function check() {
// TEXT 입력양식(document.user.input_data)내에 입력된 값(value)
// 참이 아닐 경우 = 사용자가 데이터 입력 X
if(!document.user.input_data.value) {
// alert() 함수 사용해 데이터 입력하라는 메시지 출력
alert("데이터를 입력하세요.");
// 입력양식에 데이터 입력하도록 마우스 포인터 이동
document.user.input_data.focus();
// return에 의해 스크립트의 수행 종료
return;
}
// if 조건문 불만족 -> submit() 메소드에 의해
// 입력된 데이터 ACTION 속성에서 지정한 user_login.jsp 문서로 전송됨
document.user.submit();
}
</SCRIPT>
</head>
<body>
<FORM NAME="user" METHOD=POST ACTION="user_login.jsp">
입력데이터 : <INPUT TYPE=TEXT NAME="input_data" SIZE=20>
// onClick() 이벤트 핸들러로 check()라는 자바스크립트 함수 지정
// [전송] 버튼 클릭하면 check() 자바스크립트 함수 호출됨
<INPUT TYPE="button" VALUE="전송" onClick='javascript:check()'>
</FORM>
</body>
</html>-
결과
-
FORM 태그의 실제 이름을 check() 함수의 인자로 사용하는 경우
-
위 코드에서 호출되는 check()함수에는 인자 존재X
\<INPUT TYPE="button" VALUE="전송" onClick='javascript:check()'>=> document.user.input_data 같은 긴 문자열 사용
- document : 현재의 JSP 문서인 use_javascript.jsp를 의미
- user : FORM 태그의 이름
- input_data : TEXT 입력 양식의 이름
-
FORM 태그의 이름인 user를 check() 함수의 인자로 사용
<INPUT TYPE="button" VALUE="전송" onClick='javascript:check(user)'>- use_javascript_v2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트를 사용한 데이터 전송</title> <SCRIPT LANGUAGE="javascript"> function check(**form**) { if(!**form**.input_data.value) { alert("데이터를 입력하세요."); **form**.input_data.focus(); return; } **form**.submit(); } </SCRIPT> </head> <body> <FORM NAME="user" METHOD=POST ACTION="user_login.jsp"> 입력데이터 : <INPUT TYPE=TEXT NAME="input_data" SIZE=20> // check() 함수 호출되면 form 매개변수에 user 대입됨 // => check() 함수의 모든 document.user는 form으로 변경 <INPUT TYPE="button" VALUE="전송" onClick='javascript:check(**user**)'> </FORM> </body> </html>
- use_javascript_v2.jsp
-
약간의 문제 존재
- 다른 FORM 태그의 이름인 user를 다른 이름으로 변경한다면?
<FORM NAME="user" METHOD=POST ACTION="user_login.jsp">⇒ check() 함수의 인자를 변경된 이름으로 수정해야 함
<INPUT TYPE="button" VALUE="전송" onClick='javascript:check(**user**)'>- 이 문제를 해결하기 위해 this 객체 사용
-
-
this 객체를 이용한 FORM 태그의 이름을 인자로 사용하는 경우
- FORM 태그의 이름을 함수의 인자로 전달해야 하는 경우
- FORM 태그의 이름을 직접 지정하기 보다 -> this 객체와 form 속성 사용
<INPUT TYPE="button" VALUE="전송" onClick='javascript:check(this.form)'> - this : 버튼 자신을 의미
- form : FORM 태그의 이름을 의미
- this.form : 현재 속해 있는 FORM 태그의 이름인 user 의미
- 따라서 FORM 태그의 이름이 변경되더라도 this.form에 의해 항상 변경된 이름 반영됨
- 매개변수로 반드시 form을 쓸 필요는 없지만 전달받은 인자가 FORM 태그의 이름을 의미 → 관례적으로 form 사용
- FORM 태그의 이름을 직접 지정하기 보다 -> this 객체와 form 속성 사용
- FORM 태그의 이름을 함수의 인자로 전달해야 하는 경우
-
전송을 위해 버튼이 아닌 이미지를 사용하는 경우
- 이미지로 버튼을 사용할 경우 check()함수의 인자로 this.form 사용 X
- FORM의 구성요소가 아니기 때문
- FORM의 실제 이름을 인자로 사용해야 함
- ex. btn_save.gif 이미지 파일을 전송 버튼으로 사용한 경우의 예
<INPUT SRC="btn_save.gif" STYLE=CURSOR:HAND>- btn_save.gif 이미지 클릭 → FORM 태그의 이름인 user 가 check() 함수로 전달
- 현재 폴더에 btn_save.gif 존재해야 함
- 전송 버튼 기능을 수행하는 이미지가 FORM 태그 내부나 외부에 존재하는 경우 모두 사용 가능한 예
- 이미지로 버튼을 사용할 경우 check()함수의 인자로 this.form 사용 X
안녕하세요.