FrontEnd :-)

[항해99] 사전준비-2 JQuery, Ajax 본문

항해99_7기/사전 준비

[항해99] 사전준비-2 JQuery, Ajax

code10 2022. 4. 28. 18:55

HTML > CSS > Bootstrap > Javascript > JQuery > API/Ajax > Python > Crawling > mongoDB > Flask(post,get) > 서버/AWS

 

2주 차 

배운 점: jQuery, Ajax, API 기초 (아래 테이블)

 

jQuery란? JavaScript library. 단, 쓰기 전에 "임포트(미리 작성된 Javascript 코드를 가져오는 것)" 필수

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

jQuery 기본 골격 

$(selector).action()

Ajax

Asynchronous JavaScript and XML, 에이잭스

[위키백과]
Ajax 애플리케이션은 필요한 데이터만을 웹서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있다. 보통SOAP이나XML기반의 웹 서비스 프로토콜이 사용되며, 웹 서버의 응답을 처리하기 위해 클라이언트 쪽에서는자바스크립트를 쓴다.

Ajax 기본 골격

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

$.ajax 코드 설명
-type: "GET" → GET 방식으로 요청한다.
-url: 요청할 url
-data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
-success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다

 

어려운 점: 

힌트가 없으면, 문제만 보고 함수를 어떻게 적용할지 쉽게 떠오르지 않는다.  우선은 퀴즈를 여러 번 풀려고 노력 중이다. 

 

노트:

마지막 2주 차 숙제에서, 

내가 쓴 코드는 2줄인데, 

let cel = response['temp'];
$('#weather').append(cel);

답안 코드에선 1줄로 간결하게 표현이 가능했다.

 $('#weather').text(response['temp'])

 

[Table] 강의: jQuery, Ajax, API 기초 (2-1~2-11)

강의 내용(내 기준, 알아둘 점) 코드 예시
2-1  jQuery를 이용해 Javascript로 HTML을 쉽게 제어하고, 
Ajax를 이용해 다시 서버에 데이터를 요청하고 받는다.		  
2-2 jQuery jQuery란? JavaScript library. HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 단, 쓰기 전에 "임포트"를 해야 함!  
2-3  임포트: 미리 작성된 Javascript 코드를 가져오는 것, <head>에 지정 코드 삽입

참고: jQuery CDN
https://www.w3schools.com/jquery/jquery_get_started.asp

jQuery basic syntax is: $(selector).action()		  
2-4 포스팅 박스(id) 제어하기 →

post-box를 시작부터 감춰두기
(css의 display: none; 속성!)		 function open_box(){
    $('#post-box').show()
}
function close_box(){
    $('#post-box').hide()
}
2-5 Quiz*
 
2-6 서울시 OpenAPI에 접속
크롬 확장프로그램 Jsonvue 설치 


클라이언트 -> 서버: GET 요청
API : 은행 창구와 같은 것!
* GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회 
* POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정		  
2-7 Ajax 기본 골격
$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})
  • $ajax 코드 설명
    -type: "GET" → GET 방식으로 요청한다.
    -url: 요청할 url
    -data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
    -success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.
  
2-8** 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기
http://spartacodingclub.shop/sparta_api/seoulai		  
2-9 Quiz 서울시 OpenAPI(실시간 따릉이 현황)을 이용하기
http://spartacodingclub.shop/sparta_api/seoulbike		  
2-10 Quiz 랜덤 르탄이 API를 이용하기
http://spartacodingclub.shop/sparta_api/rtan


이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");		 $.ajax ({
  type: "GET",
  url: "르탄이 API url",
  data: {},
  success : function (response) {
    let msg = response['msg'];
    $("#text-rtan").text(msg);
  
    let img = response['url'];
    $("#img-rtan").attr("src", img);
   }
})
2-11 homework 서울날씨 API
http://spartacodingclub.shop/sparta_api/weather/seoul


로딩 후 호출하기
$(document).ready(function(){ alert('다 로딩됐다!') });



 $(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "서울날씨 API",
        data: {},
        success : function (response) {
           $('#weather').text(response['temp'])
        }
    })
});

*2-5 jQuery 연습 퀴즈

<script>
    function q1() {
        // 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
        // 2. 만약 입력값이 빈칸이면 if(입력값=='')
        // 3. alert('입력하세요!') 띄우기
        // 4. alert(입력값) 띄우기
        let value = $('#input-q1').val();
        if(value == '') {
            alert('입력하세요!');
        } else{
            alert(value);
        }
    }

    function q2() {
        // 1. input-q2 값을 가져온다.
        // 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
        // 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
        // 4. alert(도메인 값);으로 띄우기
        // 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
        let value = $('#input-q2').val();
        if (value.includes('@')){
            alert(value.split('@')[1].split('.')[0]);
        } else {
            alert('이메일이 아닙니다.');
        }
    }

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

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

2-8 jQuery 연습 퀴즈

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>jQuery 연습하고 가기!</title>

    <!-- 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;
        }
        .bad {
            color: red;
            font-weight: bold;
        }
    </style>

    <script>
        function q1() {
            // 여기에 코드를 입력하세요
            $('#names-q1').empty();
            $.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'];

                        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>`
                        }
                        
                        $('#names-q1').append(temp_html);
                    }
                }
            })
        }
    </script>

</head>

<body>
    <h1>jQuery+Ajax의 조합을 연습하자!</h1>

    <hr />

    <div class="question-box">
        <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
        <p>모든 구의 미세먼지를 표기해주세요</p>
        <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
        <button onclick="q1()">업데이트</button>
        <ul id="names-q1">
        </ul>
    </div>
</body>

</html>

'항해99_7기 > 사전 준비' 카테고리의 다른 글

[항해99] 사전준비-5 Flask, AWS, 도메인  (0) 2022.05.02
[항해99] 사전준비-4 Flask 기초  (0) 2022.05.02
[항해99] 사전준비-3 Python, DB  (0) 2022.05.01
[항해99] 사전준비-1 HTML, CSS, Javascript  (0) 2022.04.27
[항해99] 사전준비-0  (0) 2022.04.27
'항해99_7기/사전 준비' Related Articles more
Comments