jQuery 예제 52
유효성 검사 예제 직접 작성 3
- 유효성 검사
- ID중복검사에서 팝업창 띄워서 사용자의 아이디값을 전달하는 것을 jQuery 로 구현
- 주민번호 앞자리 6자리 입력하고 손을 떼면 key up 이벤트로 포커스를 뒤로 넘기는 것을 jQuery 로 구현
- E-Mail 입력에서 도메인명을 select 에서 선택하면 그 도메인이 입력양식에 나타나도록 하기
- 우편검색 버튼을 누르면 팝업에서 우편번호 검색이 가능하고 검색 후 회원가입 페이지로 값 가지고 돌아오기(API 사용)
- memberform.html 에 코드 추가
실습 준비
- select 에 id 값 부여, select 태그를 구해와야 하고 select 태그가 여러개이므로 구분이 필요
- 이 라디오버튼의 input 태그를 구해와야하므로 각각 id 값을 다르게 설정
- 각 취미도 input 태그를 구해오기 위해 각각 id 값을 다르게 설정
- 이미지 버튼 주석처리
- ID중복검사 버튼의 id 값 추가
- 취미 체크박스에 초기에 선택된 상태로 나타나지 않게 checked 속성 없애기
1. 라이브러리 불러오고 기본 jQuery 함수 쓰기
- 라이브러리 불러오기
- 기본 jQuery 함수 쓰기
- 라이브러리를 잘 불러왔는지 확인
2. 아이디 중복검사
0) 먼저 이벤트를 발생시키는 태그인 ID중복검사 버튼 태그의 id값을 구해야함
1) 아이디를 입력하지 않았을때는 입력하라는 메세지를 띄우고
- if~else문으로 아이디를 입력했는지 안했는지 확인 후 분기
2) 아이디를 입력했을때는 팝업창을 띄우기 window.open()
open("팝업창에 실행될 문서명", "윈도우 이름", "옵션"); // window.open
- 팝업창 문서는 idcheck.jsp
3) 사용자가 입력한 아이디값을 팝업창으로 전달
- get 방식으로만 전달 가능하다
- 값은 ?변수명=값 으로 idcheck.jsp 로 전달됨
- $("#id").val()은 사용자가 입력한 값이고 그걸 'id' 변수에 전달하고 있다
+ Javascript 에서는 onClick 등으로 처리를 하거나 요소를 구하려면 getElementById() 사용
+ jQuery 에서는 먼저 이벤트를 발생시키는 태그를 구해야함
4) idcheck.jsp 파일 생성
- idcheck.jsp
- 자바나 JSP 를 쓸때는 스크립트 태그인 <% %> 안에 써야한다
- request 객체의 getParameter() 함수로 값을 받는다
- 함수 안의 "id" 는 아까 저장했던 변수명
- 가장 아래코드는 출력할때 코드
+ 나중에 팝업창 부분에서 DB 연동해서 select 해서 중복인지 확인해야함
- 결과 캡처
동기적 통신방식 vs 비동기적 통신방식
- 이건 동기적 통신방식이다
- 동기적인 통신 방식 : 한가지 요청이 끝나야 다음 요청 가능
- 동기적인 통신 방식 : 부모창에서 팝업창으로 페이지가 바뀌었다
- AJAX 는 비동기적인 방식
- AJAX에선 팝업창을 띄우지 않고 비동기적인 방식으로 ID중복검사 한다, 콜백함수로 값을 돌려받음
- AJAX에서 페이지를 바꾸지 않고 댓글달면 바로 DB에 insert 되고, 바로 콜백함수로 가져와서 뿌려줌
id 중복검사 부분 전체
- memberform.html id 중복검사 부분
- idcheck.jsp
3. 주민번호 뒷자리로 포커스 이동
- 주민번호 앞자리 입력한 후 손을 떼면 뒷자리로 포커스 이동
- keyup 이벤트 사용
- 값의 길이값이 정해져있는 경우에만 사용 가능 (ex) 카드번호, 주민등록번호)
0) 가장 먼저 이벤트를 발생시킨 태그 구하기
- keyup 이벤트는 주민번호 앞자리 input 태그에서 일어난다
1) 이벤트 처리
- 이벤트가 발생하는 태그는 주민번호 앞자리 input 태그
- 키를 눌렀다가 뗐을때 keyup 이벤트 발생
- focus() 통해 뒷자리에 focus 주기
2) 주민번호 앞자리 6자리가 모두 입력된 후에 뒷자리로 포커스가 가도록 하기
- 이렇게 if문 쓰지 않으면 한자리만 입력해도 손을 떼게 되므로 뒷자리로 focus가 넘어가버림
- length 속성을 통해 값이 6자리일때만 뒷자리에 focus가 넘어간다
- 이처럼 값의 길이값이 정해져 있는 경우에만 사용 가능
주민번호 뒷자리로 포커스 이동 전체
- memberform.html 주민번호 뒷자리로 포커스 이동 부분
4. Email 에서 도메인
- 도메인명을 직접입력하는 경우, 도메인명을 선택하는 경우가 있다, 나눠서 처리해야한다
- 직접 입력하는 경우 도메인명을 입력하는 곳에 포커스가 들어가야한다
- select 에서 도메인을 선택시 해당 도메인을 화면에 출력시키기
ex) 구글 선택시 google.com 을 입력양식에 나타나게 하기
0) 가장 먼저 이벤트를 발생시키는 태그를 구하기
- 이벤트를 발생시키는 태그는 위의 select 태그이다, select 태그가 여러개 이므로 id값을 통해 구해온다
1) change 이벤트로 처리
- 이벤트를 발생시키는 태그인 select 태그를 구해왔다
- select 에서 옵션 선택시 값의 변화가 일어나므로 change 이벤트 발생
2) 도메인을 직접 입력하는 경우 ('직접입력' 을 선택한 경우)
- if~else문으로 도메인을 직접 입력하는 경우와 선택하는 경우를 나눠서 처리한다
- select-option 에서 '직접입력'을 선택시 value 는 "" 이된다.
- '직접입력' 선택시 도메인 명을 입력하는 곳의 값을 지우고 focus 해야한다
- 도메인 입력하는 곳의 input 태그 id는 domain, 이 id로 태그를 구해온다
3) 도메인을 선택하는 경우
- 구글을 선택하는 경우 google.com 을 도메인 입력양식에 출력해야한다
- 도메인 입력양식 input 태그의 id는 domain
- 그리고 $("#email").val() 을 통해 선택된 옵션의 value 값을 구한 후 그 값을 도메인 입력양식에 설정
4) 도메인 영역의 값을 수정하지 못하도록 비활성화
- 도메인명을 선택한 후 이 값이 지워진다
- 도메인 지워지지 않도록 비활성화, readOnly 나 disabled 로 비활성화시키기
- 결과 캡처
- 선택된 도메인이 지워지지 않는다
- 문제는 다시 '직접입력' 을 선택했을때 값은 지워지지만 포커스가 들어가지 않음
- 설정된 readOnly 속성이 해제되지 않았기 때문이다
- 포커스(깜빡임)가 들어가지 않음
- 직접입력 을 선택했을때 readOnly 속성을 해제해줘야한다
- readOnly 속성을 해제해주면 다시 '직접입력' 선택시 포커스가 들어간다
+ readOnly (읽기전용) 설정 두가지 방법
+ readOnly (읽기전용) 해제 두가지 방법
+ readOnly vs disabled
- readOnly : name 값이 변수가 되어서 사용자가 입력한/선택한 값이 form 태그 action 의 페이지로 넘어감
- disabled : 값이 안넘어감
- 지금은 회원가입 버튼을 통해 이메일 주소값을 넘겨야하므로 readOnly 속성으로 비활성화 시키기
주민번호 뒷자리로 포커스 이동 전체
- memberform.html 주민번호 뒷자리로 포커스 이동 부분
5. 유효성 검사
0) 이벤트를 발생시키는 태그 구해오기
- 다른 이벤트와 달리 submit 버튼은 submit 버튼이 아니라 form 태그에 이벤트 처리를 해야한다
- 그리고 폼 관련 코드를 안에 넣어야한다
1) id, 비밀번호, 이름 유효성 검사
- id 유효성 검사를 한 뒤 나머지는 복사해서 만든다
- id 유효성 검사 완료
- 비밀번호,성명 부분도 복사, id값과 alert 메세지만 바꾸기
2) 주민번호 유효성 검사
- 주민번호 앞자리는 3가지를 검사
- 값이 입력되어야함
- 값의 길이값이 6자리 여야함
- 값이 숫자값이어야함
- 유효성 검사에 맞지 않으면 값을 지우고 focus 함
- 결과 캡처
- 주민번호 뒷자리도 복사해서 적용
- alert 메세지나 길이값만 수정
3) email 유효성 검사
- id, 비밀번호 유효성 검사와 비슷
- 도메인 부분도 복사해서 비슷하게 작성
3) 전화번호 유효성 검사
- 입력되었는지 확인
- 문자인지 숫자인지 확인
+ 숫자만 입력되도록 하기 위해 정규표현식을 쓰는 방법도 있다
- 전화번호 중간자리, 끝자리도 똑같이 처리를 한다
- 결과 캡처
4) 핸드폰 앞자리 유효성 검사
- 입력되었는지 확인
- 핸드폰 앞자리는 번호를 선택하는 곳
- 번호선택이 나타난 다는 것은 번호를 선택하지 않았다는 의미, 이때 value 가 ""이다
- 이걸 이용해서 유효성 검사를 한다
- 휴대폰 번호 중간자리와 끝자리도 똑같이 작성하고, 중간자리와 끝자리는 숫자인지 문자인지도 검사한다
- 결과 캡처
5) 우편검색 기능
- 카카오 API 를 활용해서 팝업창에서 우편번호와 주소를 검색 후 팝업창에서 부모창으로 값 가져오기
- 이전에 만들었던 javascript/member/memberform.html 의 내용을 가져와서 적용
- 이부분을 복사해서 가져오기
- 지금 작업하는 파일에 복붙
- 이 함수 openDaumPostcode() 를 '우편검색' 버튼 누르면 호출해야함
- 이건 자바스크립트로 처리하기, onClick 사용
- 이러면 '우편검색' 버튼 클릭시 함수 실행되며 팝업창이 뜸
- 주소 검색 후 클릭시 부모창으로 값이 넘어온다
- 이때 검색한 결과를 받는 함수가 콜백함수 oncomplete : function(data) {}
- 이 콜백함수의 매개변수가 data 이다, 이 data 가 값을 받고 data 통해서 부모창으로 전달
- data 에서 우편번호를 뽑아오는게 zonecode 이고 id값이 post 인 곳의 value 값으로 우편번호를 설정하라는 의미
- data 에서 주소를 뽑아오는게 address 이고 id값이 address 인 곳의 value 값으로 주소를 설정하라는 의미
+ 주석처리된 것은 과거 우편번호가 xx-xxx 였을때 앞자리, 뒷자리 따로 구했던 것
6) 우편번호, 주소 유효성 검사
- 기본적인 형식으로 입력값이 없는경우의 유효성 검사를 한다
6) 성별 라디오버튼 유효성 검사
- 두 라디오버튼 모두 선택하지 않은 경우
- is() 함수를 사용해서 is(":checked")로 체크가 되었는지 확인 가능
- 선택되었으면 true, 선택되지 않았으면 false 리턴
- 결과 캡처
6) 취미 체크박스 유효성 검사
- 두개이상을 선택하도록 한다
- 두가지 방법이 있다
1. 기존 자바스크립트에서 사용했던 방식
- id 값으로 해당 input 태그를 구해오고 is() 함수로 체크 유무를 파악하고 변수값에 +1 증가시켜 누적후 if문으로 확인
+ 사용자가 확인버튼을 눌렀을때 함수를 return false 로 빠져나감
2. 더욱 간결한 방식
- 체크가 되어있는 체크박스를 구해오는 내용이 jQuery 함수 안에 들어감
1. input:checkbox
- :checkbox 필터선택자로 input type=checkbox인 모든 체크박스를 구해옴 (input 태그 중)
2. input:checkbox[name='hobby']
- 체크박스가 다른 곳에도 있을 수 있으므로 체크박수 중 name 값이 hobby 로 되어있는 체크박스만을 모두 구해줌
3. input:checkbox[name='hobby']:checked
- name값이 hobby 인 체크박스 중에서도 :checked 로 체크되어있는 체크박스의 input 태그를 구해오라는 의미
- 그 후 length 속성으로 구해진 체크박스의 개수를 구한다 (가능)
7) 자기소개 textarea 유효성 검사
- id 값으로 태그를 구해와도 되고 textarea 태그는 하나이므로 textarea 태그로 구해와도 된다
- 입력되었는지 검사한다
- 100 자 이내여야 한다
- 결과 캡처
+ reset 버튼은 이벤트 처리를 하지 않아도 자체적으로 지워주는 기능 있다
8) 작성한 내용을 외부파일로 빼기
- .js 파일이어야한다
- member.js 파일 생성
- 자바스크립트에서는 .js 외부파일에 함수단위로 내용이 들어갔지만 제이쿼리에서는 작성한 전체가 들어감
- $(document).ready() 부터 마지막 까지 복사 후 주석 처리
- member.js 파일에 붙여넣기
- 이 member.js 에는 <script></script> 하면 안되고 내용만 들어가야 한다
- memberform.html 에서 외부파일 불러오기
- 결과 캡처
- 외부파일 member.js 를 잘 불러왔음을 알 수 있다
위 예제 전체코드
- memberform.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 폼</title>
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script>
function openDaumPostcode() {
new daum.Postcode({
oncomplete : function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 우편번호와 주소 정보를 해당 필드에 넣고, 커서를 상세주소 필드로 이동한다.
// document.getElementById('join_zip1').value = data.postcode1;
// document.getElementById('join_zip2').value = data.postcode2;
document.getElementById('post').value = data.zonecode;
document.getElementById('address').value = data.address;
}
}).open();
}
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- 외부 jQuery 파일 불러오기 -->
<script src="member.js"></script>
<script>
/* $(document).ready(function(){
// ID 중복검사
$("#idcheck").click(function(){
if($("#id").val() == "") {
alert("ID를 입력하세요.")
$("#id").focus();
return false;
} else {
// open("팝업창에 실행될 문서명", "윈도우 이름", "옵션");
var ref="idcheck.jsp?id="+$("#id").val();
window.open(ref,"mywin","width=250, height=150");
}
});
// 주민번호 뒷자리로 포커스 이동
$("#jumin1").keyup(function(){
if($("#jumin1").val().length == 6)
$("#jumin2").focus();
});
// 도메인 선택
$("#email").change(function(){
if($("#email").val() == "") { // '직접입력' 선택
$("#domain").val("").focus();
$("#domain").attr("readOnly", false); //읽기 전용 해제
// $("#domain").removeAttr("readOnly"); // 위와 같다
}else { // '도메인' 선택
$("#domain").val($("#email").val());
$("#domain").attr("readOnly", "readOnly"); // 읽기 전용
// $("#domain").attr("readOnly", true) // 위와 같다
}
});
// 유효성 검사
$("form").submit(function(){
if($("#id").val() == ""){
alert("ID를 입력하세요.");
$("#id").focus();
return false;
}
if($("#passwd").val() == ""){
alert("비밀번호를 입력하세요.");
$("#passwd").focus();
return false;
}
if($("#name").val() == ""){
alert("이름을 입력하세요.");
$("#name").focus();
return false;
}
if($("#jumin1").val() == ""){
alert("주민번호 앞자리를 입력하세요.");
$("#jumin1").focus();
return false;
}
if($("#jumin1").val().length != 6){
alert("주민번호 앞자리 6자리를 입력하세요.");
$("#jumin1").val("").focus();
return false;
}
// isNaN() : 문자가 포함되면 true를 리턴
if(isNaN($("#jumin1").val())){
alert("숫자만 입력하세요.");
$("#jumin1").val("").focus();
}
if($("#jumin2").val() == ""){
alert("주민번호 뒷자리를 입력하세요.");
$("#jumin2").focus();
return false;
}
if($("#jumin2").val().length != 7){
alert("주민번호 뒷자리 7자리를 입력하세요.");
$("#jumin2").val("").focus();
return false;
}
// isNaN() : 문자가 포함되면 true를 리턴
if(isNaN($("#jumin2").val())){
alert("숫자만 입력하세요.");
$("#jumin2").val("").focus();
}
if($("#mailid").val() == ""){
alert("EMail 주소를 입력하세요.");
$("#mailid").focus();
return false;
}
if($("#domain").val() == ""){
alert("도메인명을 입력하세요.");
$("#domain").focus();
return false;
}
if($("#tel1").val() == ""){
alert("전화번호 앞자리를 입력하세요.");
$("#tel1").focus();
return false;
}
if(isNaN($("#tel1").val())){
alert("숫자만 입력하세요.");
$("#tel1").val("").focus();
return false;
}
if($("#tel2").val() == ""){
alert("전화번호 중간자리를 입력하세요.");
$("#tel2").focus();
return false;
}
if(isNaN($("#tel2").val())){
alert("숫자만 입력하세요.");
$("#tel2").val("").focus();
return false;
}
if($("#tel3").val() == ""){
alert("전화번호 끝자리를 입력하세요.");
$("#tel3").focus();
return false;
}
if(isNaN($("#tel3").val())){
alert("숫자만 입력하세요.");
$("#tel3").val("").focus();
return false;
}
if($("#phone1").val() == "") {
alert("핸드폰 번호 앞자리를 선택하세요.");
$("#phone1").focus();
return false;
}
if($("#phone2").val() == "") {
alert("핸드폰 번호 중간자리를 선택하세요.");
$("#phone2").focus();
return false;
}
if(isNaN($("#phone2").val())) {
alert("숫자만 입력하세요.");
$("#phone2").val().focus();
return false;
}
if($("#phone3").val() == "") {
alert("핸드폰 번호 뒷자리를 선택하세요.");
$("#phone3").focus();
return false;
}
if(isNaN($("#phone3").val())) {
alert("숫자만 입력하세요.");
$("#phone3").val().focus();
return false;
}
if($("#post").val() == "") {
alert("우편번호를 선택하세요.");
$("#post").focus();
return false;
}
if($("#address").val() == "") {
alert("주소를 선택하세요.");
$("#address").focus();
return false;
}
if($("#male").is(":checked") == false &&
$("#female").is(":checked") == false ){
alert("성별을 선택하세요.");
return false;
}
// var cnt = 0;
// if($("#h1").is(":checked")) cnt++;
// if($("#h2").is(":checked")) cnt++;
// if($("#h3").is(":checked")) cnt++;
// if($("#h4").is(":checked")) cnt++;
// if($("#h5").is(":checked")) cnt++;
//
// if(cnt < 2) {
// alert("취미를 2개 이상 선택하세요.");
// return false;
// }
if($("input:checkbox[name='hobby']:checked").length < 2){
alert("취미를 2개 이상 선택하세요.");
return false;
}
if($("#intro").val() == "") {
alert("자기소개를 선택하세요.");
$("#intro").focus();
return false;
}
if($("#intro").val().length > 100) {
alert("자기소개를 100자 이내로 입력하세요.");
$("#intro").focus();
return false;
}
}); // submit() end
}); */
</script>
</head>
<body>
<form method="post" action="member.jsp">
<table border=1 width=600 align=center>
<caption>회원 가입폼</caption>
<tr>
<th>ID</th>
<td><input type=text name="id" id="id" autofocus="autofocus">
<input type="button" value="ID중복검사" id="idcheck">
</td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type=password name="passwd" id="passwd">
</td>
</tr>
<tr>
<th>성명</th>
<td><input type=text name="name" id="name">
</td>
</tr>
<tr>
<th>주민번호</th>
<td><input type=text size=6 maxlength=6 name="jumin1" id="jumin1">-
<input type=text size=7 maxlength=7 name="jumin2" id="jumin2">
</td>
</tr>
<tr>
<th>E-Mail</th>
<td><input type=text size=10 name="mailid" id="mailid">@
<input type=text size=15 name="domain" id="domain">
<select id="email">
<option value="">직접입력</option>
<option value="naver.com">네이버</option>
<option value="daum.net">다음</option>
<option value="nate.com">네이트</option>
<option value="gmail.com">구글</option>
</select>
</td>
</tr>
<tr>
<th>전화번호</th>
<td>
<input type=text size=4 maxlength=4 name="tel1" id="tel1">-
<input type=text size=4 maxlength=4 name="tel2" id="tel2">-
<input type=text size=4 maxlength=4 name="tel3" id="tel3">
</td>
</tr>
<tr>
<th>핸드폰</th>
<td><select name="phone1" id="phone1">
<option value="">번호선택</option>
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="018">018</option>
<option value="019">019</option>
</select>-
<input type=text size=4 maxlength=4 name="phone2" id="phone2">-
<input type=text size=4 maxlength=4 name="phone3" id="phone3">
</td>
</tr>
<tr>
<th>우편번호</th>
<td><input type=text size=5 maxlenth=5 name="post" id="post">
<input type="button" value="우편검색" onClick="openDaumPostcode()">
</td>
</tr>
<tr>
<th>주소</th>
<td><input type=text size=70 name="address" id="address">
</td>
</tr>
<tr>
<th>성별</th>
<td><input type="radio" id="male" name="gender" value="남자">남자
<input type="radio" id="female" name="gender" value="여자">여자
</td>
</tr>
<tr>
<th>취미</th>
<td><input type="checkbox" id="h1" name="hobby" value="공부">공부
<input type="checkbox" id="h2" name="hobby" value="등산">등산
<input type="checkbox" id="h3" name="hobby" value="게임">게임
<input type="checkbox" id="h4" name="hobby" value="낚시">낚시
<input type="checkbox" id="h5" name="hobby" value="쇼핑">쇼핑
</td>
</tr>
<tr>
<th>자기소개</th>
<td><textarea rows="5" cols="70"
name="intro" id="intro"
placeholder="자기소개를 100자 이내로 입력하세요"></textarea>
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type="submit" value="회원가입">
<input type="reset" value="취소">
<!-- 이미지 버튼 : 전송 기능 있음 -->
<!-- <input type="image" src="img/clock.jpg" width=30> -->
</td>
</tr>
</table>
</form>
</body>
</html>- member.js
$(document).ready(function(){
// ID 중복검사
$("#idcheck").click(function(){
if($("#id").val() == "") {
alert("ID를 입력하세요.")
$("#id").focus();
return false;
} else {
// open("팝업창에 실행될 문서명", "윈도우 이름", "옵션");
var ref="idcheck.jsp?id="+$("#id").val();
window.open(ref,"mywin","width=250, height=150");
}
});
// 주민번호 뒷자리로 포커스 이동
$("#jumin1").keyup(function(){
if($("#jumin1").val().length == 6)
$("#jumin2").focus();
});
// 도메인 선택
$("#email").change(function(){
if($("#email").val() == "") { // '직접입력' 선택
$("#domain").val("").focus();
$("#domain").attr("readOnly", false); //읽기 전용 해제
// $("#domain").removeAttr("readOnly"); // 위와 같다
}else { // '도메인' 선택
$("#domain").val($("#email").val());
$("#domain").attr("readOnly", "readOnly"); // 읽기 전용
// $("#domain").attr("readOnly", true) // 위와 같다
}
});
// 유효성 검사
$("form").submit(function(){
if($("#id").val() == ""){
alert("ID를 입력하세요.");
$("#id").focus();
return false;
}
if($("#passwd").val() == ""){
alert("비밀번호를 입력하세요.");
$("#passwd").focus();
return false;
}
if($("#name").val() == ""){
alert("이름을 입력하세요.");
$("#name").focus();
return false;
}
if($("#jumin1").val() == ""){
alert("주민번호 앞자리를 입력하세요.");
$("#jumin1").focus();
return false;
}
if($("#jumin1").val().length != 6){
alert("주민번호 앞자리 6자리를 입력하세요.");
$("#jumin1").val("").focus();
return false;
}
// isNaN() : 문자가 포함되면 true를 리턴
if(isNaN($("#jumin1").val())){
alert("숫자만 입력하세요.");
$("#jumin1").val("").focus();
}
if($("#jumin2").val() == ""){
alert("주민번호 뒷자리를 입력하세요.");
$("#jumin2").focus();
return false;
}
if($("#jumin2").val().length != 7){
alert("주민번호 뒷자리 7자리를 입력하세요.");
$("#jumin2").val("").focus();
return false;
}
// isNaN() : 문자가 포함되면 true를 리턴
if(isNaN($("#jumin2").val())){
alert("숫자만 입력하세요.");
$("#jumin2").val("").focus();
}
if($("#mailid").val() == ""){
alert("EMail 주소를 입력하세요.");
$("#mailid").focus();
return false;
}
if($("#domain").val() == ""){
alert("도메인명을 입력하세요.");
$("#domain").focus();
return false;
}
if($("#tel1").val() == ""){
alert("전화번호 앞자리를 입력하세요.");
$("#tel1").focus();
return false;
}
if(isNaN($("#tel1").val())){
alert("숫자만 입력하세요.");
$("#tel1").val("").focus();
return false;
}
if($("#tel2").val() == ""){
alert("전화번호 중간자리를 입력하세요.");
$("#tel2").focus();
return false;
}
if(isNaN($("#tel2").val())){
alert("숫자만 입력하세요.");
$("#tel2").val("").focus();
return false;
}
if($("#tel3").val() == ""){
alert("전화번호 끝자리를 입력하세요.");
$("#tel3").focus();
return false;
}
if(isNaN($("#tel3").val())){
alert("숫자만 입력하세요.");
$("#tel3").val("").focus();
return false;
}
if($("#phone1").val() == "") {
alert("핸드폰 번호 앞자리를 선택하세요.");
$("#phone1").focus();
return false;
}
if($("#phone2").val() == "") {
alert("핸드폰 번호 중간자리를 선택하세요.");
$("#phone2").focus();
return false;
}
if(isNaN($("#phone2").val())) {
alert("숫자만 입력하세요.");
$("#phone2").val().focus();
return false;
}
if($("#phone3").val() == "") {
alert("핸드폰 번호 뒷자리를 선택하세요.");
$("#phone3").focus();
return false;
}
if(isNaN($("#phone3").val())) {
alert("숫자만 입력하세요.");
$("#phone3").val().focus();
return false;
}
if($("#post").val() == "") {
alert("우편번호를 선택하세요.");
$("#post").focus();
return false;
}
if($("#address").val() == "") {
alert("주소를 선택하세요.");
$("#address").focus();
return false;
}
if($("#male").is(":checked") == false &&
$("#female").is(":checked") == false ){
alert("성별을 선택하세요.");
return false;
}
// var cnt = 0;
// if($("#h1").is(":checked")) cnt++;
// if($("#h2").is(":checked")) cnt++;
// if($("#h3").is(":checked")) cnt++;
// if($("#h4").is(":checked")) cnt++;
// if($("#h5").is(":checked")) cnt++;
//
// if(cnt < 2) {
// alert("취미를 2개 이상 선택하세요.");
// return false;
// }
if($("input:checkbox[name='hobby']:checked").length < 2){
alert("취미를 2개 이상 선택하세요.");
return false;
}
if($("#intro").val() == "") {
alert("자기소개를 선택하세요.");
$("#intro").focus();
return false;
}
if($("#intro").val().length > 100) {
alert("자기소개를 100자 이내로 입력하세요.");
$("#intro").focus();
return false;
}
}); // submit() end
});
+ '회원가입' 버튼을 누르면 member.jsp 로 값이 넘어가고, 이 양식을 사용해서 JSP 를 공부할때 한다
+ DB의 제약조건에 위배되지 않는 값만 입력되므로 프론트엔드에서 조건에 맞는 값만 전달하도록 하는 것
Ajax
- 비동기적으로 처리하는 통신 기술
- 자주 사용되는 경우가 정해져 있다
ex) ID중복검사 시 팝업창 띄우지 않고 바로 ID중복검사, 댓글달때 페이지를 바꾸지 않고 댓글달기
- ajax.war 파일 다운 후 import 하면 안에 비동기적으로 ID중복검사 하는 것들이 구현되어있음
Ajax 정리
- 새로운 언어는 아니다, 자바스크립트가 가진 기본적인 기능
- Asynchronous JavaScript + XML (비동기 자바스크립트와 XML 을 결합한 기술)
- JavaScript와 XML을 이용한 비동기 통신처리를 구현하는 기술
동기적 통신 방식
- 클라이언트가 서버측에 요청 후, 서버측에서 응답을 해야만 다음 요청 가능
- 특징 : 페이지가 바뀐다
- action 값으로 지정된 페이지로 post/get 방식으로 요청, 서버측에서는 request 객체로 요청을 받는다(응답), 변수에 저장하고 insert 시킴, 이런 작업이 완전히 끝나야만 다시 요청하고 응답 가능 우리가 쓰고 있는 방법
- 팝업창을 띄우는것도 부모창에서 팝업창으로 페이지가 바뀐 것
비동기적 통신 방식
- 클라이언트가 서버에 요청하고, 서버측에서 응답을 하기 전에 (응답이 오기 전에) 클라이언트에서 또 요청을 할 수 있다
- 특징 : 페이지가 바뀌지 않는다
- 페이지를 바꾸지 않고, 콜백함수로 결과를 돌려받아서 사용가능/사용중 메세지 뿌림
XML
- 클라이언트가 요청하면 서버측에서 결과를 돌려줄때 xml 형태로 결과를 많이 돌려줌
- 일반적인 태그와 다른 점은 태그들을 직접 임의로 만들어 쓸 수 있다는 점
- 지금은 xml 을 대신하는 포멧으로 json 을 많이 쓴다
- xml 과 json은 데이터 포멧, 저장 포멧이다
- 공공데이터는 xml 이나 json 중 하나로 많이 돌려줌
ex) 기상청 날씨정보는 xml 로 많이 돌려준다, 그걸 조작해서 필요한 형태로 바꿔서 사용하는 것
+ 직접 xml 파일을 만드는 경우는 적다, 문법은 공부할 것
JSON
- JavaScript Object Notation
- 자바스크립트 객체를 표기하기 위한 표기법 중 한가지, 새로운 언어가 아님
- JSON은 JavaScript Object Notation 의 약어로 XML 데이터를 대신하기 위해서 사용된다.
- JSON은 키와 값을 쌍으로 가지는 구조이다, 자바의 Map 자료구조와 비슷
- 자바에선 Map, 파이썬에선 딕셔너리, Javascript 에선 JSON
- 배열을 사용할 때는 대괄호([ ])안에 중괄호({ })를 사용하여 조합한다.
- jQuery에서는 JSON으로 표현한 데이터를 파일에 저장해 두었다가 필요할 때 이를 로드할 수 있는 $.getJSON()함수를 제공한다.
- 비동기적으로 서버에 요청하고, 콜백함수를 통해 결과를 돌려받을때 사용
jQUery 지원 함수
- 아래 함수 모두 비동기적으로 서버측에 요청을 하는 함수이고 콜백함수를 통해 결과를 받을 수 있는 함수이다
$.ajax() : get 방식으로 요청할지, post 함수로 요청할지 선택 가능
$.get() : get 방식으로 서버측에 비동기로 요청하는 함수 / get 방식으로 Ajax을 수행한다.
$.post() : post 방식으로 서버측에 비동기로 요청하는 함수 / post 방식으로 Ajax을 수행한다.
$.getJSON() : get 방식으로 서버측에 요청하고 (Ajax를 수행하고) JSON 데이터를 가져온다.
$.getScript() : get 방식으로 (Ajax를 수행하고) Script 데이터를 가져온다.
$(selector).load() : Ajax를 수행한 후에 선택한 문서 객체안에 응답받을 파일(문자열)을 불러온다 / load() 안에 쓰인 파일명의 문서를 한꺼번에 불러와서 앞의 선택자 자리에 출력시킴
* Ajax 를 수행 = 서버측에 요청하고 응답을 받음
- 이 함수들로 서버측에 비동기적으로 요청
- 사용 예시
$.ajax({
url : "전송 페이지",
type : "전송 방식(get, post방식),
data : "전송할 데이터(값 가져갈때/json 형태 키밸류형태로 전달)",
dataType : "요청한 데이터 타입("html","xml","json","text"),
success : function(result){ 전송 성공하면 실행될 문장; // 응답을 받는 곳 이 함수를 콜백함수라고 함
}
});
- 콜백함수의 매개변수 result 로 값을 돌려받음
- 이 값을 조작해서 사용해야함
+ React 등 언어가 바뀌더라도 비동기로 처리해야하는 기술들은 익혀야함
- Ajax 실습 준비
- 다 설명한 후 Ajax(6) 폴더 안의 ajax.war 파일을 다운받아 import 하면 구현 되어있다
비동기로 서버에 요청하는 함수
load() 함수
- $("출력시킬 태그").load("요청할 파일명");
- 특정 서버측의 문서를 불러옴, 안에는 특정 파일명이 들어간다
- 서버측에 비동기적으로 요청하고, 서버측의 지정된 파일의 내용을 모두 불러와서 앞의 태그에 결과 출력 시켜주는 역할
Ajax 예제 1
load() 함수 예제 1
- sample1.html
<!DOCTYPE html>
<html>
<head>
<title>sample1</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.1.js">
</script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
// sample1.txt 파일의 결과를 load 함수로 불러와서 p 태그 사이에 출력
$("p").load("sample1.txt");
});
});
</script>
</head>
<body>
<button>변경</button>
<p>변경전</p>
</body>
</html>
+ jQuery 라이브러리를 불러옴, 버튼이 클릭되어 click 이벤트 발생시 안의 내용 실행
- 페이지를 바꾸지 않고 load() 함수를 이용해서 서버에 sample1.txt 란 파일을 요청을 함
- 그럼 sample1.txt 파일의 내용을 모두 불러와서 앞쪽의 선택한 태그 안에 출력시켜라는 의미
- sample1.txt 가 브라우저에 출력되는 결과(내용)를 load() 로 불러와서 p 태그 안에 출력
- load() 함수 : 서버측의 지정된 파일의 내용을 모두 불러와서 앞의 태그에 결과 출력 시켜주는 역할, 비동기적으로 요청해주는 함수
+ 나중엔 sample1.txt 자리에 jsp 파일이나 html 파일 등 들어감
Ajax 예제 2
load() 함수 예제 2
- sample09_02.html
- 이전의 예제와 다른 점 : sample1.txt 대신 resource.html 파일을 불러오고 있다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>서버의 데이터를 대상 엘리먼트에 삽입하기</title>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function() {
$('button').click(function() {
// resource.html 파일의 출력 결과를 load함수로 불러와서 div영역에 출력
$('#container').load('resource.html');
});
});
</script>
</head>
<body>
<button> 서버로부터 데이터 가져오기 </button>
<div id="container"> 데이터 가져오기 전 </div>
</body>
</html>
- resource.html 을 불러오면 이 resource.html 파일이 브라우저에 출력되는 내용(결과)을 load() 함수로 불러와서 id값이 container인 div 태그 영역에 출력된다.
- load() 함수로 resource.html 의 내용을 불러와서 출력해줌
- 비동기로 요청하거 있으므로 페이지가 바뀌지 않음
Ajax 예제 3
load() 함수 예제 3
- 파일 내용 중 특정 태그의 내용만 불러오기
- sample09_03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>서버의 데이터를 대상 엘리먼트에 삽입하기</title>
<style type="text/css">
div {
width: 180px; height: 80px;
margin: 3px; float: left;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
- jQuery에서 제공해주는 load()함수를 사용해서 서버의 menu.html 페이지의 데이터를 가져와서 특정 엘리먼트에 추가한다.
*/
$(function() {
$('#menu1').click(function () {
$('#message1').load('menu.html'); // load()함수를 이용해서 menu.html 문서전체를 로드하여 id가 message1인
return false; // 엘리먼트에 추가한다.
});
$('#menu2').click(function () {
$('#message2').load('menu.html li'); // load()함수를 이용해서 menu.html 문서의 내용중 li 엘리먼트만 읽어서 id가
return false; // message2인 엘리먼트에 추가한다.
});
});
</script>
</head>
<body>
<div>
<a href="#" id="menu1">메뉴 보기 1</a><p>
<span id="message1"></span>
</div>
<div>
<a href="#" id="menu2">메뉴 보기 2</a><p>
<span id="message2"></span>
</div>
</body>
</html>
- '메뉴 보기1' 과 '메뉴 보기 2' 를 a 태그로 링크를 걸어둠, a 태그 구분을 위해 id 값을 설정
- '메뉴 보기1' 을 클릭시 click() 함수 안에서 load() 함수를 통해 menu.html 전체 내용을 불러와서 id값이 message1 인 span 태그 사이에 출력
$('#message1').load('menu.html');- '메뉴 보기2' 을 클릭시 click() 함수 안에서 load() 함수를 통해 menu.html 중에서 li 태그에 있는 내용만 불러와서 id값이 message2 인 span 태그 사이에 출력
$('#message2').load('menu.html li');- menu.html 다음 한칸 띄우고 태그명을 쓰면 -> menu.html 내용 중에서 그 태그(li 태그)만 load() 함수로 불러온다
- 한칸 띄운다는 건 자손태그를 의미
+ return false; 를 통해 클릭을 해도 하이퍼링크가 실행되지 않도록 막아줌
- 비동기로 요청하거 있으므로 페이지가 바뀌지 않음
- menu.html 파일의 모든 내용을 불러와서 출력
- menu.html 파일의 내용 중 일부만 불러와서 출력 (li 태그 안의 내용만 불러와서 출력)
- 비동기로 요청하거 있으므로 페이지가 바뀌지 않음
비동기로 서버에 요청하는 함수
$.ajax() 함수
- load() 함수와 다르게 많은 옵션들이 있다, 다양한 기능 쓸 수 있다
ex) 옵션들
- ajax() 함수 특징 : get 방식으로 요청할지 post 방식으로 요청할지 type : 에서 선택 가능
Ajax 예제 4
ajax() 함수 예제 1
- Ajax 요청 직접 제어하기
- ajax() 함수로 요청 하고 값을 받기
- load() 함수로 처리했던 것과 같은 결과를 ajax() 로 처리
- sample09_04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>서버의 데이터를 대상 엘리먼트에 삽입하기</title>
<style type="text/css">
div {
width: 200px; height: 80px;
margin: 3px; float: left;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
/*
- load()를 이용했던 예제를 $.ajax() 함수를 사용해서 구현
- $.ajax()함수는 Ajax 요청을 설정하고 제어할 수 있도록 jQuery에서 제공하는 유틸리티 함수이다.i
*/
$(function() {
/*
- $.ajax()함수를 실행할 때 옵션으로 URL값(menu.html)을 지정하면 해당 URL서버로 Ajax요청을 한다.
- success 옵션에 지정한 콜백함수(function(data))는 요청이 성공했을 때 호출된다.
- 서버로부터 응답받은 데이터는 콜백함수의 매개변수로 전달된다.
- $.ajax()함수는 서버에서 반환되는 데이터의 형식에 따라 다르게 동작한다.
서버측에서 html데이터를 반환하면 html을 받아와 처리하기 위해서 데이터 타입(dateType) 옵션에 html을 지정한다.
*/
$('#menu1').click(function () {
$.ajax({
url:'menu.html', // 서버의 불러올 파일명
dataType:"html",
success: function(data){ // 서버로부터 응답받은 데이터는 콜백함수의 매개변수로 전달된다.
$('#message1').html(data); // 콜백함수로 전달된 data를 id가 message1인 엘리먼트에 설정한다.
}
});
return false;
});
$('#menu2').click(function () {
$.ajax({
url:'menu.html',
dataType:"html",
success: function(data){ // 서버로부터 응답받은 데이터는 콜백함수의 매개변수로 전달된다.
$('#message2').html($(data).find('li')); // menu.html문서의 내용중 li엘리먼트만 읽어서 id가 message2인
} // 엘리먼트에 설정한다.
});
return false;
});
});
</script>
</head>
<body>
<div>
<a href="#" id="menu1">메뉴 보기 1</a><p>
<span id="message1"></span>
</div>
<div>
<a href="#" id="menu2">메뉴 보기 2</a><p>
<span id="message2"></span>
</div>
</body>
</html>
ajax 함수 (sample09_04.html '메뉴 보기 1' 부분)
$.ajax({
url:'menu.html', // 서버의 불러올 파일명
dataType:"html",
success: function(data){ // 서버로부터 응답받은 데이터는 콜백함수의 매개변수로 전달된다.
$('#message1').html(data); // 콜백함수로 전달된 data를 id가 message1인 엘리먼트에 설정한다.
}
});- $.ajax({ }); 형태 안에 옵션들을 넣는다
- url 다음에는 서버에 요청할 파일명, 여기선 menu.html 파일을 서버에 요청한다
- dataType 다음에 쓰는 것은 요청할 파일의 확장자가 html 파일이므로 dataType을 html으로 쓴다
- type 에서 어떤 전송 방식을 사용할지 설정
- type 이 생략되면 디폴트는 get 방식
- 서버에 요청을 하고 값(응답)을 잘 받으면 success 다음의 내용이 실행된다
- success 옆의 function 을 callback 함수라고 함, 그리고 매개변수 (임의의 이름) data 로 값을 돌려받음
- 돌려받는 값은 menu.html 파일의 내용 중에 브라우저에 출력되는 값, 즉 전체내용을 콜백함수로 돌려받음
콜백함수로부터 값을 잘 돌려받았는지 확인하기위해 alert 코드 추가
- 이 매개변수 data 가 돌려받은 값임
- 결과 캡처
- 이렇게 돌려받은 데이터를 조작해서 뿌려줘야함
- 이떄 뿌려주는 코드는
- 안의 태그를 인식해야하므로 html() 함수를 사용해서 앞의 선택된 태그 영역에 뿌려줌
+ html() 함수는 안의 html 태그를 인식하고 <li></li> 를 디스크 모양으로 출력
+ text() 함수는 html 태그 인식불가하고 <li></li>까지 그대로 출력
ajax 함수 (sample09_04.html '메뉴 보기 2' 부분)
$.ajax({
url:'menu.html',
dataType:"html",
success: function(data){ // 서버로부터 응답받은 데이터는 콜백함수의 매개변수로 전달된다.
alert(data);
$('#message2').html($(data).find('li'));
// menu.html문서의 내용중 li엘리먼트만 읽어서 id가 message2인 엘리먼트에 설정한다.
}
});- url : 요청할 파일명, 돌려받는 값은 브라우저에 출력되는 전체 내용을 통째로 콜백함수를 통해 돌려받음
<콜백함수 내부>
- find() 함수 : 특정 태그를 찾는 함수
- data 중에서 즉 menu.html 전체 내용 중에서 li 태그만 찾아서 id값이 message2인 span 태그 사이에 뿌려라는 의미
콜백함수로부터 값을 잘 돌려받았는지 확인하기위해 alert 코드 추가
- 이 매개변수 data 가 돌려받은 값임
- 결과 캡처
- load() 함수로 처리했던 것과 같은 결과를 ajax() 로 처리
+ load() 함수로 특정 태그만의 내용을 불러올 때는 load('menu.html li'); 로 불러오기
+ ajax() 함수로 특정 태그만의 내용을 불러올 때는 $(data).find('li') 함수 사용
xml 파일 만드는 규칙
- item.xml 파일 열어보기
- 태그들이 정해진 것이 아니라 만들 수 있고 바꿀 수 있다
- xml 파일의 시작
<?xml version="1.0" encoding="UTF-8"?>- 가장 바깥쪽에 해당되는 태그(엘리먼트)가 반드시 "1개" 있어야한다 = 루트 엘리먼트
- 0개도 2개도 아닌 딱 1개여야 한다
<?xml version="1.0" encoding="UTF-8"?>
<items>
</items>- 여기선 items 가 루트 엘리먼트
- 그 루트 엘리먼트 안에 부모 엘리먼트인 item 들이 있다
<?xml version="1.0" encoding="UTF-8"?>
<items>
<item id="1" name="레몬">
<price>3000</price>
<description> 레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다. </description>
</item>
<item id="2" name="키위">
<price>2000</price>
<description> 비타민C가 매우 풍부하다. 다이에트와 미용에도 매우 좋다. </description>
</item>
</items>- 그 부모 엘리먼트 안에 child element 들이 있다
- 아이디 값을 구분하기 위해 item id 가 1,2,3,4.. 로 설정되어있다
- web.xml 파일 열어보기 ( 환경설정 파일)
- xml 주석기호는 html 주석기호와 같다
- server.xml (아파치톰캣 환경설정 파일) 열어보기
xml 파일 사용
- 직접 작성하는 일은 많지 않다
- 공공데이터 요청시 xml 형태로 결과를 돌려준다
ex) 기상청 날씨정보 요청
- 이렇게 xml 파일 형태로 돌려받은 값을 가공, 조작해서 사용해야함 (Javascript, Java, Python 등으로 조작)
비동기로 서버에 요청하는 함수
$.get() 함수
- get 방식으로만 요청 가능하다
- 형식 :
$.get('item.xml', function(data) {
});- 처음 들어가는건 서버에 요청할 파일명
- 두번째 매개변수로 들어가는 function 이 콜백함수이다
Ajax 예제 5
get() 함수 예제 1
- XML 파일을 get 방식으로 로드하기
- XML 파일을 요청을 하면 XML 로 결과를 돌려받음
- 요청할 파일명은 item.xml, 이 파일을 콜백함수로 받아서 처리하게됨
- 돌려받은 xml 데이터를 조작해서 필요한 형태로 출력하고 있다
- sample09_07.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XML 파일을 GET 방식으로 로드하기</title>
<style>
td { border: 1px solid gray;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
/*
- $.get() 함수를 이용해서 item.xml 파일을 불러온다.
- $.get() 함수의 첫번째 매개변수에는 서버의 URL 주소를 지정한다.
- $.get() 함수의 두번째 매개변수인 콜백함수를 이용해서 서버에서 보내온 XML 형식의 데이터를 data 로 받늗다.
*/
$(function() {
$.get('item.xml', function(data) {
$("#treeData").append(
"<tr><td>id</td>" + "<td>name</td>"
+ "<td>price</td>" + "<td>description</td>" + "</tr>");
$(data).find('item').each(function() { // 서버에서 얻어온 데이터에서 셀렉터로 item태그를 찾는다.
var $item = $(this); // 6개의 item태그중 현재 처리중인 item태그를 this로 접근한후에 이를
$("#treeData").append("<tr>" + "<td>" // this로 접근한 후에 이를 $(this)를 사용하여 jQuery객체를
+ $item.attr("id") + "</td>" + "<td>" //생성함
+ $item.attr("name") + "</td>" + "<td align='right'>"
+ $item.find("price").text() + "</td>" + "<td>"
+ $item.find("description").text() + "</td>" + "</tr>");
});
});
});
</script>
</head>
<body>
<table id="treeData"></table>
</body>
</html>- 두번째 매개변수는 콜백함수이다
- $.get() 함수를 통해 서버에 서버측의 파일 중 'item.xml' 파일을 요청하고 'item.xml' 파일을 돌려받고 있다
- 콜백함수의 매개변수 data 로 xml 형식의 데이터를 돌려받았다
- body 태그 안에 table 태그 하나뿐, 이 table 태그의 id값만을 가지고 태그를 구해서 tr td 를 만들어서 데이터를 뿌려줄 것
- 테이블 태그를 id값으로 구해와서 append() 함수로 타이틀을 출력, id, name, pirce, descript 추가
- 타이틀이 아닌 돌려받은 데이터의 내용은 가공해야함
each() 함수
- 반복적인 작업을 수행하는 함수
- 첫번째 데이터를 가져오고 반복적인 작업을 하고 두번쨰 데이터를 가져오고 반복적인 작업을 하고..
- 더이상 데이터가 없을때까지 가져와서 반복작업
돌려받은 xml 을 원하는 형태로 가공 (sample09_07.html 부분)
$(data).find('item').each(function() { // 서버에서 얻어온 데이터에서 셀렉터로 item태그를 찾는다.
var $item = $(this); // 6개의 item태그중 현재 처리중인 item태그를 this로 접근한후에 이를
$("#treeData").append("<tr>" + "<td>" // this로 접근한 후에 이를 $(this)를 사용하여 jQuery객체를
+ $item.attr("id") + "</td>" + "<td>" //생성함
+ $item.attr("name") + "</td>" + "<td align='right'>"
+ $item.find("price").text() + "</td>" + "<td>"
+ $item.find("description").text() + "</td>" + "</tr>");
});
- 여기서는 $(data).find('item') 이므로 가져온 xml 형식 데이터에서 부모 엘리먼트인 item 태그를 한개씩 계속 구해온다
1. attr() 함수로 속성 가져오기
- 첫번쨰 item 태그인 레몬을 가져와서 $item 변수에 넣고, 그 태그의 속성을 attr() 함수로 가져온다
ex) 먼저 id 속성의 값을 가져옴 -> 1, 다음은 name 속성의 값을 가져옴 -> 레몬
- 이렇게 구해온 값을 <td> 를 열어서 append() 함수로 추가하고 있다
2. find() 함수로 태그 찾아서 가져오기
- 세번째로 pirce 란 태그를 구해와야하는데 price는 item 태그의 속성이 아닌 item 안에 있는 자식 Element 임, find() 함수로 price태그를 찾는다
- 이때 찾은 그 자식 태그 사이의 값만 구할땐 text() 로 구해옴
- 네번쨰로 discription 란 태그를 구해야하므로 특정 태그를 찾아주는 find() 함수로 discription 태그를 찾아서 그 안의 값을 가졍괴 위해 text() 로 값을 가져옴
- 이렇게 구해온 값을 <td></td> 안으로 뿌려줌
- 다음으로, each() 함수에 의해 다음 item 태그인 키위를 가져와서 $item 변수에 넣고 그 태그의 속성과 자식태그들 사이의 값을 가져오고 다시 <tr> 이 열리며 값을 출력함
- 계속 다음 item 으로 넘어가면서 반복됨
- item 이 없을때까지 반복작업한다
- 돌려받은 xml 데이터를 조작해서 필요한 형태로 출력하고 있다
each() 함수
- 반복적인 작업을 수행하는 함수
- 첫번째 데이터를 가져오고 반복적인 작업을 하고 두번쨰 데이터를 가져오고 반복적인 작업을 하고..
- 더이상 데이터가 없을때까지 가져와서 반복작업
each() 함수 예제 1
- each01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열을 반복 처리하기</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
var list = ['Jessica', 'Tiffany', 'Sunny', 'crystal', 'G.NA']
$.each(list, function(index, value) {
alert(index+":"+value);
$('ol').append('<li>'+value+'</li>');
});
});
</script>
</head>
<body>
<ol>
</ol>
</body>
</html>- Javascript 배열 정의하는 방법 var list = [ ] 안에 값을 넣으면 됨
- 반복문 대신 $.each() 함수로 배열의 값을 차례로 가져와서 출력해보자
$.each(list, function(index, value){});- index 는 배열 list 에 들어있는 값의 인덱스 번호를 받고
- value 는 이 배열 list 에 들어있는 값을 받음
+ alert 이 우선순위가 높으므로 alert 이 다 출력된 후 해당 목록들을 append 함수로 추가함
- 배열 방번호는 0 번부터 시작하므로 번호가 이렇게 뜸
- alert 이 우선순위가 높으므로 모두 alert 한 후 append 됨
each() 함수 예제 2
- each02.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
// each() 메소드 : 매개변수로 입력한 함수를 사용해 for in 반복문처럼 객체나
// 배열의 요소를 검사하는 메소드
$(document).ready(function () {
// 변수를 선언합니다.
var array = [
{ name: 'Hanbit Media', link: 'http://hanb.co.kr' },
{ name: 'Naver', link: 'http://naver.com' },
{ name: 'Daum', link: 'http://daum.net' },
{ name: 'Paran', link: 'http://paran.com' }
];
// $.each() 메서드를 사용합니다.
$.each(array, function (index, item) {
// 변수를 선언합니다.
var output = '';
// 문자열을 만듭니다.
output += '<a href="' + item.link + '">';
output += ' <h1>' + item.name + '</h1>';
output += '</a>';
// 집어넣습니다.
document.body.innerHTML += output;
});
});
</script>
</head>
<body>
</body>
</html>- body 태그 안엔 아무 내용이 없다, jQuery 에서 구현할 것
+ Javascript 배열 만들기 / json 형태
- 0 번방에 들어갈 값은 {}
- 1 번방에 들어갈 값은 다음 {}
- json 형태로 되어있다
- Javascript 에서 키-밸류 형태 를 json 이라고 한다
- 중괄호 { } 안에 키 : 밸류 형태로 되어있음, 키 값을 알아야만 밸류를 구해올 수 있다
- 키값은 name 과 link
each() 로 배열의 값들을 하나씩 처리
- index 란 매개변수는 array 배열의 인덱스번호를 한개씩 전달받음
- item 이란 매개변수는 배열 안의 데이터들을 한개씩 전달받음
- 이게 통째로 item 변수에 들어간다
- 그리고 item.link 와 item.name 을 통해서 데이터를 가져옴
- 즉 키값을 통해서 value 값을 가져온다
- 가져와서 태그로 감싼 후 계속해서 +=로 output 변수에 누적시킨다
- 그 후 innerHTML 속성을 사용해서 output 변수의 값을 누적해서 집어넣음
- document.body.innerHTML 은 Javascript 기능으로서, 앞의 innerHTML 앞에 body 를 쓰면 body 태그 사이에 출력시켜라는 의미이다
+ jQuery 식으로 출력하기
- body 태그안에 div 를 만들어서 영역만 만들기
- var output 변수 선언을 each() 함수 바깥 위쪽으로 옮기기
- each() 함수 바깥 아래에서 html() 함수로 output 변수에 누적된 결과를 출력
+ 태그를 인식해야하므로 html() 함수 사용
- 그럼 브라우저에는 이렇게 출력된다
- 결과 캡처
+ alert()로 output 변수에 어떤 값이 있는지 찍어보면
JSON 형태 예시
- 이게 json 형태 (키:밸류 형태) 이다
공공데이터 데이터 제공 예시
공공데이터 포털
국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datase
www.data.go.kr
- xml 형태로 되어있다
- json 형태로 되어있다
'국비지원 과정 > 웹표준' 카테고리의 다른 글
| 코딩 46일 / 2022.08.24 / jQuery Ajax 2, Map(맵), jQuery UI, JSP 기초 (0) | 2022.08.24 |
|---|---|
| 코딩 44일 / 2022.08.22 / jQuery의 필터 선택자,함수,유효성 검사,패턴 정규식 검사 (0) | 2022.08.22 |
| 코딩 43일 / 22.08.19 / jQuery의 선택자, 함수, 이벤트 함수 (0) | 2022.08.19 |
| 코딩 39일 / 2022.08.12 / 자바스크립트 사용자 정의 함수,배열,객체,String 객체,Math 객체 (0) | 2022.08.12 |
| 코딩 38일 / 2022.08.11 / 자바스크립트 연산자,제어문,내장 함수2 (0) | 2022.08.11 |