ネットワーク開発総合クラス2週目

24645 ワード
テキストリンク
学識 
Javascript, JQuery, Ajax를 배웠다.
Javascript는 1주차의 심화과정 정도.
Javascript復習 
예시를 통해서 이해한 것을 기록해보자.
<script>
            let count = 0 //count라는 애를 0라고 하자
            function hey(){ 
                count =+ 1 //count는 0부터 1씩 커진다
                if(count % 2 == 0){ //count를 2로 나눴을 때 0이면
                    alert('짝수임');//'짝수임'이라고 창띄워
               } else{ //아님
                    alert('홀수임');//'홀수임'이라고 창띄워
               }
           }
</script>
<body>
	<button onclick="hey()">영화 기록하기❤️</button>
    //onclick="hey()"가 앞에 함수와 연결해주는 것임
</body>
JQueryについて 
JQuery란? 미리 짜둔 Javascript를 쉽게 쓰게 해주는 것.
(그런데 유튜브에서 어떤 개발자 분은 최근 현업에서 JQuery를 사용하지 않기에 배우지 않아도 된다고 하였다)

let ~~~ = `` -> 선언해주는 느낌, 백틱(`)을 써야함.
$('#id를 넣는 곳').val()-> 이게 기본 시작 명령어 같은 것 인듯.  val 대신에 다른 명령어를 써줄 수 있음. 

* 기본 예시 (크롬 콘솔창에 쳤다)
$('#url').val() // id가 url인 것의 밸류값을 콘솔창에 보여준다.    
$('#url').val('입력을 하고싶다') // 입력을 하고싶다 라고 url 칸에 써짐
$('#post-box').hide() // id가 post-box인 것을 가리기
$('#post-box').show() // id가 post-box인 것을 보여주기

* 예시('나는 버튼이다' 라는 버튼 생성하기)

let temp_html = `<button>나는 버튼이다</button>` // 나는 버튼이다 라는 버튼을 만들어주기 위해서 이름? 지정해준다.
$('#cards-box').append(temp_html) // JQuery를 이용해서 temp_html을 html화 해주는 코드


* 예시(카드박스를 추가하기)

let temp_html = `<div class="col">
                <div class="card">
                    <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                         class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">여기에 제목이 들어갑니다.</h5>
                        <p class="card-text">여기에 내용
                        <p> ⭐⭐⭐ </p>
                        <p class="mycomment"> 여기에 코멘트가 들어갑니다.</p>
                    </div>
                </div>
            </div>`  //카드박스의 내용들 복붙한 것. 앞 뒤로는 뱁틱을 써야함.
            
$('#cards-box').append(temp_html)
Ajax 
JQuery와 세트이고, 서버에서 api를 불러와서 웹에 적용하게 해준다.
* api란? 은행 창구처럼 컴퓨터나 프로그램 사이에 필요한 정보들을 전달하면서 연결해주는 것.... 같다

코드 설명
$.ajax({//ajax 시작할 때 쓰는 코드
  type: "GET", // GET 방식으로 요청한다.
  url: "http://spartacodingclub.shop/sparta_api/seoulair", //요청할 url을 넣는 곳
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음 -> 이것은 안바뀌는 것 같다.
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})
Ajax例

  • 質問:ソウル市のスモッグ値が50以上の場合、文字を赤に変更する必要があります.

  • トラブルシューティング順序
    1)スモッグデータがどこにあるかを調べる:所与のURLに接続して確認する.この問題では、RealtimeCityAir>rowにスモッグデータが含まれています.let mise_list = response["RealtimeCityAir"]["row"]2)重複文を使用して00文のデータを出力する:行の値がmiseリストに含まれているため、重複文を使用しなければならない.for(let i = 0; i<mise_list.length; i++) { let mise = mise_list[i]; // mise를 mise_listに指定
    3)00球のデータから球名、微塵値を選択して出力:各データのキー値を確定し、価値出力を行うlet gu_name =mise["MSRSTE_NM"]//gu nameをmiseデータの「MSRSTE NM」に指定let gu_mise =mise["IDEX_MVL"]//gu miseをmiseデータの「IDEX MVL」に指定
    4)更新ボタンを押すと出力させます.
    let temp html=<li>${gu_name} : ${gu_mise}</li>//temp html.この時は必ず浸礼を使います.$('#names-q1').append(temp_html)//#names-q 1は更新に関連する側の可能性がありますか?そして、appendはtemp htmlに見えるようにしたいという意味で、書かなければ見られません
    5)その後、スモッグ値が50以上の場合は赤字処理を希望する.->ドア+クラス分けを書き終えたらいいです.
    スタイル上bad、color:red;
    2つのlettemp html=baptic(bellogに詳しくないのでうまく打てません)
    if(gu mise>50){//スモッグ値が50を超える場合
    temp html=<li class="bad">${gu_name} : ${gu_mise}</li>//temp htmlは赤色です.
    そうでなければ
    temp html=<li>${gu_name} : ${gu_mise}</li>//をベースカラーとして使用します.
    }
    • <!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;
       }

       .bad {
            color: red;
        }

    </style>

<script>
        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 = ``//temp_html은 아래 것들임

                        if (gu_mise > 50) {
                            temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                        } else {
                            temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                        }
                        $('#names-q1').append(temp_html) // #names-q1누르면 temp_html보여주겠어.
                    }
                }
            })
        }
</script>

</head>

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

<hr />

<div class="question-box">
    <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
    <p>모든 구의 미세먼지를 표기해주세요</p>
    <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
    <button onclick="q1()">업데이트</button>
    <ul id="names-q1">

</ul>
</div>
</body>

</html>
    に感銘を与える 
    처음 들었을 때는 무슨 말인지 전혀 이해가 안됐는데, 두 번째 들으니까 조금은 알 것 같고, 
WIL쓰면서 코드를 뜯어가면서 보니까 조금 더 알 것 같다. 
물론 난 숙제도 답지 보면서 하고... 아직 혼자서 코드를 치기에는 무리가 있지만, 
내가 친 코드가 반응하는 모습이 신기하고 흥미롭다. 
다음주차에는 드디어 파이썬. 크롤링이 많이 궁금했었는데, 크롤링을 배운다니 좀 기대된다.
    Check List完了
    依存関係の注入と検索