第2週

59693 ワード
スパルタコードクラブ テキストリンク

[javascript復習]


偶数/奇数に応じて異なる警告ウィンドウを表示

  • パリティ判定方法
    • let even = 4;
console.log(even % 2); //2로 나눈 나머지가 0
let odd = 5;
console.log(odd % 2); //2로 나눈 나머지가 1
    <script>
  let num = 0;
  function hey() {
  	num =+ 1;
  	if (num % 2 == 0) {
  		alert('짝수');
  	} else {
  		alert('홀수');
  	}
  }
  </script>
  • functionに変数があると、関数が終わると消えてしまい、適用されなくなりますので、変数は基本的に外に抑えて計算します!
  • count += 1;銀count=count+1;同じ

    • [JQuery]


    JQueryは、HTMLの要素を処理するために予め作成されたJavaScriptコードです.
  • プロコードのインポートと使用なので書く前に「インポート」しなければならない
  • 導入は、あらかじめ作成しておいたJavascriptコードへの指導
  • id値指示特定コード
    • 텍스트head 내에 아래 코드를 넣어주면 임포트
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    ✔input box値の取得

    <input id = "post-url">이면
$('#post-url').val();

//$('#~~~')이 id값을 가리키고, val( )로 값을 가져온다.

$('#post-url').val(~~);
//기존 명령어가 ~~로 변경

    ✔divの表示/非表示

    <div id="post-box">이면
  $('#post-box').hide(); 
    // 안보이게 하기(css의 display값이 none으로)
  
  $('#post-box').show(); 
    //보이게 하기(css의 display값이 block으로)

    ✔css値の取得と表示（display値の取得時）

      $('#post-box').hide();
  $('#post-box').css('display');

  $('#post-box').show();
  $('#post-box').css('display');
      $('#post-box').css('width'); //500px
  $('#post-box').css('width','700px'); //500px에서 700px로 변경

    タグにテキストを入力

      //input 박스일 경우
       $(#'id값').val('텍스트 입력')
  
  //input 외의 버튼의 경우
       $('#id값').text('텍스트 입력')
  
  ex)
    <button id="btn-posint-box" type="button" class="btn btn-primary">포스팅 박스 열기</button>이면
    $('#btn-posint-box').text('포스팅 박스 닫기');를 할 경우 text가 '닫기'로 변경

    タグにhtmlを入力


    divにhtmlを動的に挿入したい場合(ex.posting後にカードを追加)
  • `(backtic)使用
    •   <div class="card-columns" id="cards-box"> //id 추가

  let temp_html = `<button> 추가 버튼 </button>`;  //html처럼 생긴 문자역
  $('#cards-box').append(temp_html); //html로 변경
      //카드 전체 박스 아래에 버튼이 추가되어 있다. 
   
    let temp_html = `<div> 추가할 카드 코드 넣기 </div>`;
  $('#cards-box').append(temp_html);
      //카드가 추가되어 있다.
    //console창에서 작동
    
기본: <a href="주소" class="card-title">기사 제목</a>
 변경 :
    let title = '다른 제목~~' //출력
    let temp_html = <div>코드~~~ 
 	 	   <a href="주소" class="card-title">$(title)</a>
   	  	   ~~~코드</div> //출력
    $('#cards-box').append(temp_html) //제목 변경된 카드 추가

    位置決めボックスのオン/オフ

    <script>
function openclose() {
    if ($('#post-box').css('display') == 'block') {    // id 값 post-box의 display 값이 block 이면
        $('#post-box').hide();    // post-box를 가리고
    } else {
        $('#post-box').show();    // 아니면 post-box를 펴라
    }
}
</script>

<button onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</button>
//버튼에 onclick 속성 추가

<div class="form-post" id="post-box">
//포스팅박스에 id값 주기
    function openclose() {
    	  let status = $('#post-box').css('display');
    	  if (status == 'block'){
    	  $('#post-box').hide();
    	  } else{
    	      $('#post-box').show();
    	  }
      }

    テキスト変換

    <a onclick="openclose()" id="btn-posting-box" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
//버튼에 id값 주기

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('포스팅박스 닫기');
    	  }
}

    ▶ Quiz_JQuery


    1)空白チェック関数の作成
    1-1. ボタンを押すときに入力した文字に何番を付けるか
    1-2. ボタンを押すとセルに何も入っていない場合は、入力してください.フロート
    function q1() {
            let value = $('#input-q1').val();
            if (value == '') {
                alert('입력하세요!');
            } else {
                alert(value);
            }  
}
    2)電子メール判別関数の作成
    2-1. ボタンを押すと、入力した電子メールで複数の文字が送信されます.
    2-2. 電子メールでない場合(@がない場合)は、「電子メールではありません」と表示されます.
    2-3. Eメールドメインのみ送信
     function q2() {
            let email = $('#input-q2').val();
            if (email.includes('@')) {
                let domain = email.split('@')[1].split('.')[0];
                alert(domain);
            } else {
                alert('이메일이 아닙니다.');
            }
}
    3)HTMLの貼り付け/削除の練習
    3-1. 名前を入力すると次の内容が表示されます.
    3-2. すべてクリアボタンを作成
    function q3() {
            let txt = $('#input-q3').val();
            let temp_html = `<li>${txt}</li>`

            $('#names-q3').append(temp_html)
}

    [サーバ-クライアント通信の理解]


    ajaxがページを切り替えずにサーバから値を取得する方法

    サーバ→クライアント


    サーバがクライアントに開くウィンドウはAPIです
    JSONはKey:Valueで構成されており、資料型のディックマニュアルによく似ています.
    リアルタイムソウル市スモッグOpen API 
    RealtimeCityAir: {
list_total_count: 25,
RESULT: {
	CODE: "INFO-000",
	MESSAGE: "정상 처리되었습니다"
	},
row: [
    	{
	MSRDT: "202108032000",
	MSRRGN_NM: "도심권",
	MSRSTE_NM: "중구",
	PM10: 19,
        PM25: 11,
        O3: 0.022,
        NO2: 0.024,
        CO: 0.3,
        SO2: 0.004,
        IDEX_NM: "좋음",
        IDEX_MVL: 43,
        ARPLT_MAIN: "PM25"
  	},
    RealtimeCityAirという名前のキー値には、rowという名前のキー値にリスト型の値が含まれているディックシェリー型の値が含まれます.

    クライアント→サーバ


  • GET=>データ照会要求時
    映画の目次を見る

  • POST=>データの作成、更新、削除を要求します.
    ex)会員加入、会員脱退、パスワード変更
    • GET要求urlからのデータ取得
    http://naver.com?param=value¶m2=value2
    POST要求データをdata:{}に入れてデータを取得する
    data: { param: 'value', param2: 'value2' },

    ✔ GET


    https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
    上の住所は「?」「大」を基準に豆腐粉に分ける.
  • サーバアドレス:https://movie.naver.com/movie/bi/mi/basic.nhn
  • 映画情報:code=1967
    • ? : これは、ここから渡されるデータを作成することを意味します.
    &:より多くのデータが転送されていることを示します
    コード名義で映画番号を渡すのは、フロントエンド開発者とバックエンド開発者が事前に約束したものです

    [Ajax]


    AjaxはJQueryをインポートしたページでのみ使用可能です

    きほんほねぐみ

    $.ajax({
  type: "GET",
  url: "url 입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

    すべてのボールのスモッグ値を撮影

    $.ajax({
  type: "GET",
  url:"http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function(response){
    let rows = response["RealtimeCityAir"]["row"];
    for (let i = 0; i < mise_list.length; i++) {  //반복문 : i가 0부터 mise_list의 length까지 i가 하나씩 늘어난다.
    let gu_name = rows["MSRSTE_NM"];
    let gu_mise = rows["IDEX_MVL"];
    console.log(gu_name,gu_mise);
  }
})

    スモッグ70以下の値のみ撮影

    $.ajax({
  type: "GET",
  url:"http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function(response){
    let rows = response["RealtimeCityAir"]["row"];
    for (let i = 0; i < mise_list.length; i++) {
    let gu_name = rows["MSRSTE_NM"];
    let gu_mise = rows["IDEX_MVL"];
    
    if (gu_mise < 70) {  //if문
    console.log(gu_name,gu_mise);
  }
})

    Ajax練習


    -ソウル市のリアルタイムスモッグAPIを使用して、すべての地域のスモッグ値をマーク
    -更新ボタンを押すたびに消去して書き直す
    -スモッグ値が70未満の箇所を赤で表示
    <style>
 .bad {
       color: red;
      }
</style>
<script>
function q1() {
            $('#names-q1').empty()
            $.ajax({
                type: "GET",
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
                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 = ``
                        if (gu_mise > 70) {
                            temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                        } else {
                            temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                        }
                        $('#names-q1').append(temp_html)
                    }
                }
            })
        }
</script>

    ▶ Quiz_Ajax


    1)ソウル市OpenAPI使用(リアルタイムデータ表示)
    ソウル市リアルタイムデータ報現状API
    大陵大水が5未満のところは赤色を展示します
    <style>
 .urgent{
            color: red;
        }
</style>
<script>
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)
            }
          }
        })
      }
</script>
    2)ランダム猫写真API使用
    ランダム猫写真API 
    <script>
 function q1() {
        $.ajax({
          type: "GET",
          url: "https://api.thecatapi.com/v1/images/search",
          data: {},
          success: function (response) {
            let imgurl = response[0]['url']
            $('#img-cat').attr('src',imgurl)
          }
        })
      }
</script>
    $("#id値").attr(「src」,imgurl)=>jQuery imgタグ画像アドレス変更

    [Q.ジョブ]



    1週目の宿題でリフレッシュしたときに、為替レートをそのまま書きます.
    <div class="item">
        <h1>츄르 참치맛 4개입 <span class="price">가격:1,700원/개</span></h1>
        <p>입맛이 까다로운 고양이들을 사로잡는 마약간식! 개별스틱 포장으로 외출시에도 가방에 쏙 넣어갈 수 있어요!</p>
        <p class="all_rate"> 달러-원 환율: <span id="allspa_rate">1219.15</span> </p>
</div>
    最初はdivの為替レートコードのみを記述する場合、為替レートは適用されませんが、完了コードのようにdiv内で上のコードのように記述すると、為替レートが適用されます.
    解説ビデオを見て、外に書いてもいいと言ったのに、どうしてだめなのか、
    これ以外に、今度の宿題は悪くないですね.
    Ubuntu apt-get、pip、conda清華鏡像ソースを追加
    [2021-06-17] Java