10.18. MiniCamp_WEB_2WEEK

01. Javascript 복습

1. 홀수, 짝수 onclick함수

   // count가 1인 것은 함수 밖으로 꺼내놔야 else 전에 사자지지 않음
   
   let count = 1;
   function hey(){
     if (count % 2 == 0) {
       alert('짝!')
     } else {
       alert('홀!')
     }
     count += 1;
   }

---

02. JQuery

1. Javascript를 미리 작성해둔 것

2. 사용 전에 꼭! 임포트 해야함

3. Google CDN

4. input박스 값 가져오기

   $('#id').val();
   $('#id').val('바꿀내용'); //값 바꾸기 

5. div 보이기 / 숨기기

   $('#id').hide(); // 숨기기
   $('#id').show(); // 보이기

6. css의 값 가져와보기

   $('#idx').css('가져올속성');

7. 태그 내 텍스트 입력

   $('#id').text('바꿀텍스트');

8. 태그 내 html 입력하기

   let temp_html = `넣을 태그들`
   $('#id').append(temp_html);

9. Jquery 적용

function openclose(){
  let status = $('#post-box').css('display');
  if (status == 'block') {
    $('#post-box').hide();
    $('#mybtn').text('포스팅박스 열기');
  } else {
    $('#post-box').show()
    $('#mybtn').text('포스팅박스 닫기');
  }
}

// css에서 #post-box 부분 display: none;으로 항상 닫혀 있게 설정하기

10. 퀴즈
    1) 빈칸 체크 함수 만들기

    function q1() {
      let status = $('#input-q1').val();
      if (status == '') {
        alert('입력하세요!');
      } else {
        alert(status);
      }
    }

    2) 이메일 판별 함수 만들기

    function q2() {
      let email = $('#input-q2').val();
      if (email.includes('@')){
        let domain = email.split('@')[1].split('.')[0];
        alert(domain);
      } else {
        alert('이메일이 아닙니다.');
      }
    }

    3) HTML 붙이기/지우기

    // 붙히기
    function q3() {
      let name = $('#input-q3').val();
      let temp_html = `<li>${name}</li>`;
      $('#names-q3').append(temp_html);
    }
    
    // 지우기
    function q3_remove() {
      $('#names-q3').empty();
    }

---

03. 서버-클라이언트 통신 이해

1. GET요청 = 데이터 조회 요청
   ? : 여기서부터 전달할 데이터가 작성된다는 의미
   & : 전달할 데이터가 더 있다는 뜻

2. POST요청 = 생성, 변경, 삭제 요청

---

04. Ajax

1. jQuery를 임포트한 페이지에서만 동작 가능

2. Ajax 기본 골격

$.ajax({
  type: "GET", // GET 방식 요청
  url: "여기에URL을입력",
  data: {}, // 요청하면서 함께 줄 데이터 (GET은 비워둠)
  success: function(response){ // 서버에서 준 결과 response에 담음
    console.log(response) // 결과 이용해 나머지 코드 작성
  }
})

3. 서울시 OpenAPI(실시간 미세먼지 상태)
   1) 모든 구 미세먼지 표기
   2) 업데이트 버튼 누를 때마다 새로
   3) 미세먼지 수치 70 이상 빨간색 표시

   function q1() {
     $('#names-q1').empty();
     $.ajax({
       type: "GET",
       url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
       data: {},
       success: function (response) {
         let rows = response['RealtimeCityAir']['row'];
         for (let i = 0; i < rows.length; i++) {
           let name = rows[i]['MSRSTE_NM'];
           let mise = rows[i]['IDEX_MVL'];
           let temp_html = ``
           if (mise >70) {
             temp_html = `<li class="red">${name} : ${mise}</li>`
           } else {
             temp_html = `<li>${name} : ${mise}</li>`
           }
           $('#names-q1').append(temp_html);
         }
       }
     })
   }

4. 서울시 OpenAPI(실시간 따릉이 현황)
   1) 모든 위치 따릉이 현황
   2) 업데이트 버튼
   3) 5대 미만 빨갛게

   function q1() {
     $('#names-q1').empty();
     $.ajax({
       type: "GET",
       url: "http://spartacodingclub.shop/sparta_api/seoulbike",
       data: {},
       success: function (response) {
         let rows = response['getStationList']['row'];
         for (let i = 0; i < rows.length; i++) {
           let name = rows[i]['stationName'];
           let Cnt = rows[i]['rackTotCnt'];
           let parking = rows[i]['parkingBikeTotCnt'];
           let temp_html = ``
           if (parking > 5) {
             temp_html = `<tr>
                            <td>${name}</td>
                            <td>${Cnt}</td>
                            <td>${parking}</td>
                          </tr>`
           } else {
             temp_html = `<tr class="red">
                            <td>${name}</td>
                            <td>${Cnt}</td>
                            <td>${parking}</td>
                          </tr>`
           }
           $('#names-q1').append(temp_html);
         }
       }
     })
   }

5. 랜덤 고양이 사진 API
   1) 랜덤 고양이 사진

   // jQuery 이미지태그 src 바꾸기 구글링
   
   $("#img_form_url").attr("src", imgurl);

   2) 업데이트

   function q1() {
     $('#names-q1').empty();
     $.ajax({
       type: "GET",
       url: "https://api.thecatapi.com/v1/images/search",
       data: {},
       success: function (response) {
         let img = response[0]['url']
         $("#img-cat").attr("src", img);
       }
     })
   }