Javascript
역시나 어렵다.😂
onclick 함수 배우기
console.log(); -> 요걸로 계속 확인해 가면서 해 나가기.
아니면 나중에 짜놓고 어디가 잘 못된 것인지 찾아내기 어려움.
JQuery
Javascript를 미리 작성해둔 라이브러리
jQuery CDN: https://www.w3schools.com/jquery/jquery_get_started.asp
복사해서 <head> 와 </head> 사이에 넣기실습: JQuery 적용
Ajax
OpenAPI를 이용하여 결과값 실시간으로 표시하기.
Ajax는 jQuery를 임포트한 페이지에서만 동작 가능
$.ajax({
type: "GET"
url:
data: {},
success: function(response){
console.log(response)
}
})실습 : 시간 미세먼지 상태를 이용 / 실시간 따릉이 현황을 이용
-> 따릉이 대수가 5대 미만인 곳은 빨갛게 보여주기
실습 : jQuery 이미지태그 src 바꾸는 방법 구글검색
2주차 숙제
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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Noto Sans KR', sans-serif;
}
.title_image {
width: 600px;
height: 500px;
border-radius: 10px;
margin-top: 50px;
background-image: url('https://post-phinf.pstatic.net/MjAxODA2MDRfMjMy/MDAxNTI4MDcxNDMzMTQy.kdsUMGdPiGzoASAFfeCZjoRwDcR2xS3gD3TU-UkL4u4g.DKGmumvOvyGBxP3l9geW7AXGfE92o1ZRQsh2qvPmOV4g.JPEG/%EB%8F%85%EC%9D%BC_%EC%97%B0%EB%B0%A9%EC%9D%98%ED%9A%8C_%EC%9D%98%EC%82%AC%EB%8B%B9.jpg?type=w1200');
background-position: center;
background-size: cover;
}
.wrap {
margin: auto;
width: 600px;
}
.btn {
margin: 300px;
margin: auto;
display: block;
background-color: gold;
color: whitesmoke;
}
.price {
font-size: 20px;
color: cornflowerblue;
font-weight: bold;
}
.form-group {
margin-top: 20px;
}
.btn_rate {
border-color: aqua;
border-width: 0px;
background-color: cornflowerblue;
color: white;
}
</style>
<script>
$(document).ready(function(){
q1()
});
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let rate = response['rate']
$("#rate").text(rate);
}
})
}
</script>
</head>
<body>
<div class="wrap">
<div class="title_image"></div>
<div class="title">
<h1>가즈아~독일로!! <span class="price">비용:오만원!!/명 </span></h1>
<p>독일은 인상적인 나라입니다. 독일 자연과 건축물의 놀라운 조화, 독특한 음식과 맥주, 흥미로운 역사를 상상해 보세요. 독일은 여러분의 눈과 입 그리고 마음까지 만족시켜드릴 것입니다. 유레일의 독일
여행 일정은 독일의 주요 5개 도시로 안내해 드립니다. 초고층 건물에서부터 역사적인 랜드마크까지, 박물관에서부터 각종 파티까지, 유레일이 이 모든 멋진 경험들을 준비했습니다.
</div>
<div>
<button class="btn_rate">오늘의 환율</button> <span id="rate"> ? </span>
</div>
<div>
<div class="form-group">
<label for="exampleFormControlInput1">갈 사람 누구?</label>
<input type="email" class="form-control" id="exampleFormControlInput1">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">몇 명?</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="form-group">
<label for="exampleFormControlInput1">여행 희망일?</label>
<input type="email" class="form-control" id="exampleFormControlInput1">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">안내받을 E-Mail?</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<button class="btn">los geht's</button>
</div>
</div>
</div>
</body>
</html>
몰러유