왕초보 시작반(2)

수업 목표!

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

2주차 2강

💡 count += 1; 👉🏻   count = count + 1

     function hey() {
     let count = 1;
        if (count % 2 == 0) {
            alert('짝수');
        } else {
            alert('홀수');
        }
         count += 1;
         // 이렇게 하면 count 사라짐.   
        }
 
    👇🏻

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

2주차 3강

jQuery는 미리 작성된 Javascript 코드
꼭 쓰기 전에 "임포트"를 해야합니다.

2주차 4강

jQuery CDN

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

이걸 꼭 써서 import 해야한다.

1️⃣   input 박스의 값을 가져와보기!
input 박스에 id 값 지정하고, val()로 값을 가져온다. 👉🏻  $('#id 값').val();

여기서 val('장영실') 이렇게 입력하면 input 박스 값은 장영실로 바뀐다.
2️⃣   div 보이기/숨기기

   // id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
   $('#post-box').hide();

   // show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
   $('#post-box').show();

3️⃣   css의 값 가져와보기

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

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

4️⃣   태그 내 태그 입력하기
ex) 버튼의 텍스트 바꾸기

  $('#btn-posting-box').text('포스팅 박스 닫기');
  // 포스팅 열기 --> 포스팅 박스 닫기 로 바뀜..

5️⃣   태그 내 html 입력하기
div내에, 동적으로 html을 넣고 싶을 땐? (예를 들어, 포스팅되면 → 카드 추가)

  // 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
  // 숫자 1번 키 왼쪽의 버튼을 누르면 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);

2주차 5강

포스팅 박스 열기 닫기 구현

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 {
  display: none;
}

2주차 6강

퀴즈 풀기

2주차 7강

JSONView 설치
API는 (Application Programming Interface 약자)서버가 요청을 받기 위해 뚫어놓은 창구 이다. 강의에서는 은행창구와 같은 것이라고 얘기해 주셨다. 은행에서 우리가 무엇을 하고 싶은지 창구의 직원에게 말하면 이것저것 처리를 해서 결과를 준다.
여기서 창구 뒷쪽이 서버인거고, 우리쪽은 클라이언트이며 창구 뒷쪽에서 바삐 움직이시는 분들이 API이고 창구에 쌓인 자료들이나 정보들이 DB와 거기에 쌓인 정보들이다.

• 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) 를 요청 할 때
            ex) 회원가입,회원탈퇴, 비밀번호 수정

2주차 8강

Ajax는 jQuery를 임포트란 페이지에서만 동작 가능합니다.

🌟 기본 골격 🌟
  $.ajax({
    type: "GET", // GET 방식으로 요청한다.
    url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
    data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
    success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
      console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
    }
  })

💡 코드 설명

• Get 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
  http://naver.com?param=value¶m2=value2
• Post 요청은 , data:{}에 넣어서 데이터를 가져갑니다.
  data: {param: 'value', param2: 'value2'}

2주차 9강

미세먼지

    function q1() {
        $('#names-q1').empty() //버튼 클릭할때 지우고 다시 업데이트해주기
        $.ajax({
            type: "GET", // GET 방식으로 요청한다.
            url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
            data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
            success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
                let rows = response["RealtimeCityAir"]["row"] // 일단 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 > 60) {
                        temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`    
                    } else {
                        temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                    }
                    $('#names-q1').append(temp_html);
                }
            }
        })
    }

☝🏻 만약 미세먼지가 60이상인 곳만 빨갛게 하고 싶다면 if문을 쓰고 temp_html에다가 class를 달아준다.

2주차 10강

따릉이 거치대 수를 이용한 퀴즈~

2주차 11강

jQuery를 이용한 src 변경하기

  function q1() {
    $('#names-q1').empty();
        $.ajax({
        type: "GET", // GET 방식으로 요청한다.
        url: "https://api.thecatapi.com/v1/images/search",
        data: {},
        success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
          let imgurl = response[0]['url']
          $('#img-cat').attr("src", imgurl)
        }
        })
 }

💡 $("img id 값").attr("src",imgurl);