(2022.04.25 ~ 2022.04.30)
day1
Javascript 복습하기.
- body태그에 onclick을 넣어 script로 연결.
<a onclick="hey()" href="#" role="button">Learn more</a>- head태그에서 script를 만들어 함수 넣기.
- alert는 알림창, ('') 안에는 알림창에 들어갈 말.
<script>
function hey(){
alert('안녕!!');
}
</script>
- 클릭횟수로 홀짝 함수 만들기 예시
<script>
let count = 1;
//count라는 박스에 1을 넣음//
//함수 밖에 넣어야 축척 가능함--> 함수 안에 넣으면, 함수의 역할이 끝나면 자동 리셋됨.('전역변수'라고 부름)//
function hey(){
if (count % 2 == 0){
alert('짝수입니다!');
} else {
alert('홀수입니다!');
}
//만약(if)에 count가 2로 나눈 나머지가 0이면 //
//'짝수입니다!' 알림창 출력(alert)//
//아니면(else) '홀수입니닫!' 알림창 출력(alert)//
count = count + 1;
//현재 count에 1을 더해서 픽스//
//count += 1;로 줄여서 쓰기 가능//
}
</script>jQuery 시작하기.
- 제이쿼리(jQuery)란, 미리 작성된 javascript코드를 의미함.
- 전문 개발자들이 미리 짜둔 코드를 가져와 사용하는 것.
--> 사용하기 전에 "임포트"는 필수!!!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
코드가 복잡하고, 브라우저 간 호환성 문제를 고려해 jQuery라는 라이브러리 등장!!
jQuery 익히기.
- id를 지정해 제이쿼리로 콘솔에서 수정가능.
// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();
// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();
// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();
// 버튼에 '포스팅 박스 닫기'라는 글로 수정한다.
$('#btn-posting-box').text('포스팅 박스 닫기');- html에 카드 넣기.
// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';
let temp_html = `<div class="card">
<img class="card-img-top"
src="${img_url}"
alt="Card image cap">
<div class="card-body">
<a href="${link_url}" class="card-title">${title}</a>
<p class="card-text">${desc}</p>
<p class="card-text comment">${comment}</p>
</div>
</div>`;
// id가 'cards-box'인 태그를 html에 덧붙이기(append).
$('#cards-box').append(temp_html);day2
jQuery 응용하기.
- 빈칸 체크 함수 만들기.
function q1() {
let txt = $('#input-q1').val();
if (txt == '') {
alert('입력하세요')
} else {
alert(txt)
}
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
// 3. alert('입력하세요!') 띄우기
// 4. alert(입력값) 띄우기
}
- 이메일 판별 함수 만들기.
function q2() {
let txt = $('#input-q2').val();
console.log(txt);
if (txt.includes('@')) {
alert(txt.split('@')[1].split('.')[0])
} else {
alert('이메일이 아닙니다!')
}
// 1. input-q2 값을 가져온다.
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
// 3. info.spartacoding@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
} <div class="question-box">
<h2>2. 이메일 판별 함수 만들기</h2>
<h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
<h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
<h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
<input id="input-q2" type="text" /> <button onclick="q2()">클릭</button>
</div>포함하는지 확인하는 함수는 .inclues()
분리하는 함수는 .split('')
- html 붙이기/ 지우기 연습하기.
function q3() {
let txt = $('#input-q3').val();
let temp_html = `<li>${txt}</li>`;
$('#names-q3').append(temp_html);
// 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
}
function q3_remove() {
$('#names-q3').empty();
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
}
서버와 클라이언드 통신 이해하기.
- 서버 ➡️ 클라이언트
JSON은, Key:Value로 이루어져 있습니다. 자료형 Dictionary와 아주- 유사하죠!
- 클라이언트 ➡️ 서버
API는 은행 창구와 같은 것!
같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라
가져와야 하는 것 / 처리해주는 것이 다른 것처럼,
클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.
- GET → 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회- POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정
day3
Ajax 시작하기.
Ajax는 jQuery를 임포트한 페이지에서만 구현 가능!
- Ajax의 기본 골격 사용하기.
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})
// url에 오픈API를 넣어 사용.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)
// 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})- $ajax 코드 설명.
- type: "GET" → GET 방식으로 요청한다.
- url: 요청할 url
- data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
👉 리마인드
GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
http://naver.com?param=value¶m2=value2
POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
data: { param: 'value', param2: 'value2' }
- success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.
👉 결과가 response에 들어감.success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음 console.log(response) }
Ajax 응용하기.
- 반복문(for문) 응용하기.
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (response) {
let mise_list = response["RealtimeCityAir"]["row"];
for (let i = 0; i < mise_list.length; i++) {
let mise = mise_list[i];
let gu_name = mise["MSRSTE_NM"];
let gu_mise = mise["IDEX_MVL"];
console.log(gu_name, gu_mise);
}
}
});day4
Ajax 응용 연습하기.(1)
- '미세먼지 농도 측정하기' 연습하기.
function q1() {
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (response) {
//response 안에 있는 "RealtimeCityAir"와 "row"를 rows에 넣기.
let rows = response["RealtimeCityAir"]["row"];
// 반복문 돌리기.
for (let i = 0; i < rows.length; i++) {
let gu_name = rows[i]['MSRSTE_NM'];
let gu_mise = rows[i]['IDEX_MVL'];
//html 추가하기 <li ${구이름} : ${미세먼지수치} /li>
let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
//id가 names-q1인 곳에 temp_html추가하기.
$('#names-q1').append(temp_html);
}
}
})
}Ajax 응용 연습하기.(2)
- '따릉이 실시간 현황' 연습하기
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_NM = rows[i]['stationName'];
let rack_Cnt = rows[i]['rackTotCnt'];
let parking_Cnt = rows[i]['parkingBikeTotCnt'];
let temp_html = `<tr>
<td>${station_NM}</td>
<td>${rack_Cnt}</td>
<td>${parking_Cnt}</td>
</tr>`
$('#names-q1').append(temp_html);
}
}
})
}
- '따릉이 실시간 현황(5대 미만 체크)' 연습하기
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_NM = rows[i]['stationName'];
let rack_Cnt = rows[i]['rackTotCnt'];
let parking_Cnt = rows[i]['parkingBikeTotCnt'];
let temp_html = ``
if (parking_Cnt < 5 ){
temp_html = `<tr class="urgent">
<td>${station_NM}</td>
<td>${rack_Cnt}</td>
<td>${parking_Cnt}</td>
</tr>`
} else {
temp_html = `<tr>
<td>${station_NM}</td>
<td>${rack_Cnt}</td>
<td>${parking_Cnt}</td>
</tr>`
}
$('#names-q1').append(temp_html);
}
}
})
}
Ajax 응용 연습하기.(3)
- '랜덤 고양이 이미지'연습하기.
jQuery로 img태그 src바꾸는 방법!!
$("#id 넣기").attr("src", 이미지 링크 url);
function q1() {
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function (response) {
let img_url = response[0]['url'];
$("#img-cat").attr("src", img_url);
}
})
}- '로딩 시 환율 표시' 연습하기.
javascript 로딩 후 실행시키기!!
$(document).ready(function(){ alert('다 로딩됐다!') });
<script>
$(document).ready(function () {
get_rate();
}); // 로딩 후 바로 get_rate()실행
function get_rate(){
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let rate = response['rate'];
let date = response['date'];
$('#now_rate').text(rate);
$('#now_date').text(date);
}
})
}
</script><body>
<div class="rate">
<p>미국 환율 : <span id="now_rate"> 1106.3</span> $ (<span id="now_date">2022년 05월 02일 기준</span>)</p>
</div>
</body>
그냥 은근슬쩍 살다 가긴 싫어