[항해99] 사전준비 - 웹개발 종합반 2주차

박하린·2021년 9월 8일
ajaxjquery항해99
0

항해99

목록 보기
1/27

jQuery란?

  • HTML 요소들을 쉽게 조작할 수 있도록 도와주는 자바스크립트 라이브러리!
  • jQuery는 javascript와 다른 소프트웨어가 아니라 미리 작성된 javascript 코드이다.
  • 개발자들이 짜둔 코드를 가져와서 사용하는 것이기 때문에 쓰기전에 "import"해주어야 한다.

자주 쓰이는 jQuery

1. input 박스의 값 가져오기

// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();

2. div 보이기 / 숨기기

// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();

// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('post-box').show();

3. css 속성 가져와보기 (display 속성 값 가져와보기)

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

$('#post-box').show();
$('#post-box').css('display');
> block

4. 태그 내 텍스트 입력하기

1) input box의 경우 - val()

$('#post-url').val('텍스트 입력!');

2) 다른 태그의 경우 - text()

// ex) 버튼 - 가리키고 싶은 버튼에 id 값을 준다음

$('#btn-posting-box').text('텍스트 입력!')

5. 태그 내 html 입력하기

  • <div> ~ </div> 내에, 동적으로 html을 넣고 싶을 때
  1. 버튼 넣어보기
// temp_html 변수에 html 태그를 넣어주고 append

let temp_html = '<button>나는 버튼이다</button>'
$('#cards-box').append(temp_html);
  1. 카드 박스 넣어보기
// backtick(``)을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있다.

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

Ajax란?

  • Asynchronous JavaScript and XML
  • Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해준다.
  • 자바스크립트를 통해 서버에 데이터를 비동기 방식으로 요청하는 것
  • 웹개발 종합반 강의에서는 jQuery문법을 사용해서 javscript를 통해 Ajax통신을 구현하였다.

jQuery를 사용한 Ajax 기본 골격

$.ajax({
	type: "GET", // http 요청방식(GET, POST)
  	url: "서버로 보낼 주소를 입력", // 요청이 전송되는 url 
  	data: {}, // 요청할 때 넘겨줄 데이터 (GET 요청일땐 비워둠)
  	// 성공적으로 값을 서버에 보냈을 때 처리할 코드
  	success: function(response){ // 서버에서 준 결과를 response 라는 변수에 담는다
      console.log(response)
    }
})

2주차 숙제 - 쇼핑몰 페이지에 환율 API를 이용해서 환율 표시하기

<!-- homework_01 에 환율 api 호출하기 !-->

<!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>

    <meta property="og:title" content="원페이지 쇼핑몰" />
    <meta property="og:description" content="내가 만든 웹페이지 - 탬버린즈 핸드크림 팔아요@ㅎ@" />
    <meta property="og:image" content="{{ url_for('static', filename='ogimage.jpeg') }}" />

    <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=Gowun+Dodum&display=swap" rel="stylesheet">

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

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

        h2 {
            font-weight: bold;
        }

        .price {
            font-weight: normal;
            font-size: 15px;
        }

        .perfume {
            font-weight: bold;
            margin-bottom: 10px;
        }

        .perfume-desc {
            margin-bottom: 20px;
        }

        .product-img {
            width: 500px;
            display: block;
            margin: auto;
        }

        .rate {
            color: blueviolet;
        }

        .product-order {
            margin-top: 10px;
        }

        .btn-order {
            margin: auto;
            display: block;
        }
    </style>

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

        function orderSuccess() {
            alert("주문이 완료되었습니다!")
        }

        function exchangeRate() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                    let rate = response['rate'];

                    $('#now_rate').text(rate);
                }
            })
        }
    </script>
</head>

<body>
<div class="wrap">
    <img class="product-img"
         src="https://www.tamburins.com/data/item/1608604813/perfumehand40_000_375x300.jpg?img1=121"
         alt="handcream-img">

    <h2>탬버린즈 퍼퓸핸드 000 <span class="price">가격 : 32,000원/40ml</span>
    </h2>

    <div>
        <p class="perfume">
            샌달우드 | 패츌리 | 흙 내음
        </p>
        <p class="perfume-desc">
            바르는 순간 코 끝을 스치는 베르가못의 시원함, 수분을 머금은 흙을 연상시키는 패츌리와 무겁게 내려앉은 샌달우드는 갓 꺾은 야생화를 품에 가득 안았을 때 느껴지는 대지의 활기를 떠올리게 합니다.
        </p>
        <p> 향수처럼 사용할 수 있는 크림 타입 퍼퓸.
        </p>
        <p class="rate">달러-원 환율: <span id="now_rate">1000</span></p>
    </div>
    <div class="product-order">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">주문자 이름</span>
            </div>
            <input id="order-name" type="text" class="form-control" aria-label="Default"
                   aria-describedby="inputGroup-sizing-default">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <label class="input-group-text">수량</label>
            </div>
            <select class="custom-select" id="order-volume">
                <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">주소</span>
            </div>
            <input id="order-address" type="text" class="form-control" aria-label="Default"
                   aria-describedby="inputGroup-sizing-default">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">전화번호</span>
            </div>
            <input id="order-phone" type="text" class="form-control" aria-label="Default"
                   aria-describedby="inputGroup-sizing-default">
        </div>
    </div>

    <button onclick="order()" type="button" class="btn btn-primary btn-order">주문하기</button>
    <table class="table">
        <thead>
        <tr>
            <th scope="col">이름</th>
            <th scope="col">수량</th>
            <th scope="col">주소</th>
            <th scope="col">전화번호</th>
        </tr>
        </thead>
        <tbody id="orders-box">
        </tbody>
    </table>

</div>
</body>

</html>

완성 페이지

profile
박하린
깃허브: https://github.com/khakaa
다음 포스트

[항해99] 사전준비 - 웹개발 종합반 3주차

0개의 댓글