왕초보 기초반 2주차
JQuery 시작하기
html의 요소들을 조작하는,편리한 Javascript를 미리 작성해둔것. 라이브러리!
JQuery는 javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는것( 그렇기때문에 쓰기 전에 임포트 를 해줘야 합니다. )
한마디로 남이 짜둔 Javascript
남이 짜둔 CSS -> 부트스트랩
$('#article-url').val();
ID article-url의 값을 가져와라
"세종대왕"
$('#article-url').val('장영실');
장영실 값으로 변경
let tmp_html=
<div class="card">
$('#cards-box').append(temp_html)
아이디 카드박스 에 html소스 코드로 붙여 넣기 !!
반복연습 하자!
display: none 값으로 디폴트를 정해주면 처음부터 포스팅 박스는 나타나지 않는다.
퀴즈 2번째
도메인 찾기 + includes 활용
function q2() {
let val = $('#input-q2').val();
if (val.includes('@')) {
let domain = val.split('@')[1].split('.')[0];
alert(domain);
} else {
alert('이메일이아닙니다.');
}단계별로 consol.log() 로 찍어보면서 값이 잘들어가는지 확인하면서 작성
클라이언트가 요청 할때에도 "타입"이라는 것이 존재
POST - 회원가입 등록,생성,변경,삭제 요청
GET - 통상적으로 데이터 조회 를 요청
브라우저에 엔터를 치는 행위가 GET요청
https://movie.naver.com/movie/bi/mi/basic.naver?code=184318
? 를 기점으로 그 이후 고객이 가져가는 데이터
code=184318 값 코드 값을 가져간다.
프론트앤드 개발자와 백앤드 개발자가 약속한 것 code
Ajax
반드시 JQuery 임포트가 되어있어야만 동작한다.
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function(response){
console.log(response['RealtimeCityAir']['row'][0])
}
})그냥 이렇게 쓰는거구나 통으로 이해하자 response 로 값이 들어오는것!
ajax로 값을 받아온 것을 jquery 로 처리 하기
$("#img-cat").attr("src", rows);
이미지 바꾸기 .attr
$(document).ready(function () {
q1();
});
시작 로딩시 q1(): 호출
질문
브라우저에서 작동하는 언어 Javascript
검사에서나 script 부분에서는 Javascript 만 가능한건지?
그렇게 보인다. JQuery 또한 Javascript일뿐
막히는부분
실시간 데이터 여서 강의 내용이랑 결과값이 당연히 다르게 도출 되는 게 맞을 수밖에 없었는데 그거 가지고 한창 씨름 했다.
찍히는 태그 상위 태그에 ID 부여해야 함
숙제 도중 찍히는 태그를 q태그를 썼는데 q 상위 div를 만들고 그 div에 아이디를 주고 그 아래 attend로 붙이면서 코드를 추가 해야 한다.
QUIZ
JQuery 연습하고 가기!<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
table {
border: 1px solid;
border-collapse: collapse;
}
td,
th {
padding: 10px;
border: 1px solid;
}
.bad{
color: red;
font-weight: bold;
}
</style>
<script>
function q1() {
$('#names-q1').empty()
// 여기에 코드를 입력하세요
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response['getStationList']['row']
for (let i = 0; i < rows.length; i++) {
let station = rows[i]['stationName'];
let allparking = rows[i]['rackTotCnt'];
let realparking = rows[i]['parkingBikeTotCnt'];
if(realparking<5){
temp_html = ` <tr class="bad">
<td>${station} </td>
<td>${allparking}</td>
<td>${realparking}</td>
</tr>`
}
else {
temp_html = ` <tr>
<td>${station} </td>
<td>${allparking}</td>
<td>${realparking}</td>
</tr>`
}
// let temp_html=''
// if(gu_mise>50){
// temp_html=`<li class="bad">${gu_name} : ${gu_mise}</li>`
// }
// else{
// temp_html=`<li>${gu_name} : ${gu_mise}</li>`
// }
$('#names-q1').append(temp_html)
}
}
})
}
</script>jQuery + Ajax의 조합을 연습하자!
2. 서울시 OpenAPI(실시간 따릉이 현황)를 이용하기
모든 위치의 따릉이 현황을 보여주세요
업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.
업데이트| 거치대 위치 | 거치대 수 | 현재 거치된 따릉이 수 |
| 102. 망원역 1번출구 앞 | 22 | 0 |
| 103. 망원역 2번출구 앞 | 16 | 0 |
| 104. 합정역 1번출구 앞 | 16 | 0 |
숙제
<!doctype html>
<html lang="en">
<head>
<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">
<!-- 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>
<style>
* {
font-family: 'Jua', sans-serif;
}
.image {
width: 600px;
height: 400px;
margin: 30px auto;
background-image: url("https://search.pstatic.net/common/?src=https%3A%2F%2Fshopping-phinf.pstatic.net%2Fmain_1055754%2F10557549622.20170916043402.jpg&type=sc960_832");
background-size: cover;
background-position: center;
}
.ment {
width: 600px;
height: 400px;
margin: auto;
}
.price {
font-size: 20px;
}
.mybtn {
width: 100px;
margin: auto;
display: block;
}
.blue {
color: blue;
}
</style>
<script>
function hey() {
alert('주문완료되었습니다.');
}
$(document).ready(function () {
q1();
});
function q1() {
$('#change').empty();
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let rows = response['rate']
let temp_html = '';
temp_html = `<p class="blue">달러-원 환율:${rows}</p>`
console.log(temp_html);
$('#change').append(temp_html)
}
}
)
}
</script>
</head>
<body>
<div class="image">
</div>
<div class="ment">
<h1>향초를 팝니다. <span class="price">가격:3000원/개</span></h1>
<p>이 양초는 사실 특별한 힘을 가지고 있어요 양초를 켜고 소원을 빌면 짜자잔 뭐든지 이뤄지게 된답니다. 하나사가세요.! 대나무향이 아주 좋아요</p>
<div id="change"></div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default1">주문자이름</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default1">
</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">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default2">주소</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default2">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default3">전화번호</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default3">
</div>
<p class="lead">
<a onclick="hey()" class="mybtn btn-primary btn-lg" href="#" role="button">주문하기</a>
</p>
</div>
</body>
</html>