WIL 웹개발 종합반 2주차 개발일지

2022.10.18 작성

짝/홀수 onclick 함수

<script>
        let count = 0
        function hey() {
            count += 1
            if (count % 2 == 0) {
                alert('짝수입니다!')
            } else {
                alert('홀수입니다!')
            }
    }
</script>

 

JQuery input 박스의 값을 가져오기

$('#url').val();

 

JQuery 버튼 넣기

let temp_html = `<button>나는 추가될 버튼이다!</button>`;
$('#cards-box').append(temp_html);

 

JQuery 포스팅박스 열고 닫기

function open_box(){
    $('#post-box').show()
}
function close_box(){
    $('#post-box').hide()
}

 

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

<script>
function q1() {
          let value = $('#input-q1').val()
          if (value == '') {
            alert('입력하세요!')
          } else {
            alert (value)
          }
        }
</script>

 

JQuery 퀴즈2. 이메일 판별 함수 만들기

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

 

JQuery 퀴즈3. HTML 붙이기/지우기

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

 

Ajax 기본 골격

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

 

모든 구의 미세먼지 값 구하기

<script>
 $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/seoulair",
            data: {},
            success: function (response) {
                let rows = response['RealtimeCityAir']['row']
                for (let i = 0; i < rows.length; i++) {
                    let gu_name = rows[i]['MSRSTE_NM']
                    let gu_mise = rows[i]['IDEX_MVL']
                    console.log(gu_name, gu_mise)
                }
            }
        })
</script>

 

실시간 따릉이 현황 보여주기

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

 

날씨API를 이용해서 실시간 날씨 표시하기

<script>
        $(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
            data: {},
            success: function (response) {
                let value = response['temp']
                $('#temp').text(value)
            }
          })
        });
</script>