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

43254 단어 스파르타코딩클럽내일배움단개발일지스파르타코딩클럽웹개발종합반WILWIL

jQuery란?

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

jQuery와 Javascript 비교

Javascript - 길고 복잡하게 써야함

document.getElementById("element").style.display = "none";

jQuery - 보다 직관적

$('#element').hide();

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

  1. input 박스의 값 가져오기
// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();
  1. div 보이기 / 숨기기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();

// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();
  1. css 값 가져오기
$('#post-box').hide();
$('#post-box').css('display');

$('#post-box').show();
$('#post-box').css('display');
  1. 태그 내 텍스트 입력하기
$('#post-url').val('여기에 텍스트를 입력하면!');
  1. 태그 내 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>
9204. 체스
[Design Pattern] 싱글톤 패턴(Singleton Pattern)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage