CO_JUN 개발일지

파이썬 기초 문법

파이썬 패키지 설치

파이썬 패키지 사용해보기

import requests # requests 라이브러리 설치 필요

r = requests.get('http://spartacodingclub.shop/sparta_api/seoulair')
rjson = r.json()

라이브러리 설치 후 import 기본 틀

gu_name, gu_mise 변수 선언 후 미세먼지 값 60보다 작은곳 gu_name만 출력

'Sparta 웹개발 종합반' 카테고리의 다른 글

2023-01-11 3주차 homework_지니뮤직 크롤링 (1)	2023.01.11
2023-01-10 파이썬 웹스크래핑(크롤링) (0)	2023.01.11
2023-01-10 3주차 Open API 붙여보기 (0)	2023.01.10
2023-01-09 2주차 ajax (0)	2023.01.09
2023-01-05 2주차 재수강 JQuery (0)	2023.01.05

function listing() {
    $('#cards-box').empty()
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/web/api/movie",
        data: {},
        success: function (response) {
            let rows = response['movies']
            for (let i = 0; i < rows.length; i++) {
                let title = rows[i]['title']
                let desc = rows[i]['desc']
                let image = rows[i]['image']
                let star = rows[i]['star']
                let comment = rows[i]['comment']

                let star_image = '⭐'.repeat(star)


                let temp_html = ` <div class="col">
                                    <div class="card">
                                        <img src="${image}">
                                        <div class="card-body">
                                            <h5 class="card-title">${title}</h5>
                                            <p class="card-text">${desc}</p>
                                            <p>${star_image}</p>
                                            <p class="mycomment">${comment}</p>
                                        </div>
                                    </div>
                                </div>`

                $('#cards-box').append(temp_html)

            }

        }

    })
}

하는 방법은 전에 공부했던 ajax랑 똑같음 반복문 변수 선언 후 해당 자리에 ${} 넣어 주기

let star_image = '⭐'.repeat(star)

자바스크립트 내장함수 : repaeat 사용

반복해서 문자열을 나오게 하는 3넣으면 3번씩 반복 4넣으면 4번씩 반복하는

별 갯수 만큼

완성본 title, desc, image, star, comment 잘 적용된 모습

'Sparta 웹개발 종합반' 카테고리의 다른 글

2023-01-10 파이썬 웹스크래핑(크롤링) (0)	2023.01.11
2023-01-10 파이썬 (0)	2023.01.10
2023-01-09 2주차 ajax (0)	2023.01.09
2023-01-05 2주차 재수강 JQuery (0)	2023.01.05
2023-01-05 웹개발 종합반 1주차 재수강 (0)	2023.01.05

<body>
<div class="mytitle">
    <h1>박화요비 팬명록</h1>
    <p>  현재기온 : <span id="temp">00.0</span>도 </p>
</div>

p태그, span 태그 사용

$(document).ready(function ()

이번에는 클릭 후에 바뀌는게 아니라 로딩이 완료되면 ajax 콜을 해서 데이터를 가져와야 되기때문에 document 사용

<script>

    $(document).ready(function () {
        $.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
    data: {},
    success: function (response) {
        let temp = (response['temp'])
        $('#temp').text(temp)
    }



  })
    });


</script>

온도 옆에 해모양 아이콘은 실시간이 아닌거 같아서 그냥 빼는게 좋을듯 싶다.

1. ajax ( 실시간 미세먼지값 )

$.ajax({
    type: "GET", // GET 방식으로 요청한다.
    url: "http://spartacodingclub.shop/sparta_api/seoulair",
    data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
    success: function (response) { // 서버에서 준 결과를 response라는 변수에 담음
        console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
    }
})

ajax 기본골격, type에는 GET, POST 있음 GET은 검색, POST는 생성, 수정, 삭제

$.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/seoulair",
    data: {},
    success: function (response) {
        let mise_list = response["RealtimeCityAir"]["row"]; // 꺼내는 부분!
        console.log(mise_list);
    }
})

RealtimeCityAir에 row값만 꺼내서 확인

여기서 필요한 부분만 확인 가능 예) IDEX_MVL 미세먼지 지수 확인

$.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/seoulair",
    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']
            console.log(gu_name,gu_mise)
        }

    }
})

반복문(for) 사용해서 구이름과 미세먼지지수만 확인 가능

function q1() {
    $(`#names-q1`).empty()
      $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/seoulair",
        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)
            }


        }
      })
    }

<ul id="names-q1">
<li>중구 : 82</li>
<li>종로구 : 87</li>
<li>용산구 : 84</li>
<li>은평구 : 82</li>
</ul>

function q1() {
    $(`#names-q1`).empty()
      $.ajax({

ajax 전에 empty 먼저 실행 시키게 되면 내용이 초기화 되면서 확인 가능

<ul id="names-q1">
</ul>


        .bad {
            color: red;
        }

</style>

스타일에서 .bad 컬러 레드로 설정

let temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`

temp_html 클래스 bad 추가하게 되면 gu_name과 gu_mise 글자 색이 전부 레드로 변경

if (gu_mise > 40) {
    let temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
    temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}

if 문으로 gu_mise 지수가 40보다 크면 레드로 표시

let temp_html = ``

if (gu_mise > 40) {
    let temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
    temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}

if 작성 후 위에 temp_html은 지워도 상관없음 앞에 let은 지워야됨

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




          }





        }
      })
}

위에 미세먼지랑 하는방법은 동일함

function q1() {
      $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/rtan",
        data: {},
        success: function (response) {
          let url = response['url']
          let msg = response['msg']

          $('#img-rtan').attr('src',url)
          $('text-rtan').text(msg)

        }

      })


}

처음 단계 방법은 위에 미세먼지와 따릉이랑 비슷하지만

이미지랑 텍스트를 바꿔야 되기 때문에

<div class="question-box">
<h2>3. 르탄이 API를 이용하기!</h2>
<p>아래를 르탄이 사진으로 바꿔주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">르탄이 나와</button>
<div>
<img id="img-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/>
<h1 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h1>
</div>
</div>

$('#img-rtan').attr('src',url)
$('text-rtan').text(msg)

'Sparta 웹개발 종합반' 카테고리의 다른 글

2023-01-10 파이썬 (0)	2023.01.10
2023-01-10 3주차 Open API 붙여보기 (0)	2023.01.10
2023-01-05 2주차 재수강 JQuery (0)	2023.01.05
2023-01-05 웹개발 종합반 1주차 재수강 (0)	2023.01.05
2022-08-22~2022-08-24 SpartaCoding Club 웹개발 종합반 2주차-2 (0)	2022.08.25

1. Javascript

<script>
  function hey(){
      alert('안녕!')
  }



</script>

<button onclick="hey()">영화 기록하기</button>

2. 홀짝

let count = 0

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

3. jQuery

Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,

1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서,

jQuery라는 라이브러리가 등장

jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드

전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것

쓰기 전에 "임포트"

미리 작성된 Javascript 코드를 가져오는 것을 '임포트'

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>

<head> 와 </head> 사이 넣어주면 됨

css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있음.

예) 특정 인풋박스의 값을 → 가져와줘!

예) 특정 div를 → 안보이게 해줘!

css에서는 선택자로 class를 사용 했음 jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 됨

<div class="form-floating">
  <input type="email" class="form-control" id="url" placeholder="name@example.com">
  <label for="floatingPassword">영화URL</label>

크롬 개발자도구 콘솔창에서 쳐보기

id 값이 url인 곳을 가리키고, val()로 값을 가져온다.

<div class="mypost" id="post-box">

크롬 개발자도구 콘솔창에서 쳐보기

id 값이 post-box를 가르키고 포스트박스를 닫고 열수 있음

<div id="cards-box" class="row row-cols-1 row-cols-md-4 g-4">

카드가 붙는 div 에 id를 추가 cards-box로 정의

첫번째줄은 html 비슷한 문자열이 들어가 있는거 두번째줄은 html화 시켜주는 j쿼리

백틱(``)사용 중요

open_box, close_box 함수를 만들고 포스트박스를 열고 닫기 사용 할꺼기 떄문에           show, hide 사용       id="post-box"

onclick으로 기록하기 버튼, 닫기 버튼에 open-box, close_box 입력

.mypost {

    
    max-width: 500px;
    width: 95%;

    margin: 20px auto 0px auto;

    box-shadow: 0px 0px 3px 0px gray;

    padding: 20px;

    display: none;

display: none; 설정

4. jQuery 입력값 가져오기, 이메일 형식에 맞는 얼럿 띄우기, 이름 붙이기/지우기

let q1text=$('#input-q1').val()
alert(q1text)

let q1text=$('#input-q1').val()
    if (q1text == '') {
        alert('입력하세요!')
    }
    else alert(q1text)

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

}

includes 이용

크롬 개발자 도구에서 메일주소만 split 이용해서 추출 / 추출 완료 되면 형관팬 표시된곳 복사

let temp = $('#input-q3').val()
let temp_html = `<li>${temp}</li>`
$('#names-q3').append(temp_html)

<ul id="names-q3">
<li>세종대왕</li>
<li>임꺽정</li>

$('#names-q3').empty()

'Sparta 웹개발 종합반' 카테고리의 다른 글

2023-01-10 3주차 Open API 붙여보기 (0)	2023.01.10
2023-01-09 2주차 ajax (0)	2023.01.09
2023-01-05 웹개발 종합반 1주차 재수강 (0)	2023.01.05
2022-08-22~2022-08-24 SpartaCoding Club 웹개발 종합반 2주차-2 (0)	2022.08.25
2022-08-22~2022-08-24 SpartaCoding Club 웹개발 종합반 2주차-1 (0)	2022.08.24

CO_JUN 개발일지

전체 글

2023-01-10 파이썬

'Sparta 웹개발 종합반' 카테고리의 다른 글

2023-01-10 3주차 Open API 붙여보기

'Sparta 웹개발 종합반' 카테고리의 다른 글

2023-01-10 2주차 homework_현재기온

2023-01-09 2주차 ajax

'Sparta 웹개발 종합반' 카테고리의 다른 글

2023-01-05 2주차 재수강 JQuery

'Sparta 웹개발 종합반' 카테고리의 다른 글

+ Recent posts

티스토리툴바