2주차 1회독 회고
오늘 배운 것 : HTML 파일을 받았다는 가정하에, JavaScript로 서버에 데이터를 요청하고 받는 방법/ jQuery를 이용해 JavaScript로 HTML을 쉽게 제어하고, Ajax를 이용해 다시 서버에 데이터를 요청하고 받아보았다!
2주차 수업들어봤는데 익숙하지 않아서 잘 못했던 느낌. 뭔가 계속 돌리고 있긴 한데 처음 접하는 느낌이었고 쉽지 않았다.. 이번주에 5주차 수업까지 1회독 하고 다음주에 2회독 예정,, 얼른 복습하자잉!
Javascript 문법
.includes('') : 괄호안의 문자열이 있으면 True, 없으면 False를 return.
.empty(): 내부 태그를 모두 비운다.
jQuery
자주쓰는 jQuery
버튼의 색깔을 바꾼다던가, div 박스를 하나 감추고 싶을 때! 이런 것들을 쉽게 해주는 것
JavaScript와 다른 소프트웨어가 아니라 미리 작성된 JavaScript 코드
사용하기 전에 임포트가 필요(와 사이에 임포트)
HTML의 요소들을 조작하는, 편리한 JacaScript를 미리 작성해둔 것 -> 라이브러리
복잡한 코드, 브라우저간의 호환성을 극복
$ : 제이쿼리의 시작
- CSS와 마찬가지로, 가리켜야 조작을 할 수 있는데 CSS 선택자 = class 이지만,
jQuery는 id 값을 사용한다.
1. input 박스의 값 가져오기
<div class="form-floating mb-3">
<input id="url" type="email" class="form-control" placeholder="name@example.com">
<label>영화URL</label>
</div>// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();
// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능');2. div 보이기/ 숨기기
: id 값을 가리킨 후 .hide()/ .show() 사용
// id 값은 post-box
$('#post-box').hide();
$('#post-box').show();3. 태그 내 html 입력하기
:
~
내에, 동적으로 html을 넣고 싶을 때 (예 : 포스팅 되면 카드 추가) 카드가 붙는 div에 id를 추가해주어야 함
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 한줄 평을 씁니다</p>
</div>
</div>
</div>
</div>
</div>3-1. 버튼을 넣어보자!
// id 값은 cards-box
// .append : 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가
// temp_html : let 으로 내용을 정의 (html코드를 텍스트로 넣을 때 따옴표가 아닌, 백틱 사용)
// 이걸 html로 바꾸려면, $(‘#cards-box’).append(temp_html) 사용
let temp_html = `<button>나는 추가될 버튼이다!</button>`;
$('#cards-box').append(temp_html);3-2. 카드를 넣어보자!
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있음
let title = '영화 제목이 들어갑니다';
let temp_html = `<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 한줄 평을 씁니다</p>
</div>
</div>
</div>`;
$('#cards-box').append(temp_html);jQuery 적용 (포스팅 박스)
포스팅 박스 제어
function open_box(){
$('#post-box').show()
}
function close_box(){
$('#post-box').hide()
}- post-box를 시작부터 감춰두기
: CSS의 display : none 속성
jQuery 퀴즈에서 몰랐던 친구들
1. input-q1 입력값 가져오기
let email = $('#input-q2').val();2. 가져온 값에 @가 있으면 info@gmail.com 에서 gamil만 추출한 후, alert(도메인 값); 으로 띄우기
if (email.includes('@')){
let domainWithDot = email.split('@')[1];
let onlyDomain = domainWithDot.split('.')[0];
alert(onlyDomain);
}난 이렇게 써보았당
if(email.includes('@') == true){
alert(email.split('@')[1].split('.'[0]);
3. HTML 붙이기/ 지우기 연습
3-1. 이름을 입력하면 아래 나오게 하기
3-2. 다 지우기 버튼 만들기
function q3() {
// 1. input-q3 값을 가져온다.
let newName = $('#input-q3').val();
if (newName == '') {
alert('이름을 입력하세요');
return;
}
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${가져온 값}</li>`)
let temp_html = `<li>${newName}</li>`;
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
$('#names-q3').append(temp_html);
}
function q3_remove() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용)
$('#names-q3').empty();
}서버-클라이언트
1. 서버 -> 클라이언트 : JSON 이해하기
- JSON은 Key : Value로 이루어져 있다.
2. 클라이언트 -> 서버 : GET 요청 이해하기
- GET : 데이터 조회를 요청할 때
- POST : 데이터 생성, 변경, 삭제 요청할 때
- ? : 여기서부터 전달할 데이터가 작성된다는 의미
- & : 전달할 데이터가 더 있다는 뜻
Ajax
Ajax는 jQuery를 임포트한 페이지에서만 동작 가능함
Ajax 기본 골격
$.ajax({
type: "GET", // GET 방식으로 요청
url: "여기에URL을입력", // 요청할 url
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 공란)
success: function(response){ // 성공하면, 서버에서 준 결과를 response라는 변수에 담아 함수를 실행함
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})GET 요청
: url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
http://naver.com?param=value¶m2=value2
POST 요청
: data : {} 에 넣어서 데이터를 가져갑니다.
data: { param: 'value', param2: 'value2' },
개발자도구 콘솔에 찍어보기
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {},
success: function(response){
// 값 중 도봉구의 미세먼지 값만 가져와보기
let dobong = response["RealtimeCityAir"]["row"][11];
let gu_name = dobong['MSRSTE_NM'];
let gu_mise = dobong['IDEX_MVL'];
console.log(gu_name, gu_mise);
}
})모든 구의 미세먼지 값을 찍어보기
// 1. 미세먼지 데이터가 어디에 있는지 찾기 -> RealtimeCityAir > row 에 있는 미세먼지 데이터를 꺼내기
// 2. 반복문으로 구 데이터 출력해보기
// 3. 구 데이터에서 구 이름, 미세먼지 수치를 골라내어 출력하기
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {},
success: function (response) {
let mise_list = response["RealtimeCityAir"]["row"]; // row의 값을 mise_list에 담음
for (let i = 0; i < mise_list.length; i++) {
let mise = mise_list[i];
// 구 이름, 미세먼지 수치 Key 값의 Value 출력
let gu_name = mise["MSRSTE_NM"];
let gu_mise = mise["IDEX_MVL"];
console.log(gu_name, gu_mise);
}
}
});jQuery + Ajax 조합 연습
1. 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기 (id = names-q1)
<script>
function q1() {
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response["getStationListHist"]["row"];
for (let i = 0; i < rows.length; i++) {
let rack_name = rows[i]['stationName'];
let rack_cnt = rows[i]['rackTotCnt'];
let bike_cnt = rows[i]['parkingBikeTotCnt'];
let temp_html = `<tr>
<td>${rack_name}</td>
<td>${rack_cnt}</td>
<td>${bike_cnt}</td>
</tr>`
$('#names-q1').append(temp_html);
}
}
})
}
</script>+ 따릉이 대수가 5대 미만인 곳은 빨갛게 표시!
<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;
}
.urgent {
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 rack_name = rows[i]['stationName'];
let rack_cnt = rows[i]['rackTotCnt'];
let bike_cnt = rows[i]['parkingBikeTotCnt'];
let temp_html = '';
if (bike_cnt < 5) {
temp_html = `<tr class="urgent">
<td>${rack_name}</td>
<td>${rack_cnt}</td>
<td>${bike_cnt}</td>
</tr>`
} else {
temp_html = `<tr>
<td>${rack_name}</td>
<td>${rack_cnt}</td>
<td>${bike_cnt}</td>
</tr>`
}
$('#names-q1').append(temp_html);
}
}
})
}
</script>Ajax 연습_이미지, 텍스트 바꾸기
이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");
<script>
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rtan",
data: {},
success: function(response){
let imgurl = response['url'];
$("#img-rtan").attr("src", imgurl);
let msg = response['msg'];
$("#text-rtan").text(msg);
}
})
}
</script>2주차 숙제
참고) 로딩 후 호출하기
$(document).ready(function(){
alert('다 로딩됐다!')
}); <script>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
data: {},
success: function (response) {
let temp = response['temp']
$('#temp').text(temp)
}
})
});
</script>
@dev_inwoo