2주차 WIL🐱‍👤Javascript,JQuery,Ajax

Javascript 복습🎀

• 함수의 변수 지정하기

  • 클릭 횟수에 따라 짝수,홀수 alert

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

    결과 : 몇 번을 누르든 '홀수입니다'만 출력됨 / count 변수가 함수 안에 있기 때문에, 마지막 count += 1이 됐더라도, 다시 첫째 줄로 돌아갈 때 1로 초기화

    let count = 1;    							//count 변수를 함수의 밖으로 빼줌 (전역변수)
    function hey(){
                if (count % 2 == 0){
                    alert('짝수입니다.');
                }else{
                    alert('홀수입니다.');
                }
                count += 1;
            }

    결과 : 클릭에 따라서 '홀수,짝수'가 옳게 출력됨 / count변수가 함수 밖으로 빠져나가서 count += 1; 에 따라 값이 변할 수 있게 됨

    let temp_html = '나는 추가될 버튼이다!';
    $('#cards-box').append(temp_html);Javascript 복습🎀

• 함수의 변수 지정하기

  • 클릭 횟수에 따라 짝수,홀수 alert

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

  결과 : 몇 번을 누르든 '홀수입니다'만 출력됨 / count 변수가 함수 안에 있기 때문에, 마지막 count += 1이 됐더라도, 다시 첫째 줄로 돌아갈 때 1로 초기화

  let count = 1;    							//count 변수를 함수의 밖으로 빼줌 (전역변수)
  function hey(){
              if (count % 2 == 0){
                  alert('짝수입니다.');
              }else{
                  alert('홀수입니다.');
              }
              count += 1;
          }

  결과 : 클릭에 따라서 '홀수,짝수'가 옳게 출력됨 / count변수가 함수 밖으로 빠져나가서 count += 1; 에 따라 값이 변할 수 있게 됨

JQuery 🎀

: HTML의 요소들을 조작하는 편리한 Javascript를 미리 작성해둔것, 라이브러리

Javascript로도 모든 기능을 구현은 가능
다만 코드가 복잡하고, 브라우저 간의 호환성 문제가 있음

//Javascript
document.getElementById("element").style.display = "none";

//JQuery
$('#element').hide();

• JQuery는 미리 작성된 Javascript코드. 쓰기전에 반드시 임포트해야함

  https://www.w3schools.com/jquery/jquery_get_started.asp

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

  • 부트스트랩의 경우 이미 JQuery가 임포트 되어있기 때문에 따로 추가할 필요는 X
  • 부트스트랩을 사용하지 않은 경우는 추가해줘야함!✔
  • jquery는 id로 호출하는 듯, id값을 추가해줘야하는 듯!

1. input박스의 값을 가져와보기

$('#article-url').val()			//#자리에는 input박스의 id값

2. div 사라지고 나타나게 하기

$('#element').hide();			//#자리에는 id값 
$('#element').show();

3. css값 가져와보기

$('#post-box').hide();
$('#post-box').css('display');

$('#post-box').show();
$('#post-box').css('display');

4. 태그 내 텍스트 입력하기

$('#post-url').val('여기에 텍스트를 입력하면!');

// 가리키고 싶은 버튼에 id 값을 준다음
<button id="btn-posting-box" type="button" class="btn btn-primary">포스팅 박스 열기</button>

$('#btn-posting-box').text('포스팅 박스 닫기');

• .val은 input box에만 사용 / .text는 텍스트를 바꿀 때 주로 많이 사용

5. 태그 내 html 입력하기

<div id="cards-box" class="card-columns">			//id = "cards-box"를 줌
    <div class="card">
      <img class="card-img-top" src="https://www.fodors.com/wp-content/uploads/2018/10/4_UltimateRome_PiazzaNavona-975x650.jpg" alt="Card image cap">
      <div class="card-body">
        <a href="https://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
        <p class="card-text">여기에 기사 내용이 들어가겠죠</p>
        <p class="card-text comment">여기엔 코멘트가 들어갑니다</p>
      </div>
    </div>
  </div>

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

// 주의: 홑따옴표(')가 아닌 backtick(`)사용
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입가능
let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';

let temp_html = `<div class="card">
                    <img class="card-img-top"
                        src="${img_url}"
                        alt="Card image cap">
                    <div class="card-body">
                        <a href="${link_url}" class="card-title">${title}</a>
                        <p class="card-text">${desc}</p>
                        <p class="card-text comment">${comment}</p>
                    </div>
                </div>`;
$('#cards-box').append(temp_html);

6. 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;
        }
    </style>

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

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

        function q3() {
            let input_text3 = $('#input-q3').val();
            if(input_text3 == '') {
                alert('이름을 입력하세요.');
            }else{
                let temp_html = `<li>${input_text3}</li>`; //꼮!!!!백틱으로 감싸기!!!!!!!
                $('#names-q3').append(temp_html);
            }
        }

        function q3_remove() {
              $('#names-q3').empty();
        }

    </script>

</head>

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

    <div class="question-box">
        <h2>1. 빈칸 체크 함수 만들기</h2>
        <h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
        <h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
        <input id="input-q1" type="text" /> <button onclick="q1()">클릭</button>
    </div>
    <hr />
    <div class="question-box">
        <h2>2. 이메일 판별 함수 만들기</h2>
        <h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
        <h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
        <h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
        <input id="input-q2" type="text" /> <button onclick="q2()">클릭</button>
    </div>
    <hr />
    <div class="question-box">
        <h2>3. HTML 붙이기/지우기 연습</h2>
        <h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
        <h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
        <input id="input-q3" type="text" placeholder="여기에 이름을 입력" />
        <button onclick="q3()">이름 붙이기</button>
        <button onclick="q3_remove()">다지우기</button>
        <ul id="names-q3">
            <li>세종대왕</li>
            <li>임꺽정</li>
        </ul>
    </div>
</body>

</html>

 let temp_html = `<li>${input_text3}</li>`; 

• ${input_text3}
부분을 처음에는 아무것도 안감싸서 오류 발생
• '' 홑따옴표로 감싸서 오류발생. 출력단에 입력한 이름이 아닌 input_text3가 출력됨
• `` 으로 감싼 다음에야 제대로 실행 .... 매우 중요.. 백틱... 💦

서버 > 클라이언트 통신 (JSON)🎀

• 서버 > 클라이언트 : JSON 이해하기

  • 클라이언트가 서버에 데이터 요청 (줄거없니?)
  • 서버가 클라이언트의 요청을 받아 데이터를 줌 (가져가!) > 이때 내려주는 포맷 : JSON

• JSON

  • 딕셔너리 + 리스트의 조합과 같게 생김!

  • ex) 미세먼지 Open API

    • for문을 사용하는 전형적인형태!

클라이언트 > 서버 통신 (GET,POST 요청)🎀

• GET : 데이터 조회(Read)를 요청할 때

  ex) 영화 목록 조회

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

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

  ✔?를 기점으로 뒤는 클라이언트가 갖고오는 정보

• POST : 데이터 생성(Create), 변경(Update), 삭제(Delete)를 요청할 때

  ex) 회원가입, 회원탈퇴, 비밀번호 수정

Ajax🎀

🔻Ajax는 JQuery를 임포트한 페이지에서만 작동!!!🔻

• Ajax 기본골격

$.ajax({
  type: "GET",									// 타입은 get
  url: "여기에URL을입력",							// resopnse를 받아올 url
  data: {},
  success: function(response){
    console.log(response)
  }
})

ajax OpenAPI 따릉이 퀴즈🎀 (for문, if문 응용)

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

        .lack{
            color: red;
        }
    </style>

    <script>
        function q1() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulbike",							// resopnse를 받아올 url
                data: {},
                success: function (response) {
                    let rows = response['getStationList']['row'];
                    for (let i = 0; i < rows.length; i++) {
                        let st_name = rows[i]['stationName'];
                        let rack = rows[i]['rackTotCnt'];
                        let parking_bike = rows[i]['parkingBikeTotCnt'];

                        let text_html = ""

                        if (rack < 5) {
                            text_html = `<tr class="lack"><td>${st_name}</td>
                                            <td>${rack}</td>
                                            <td>${parking_bike}</td></tr>`
                        } else {
                            text_html = `<tr><td>${st_name}</td>
                                            <td>${rack}</td>
                                            <td>${parking_bike}</td></tr>`
                        }

                        $('#names-q1').append(text_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>

랜덤 강아지 사진 API🎀

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

    </style>

    <script>
        function q1() {
            $.ajax({
                type: "GET",
                url: "https://api.thedogapi.com/v1/images/search",
                data: {},
                success: function (response) {
                    let imgSrc = response[0]['url'];
                    $("#img-dog").attr("src", imgSrc);
                }
            })
        }
    </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-dog" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
    </div>
</div>
</body>
</html>

✔ Poin1t✔

  <script>
        function q1() {
            $.ajax({
                type: "GET",
                url: "https://api.thedogapi.com/v1/images/search",
                data: {},
                success: function (response) {
                    let imgSrc = response[0]['url'];	<!-- 리스트중 0번째의, url! -->
                    $("#img-dog").attr("src", imgSrc);
                }
            })
        }
    </script>

: API 주소 자체에서 JSON이 처음부터 리스트 형식으로 들어와 있음 / 원하는 url 주소를 얻은 표현식 기억!

✔ Poin1t✔

<img id="id_img">

아이디 태그에 따른 이미지 src를 변경하는 방법

$("#id_img").attr("src", "이미지 경로");