웹 2주차

2주차 웹 정리

• json(ex. $('#id이름').): 서버에서 클라이언트에게 데이터를 줄 때의 형식 및 포맷

• 클라이언트에서 서버에게 데이터를 요청할 때: 'get'

• ajax: 자바스크립트 라이브러리 중 하나로 전체 페이지를 고치지 않거 서버에서 데이터를 받아 올 수 있는 방법이다.

• ajax는 ajax가 import된 페이지 내에서만 사용될 수 있다.

• jquery 연습

 <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
    </style>
    
    <script>
     	function q2() {
            let input_q2 = $('#input-q2').val();
            if (input_q2.includes('@')){
                alert(input_q2.split('@')[1].split('.')[0]);
            }else {
                alert('이메일이 아닙니다!');
            }
        }

        function q3() {
            let input_q3 = $('#input-q3').val();//
            let input_q33 =`<li>${input_q3}</li>` // 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
            $('#names-q3').append(input_q33);// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
        }

        function q3_remove() {
            $('#names-q3').empty()// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
        }

    </script>

• 나홀로 메모장에 jQuery 적용:

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

• Ajax 예시:

<script>
        function q1() {
            $('#update').empty()
            $.ajax({
                type: "GET",
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
                data: {},
                success: function (response) {
                    let row = response['RealtimeCityAir']['row']
                    for (let i = 0; i < row.length; i++) {
                        let gu_name = row[i]['MSRSTE_NM']
                        let gu_mise = row[i]['IDEX_MVL']

                        let temp_html = ''

                        if (gu_mise > 70) {
                            temp_html = <li class ="bad">${gu_name} : ${gu_mise}</li>
                        } else {
                            temp_html = <li>${gu_name} : ${gu_mise}</li>
                        }

                        $(#'update').append(temp_html)
                    }
                }
            })
        }

   </script>

• jquery 이미지 태그 src 바꾸기:

success: function (response) {
                    let imgurl = response[0]['url']
                    $("#img-cat").attr("src",imgurl);
                }

• 2주차 숙제:

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

        function order() {
            alert('주문이 완료되었습니다!');
        }
    </script>