[Web開発総合クラス]開発ログ#2


本開発ログは

Javascript復習

  • count += 1;等しいcount = count + 1
  • 変数を関数に書くと、関数が終わると値が消えてしまうので、外に書く
    letcount= 1;
    function hey() {
        if (count% 2 == 0) {
            alert('짝수입니다!');
        }
        else {
            alert('홀수입니다!')
        }
    count+= 1;
    }
  • JQueryの起動


  • JS:HTMLを移動(e.g.をクリックするとウィンドウがポップアップ)

  • JQueryは、異なるブラウザで異なるコードと長いコードを記述することを減らすライブラリを作成しました.

  • Javascriptで長くて複雑なものを書きます.
    document.getElementById("element").style.display = "none";

  • より直感的にjQueryを使用
    $('#element').hide();

  • JQuery=あらかじめ作成されたJavascriptコード
  • そのため使用前に「導入」しないと使用できない!
  • JQueryについて


  • スパルタコードクラブ

  • ガイドバーはJQueryを使用しているため、ガイドバーのデフォルト設定にインポートされました

  • 入力ボックスの値
    // 크롬 개발자도구 콘솔창에서 쳐보기
    // id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
    $('#post-url').val();

  • divの表示/非表示
    // 크롬 개발자도구 콘솔창에 쳐보기
    // id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
    $('#post-box').hide();
    
    // show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
    $('#post-box').show();

  • cssの値の取得と表示
    $('#post-box').hide();
    $('#post-box').css('display');
    
    $('#post-box').show();
    $('#post-box').css('display');

  • タグにテキストを入力

  • Inputボックスの場合
    $('#post-url').val('여기에 텍스트를 입력하면!');

  • 他のボタンのテキストを置換(例)
    // 가리키고 싶은 버튼에 id 값을 준다음
    <button id="btn-posting-box" type="button" class="btn btn-primary">포스팅 박스 열기</button>
    $('#btn-posting-box').text('포스팅 박스 닫기');

  • タグにhtmlを入力

  • ボタンの挿入を試みる
    let temp_html = '<button>나는 추가될 버튼이다!</button>';
    $('#cards-box').append(temp_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);
  • JQueryの適用


  • アンカーボックスを開くボタンに関数を追加するには
    ```jsx
    <script>
    function openclose() {
    	// 여기에 jQuery를 이용해 코드를 짤 예정    
    }
    </script>
    
    // onclick 속성(attribute)을 추가합니다.
    <button onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</button>
    ```

  • クリックして、ロケータボックスをオン/オフにします.
    ```jsx
    function openclose() {
        // id 값 post-box의 display 값이 block 이면
        if ($('#post-box').css('display') == 'block') {
            // post-box를 가리고
            $('#post-box').hide();
        } else {
            // 아니면 post-box를 펴라
            $('#post-box').show();
        }
    }
    ```

  • 「アンカーボックスを開く」ボタンのフォントを変更
  • 位置決めボックスボタンのid値周期を開く
  • <button id="btn-posting-box" onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</a>
  • ボタンテキスト交換
  • function openclose() {
                // id 값 post-box의 display 값이 block 이면
                if ($('#post-box').css('display') == 'block') {
                    // post-box를 가리고
                    $('#post-box').hide();
            				// 가렸으니까 이제 열기로 바꿔두기
                    $('#btn-posting-box').text('포스팅 박스 열기');
                } else {
                    // 아니면 post-box를 펴라
                    $('#post-box').show();
            				// 폈으니까 이제 닫기로 바꿔두기
                    $('#btn-posting-box').text('포스팅 박스 닫기');
                }
            }

    サーバ-クライアント通信について


  • 要求ウィンドウ=API

  • サーバ→クライアント送信データフォーマット=JSON
    -JSON→DickShowneryとリストの組み合わせ

  • クライアント→サーバ
    -APIは銀行窓口と同じです
  • クライアントの要求タイプに応じて異なるデータを提供する
  • GET:データ照会(e.g.映画カタログ照会)
  • POST:データの作成、更新、削除を要求した場合(e.g.会員加入、ログアウト、パスワード変更)

  • GET
    -ブラウザにアドレスを入力して企業に打撃を与えること自体がGETリクエスト
    https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
    
    위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요.
    "?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다.
    
    * 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
    * 영화 정보: code=161967

  • GET方式でデータを転送する方法
  •     ?  : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
        & : 전달할 데이터가 더 있다는 뜻입니다.
    
        예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
    
        위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
        q=아이폰                        (검색어)
        sourceid=chrome        (브라우저 정보)
        ie=UTF-8                      (인코딩 정보)

    Ajaxの起動

  • AjaxはjQueryをインポートしたページでしか動作しない
  • Ajax基本骨格
  • $.ajax({
    type: "GET",
    url: "여기에URL을입력",
    data: {},
    success: function(response){
    console.log(response)
    }
    })

    練習Ajax:データをロードして追加した後にスタイルを指定する

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

    練習Ajax(2):画像の変更

    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);
    }
    })
    }