220221 폼 유효성 검사, 쿠키, jquery

로그인, 회원가입, 게시판 폼 유효성 검사 함수 만들었음

 * 주소 검색 시 외부 api 가져와 적용 (카카오)

<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js">   <--외부 api 불러옴    function openDaumPostcode() {         new daum.Postcode({             oncomplete : function(data) {       //function(data) : 콜백함수 (선택 완료(complete)하면 data값이 input으로 넘어감)             // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.             // 우편번호와 주소 정보를 해당 필드에 넣고, 커서를 상세주소 필드로 이동한다. //          document.getElementById('join_zip1').value = data.postcode1; //          document.getElementById('join_zip2').value = data.postcode2;             document.getElementById('join_zip1').value = data.zonecode;             document.getElementById('join_addr1').value = data.address;             }         }).open();     }

나는 주소 가져왔을 때 가져온 주소는 readonly 상태로 두고 상세주소 포커스 넘기는 것 추가함
address1.readOnly=true;
address2.focus();


라디오&체크박스 ---> value값으로 하는게 아니라 checked 여부로 유효성 검사를 해야 함
if(female.checked==false&&male.checked==false) --> 두 개 다 체크되지 않은 경우!

체크박스- 2개 이상 체크했는지 확인하는 검사
체크된 경우 cnt를 증가시키고 cnt값이 2보다 작을 경우 메시지 뜨게 설정
var cnt=0;
if(h1.checked) cnt++;
if(h2.checked) cnt++;
if(h3.checked) cnt++;
if(h4.checked) cnt++;
if(cnt<2){
    alert("취미는 두 개 이상 선택해야 합니다");
    return false;
}


* 쿠키!
javascript에서 사용하는 쿠키
- 팝업창 하루동안 보지 않기~

서버측에서 쿠키가 발행되는 시점 -> 보지 않기에 체크!하고 창을 닫을 경우!
 -> 쿠키가 임시폴더(cookie)에 파일 형태로 저장 -> 하루인 경우 매 자정 초기화/ 3일이면 3일마다 초기화
아무튼 다시 창 들어갔을 때 서버가 임시폴더에 접근해서 발행된걸 확인한 경우-> 팝업창이 뜨지 않게 처리

jsp에서 사용하는 쿠키
- 로그인 성공 시 발행
- 로그인 상태 유지 (자동로그인)



*** JQuery
    : 자바스크립트 라이브러리(함수) 제공 

 - 형태
    $(선택자).메서드(매개변수, 매개변수)
 - 직접 파일 다운받아서 추가해 사용하거나 cdn 방식으로 사용
    //head
      <script src="js/jquery-3.6.0.min.js"></script> 이렇게.. src에 경로 적어주기
    //body
      <script>
         $(document).ready(function(){          // ready() 안에 function(){}이 있는 형태.
            alert("출력성공");                                   // 현재문서(document)가 준비되면(ready) function()을 실행해라
         });                                                                    // window.onload 이벤트와 같은 기능을 수행
   // 위의 $어쩌고를 간단하게 줄여 쓰면
         $(function(){            //이렇게 괄호로 바로 사용 가능
            alert("출력성공");
         })

   결론적으로
     jQuery(document).ready(function(){ 

=  $(document).ready(function(){

=  $(function(){ 

 - 사용
         $(document).ready(function(){
//           $('div').hide(); //따옴표(' ') -> 'div' 태그에 적용
             $('#sample1').hide();  //샵(#) -> id에 적용
         });   //hide() : 숨김처리

  --> $() 괄호의 의미 : 괄호 안의 것을 불러와라~
       괄호 안에 들어갈 수 있는 것
       1. html 태그        <div> : $('div')
       2. css 선택자       h1{}, .my_class{}, #my_id{} : $("h1"), $(".my_class'), $('#my_id')

       3. JavaScript Object       $(document).ready();