New_2주차

JavaScript 복습

1. 홀짝 함수 만들기

let count = 0 // 몇 번 눌렀는지 알아야 하니 처음 값 정의 
function hey() {
  count += 1
  if (count % 2 == 0) {
    alert("짝수 입니다.")
  } else {
    alert("홀수 입니다.")
  }

Jquery

Jquery CDN

1. Jquery 다뤄보기

1. ID가 있어야 함

2. input박스 값 가져오기

   $('#input박스 id').val();
   // 값 입력하고 싶다면 괄호 안에 입력할 값 적으면 됨

3. div 보이기 / 숨기기

   $('#해당 div id').hide();
   $('#해당 div id').show();

4. 태그 내 html 입력하기

   let temp_html = `넣을 버튼, 카드 등 태그`
   $('#위 태그들 넣을 태그의 id').append(temp_html);

2. Jquery 퀴즈

1. 빈칸 체크 함수 만들기
   1) 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기
   2) 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기

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

2. 이메일 판별 함수 만들기
   1) 입력받은 이메일 도메인만 얼럿 얼럿 띄우기
   2) @가 없으면 '이메일이 아닙니다'라는 얼럿

   function q2() {
     let value = $("#input-q2").val();
     // if 적기 전에 
     // console.log(value.includes("@"))로
     // @ 포함됐을 때 안됐을 때 어떻게 뜨는지 확인
     if (value.includes("@") == true) {
       let domain = value.split("@")[1].split(".")[0]
       alert(domain)
     } else {
       alert('이메일이 아닙니다.')
     }

3. HTML 붙이기/지우기 연습
   1) 이름을 입력하면 아래 나오게 하기
   2) 다지우기 버튼을 만들기

   function q3() {
     let value = $("#input-q3").val();
     let temp_html = `<li>${value}</li>`
     $("#names-q3").append(temp_html)
   
   
   function q3_remove() {
     $("#names-q3").empty();

Ajax

1. Ajax 기본 골격

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

2. Ajax 연습하기

1. 서울시 Open API (실시간 미세먼지 상태)
   1) 구 : 값
   2) 업데이트 누를 때마다 지웠다 새로 씌워지기
   3) 40보다 높은 값은 빨간색 글씨

   function q1() {
     $("#names-q1").empty();
     $.ajax({
       type: "GET",
       url: "http://spartacodingclub.shop/sparta_api/seoulair",
       data: {},
       success: function (response) {
         let list = response['RealtimeCityAir']['row']
         for (i = 0; i < list.length; i++) {
           let guname = list[i]['MSRSTE_NM']
           let gumise = list[i]['IDEX_MVL']
   
           let temp_html = ``
           if (gumise > 40) {
             temp_html = `<li class="bad">${guname} : ${gumise}</li>`
           } else {
             temp_html = `<li>${guname} : ${gumise}</li>`
           }
           $("#names-q1").append(temp_html);
         }
       }
     })
   }

2. 서울시 Open API (실시간 따릉이 현황)
   1) 위치 - 거치대수 - 현재 거치된 수
   2) 업데이트 누를 때마다 지웠다 새로 씌워지기
   3) 현재 거치된 수가 5보다 작으면 빨간색 글씨

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

3. 랜덤 르탄이 API
   1) 이미지 바꾸기

    $("#아이디값").attr("src", 이미지URL);

   2) 텍스트 바꾸기

   $("#아이디값").text("바꾸고 싶은 텍스트");

   function q1() {
     $.ajax({
       type: "GET",
       url: "http://spartacodingclub.shop/sparta_api/rtan",
       data: {},
       success: function (response) {
         let img = response['url']
         let txt = response['msg']
         $("#img-rtan").attr('scr',img)
         $("#text-rtan").text(txt)
       }
     })
   }
   
   
   // 내가 한 것 이렇게도 됨
   function q1() {
     $("#rtan").empty();
     $.ajax({
       type: "GET",
       url: "http://spartacodingclub.shop/sparta_api/rtan",
       data: {},
       success: function (response) {
         let img = response['url']
         let txt = response['msg']
   
         let temp_html = `<img id="img-rtan" width="300" src="${img}"/>
                          <h1 id="text-rtan">${txt}</h1>`
         $("#rtan").append(temp_html)
       }
     })
   }

로딩 후 바로 호출

$(document).ready(function(){
	alert('다 로딩됐다!')
});

잊지말기

1. 이미지 바꾸기

    $("#아이디값").attr("src", 이미지URL);

2. 텍스트 바꾸기

   $("#아이디값").text("바꾸고 싶은 텍스트");

3. 이메일 판별

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

4. html 붙이기, 지우기

   function q3() {
     let value = $("#input-q3").val();
     let temp_html = `<li>${value}</li>`
     $("#names-q3").append(temp_html)
   
   
   function q3_remove() {
     $("#names-q3").empty();