스파르타코딩클럽 2주차 개발일지

jQuery란?

HTML의 요소를 조작하는, 편리한 Javascript를 미리 작성해둔 것 (라이브러리)

jQuery와 Javascript 비교

Javascript - 길고 복잡하게 써야함
document.getElementById("element").style.display = "none";
jQuery - 보다 직관적
$('#element').hide();

✅ jQuery를 사용하려면 <head> 에 import를 해야함!!

input 박스의 값 가져오기

// 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');

태그 내 텍스트 입력하기

$('#post-url').val('여기에 텍스트를 입력하면!');

태그 내 html 입력하기

let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html);

서버-클라이언트 통신 이해하기

✅ 서버 -> 클라이언트 : JSON

JSON은 Key : Value 형태로 이루어져있음

✅ 클라이언트 -> 서버 : GET 요청

GET : 통상적으로 데이터 조회(Read)를 요청할 때
POST : 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete)를 요청할 때

Ajax 시작하기

Ajax 기본 골격

$.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) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

type : GET 방식으로 요청한다
url : 요청할 url
data : 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두기)
success : 성공하면, response 값에 서버의 결과 값을 담아서 함수 실행

2주차 숙제 (원페이지 쇼핑몰에 환율 계산기 달기)

<!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.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Jua', sans-serif;
        }

        .myimage {
            width: 500px;
            height: 450px;

            background-image: url("http://www.yankeecandle.co.kr/upload/product/2072371724_picture_0.jpg");
            background-size: cover;
            background-position: center;

            margin-bottom: 30px;
        }

        .wrap {
            width: 500px;
            margin: auto;
        }

        .title {
            font-size: 32px;
        }

        .subtitle {
            font-size: 20px;
        }

        .content {
            font-size: 16px;
        }

        .btn {
            width: 100px;
            margin: auto;
            display: block;
        }

        .rate{
            color: blue;
        }
    </style>

    <script>
        $(document).ready(function () {
            get_rate();
        });

        function get_rate() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                    let now_rate = response.rate;
                    $('#now-rate').text(now_rate);
                }
            })
        }

        function order() {
            alert('주문이 완료되었습니다!');
        }
    </script>
</head>

<body>
    <div class="wrap">
        <div class="myimage"></div>

        <div class="title"> 양초를 팝니다.
            <span class="subtitle">가격:3,000원/개</span>
        </div>
        <p class="content">이 양초는 사실 특별한 힘을 가지고 있어요. 양초를 켜고 소원을 빌면 짜자잔 뭐든지 이뤄지게 된답니다. 하나 사가세요! 대나무향이 아주 좋아요</p>
        <p class="rate">달러-원 환율: <span id="now-rate">1219.15</span></p>

        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">주문자이름</span>
            </div>
            <input type="text" class="form-control" placeholder="" aria-label="Username"
                   aria-describedby="basic-addon1">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon2">주소</span>
            </div>
            <input type="text" class="form-control" placeholder="" aria-label="Username"
                   aria-describedby="basic-addon1">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <label class="input-group-text" for="inputGroupSelect01">수량</label>
            </div>
            <select class="custom-select" id="inputGroupSelect01">
                <option selected>--수량을 선택하세요--</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </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" placeholder="" aria-label="Username"
                   aria-describedby="basic-addon1">
        </div>
        <div class="button">
            <button type="button" onclick="order()" class="btn btn-primary">주문하기</button>
        </div>
    </div>
</body>

</html>

Author And Source

이 문제에 관하여(스파르타코딩클럽 2주차 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wsy4533/스파르타코딩클럽-2주차-개발일지

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)