220225 json, map, jQuery UI

http://www.tcpschool.com/json/json_basic_structure <-여기 참고하기
 ※ JSON
   : JSON은 JavaScript Object Notation 의 약어로 XML 데이터를 대신하기 위해서 사용
   : 키(데이터명)와 값을 쌍으로 가지는 구조      ---> "데이터명": 값
   : 객체(object)는 중괄호( { } )로 표현               ---> 위의 쌍을 쉼표(,)로 여러 개 모아 객체로 묶음
   : 배열(array)는 대괄호( [ ])로 표현                   ---> 그 객체들을 모아 배열에 저장함
   +) 형태
     "array":[  //배열 하나만 json파일에 있다면 머 생략해도 되는 것 같음
         { "id": "1",  "name": "가나다",  "price": " 1000", "description": "라마바사아"  },
         { "id": "2",  "name": "ABC",  "price": " 2000", "description": "DEFGHIJ"  }
          ]


   4. $.getJSON()
     01. 첫번째 매개변수 --> 서버의 URL주소를 지정 ('item.json')
     02. 두번째 매개변수 --> 서버 요청 성공 시 콜백함수 호출(function(data, textStatus))
                                                  data=서버에서 받은 json 객체 데이터, textStatus=성공 시 "success" 전달

         $.getJSON('item.json', function(data, textStatus) {
              $.each(data, function() {    //each() ---> 반복 실행
                  $("#treeData").append("<tr>" + "<td>"                 
                        + this.id + "</td>" + "<td>"             //this 포인터=item.json 중 현재 접근중인 객체 data
                        + this.name + "</td>" + "<td align='right'>"
                        + this.price + "</td>" + "<td>"
                        + this.description + "</td>" + "</tr>");
               });
         });

   +) $.ajax() 버전

         $.ajax({
              url : "item.json",
              dataType : "json",
              success : function(data) {
                  $.each(data, function() {
                      $("#treeData").append("<tr>" + "<td>"                 
                              + this.id + "</td>" + "<td>"
                              + this.name + "</td>" + "<td align='right'>"
                              + this.price + "</td>" + "<td>"
                              + this.description + "</td>" + "</tr>");
                  });
              }
         });


   5. $.post()
     01. post 방식으로 서버와 통신하는 함수
     02. 서버의 jsp 페이지(파일)에 post 방식으로 요청 --> 내 데이터를 저기 보냈다 +@로 다시 가져오는

         var username = $('.username').val();                // 서버로 보낼 데이터를 입력창에서 얻어온다.
         var sendData = 'username=' + username;      // 보낼 데이터를 문자열 형식으로 변환
        //'u~'는 임의의 변수명인데, 얘를 보낼 파일에 있는 변수명과 동일하게 설정해야 거기로 들어갈 수 있음

         $.post(   
              "welcome.jsp",           //welcome.jsp 파일을 요청함
               sendData,                    //내 데이터( 'username=' + username; )를 welcome.jsp에 보냄
               function (msg) {        //welcome.jsp에서 받은 데이터를 msg로 가져왔음
                 alert(msg);   
                 $('#message').html(msg);    // id='message'인 곳에 html태그 적용해서 msg 집어넣음
             });  

   +) $.ajax() 버전

         $.ajax({
              url :"welcome.jsp",                           //여기에
              type :"post",                                         //보낸다
              data : {"username": username},  // json 형식으로 데이터를 만들어 보냄
              success : function(msg){      //성공하면 내가 보낸 데이터가 포함된 jsp 파일을 msg에 다시 받음
                  alert(msg);
                  $('#message').html(msg); //id='message'인 곳에 html태그 적용해서 msg 집어넣음
               } 
          }); 


   6. $.getScript()
     01. get 방식으로 서버와 통신하는 함수
     02. 서버의 javascript 파일을 get 방식으로 요청 

         $.getScript("test.js");        //자바스크립트 파일(test.js)을 $.getScript()함수로 호출
         $('#submit').click(function() {
              var msg=call($('.username').val());       // test.js 정의한 call()함수를 호출
              $('#message').html(msg);           //받은 data를 id='message'인 곳에 집어넣음
      return false;
         });



 * 유효성 검사 회원가입 폼.. ajax를 곁들인
   ※ war 파일 가져오기: Project Explorer에서 마우스 오른쪽-import-WAR file

폼에서 중복확인 눌렀을 때 -> onClick="id_check()"
 -> 유효성 검사하는 js파일로 이동 -> var memid=$("#join_id").val() 저장 -> ajax()
 -> 서버에 값 전달하고 리턴받는 jsp 파일로 이동 ->  MemberDAOImpl md=new MemberDAOImpl();
//// public class MemberDAOImpl 로 만드는 버릇을 들여야함 (나만 쓸라고 만드는게 아니니까)///
 -> 오라클 서버 연결하는 java 파일로 이동
 -> select문으로 id 검색 -> rs=pstmt.executeQuery(); if(rs.next()) re=1; //쿼리문이라 Query로 가져옴
 -> 리턴값을 jsp에서 다시 받음 -> int re=md.checkMemberId(id);
 -> out.println(re); 웹브라우저에 출력되는 값 -> 이걸 ajax의 콜백함수(data)로 리턴 -> 유효성 검사 ㄱ

이 과정 좀 편하게 하는 방법... ctrl 누르고 해당 class 누르면 그 위치로 넘어가게 해줌! 편함!
이 흐름을 확실하게 알아둬야 함 어떤 과정으로 서버에 접근해서 데이터를 받아오는지! 



 *Map
https://www.w3schools.com/graphics/google_maps_intro.asp 참고

 * jQuery UI
   : 인터렉티브한 웹을 제공할 수 있도록 하는 인터페이스 개발 도구
   : 애니메이션 효과, 위젯을 쉽게 사용할 수 있도록 탭을 만들거나, 경고창을 띄우는 등의 효과
https://jqueryui.com/ 참고

interactions파트 전반   ,   accordion, datepicker, menu, tabs, toggle 등등 자주 쓰일법한 기능은 이름이랑 매칭될 수 있을 정도로는 알아두자