[웹개발종합반] 2주차 개발일지 -JS, JQuery, Ajax

[수업 목표]

1. Javascript 문법에 익숙해진다.
2. jQuery로 간단한 HTML을 조작할 수 있다.
3. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.

   ---

• 클릭했을 때 함수가 실행되도록 설정하는 방법

<a onclick="hey()" id="btn-postingbox" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>

---

• https://www.w3schools.com/jquery/jquery_get_started.asp
• 에서 구글스크립트를 써주어야 제이쿼리 사용가능. 임포트하는 것.

 

---

Jquery 기초

• 콘솔에서 제이쿼리로 웹페이지 제어하기
  • val()
  • hide(), show()
  • css('width')
  • css('display')

 

• 텍스트 바꾸기

 

• temp에 div통째로 저장
• append로 이어붙일 수 있다.

 

• 열고닫는 함수 적용하기
• style에 기본값 display: none; 적용하면 처음부터 안보이게 한다.

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

---

제이쿼리 연습하기

• 연습 1. 입력값에 따라 다른 알림창 띄우기

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

 

• 연습 2. 입력된 값을 특정 문자열 기준으로 나눠서 가져오기

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

 

• 연습3. 입력받은 값을 리스트 형태로 나타내기, 모두 지우기

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 input3=$('#input-q3').val();
    let temp_html = `<li>${input3}</li>`
    $('#names-q3').append(temp_html);
}

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

• 브라우저의 데이터를 받아오는 방식
  • get: 조회할 때
  • post: 수정, 삭제, 업데이트를 할 때

---

ajax 사용하기

$.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/seoulbike",
    data: {},
    success: function (response) {
    }

• 원하는 API url을 가져와서 데이터를 사용할 수 있다.

 

• 예제 1. 서울시 미세먼지 API를 ajax방식으로 가져오기

<script>
    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 gu_name = rows[i]['MSRSTE_NM'];
                    let gu_mise = rows[i]['IDEX_MVL'];
                    let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                    $('#names-q1').append(temp_html);
                }
            }
        })
    }
</script>

 

 

• 예제 2. 서울시 따릉이 현황 API 활용하기

<script>
    function q1() {
        $('#names-q1').empty();
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/seoulbike",
            data: {},
            success: function (response) {
                let rows = response["rentBikeStatus"]["row"];
                for (let i = 0; i < rows.length; i++) {
                    let station = rows[i]['stationName'];
                    let rackCnt = rows[i]['rackTotCnt'];
                    let bikeCnt = rows[i]['parkingBikeTotCnt'];

                    let temp_html = `<tr>
                                        <td>${station}</td>
                                        <td>${rackCnt}</td>
                                        <td>${bikeCnt}</td>
                                    </tr>`;

                    $('#names-q1').append(temp_html);
                }
            }
        })
    }
</script>

 

 

• 예제 3. 랜덤고양이사진 API 활용하기

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

 

 

• 숙제: 환율API 활용하기, 페이지가 로딩될 때마다 가져오기

<script>
    $(document).ready(function(){
        q1();
    });

    function q1() {
    $('#names-q1').empty();
        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/rate",
            data: {},
            success: function (response) {
                    let rate=response['rate'];
                    let temp_html=`<span>달러-원 환율: ${rate}</span>`;
                    $('.rate').append(temp_html);
                }
        })
  }
</script>

 

 

---

이번 주차엔 더욱 실용적이다. 하하하.

제이쿼리라는 것과 ajax를 처음 써봤다. 

 

문법은 좀 난해;;하지만 어떻게 쓰는지 잘 익혔다.

여태까지 html 파일만 가지고 모든 수업을 진행해온게 신기할 정도!!

 

근데 난 바닐라js를 아는 입장이어서 그런지

더 복잡하고 손에 안익고 너무 난잡....했다 ㅠ

 

실무에서 잘 안쓴다는 이야기를 들은 적이 있는데, 그치만 배워서 나쁜건 없겠지? 라는 생각에 열심히 함!

 

API가져와서 쓰는 건 이제 몇 번 해봐서 슥슥 부담없이 할 수 있게 되었다.