王初甫がクラスを始めた(2)

カリキュラムの目標!

Javascript構文を熟知しています.

jQueryで簡単なHTMLを操作できます.

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 boxの値を取得!
inputボックスにid値を指定し、val()に値をインポートします.👉🏻  $("#id値").val();

ここにval(「ロング英実」)を入力すると、入力ボックスの値がロング英実になります.
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️⃣   タグにタグを入力
ボタンのテキストを変更

  $('#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は、サーバが要求を受け入れるウィンドウです.講義では銀行窓口と同じです.銀行は窓口の職員に私たちがやりたいことを教えて、それをして、私たちに結果をあげます.
ここではウィンドウの後ろにサーバー、こちらはクライアント、ウィンドウの後ろに忙しい人はAPI、ウィンドウに蓄積された資料や情報はDBとそこに蓄積された情報です.

GET 👉  データ照会要求時
          映画の目次を見る
https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
上の住所は大きく2つに分かれています.「?」裂けた場所
"?"前の部分は<サーバアドレス>で、後の部分は[ムービー番号]です.
サーバアドレス:https://movie.naver.com/movie/bi/mi/basic.nhn
映画情報:code=1967

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: {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);