포도가게의 개발일지

스파르타 코딩클럽 2주차 숙제(ajax, 환율표시) 본문

웹

스파르타 코딩클럽 2주차 숙제(ajax, 환율표시)

grape.store 2021. 7. 1. 12:59
반응형
더보기

<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

<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">
 <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=Gaegu:wght@300&display=swap" rel="stylesheet">
 <!-- 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>스파르타코딩클럽 2주차 숙제</title>
 <style>
 * {
font-family: 'Gaegu', cursive;
 }

.wrab {

width: 500px;
 margin: auto;
 }

.main {
background-color: green;

 width: 500px;
 height: 300px;

 background-image: url("https://img.etnews.com/news/article/2021/05/26/cms_temp_article_26155823990264.jpg");
 background-size: cover;
 background-position: center;
 }

.long {
width: 500px;
 }

.str {
font-weight: bold;
 }

.size {
font-size: 13px;
 color: blue;
 }
</style>

 <script>
 $(document).ready(function () {      // 페이지가 새로 열릴때 바로 호출됨 확인필요
q1();
 });

 function q1() {
// 여기에 코드를 입력하세요

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

})
}
</script>

</head>

<body>
<div class="wrab">
 <div class="main">
 </div>
 <h1 class="str">노트북을 팝니다 <span style="font-size: 18px">가격:1,000,000/개</span></h1>
 <h5 class="lead str"><span style="font-size: 16px">이 노트북은 사실 특별한 힘을 가지고 있어요. 양초를 켜고 소원을 빌면 짜자잔 뭐든지 이뤄지게 된답니다. 하나 사가세요!</span>
 </h5>
 <h5 class="size" id="score"></h5>
 <div>
 <div class="form-row align-items-center ">
 <div class="col-sm-3 my-1">
 <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
 <div class="input-group long">
 <div class="input-group-prepend">
 <div class="input-group-text">주문자 이름</div>
 </div>
 <input type="text" class="form-control">
 </div>
 </div>
 </div>
 <div class="form-row align-items-center">
 <div class="col-sm-3 my-1">
 <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
 <div class="input-group long">
 <div class="input-group-prepend">
 <div class="input-group-text">수량</div>
 </div>
 <select class="form-control custom-select" id="inlineFormInputGroupUsername">
 <option selected>--수량을 선택하세요--</option>
 <option value="1">One</option>
 <option value="2">Two</option>
 <option value="3">Three</option>
 </select>
 </div>

 </div>
 </div>
 <div class="form-row align-items-center">
 <div class="col-sm-3 my-1">
 <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
 <div class="input-group long">
 <div class="input-group-prepend">
 <div class="input-group-text">주소</div>
 </div>
 <input type="text" class="form-control" id="inlineFormInputGroupUsername">
 </div>
 </div>
 </div>
 <div class="form-row align-items-center">
 <div class="col-sm-3 my-1">
 <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
 <div class="input-group long">
 <div class="input-group-prepend">
 <div class="input-group-text">전화번호</div>
 </div>
 <input type="text" class="form-control">
 </div>
 </div>
 </div>
 </div>
 <button type="button" class="btn btn-primary" style="margin-left: 200px">주문하기</button>
</div>


</body>

</html>

실시간 환율 반영

 

<script>
$(document).ready(function(){

});
</script>

document ready는 DOM 객체가 load되는 시점에 호출

img나 동영상과 같이 오래걸리는 자원들이 로드되지 않아도 document 객체가 준비되면 실행된다

jquery document ready가 되는 시점에 익명함수 내에 현 페이지에서 동작될 이벤트에 대한 동작을 바인딩(등록)

window.onload=function() {
	//이벤트 처리
}

window load는 img, 동영상과 같은 요소들이 모두 load된 후에 호출된다

DOM, BOM JavaScript가 모두 load된 후에 호출된다

 

이미지 출처:https://docu94.tistory.com/37

 

'웹' 카테고리의 다른 글

원페이지 쇼핑몰 완성  (0) 2021.07.05
스파르타 코딩클럽 4주차 숙제(mongodb, flask, requests,ajax)  (0) 2021.07.03
requests pakage 사용(Get)  (0) 2021.07.02
스파르타 코딩클럽(왕초보) 1주차 숙제  (0) 2021.06.29
html, css 기초(1)  (0) 2021.06.28
'웹' Related Articles more
Comments