|
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"
import = "webprj.a03_object.vo.Member"
import = "java.util.ArrayList"
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../a00_com/a00_com.css">
</head>
<body>
<!--
1.멤버 정보를 출력처리
id,pwd, name;
메서드를 통해 데이터를 나타내는 것과
생성자를 통해 데이터를 나타내는 것
-->
<%
Member m01 = new Member("안녕맨","7777","홍길동");
Member m02 = new Member();
m02.setId("하이걸");
m02.setPwd("8888");
m02.setName("이한나");
%>
<h2>멤버1</h2>
<table>
<tr><th>아이디</th><td><%=m01.getId() %></td>
<tr><th>패스워드</th><td><%=m01.getPwd() %></td>
<tr><th>이름</th><td><%=m01.getName() %></td>
</table>
<h2>멤버2</h2>
<table>
<tr><th>아이디</th><td><%=m02.getId() %></td>
<tr><th>패스워드</th><td><%=m02.getPwd() %></td>
<tr><th>이름</th><td><%=m02.getName() %></td>
</table>
<h2>로그인</h2>
<table>
<tr><th>아이디</th><td><input type="text" id="a"/></td>
<tr><th>패스워드</th><td><input type="password" id="p"/></td>
<tr><td colspan="2"><input type="button" id="lb" value="로그인"/></td>
</table>
</body>
<script type="text/javascript">
var lb = document.querySelector("#lb");
lb.onclick=function(){
//alert("로그인");
var a = document.querySelector("#a").value;
var p = document.querySelector("#p").value;
var dataId = "<%=m01.getId() %>";
var dataPwd = "<%=m01.getPwd() %>";
//alert(id+":"+pass+":"+dataId+":"+dataPwd);
if(a==dataId && p == dataPwd){
alert("로그인 성공");
//location.href=""; 지정된 페이지로 이동처리...
}else {
alert("로그인 실패");
}
};
</script>
</html>
|
cs |
Line 3~4 >> import로 Member 객체와 ArrayList 능력을 가져옴
Line 21~28 >> java에 쓰던 것처럼 쓸 수 있음.
가져온 Member 객체를 사용해 새로운 객체를 만듦(22와 23의 방법이 있음)
Line 29~46 >> 멤버1,멤버2,로그인 테이블 3개를 만듦. get메서드를 이용해 위에서 정의한 필드값을 가져옴.
쓸때는 <%=%%%.get##() %> 이렇게
Line 48~65 >> body부분에서 테이블 만들기가 끝나고 스크립트가 이어짐 >> 여기서 원하는 기능넣기
3번째 테이블인 로그인 테이블에 로그인 확인 기능을 넣음.
바디값을 가져오려면 document.querySelector("#@@"); 이렇게 하는거 같음
로그인버튼의 변수를 만들고( var lb ), 변수에 원클릭기능을 생성( onclick=function(){} )
로그인은 입력값과 저장값을 비교해아함 그러므로
아이디입력값 ("#a").value 과 저장된 아이디값 "<%=m01.getId() %>"을 비교.( a==dataId )
비밀번호도 같은방법으로
1. 임포트 위치
2. <% %> 안에서는 자바랑 똑같이 씀. 객체 가져오고 만들기까지.
3. 바디부분에서 겉모습을 만듦. 이 때 <%=%%%.get##() %>로 객체값을 가져올 수 있음
4. 스크립트에서 바디에 생명력을 부여.
5. 바디값 가져오는 방법 document.querySelector("#@@");
6. 항상 var ## 로 변수를 사용함. 버튼이든 입력값이든 저장된 값이든 오브젝트는 99% 변수를 써서 사용.
7. onclick=function(){} 원클릭에 기능부여. 이건 html? js? 그쪽인듯.
8. ("#a").value은 바디부분 a에 작성한 value값이고, "<%=m01.getId() %>" 이거는 3번과 같음
'JQuery > 되새김질' 카테고리의 다른 글
| 상위 하위 또는 부모 자식 관계 활용 (0) | 2019.09.02 |
|---|---|
| 이클립스에서의 JQuery(3) (0) | 2019.08.27 |
| 이클립스에서의 JQuery (1) (0) | 2019.08.25 |