공부/스파르타코딩클럽
[스파르타코딩클럽]웹개발종합반 2주차
먼지투성이밤
2022. 9. 13. 18:49
🌟제이쿼리란 무엇일까?
html요소들을 조작할 수 있게 자바스크립트를 미리 작성해둔것.
부트스트랩과 비슷하다. 누군가가 짜둔 css코드를 이용하기때문이다.
자바스크립트도 이런 요소가 있고 그것을 라이브러리 라고 부른다.
🌟제이쿼리 사용하기
https://www.w3schools.com/jquery/jquery_get_started.asp
jQuery Get Started
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
<head> 와 </head> 사이에 제이쿼리 링크를 아래와 같이 삽입해준다.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>🌟 제이쿼리 다뤄보기
${'#url'}.val() //id url에 제이쿼리를 적용시킬껀데 그것의 value를(값을) 가져오고 싶다.
${'#post-box'}.hide() //post-box 숨기기
${'#post-box'}.show() //post-box 보여주기let temp_html = `<button>버튼!</button>` //temp_html안에 html문법을 미리 저장한다. (html은 아님)
$('#cards-box').append(temp_html) //html화 시켜주기 (cards-box에 미리 저장해놓은 temp_html을 html로 적용한다.)function q1() {
let a1 = $('#input-q1').val(); // 입력된 값을 가져온다
if (a1 == '') { //입력칸이(a1) 빈칸이라면
alert('입력 하세요!');
} else {
alert(a1);
}
function q2() {
let a2 = $('#input-q2').val(); //입력된 값을 가져온다
if (a2.includes('@')) { //가져온 값에 @가 있다면 (include.('@'))
let a2_1 = a2.split('@')[1]; //a2_1은 @ 뒤의 두번째 값이다
let a2_2 = a2_1.split('.')[0];//a2_2은 . 뒤의 첫번째 값이다
alert(a2_2);
} else {
alert('이메일이 아닙니다.');
}
function q3() {
let a3 = $('#input-q3').val(); //입력된 값을 가져온다
let temp_html = `<li>${a3}</li>`; //입력된 값을 가져올 태그를 만든다.
$('#names-q3').append(temp_html); //#names-q3에 만들어놓은 태그를 붙힌다
}🌟GET 과 POST는 무엇일까?
GET → 데이터 조회를 요청할 때 예) 영화 목록 조회 , 은행창구에 통장을 들고 그 통장을 요청한다고 생각
POST → 데이터 생성, 변경, 삭제를 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정
통상적으로 사용되는 곳을 적은것 뿐이지, 사용되는곳의 제한은 딱히 없다.
내가 적은것과 반대로 사용해도 무방하다.
🌟Ajax를 사용해보자
<!-- ajax 기본골격 -->
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
}) $.ajax({
type: "GET", // GET타입으로 가져온다
url: "http://spartacodingclub.shop/sparta_api/seoulair",//이 URL을
data: {},
success: function (response) {
let rows=response['RealtimeCityAir']['row'] //rows는 RealtimeCityAir의 row값
for (let i =0; i<rows.length; i++){ //for문은 자주 쓰니 기억해두자
let gu_name = rows[i]['MSRSTE_NM']
let gu_mise = rows[i]['IDEX_MVL']
console.log(gu_name,gu_mise);
}
}
})function q1() {
$('#names-q1').empty(); //ajax가 돌기전에 내용 지워주기
$.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 name = rows[i]['stationName']
let rack = rows[i]['rackTotCnt']
let bike = rows[i]['parkingBikeTotCnt']
let temp_html = `` //일단 선언해주고
if (bike < 5) {
temp_html = `<tr class="urgent">
<td>${name}</td>
<td>${rack}</td>
<td>${bike}</td>
</tr>`
}else
{temp_html = `<tr ">
<td>${name}</td>
<td>${rack}</td>
<td>${bike}</td>
</tr>`
}
$('#names-q1').append(temp_html);
}
}
})
}<script>
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rtan",
data: {},
success: function (response) {
let url = response['url']
let msg = response['msg']
$('#img-rtan').attr('src',url) //url을 바꿀땐 .attr
$('#text-rtan').text(msg) //문자열을 바꿀땐 .text
}
})
}
</script><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>