스파르타클럽-웹종합반 : 2,3주차

Bona의 블로그 입니다.·2022년 2월 25일
0

JavaScript

목록 보기
5/9
post-thumbnail

🔸Ajax 연습하기2

  • 고양이 API를 이용해서 버튼 클릭마나 고양이 새로운 고양이 사진 보이게 하기
  • JQuery와 Ajax 조합 연습하기!!
$(document).ready(function () {
        q1();
      });  // <= 새로고침마다 q1함수띄우기
 function q1() {
        $.ajax({
          type: "GET",
          url: "",
          data: {},
          success: function (response) {
            let cat = response[0]['url'];
            $("#img-cat").attr("src", cat);            
        })
      }

✏️ 2주차 숙제

  • 1주차 숙제로 만든 원페이지 쇼핑몰에 환율 계산기 달기
  • AjaxJ와 Query조합해서 만들기
<script>
$(document).ready(function () {
            get_rate()
        });
function get_rate() {
           $.ajax({
                type: "GET",
                url: "",
                data: {},
                success: function (response) {
                    let now_rate = [response][0]['rate']
                    $('#n_rate').text(now_rate)
                }
            })
        }
</script>
//바디부분 중에 환율들어갈 부분은 아래쪽에 span
<p class = "ex_rate">
        달러-원 환율: <span id="n_rate">1150.5</span>
</p>

🔸Ajax복습

  • 나홀로 메모장에 openAPI붙여보기
$(document).ready(function () {
      $('#cards-box').empty()
      listing();
 });
function listing() {
      $.ajax({
           type: "GET",
           url: "",
           data: {},
           success: function (response) {
               let rows = response['articles'];
               for (let i =0; i < rows.length; i++) {
                   let comment = rows[i]['comment']
                   let desc = rows[i]['desc']
                   let image = rows[i]['image']
                   let title = rows[i]['title']
                   let url = rows[i]['url']
                   let temp_html = `<div class="card">
                                        <img class="card-img-top"
                                            src="${image}"
                                            alt="Card image cap">
                                         <div class="card-body">
                                            <a href="${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)
                    }
                }
            })
        }
// class="card"부분은 부트스트랩 가져와서 복붙하고 내용만 바꿈

🔸파이썬 기초문법

📌 파이썬은 줄맞춤으로 내용물을 구별한다!!

  • 변수, 기본연산
    • 자바스크립트와 거의 비슷한듯...
  • 자료형
    • 리스트, 딕셔너리 모두 비슷함
  • 함수
    • def 함수명(변수) :
  • 조건문
    • if age > 20 : ~~~
    • else : ~~~
  • 반복문
    • 리스트의 요소들을 하나씩 빼와서 쓴다.

🌱 파이썬의 기본 문법은 자바스크립트와 매우 비슷했다. 좀 더 단순해지고 직관적인 것 같다. 줄을 잘못 맞춰서 오류가 났었다. 탭키로 바로 바로 수정할 수 있어서 신기했었다.

profile
제가 공부하고 공유하고 싶은 글을 올리고 있습니다.

0개의 댓글