JQuery - (2)

< test2.jsp >

• body 에 성별 추가

• 

• 

• 여자 체크 되어 있을 땐 true 값 반환

• 

• 여자 체크 안되어 있을 땐 false 값 반환

if(!$('#g_woman').is(":checked") && !$('#g_man').is(":checked")) { alert("성별을 입력하세요"); return false; }

• 

• 체크 안되어있을 경우 성별을 입력하라고 alert 창 띄움

 

• body 에 목록상자 추가

if($('#age').val()=="") { alert("나이를 선택하세요"); $('#age').focus(); return false; }

• 공백값이라면 입력 안된 것으로 간주!

• 

• 선택안했을 경우 나이를 선택하세요 alert 창 띄움

 

⇒ 펀웹에서 똑같이 제어해보기

======== test3.jsp

// show()   hide()    toggle()

// slideDown()   slideUp()   slideToggle()

// fadeIn()   fadeOut()   fadeToggle()

 

• body 에 div 태그 추가

< toggle() : 보이고 사라지고 반복하는 효과 >

// h1 대상 클릭했을 때 $('h1').click(function(){ $(this).next().toggle(); });

• $(this).next() ⇒ 누른 대상의 다음 대상

• 

• 클릭 안했을 때

• 

• 열고닫기1 클릭했을 때 (아랫부분 사라짐)

• 

• .toggle('slow'); →  ‘slow’ 넣어주면 천천히 사라짐

 

$('h1').click(function(){ $(this).next().toggle('slow', function(){ alert("효과 끝"); }); ⇒ 추가된 부분 });

• 

• 경고메세지 띄워줌

======== test4.jsp

• body 에 이미지 추가해주기

• 

• 점 없애고 이미지를 똑같이 할 수 있도록

<style type="text/css"> *{margin: 0px; padding:0px;} ul{list-style: none;} img{width:500px; height:350px;} </style>

• 스타일 추가

• 추가

• innerfade 속성 값 여러개니까 중괄호로~

<script src="../js/jquery-3.5.0.js"></script> <script src="../js/jquery.innerfade.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#inner_fade').innerfade({ animationtype : 'fade', speed:750, timeout:2000, type: 'random', containerheight: '350px' }); }); </script>

• speed :750 .75초 서서히 보이는 효과
• timeout: 사라짐 2초
• type: random 랜덤하게 이미지 보임
• conta~ : 내용물의 크기 (높이)

============================================

< ajax (Asynchronous Javascript And XML) >

• https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
• https://blog.naver.com/lgr0406/221700136419

• 서버의 화면 전환 없이 바로 나타내도록 (비동기 방식)

 

## 나중에는 json 도 함

• 대괄호로 묶고 안에 중괄호로 묶어서 사용하는 형태
• js_jQuery1/test7.jsp 에서

  

• 이렇게 사용하던 것들이 json 형태로 표현한 것

 

XML(Extensible Markup Language)

JSON(제이슨, JavaScript Object Notation)

⇒ ajax 는 좋은 기술이긴 하지만, 너무 많이 쓰다보면 과부하 걸려서 속도가 느려짐

: 적재적소에 잘 쓰는 게 중요!

⇒ 요즘엔 json 이 더 잘 쓰이는 추세(가볍고 빨라서! ajax 이후에 나옴)

 

======== js_jQuery3 폴더 새로 만들기

======== string1.html /  string1.jsp 만들기

• 모바일 페이지는 jsp 말고 html 로 만든다.

• 코드가 html / xml / json 총 3가지로 출력되는데
• 일단 html 으로 먼저 출력해보자

< string1.jsp >

<%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%> <!-- js_jQuery3/string1.jsp --> <h1>Hello JSP</h1>

• 

  출력화면(인터넷 창)

⇒ 출력한 결과를 가져와서 화면에 띄워줌 (.html)

• html에서 jsp 로 가서 출력결과를 html 로 들고옴(내부적으로)
• 그래서 화면이 멈추지 않고 바로 띄워주게끔

 

<string1.html>

대상.함수() ⇒ 원래 이렇게 사용

$.each(배열변수, 함수)  ⇒ each 는 이렇게 썼다

$.ajax(파일, 속성) ⇒ ajax는 대상이 파일

 

$.ajax('string1.jsp', { ⇒ 여러 개 들고올 땐 중괄호 success:  ⇒ 출력한 결과를 성공적으로 갖고 왔는지 });

 

$.ajax('string1.jsp', { // success: function(출력값 받는 변수){ success: function(rdata){ } });

• 준비상태

 

> string1.jsp 에서 가져온 결과값을 body 태그 뒷 부분에 추가

success: function(rdata){ $('body').append(rdata); }

• 

  출력 결과

• body 에 추가해주기

• 평소 출력창

// 버튼을 클릭했을 때 string1.jsp 파일에서 가져 온 내용을 // div 태그에 덮어서 씀 $('#btn').click(function(){ $.ajax('string1.jsp', { success: function(rdata){ $('div').html(function(index, oldhtml){ return rdata; }); } }); });

• 

• 버튼 눌렀을 때 저렇게 div 태그에 덮어쓰기 됨
• $('div').html(rdata); → oldhtml function 빼고 이렇게 쓰면 됨

이벤트를 쓸 땐 기능이 들어가야하니까 반드시 function 을 사용

======== string2.html, string2.jsp

< string2.html >

$(document).ready(function(){ $.ajax('string2.jsp', { data:파라미터값, success:function(리턴받아 온 데이터){ } }); });

• 틀 만들기

$(document).ready(function(){ $.ajax('string2.jsp', { data:{name:'홍길동', age:21}, // 여러 값을 줄 땐 중괄호 success:function(rdata){ // 받아오는 값 } }); });

• 넘겨줄 데이터 ⇒ 여러 개 값을 넘겨줄 땐 중괄호 안에 넣으면 됨

$(document).ready(function(){ $.ajax('string2.jsp', { data:{name:'홍길동', age:21}, success:function(rdata){ // body 태그 뒷 부분에 추가 $('body').append(rdata); // rdata 값 넘겨주기 } }); });

• 최종코드

< string2.jsp >

<% // name age 파라미터 가져오기 String name = request.getParameter("name"); String age = request.getParameter("age"); %> 이름 : <%=name %>, 나이 : <%=age %>

• 

  출력창

 

< string2.html >

• body 부분에 추가

• 

  출력창

 

id=btn 버튼을 클릭했을 때 name:'이순신', age:30 파라미터 넘기기

string2.jsp 가서 출력 결과 가져와서 h2 태그에 덮어서 씀

$('#btn').click(function(){ $.ajax('string2.jsp', { data:{name:'이순신', age:30}, success:function(rdata){ $('h2').html(rdata); } }) });

• 

  ⇒

  

• 버튼 클릭했을 때 출력 결과 바뀜! (h2 태그에 내용 덮어쓰기)

 

======== string3.html, string3.jsp 만들기

< string3.html >

• body 에 form 태그 추가

• 

  출력창

 

id="btn" 버튼 클릭했을 때 id 파라미터 값 string3.jsp 넘겨서

string3.jsp 아이디 중복체크 하고 결과를 div 태그에 덮어쓰기

<% String id = request.getParameter("id"); %> <%=id %> 아이디 <%if("kim".equals(id)) {%> 중복 <%} else {%> 사용 가능 <%}%>

 

$(document).ready(function(){ $('#btn').click(function(){ $.ajax('string3.jsp', { // // 디비에 저장된 dbId="kim" data: {id:$('#id').val()}, success:function(rdata){ $('div').html(rdata); } }) }); });

 

< string3.jsp >

<% String id = request.getParameter("id"); String dbId = "kim"; %> <%=id %> <%if(dbId.equals(id)) { out.println(" 아이디는 중복입니다"); } else { out.println("아이디는 사용가능합니다"); }%>

Funweb ⇒ join.jsp

• div 태그 추가하기 (onclick 지우기)

======== dupCheck.jsp 만들기

< dupCheck.jsp >

<%@page import="member.MemberDAO"%> <%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%> <% String id = request.getParameter("id"); MemberDAO md = new MemberDAO(); int check = md.confirmId(id); %> <%=id %> <% if(check == 1) { out.println(" 는 이미 사용중인 아이디입니다."); } else { out.println(" 는 사용가능합니다."); } %>

• memberDAO 가 없다면 DB 연동부터 함수까지 만들어주면 됨!

< join.jsp >

$('#dup').click(function(){ if(!$('#id').val()) { $('#dupCheck').html("아이디를 입력하세요"); $('#id').focus(); return false; } $.ajax('dupCheck.jsp', { data:{id:$('#id').val()}, success:function(rdata){ $('#dupCheck').html(rdata); } }) });

 

// 아이디 중복체크 시험문제

*** XML

다시 StudyJSP ⇒ js_jQuery3 폴더

======== xml.jsp, xml.html

xml → 태그로 만들어서 들고 옴

<%@ page language="java" contentType="text/xml; charset=UTF-8"     pageEncoding="UTF-8"%> <member> <person><id>jang</id><pass>1234</pass><name>장수영</name></person> <person><id>jo</id><pass>1234</pass><name>조해진</name></person> <person><id>park</id><pass>1234</pass><name>박희진</name></person> </member>

• html 대신 xml 로 수정!
• 확장된 마커로 데이터를 표현하는 xml (Extensible Markup Language)
• member , person 과 같은 마커는 자기가 임의로 설정 가능

$.ajax('xml.jsp', { success:function(rdata){ // xml 의 데이터 왕창 들고옴 () $(rdata).find('person').each(function(){ var id = $(this).find('id').text(); var pass = $(this).find('pass').text(); var name = $(this).find('name').text(); // body 태그 뒷 부분에 추가 $('body').append(id + ", " + pass + ", " + name + "<br>"); }); } });

$(rdata).find('person').each();

• find : person 태그 찾는다
• each : person 하나가 아니기 때문에 반복한다
• function : 기능이 들어가야함
• $(this) : 첫번째 person
• .text(); : 태그 안에 있는 글자

• 

  출력창

• body 부분에 추가

• 

  출력창

$('#btn').click(function(){ $.ajax('xml.jsp', { success: function(rdata){ $(rdata).find('person').each(function(){ var id = $(this).find('id').text(); var pass = $(this).find('pass').text(); var name = $(this).find('name').text(); // 버튼 클릭했을 때 xml.jsp 데이터 가져와서 // table 태그 뒷 부분에 추가 $('table').append("<tr><td>"+id +"</td><td>"+pass +"</td><td>"+name+"</td></tr>"); }); } }); });

• 

  ⇒

  

• 출력창 (버튼 누를 경우 테이블로 출력)

요즘엔 자바스크립트오브젝트 형태 → 자바스크립트배열 형태의 json 을 많이 씀!

⇒ 다음시간엔 json 할 거