TIL-03

38968 ワード
jquery ajax js TIL テキストリンク
0517
航海992期事前準備
ネットワーク開発総合クラス2週目
[JS復習]
<script>
    let count= 1;
    function hey() {
        if (count% 2 == 0) {
            alert('짝수입니다!')
        } else {
            alert('홀수입니다!')
        }
count+= 1;
    }
</script>
[JQuery]
JQuery使用時にgoogle cdnをインポート!
ブートストラップを使用している場合、JQueryは既にインポートされています.
$('#post-box').hide(); // #post-box 숨기기
$('#post-box').show(); // #post-box 보이게 하기
$('#btn-posting-box').text('포스팅박스 닫기'); // 텍스트 바꾸기
let temp_html = `<button>나는 버튼이다</button>`
$('#cards-box').append(temp_html) // #cards-box에 버튼 추가
[Ajax]
APIは銀行窓口に似ている
GET－データ取得要求時
POST:データの作成、更新、削除を要求します.
[第1週目の課題に為替計算機を取り付ける]
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Nanum Pen Script', cursive;
        }

        .card-title {
            font-size: 40px;
        }
        .card {
            margin: 30px auto 0px;
        }

        #order {
            margin: 0 auto 20px;
        }

        #dropdownMenuButton {
            width: 313px;
            background: white;
            color: gray;
            border: 2px solid lightgray;
        }
    </style>
    <script>
        $(document).ready(function () {
            moneyRate();
        });
        function moneyRate() {
            $.ajax({
                type: "GET",
                url: "https://api.manana.kr/exchange/rate.json",
                data: {},
                success: function (response) {
                  let rate = response[1]['rate'];
                  $('#rate').text(rate);
                }
            })
        }
    </script>
</head>
<body>
    <div class="card" style="width: 25rem;">
        <img class="card-img-top"
             src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVOq901hNzzeMGdqF0dvLx698vZvBo-_gpaFMLmO12RGah4Bdqr-QKwF-Sog&usqp=CAc"
             alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">화분을 팝니다<span style="font-size: 20px">가격: 30000원</span></h5>
            <p class="card-text">깔끔한 화분입니다.</p>
            <div id="rate"></div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon3">주문자 이름</span>
                </div>
                <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon3">수량</span>
                </div>
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                            data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                        수량을 선택하세요.
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <a class="dropdown-item" href="#">1</a>
                        <a class="dropdown-item" href="#">2</a>
                        <a class="dropdown-item" href="#">3</a>
                    </div>
                </div>
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon3">주소</span>
                </div>
                <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon3">전화번호</span>
                </div>
                <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">

            </div>
        </div>
        <div id="order"><a onclick="alert('주문이 완료되었습니다.')" href="#" class="btn btn-primary">주문하기</a></div>
    </div>
</body>

</html>
[プログラマ]文字列の圧縮
[iOS]NotificationCenterにきれいに書き込む