1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <script> function buttonFunction() { if(document.getElementById("text").value != document.getElementById("hidden1").value) { alert("아이디가 틀렸습니다."); } if(document.getElementById("password").value != document.getElementById("hidden2").value) { alert("비밀번호가 틀렸습니다."); } if((document.getElementById("text").value == document.getElementById("hidden1").value) && (document.getElementById("password").value == document.getElementById("hidden2").value)) { alert("로그인 되었습니다."); } } </script> <body> 아이디 <input type="text" id="text"/><br/> 비밀번호 <input type="password" id="password"/><br/> <input type="button" value="로그인" id="button" onclick="buttonFunction()"/> <input type = "hidden" id="hidden1" value="dkdlel"/> <input type = "hidden" id="hidden2" value="qlalfqjsgh"/> </body> </html> | cs |
이런 jsp 페이지를 만들어 봅시다.
제목에서 알 수 있듯이
아이디, 비밀번호를 입력하고
버튼을 누르면
hidden 값에 저장된 값과
텍스트 와 패스워드 필드에 입력된 값을 비교 후
alert 문을 이용하여 아이디 비밀번호 매치 여부를 알려주는
그런 간단하고 가장 기본이 되는 코드 입니다.
참고로 alert 문은 확인창? 안내창? 경고창? 같은 그런 창입니다.
아마 직접 저 코드를 작성하신 뒤 실행시켜 보시면 알 수 있으실 겁니다.
코드를 간단히 설명드리자면
버튼 태그에 onclick="buttonFunction()" 이라는 코드를 추가하여
버튼을 클릭할 시 어떤 이벤트(함수) 을 발생시킬 지 정의를 해 줍니다.
그리고 그 함수는 </head> 태그 바로 아래의
<script></script> 사이에 정의해두었습니다.
document.getElementById 라는 메소드를 이용하여
각 태그들에 미리 id="" 이라는 고유의 아이디 값을 부여하여
그 아이디값의 value 에 들어있는 값을 가져 온 뒤
hidden 태그 값에 미리 value 를 정의해둔 값과 비교하여
맞으면 맞다고 틀리면 틀리다고 안내메시지를 띄워주는 코드입니다.
이런식으로 코드들이 서로 상호작용하여 동작하면서
기능들을 만들어 나가는 것입니다.
만약 정말 개발쪽 공부를 하시고싶은 분들이라면
가장 기본적이면서도 가장 많이 쓰이게 될 형식이니
코드를 복붙 하지 마시고 직접 한번 타이핑 해보시면서
실습해보시는걸 추천드립니다.
저 페이지를 실행시켜보면
이런 로그인 폼이 생성되고
만약 아이디가 hidden1 값과 다르다면
이런 메시지가,
비밀번호가 hidden2 와 다르다면
이런 메시지가,
아이디와 비밀번호 모두 일치한다면
이런 메시지가 뜨게되는 간단한 코드입니다.
한번만 코드를 읽어보신다면 이해하시는데 어렵진 않으실겁니다.
'개발 > 웹개발 기본가이드' 카테고리의 다른 글
| GIT 과 SVN의 개념 및 장단점 형상관리, 버전관리 (0) | 2019.05.02 |
|---|---|
| MVC 패턴에 대하여 (0) | 2019.02.24 |
| JSP 의 기본 input type 과 a 태그 (0) | 2019.01.29 |
| 3. 웹개발의 시작 (2) | 2019.01.23 |
| 2. 이클립스에서 개발환경 설정하기 (0) | 2019.01.21 |