明日学習キャンプ1週間-2日

翌日、参加者たちが集まって、各グループのメンバーを紹介し、ネットワークプログラミングの基礎の2週目から3週目の授業を復習しました.

第2週授業まとめ:jQueryとAjax

jQueryは、Javascriptで実装された機能をライブラリに組み込み、シンプルなコードとして使用しています
使用するにはCDNリンクをインポートする必要があります

jQuery例:要素を非表示または表示し、htmlを動的に挿入

上の画像では、[ムービーを録画](Record Movie)ボタンを押すと位置決めボックスが表示され、[閉じる](Close)ボタンを押すと閉じます.
Webページの最初のロード時のPostboxを非表示に設定します.

<script>
  function open_box() {
              $('#post_box').show() // id="post-box" 요소를 보이게함
          }
          function close_box() {
              $('#post_box').hide() // id="post-box" 요소를 숨김
</script>
 
<style>
  .mypost {
      display: none; // 웹페이지를 처음 불러올때 포스트 박스가 보이지 않는 상태로 만든다
</style>

その他使用するjQuery

$('#아이디값').attr("src", 이미지URL) // 이미지 바꾸기
$("#아이디값").text("바꾸고 싶은 텍스트") // 텍스트 바꾸기

Ajax GET例：ローカルサーバではなく動的データをhtmlに貼り付ける

上の画像のようなローカルサーバではなく、変化したデータを私の欲しい形のbodyに入れます.

$(document).ready(function () { // 웹페이지를 처음 불러올때 바로 함수가 실행되도록함
           $.ajax({
                type: "GET", // GET 요청
                url: "http://spartacodingclub.shop/web/api/movie", // 요청할 데이터의 url
                data: {}, // GET 요청이므로 비워둔다
                success: function (response) { // response 라는 변수에 데이터를 받음
                    let rows = response['movies'] // rows 라는 변수에 response의 데이터의 movies 리스트를 담음
                    for (let i = 0; i < rows.length; i++) { // rows의 길이만큼 for 구문을 돌림
                        let title = rows[i]['title'] // rows안의 데이터를 title, desc, image 등 각각의 변수에 맞게 담음
                        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) // star의 값만큼 원하는 값으로 바꿈
                        let temp_html = `<div class="col">
                                            <div class="card h-100">
                                                <img src="${image}" class="card-img-top" alt="...">
                                                <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) // html이 붙여지기 원하는 곳의 id값과 백틱값을 담은 변수를 불러옴
                    }
                }
            })
        });

function listing() {
            
        }

3週目のレッスン内容を整理

pythonを使用したWeb scraping(スクロール)

Pythonで2週目のJavaScriptから動的データのインポートを試みる

Genie音楽ランキングからランキング、タイトル、歌手のテキストを取得しましょう.

import requests
from bs4 import BeautifulSoup # requests, bs4 패키지 설치

headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://www.genie.co.kr/chart/top200?ditc=M&rtm=N&ymd=20220301',headers=headers) # 가져올 데이터의 url

soup = BeautifulSoup(data.text, 'html.parser')

リクエストの基本設定が完了すると、

# 가져오고싶은 요소의 selector를 복사하여 넣는다
charts = soup.select('#body-content > div.newest-list > div > table > tbody > tr')

for chart in charts: # 요소들을 리스트화
    rank = chart.select_one('td.number').text[0:2].strip() # text 2번째 텍스트까지만 가져오고 strip으로 공백제거
    title = chart.select_one('td.info > a.title.ellipsis').text.strip().strip('19금').strip() # strip으로 불필요한 텍스트 제거
    artist = chart.select_one('td.info > a.artist.ellipsis').text

    print(rank, title, artist)

このようにして欲しいデータだけがきれいにインポートできます