[웹개발종합반] week2: JQuery / Ajax

2주차 수업 목표

Javascript 문법 익숙해지기
jQuery로 간단한 HTML 조작하기
Ajax로 서버 API(약속)에 데이터를 주고 결과를 받아오기

수업 자료

[스파르타코딩클럽] 웹개발 종합반 - 2주차

매 주차 강의자료 시작에 PDF파일을 올려두었어요!

www.notion.so

1. Javascript 복습하기

짝홀 버튼 만들기

버튼을 짝수번 눌렀을 때에는 '짝짝짝', 홀수번 눌렀을 때에는 '홀홀홀'이 얼럿을 띄우는 버튼 만들기

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

하지만 이렇게 작성하면 '홀수입니다!' 얼럿만 뜨게 된다. 왜냐하면 함수를 열 때마다 항상 count = 1로 지정되고 마지막에 +1하도록 count가 축적이 되지 않기 때문이다. 따라서 아래와 같이 count 변수를 함수 밖으로 꺼내야 한다. 이를 전역 변수라고 한다.

let count = 1;

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

이제 다시 웹 페이지의 버튼을 눌러보면 '홀수입니다!' -> '짝수입니다!' 가 번갈아 가면서 얼럿이 뜬다.

2. JQuery

2.1 JQuery 시작하기

jQuery란?

HTML의 요소들을 조작하는 역할을 한다. jQuery를 사용하면 복잡한 코드를 간단하게 작성할 수 있다.

jQuery는 특별한 다른 소프트웨어가 아니라 미리 작성된 Javascript 코드이다. 이를 라이브러리라고 한다. 따라서 사용하려면 이전에 *import(임포트)를 해주어야만 한다.

*import: 미리 작성된 Javascript를 가져오는 것

2.2 JQuery 다뤄보기

jQuery 사용하기

임포트 하는 방법을 알아보자. 먼저 링크된 사이트에 들어가서 jQuery CDN을 가져오자.

코드를 복사하고 <head> 내에 붙여넣기 하면 된다.

파일에서 부트스트랩을 사용한 적이 있는데, 이 부트스트랩을 사용하기 위한 관련 CDN을 이미 입력한 코드를 살펴보면 이미 jQuery CDN이 작성되어 있다. 따라서 부트스트랩을 사용한다면 추가로 jQuery CDN을 추가할 필요가 없다. 만약 부트스트랩을 사용하지 않은 웹 페이지를 작성했다면 jQuery CDN을 추가해주자.

input 박스의 값 가져오기

html 요소를 id값으로 가져와보자. 우선 input 박스의 id값을 변경하자.

그리고 콘솔에서 다음 코드를 입력하면 input 박스에 입력한 값을 가져올 수 있다.

💡 id값을 가진 요소를 가져올 때에는 #, class값을 가져올 때에는 .을 작성한다.

또한 코드를 입력하여 입력값을 제어할 수도 있다.

div 보이기 / 숨기기

카드 박스의 id값을 주고 박스가 사라지도록 명령해보자.

.show 메소드를 입력하면 다시 요소가 나타난다. 이를 응용하여 커서를 대면 요소가 나타나거나 사라지도록 설정할 수도 있다.

HTML 요소의 CSS 속성값 변경하기

- 가로 혹은 세로 값 변경하기

- display

요소를 숨기면 'display' 속성값이 "none"이 된다.

태그 내 텍스트 변경하기

.val 메서드는 input 요소 속 입력되는 값을 변경할 때 사용하고, .text 메서드는 버튼과 같은 HTML 요소 내 텍스트를 변경할 때 사용된다.

태그 내 html 입력하기

하단의 카드들을 동적으로 붙일 수도 있다. 우선 카드 컬럼스에 id값을 지정한다.

*백틱(`) 을 사용하여 문자열과 변수(${변수})가 합쳐진 문자열을 한 번에 간단하고도 깔끔하게 나타낼 수 있다. 백틱을 사용하여 나타내면 이전보다 가독성이 좋아진다.

이제 요소를 추가하는 방법을 알았으니, 아래에 카드를 추가해보자. 위의 방법과 동일하게 temp_html 변수에 카드 하나를 나타내는 <div> 태그 전체를 입력한다.

드래그 된 부분을 백틱 내에 붙여넣기하고 temp_html 변수에 지정한다.

그리고 동일하게 append 메소드로 추가해보자. 카드 하단에 계속적으로 동일한 형태의 카드가 추가된다.

2.3 JQuery 적용하기: 나홀로 메모장

포스팅 박스를 열고 닫는 기능을 구현하자

포스팅 박스의 onclick 속성값을 openclose()로 두고, <script> 태그 내에 openclose() 함수를 만든다.

function openclose() {
	let status = $('#post-box').css('display');
	if (status == 'block') {
		$('#post-box').hide();
	} else {
		$('#post-box').show();
	}
}

그러면 포스팅 박스가 열고 닫힌다.

이제 포스팅 박스가 있을 때 닫기로, 포스팅 박스가 닫혀 있을 때 열기로 버튼 내 텍스트를 변경하자.

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

마지막으로 첫 화면에서도 포스팅 박스가 닫혀있도록 설정하자.

.posting-box {
  width: 500px;
  border: 3px solid black;
  border-radius: 5px;
  padding: 50px;
  margin: 0px auto 30px auto;
  display: none;
}

그럼 완성 !

Quiz_JQuery 연습하기

아래처럼 뜨도록 문제를 풀어보자.

jQuery 연습하고 가기!

s3.ap-northeast-2.amazonaws.com

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

    function q2() {
      // 1. input-q2 값을 가져온다.
      // 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
      // 3. info.spartacoding@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
      // 4. alert(도메인 값);으로 띄우기
      // 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
      const input = $('#input-q2').val();
      if(input.includes('@')) {
        const domain = input.split('@')[1].split('.')[0];
        alert(domain);
      } 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)을 이용하면 굿!)
      const input = $('#input-q3').val();
      const temp_html = `<li>${input}</li>`;
      $('#names-q3').append(temp_html);
      $('#input-q3').val('');
    }

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

3. 서버-클라이언트 통신

서버➡클라이언트: JSON format

클라이언트에서 요청을 보냈을 때 서버에서 전송하는 데이터의 형식은 주로 JSON이다.

JSONView를 설치하고 서울시 미세먼지 OpenAPI인 JSON 형식의 데이터를 살펴보자.

JSONView

Validate and view JSON documents

chrome.google.com

클라이언트➡서버: GET 요청

GET: 통상적으로 데이터 조회(Read)를 요청할 때 사용 (ex. 영화 목록 조회)
POST: 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete)를 요청할 때 사용 (ex. 회원가입, 회원탈퇴, 비밀번호 수정)

GET 방식

기생충 영화를 보여주는 네이버 영화 페이지의 주소를 살펴보자.

https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967

이 주소는 크게 두 부분으로 쪼개어진다. 쪼개지는 시점은 바로 "?"이다. "?"를 기준으로 앞 부분이 서버주소이고, 뒷 부분이 영화번호이다.

서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
영화 정보: code=161967

클라이언트가 code 속성값이 161967인 데이터를 요청(GET)하고, 서버로부터 기생충 영화와 관련된 데이터를 받아서 웹 페이지를 그린다.

4. Ajax

4.1 Ajax 시작하기

Ajax 기본 골격

Ajax의 기본 골격은 다음과 같다.

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

- type: 요청의 종류. GET, POST, ...

- url: 데이터를 가져올 url 주소를 입력한다.

- data: 'POST'방식에서 작성된다. 수정할 값을 작성한다.

- success: 데이터를 받아왔을 때 실행시킬 콜백함수를 작성한다. response는 가져온 데이터이다. 다른 변수를 사용해도 되지만 통상적으로 response를 작성하는 편이다.

Ajax 사용하기

💡 Ajax는 jQuery를 import한 페이지에서만 작동할 수 있다!

따라서 이전에 jQuery를 import했던 페이지를 띄우고 개발자 도구를 켜서 콘솔에 다음과 같이 입력해보자. Ajax 기본 골격에서 불러올 데이터의 url 주소만 입력하면 된다.

이러한 데이터를 가져와서 앞으로 작업을 할 수 있다.

서울시 모든 구의 미세먼지 데이터 콘솔하기

미세먼지 수치가 70 이하인 데이터만 가져오기

4.2 Ajax 연습하기

서울시 OpenAPI(실시간 미세먼지 상태) 이용하여 Ajax 연습하기

아래 사이트처럼 만들어보자.

JQuery 연습하고 가기!

1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기 모든 구의 미세먼지를 표기해주세요 업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다. 업데이트

spartacodingclub.shop

각 구마다 미세먼지 수치 리스트로 띄우기

    function q1() {
      $.ajax({
        type: "GET",
        url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
        data: {},
        success: function(res){
          $('#names-q1').empty();
          let rows = res['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);
          }
        }
      })
    }

미세먼지 수치가 70 이상인 곳은 빨간색으로 보이기

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

            if (gu_mise > 70) {
              let temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`;
            } else {
              let temp_html = `<li>${gu_name} : ${gu_mise}</li>`;
            }
            $('#names-q1').append(temp_html);
          }
        }
      })
    }

Quiz_Ajax 연습하기_1: 실시간 따릉이 현황

(1)실시간 따릉이 현황 목록을 띄우고, (2)따릉이 대수가 5대 미만인 곳은 빨간색으로 띄운다.

<!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;
        }

        table {
            border: 1px solid;
            border-collapse: collapse;
        }

        td,
        th {
            padding: 10px;
            border: 1px solid;
        }
        .urgent {
            color: red;
            font-weight: bold;
        }
    </style>

    <script>
        function q1() {
            $('#names-q1').empty();

            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulbike",
                data: {},
                success: function(res){
                    const rows = res['getStationList']['row'];
                    for (let i = 0; i < rows.length; i++) {
                        const name = rows[i]['stationName'];
                        const rack = rows[i]['rackTotCnt'];
                        const 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>

</head>

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

<hr />

<div class="question-box">
    <h2>2. 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기</h2>
    <p>모든 위치의 따릉이 현황을 보여주세요</p>
    <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
    <button onclick="q1()">업데이트</button>
    <table>
        <thead>
        <tr>
            <td>거치대 위치</td>
            <td>거치대 수</td>
            <td>현재 거치된 따릉이 수</td>
        </tr>
        </thead>
        <tbody id="names-q1">
        </tbody>
    </table>
</div>
</body>

</html>

Quiz_Ajax 연습하기_2: 랜덤 고양이 사진 띄우기

버튼을 눌렀을 때 랜덤으로 고양이 사진 띄우도록 하기

<!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;
    }
    div.question-box > div {
      margin-top: 30px;
    }
    #img-cat {
      width: 300px;
    }

  </style>

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

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

<hr/>

<div class="question-box">
  <h2>3. 랜덤 고양이 사진 API를 이용하기</h2>
  <p>예쁜 고양이 사진을 보여주세요</p>
  <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
  <button onclick="q1()">고양이를 보자</button>
  <div>
    <img id="img-cat" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
  </div>
</div>
</body>
</html>

5. 2주차 끝 & 숙제 설명

원페이지 쇼핑몰에 환율 계산기 달기

환율 API를 이용하여 페이지를 로딩하자마자 환율 텍스트를 띄우도록 하기

➡ $(document).ready(() => { ... }) : 페이지 로딩 되자마자 실행시키기

코드

...
	<script>
        $(document).ready(() => {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function(res) {
                    $('#rate').text(`달러-원 환율: ${res['rate']}원`);
                }
            })
        });
        
    ...
    </script>
    <title>댜니 꿀사과</title>
</head
<body>
...
	    <p id="rate"></p>
        ...

결과

'Education' 카테고리의 다른 글

[웹개발종합반] week4: Flask (0)	2021.06.18
[웹개발종합반] week3: Python / 크롤링 / mongoDB (0)	2021.06.18
[웹개발종합반] week 1: HTML / CSS / JS (0)	2021.06.14
[웹개발종합반] week 0: 강의 준비 (0)	2021.06.10
[개발스터디] week1: Next.js / ESLint / TypeScript (0)	2021.06.09

타닥타닥

[웹개발종합반] week2: JQuery / Ajax

1. Javascript 복습하기

짝홀 버튼 만들기

2. JQuery

2.1 JQuery 시작하기

jQuery란?

2.2 JQuery 다뤄보기

jQuery 사용하기

input 박스의 값 가져오기

div 보이기 / 숨기기

HTML 요소의 CSS 속성값 변경하기

태그 내 텍스트 변경하기

태그 내 html 입력하기

2.3 JQuery 적용하기: 나홀로 메모장

포스팅 박스를 열고 닫는 기능을 구현하자

Quiz_JQuery 연습하기

3. 서버-클라이언트 통신

서버➡클라이언트: JSON format

클라이언트➡서버: GET 요청

GET 방식

4. Ajax

4.1 Ajax 시작하기

Ajax 기본 골격

Ajax 사용하기

4.2 Ajax 연습하기

서울시 OpenAPI(실시간 미세먼지 상태) 이용하여 Ajax 연습하기

각 구마다 미세먼지 수치 리스트로 띄우기

미세먼지 수치가 70 이상인 곳은 빨간색으로 보이기

Quiz_Ajax 연습하기_1: 실시간 따릉이 현황

Quiz_Ajax 연습하기_2: 랜덤 고양이 사진 띄우기

5. 2주차 끝 & 숙제 설명

원페이지 쇼핑몰에 환율 계산기 달기

'Education' 카테고리의 다른 글

티스토리툴바

[웹개발종합반] week2: JQuery / Ajax

1. Javascript 복습하기

짝홀 버튼 만들기

2. JQuery

2.1 JQuery 시작하기

jQuery란?

2.2 JQuery 다뤄보기

jQuery 사용하기

input 박스의 값 가져오기

div 보이기 / 숨기기

HTML 요소의 CSS 속성값 변경하기

태그 내 텍스트 변경하기

태그 내 html 입력하기

2.3 JQuery 적용하기: 나홀로 메모장

포스팅 박스를 열고 닫는 기능을 구현하자

Quiz_JQuery 연습하기

3. 서버-클라이언트 통신

서버➡클라이언트: JSON format

클라이언트➡서버: GET 요청

GET 방식

4. Ajax

4.1 Ajax 시작하기

Ajax 기본 골격

Ajax 사용하기

4.2 Ajax 연습하기

서울시 OpenAPI(실시간 미세먼지 상태) 이용하여 Ajax 연습하기

각 구마다 미세먼지 수치 리스트로 띄우기

미세먼지 수치가 70 이상인 곳은 빨간색으로 보이기

Quiz_Ajax 연습하기_1: 실시간 따릉이 현황

Quiz_Ajax 연습하기_2: 랜덤 고양이 사진 띄우기

5. 2주차 끝 & 숙제 설명

원페이지 쇼핑몰에 환율 계산기 달기

'Education' 카테고리의 다른 글

'Education' Related Articles

티스토리툴바