1. Jquery, Json, Ajax 란?
Jquery : 기존 개발자들이 자바스크립트를 조금 더 편하게 쓰기 위해 짜놓은 코드. 자바스크립트로도 모든 기능을 구현할 수는 있지만, 1)코드가 복잡하고, 2)브라우저 간 호환성 문제 때문에 jquery라는 라이브러리를 만들어 사용하기 시작.
Json : JavaScript Object Notation. 키-값 쌍으로 이루어져 있고 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식. jsonview를 설치하면 좀 더 편하게 볼 수 있다.
Ajax : Asynchronous Javascript And Xml. 웹페이지 전체를 로딩하지 않고, 일부분만 갱신할 수 있게 하는 기법. 백그라운드 영역에서 서버와 통신한다.
-> ajax로 못 하는것 :
1. Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없습니다.
2. Ajax로는 바이너리 데이터를 보내거나 받을 수 없습니다.
3. Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없습니다.
4. 클라이언트의 PC로 Ajax 요청을 보낼 수는 없습니다.
2. Jquery
사용하려면 import 해와야 한다.
사용 방법은 <head> </head> 사이에
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></src>
입력해서 import 하기.
jQuery 역시 그때그때 필요한 내용 구글링해서 사용하기. 다 외우려면 엄청 많다.
하다보니 id를 멋대로 수정하면 나중에 결과물이 꼬이는 일이 많았다... (정렬이 이상하다던가 등)
jquery 좀 더 제대로 이해할 때까진 id는 건드리지 않기.
3. jquery 에서 id 불러올 땐 $('#id값').실행(실행할내용);
$('#post-url').val(); --> id 값이 post-url인 곳을 가리키고, val()로 값 가져오기
$('#post-url').val('new'); --> id 값이 post-url인 곳에 new 입력하기
$('#btn').text('닫기'); --> id 값이 btn인 곳 텍스트를 닫기로 바꾸기
$('#post-box').hide(); --> hide()로 안보이게 하기 (=css display 값을 none으로 바꾼다)
$('#post-box').show(); --> show()로 보이게 하기 (=css display 값을 block으로 바꾼다)
$('#post-box').css('display'); --> post-box가 hide인 상태일 땐 none, show 일땐 block 표시
4. includes()
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
split()
append()
empty()
5. 추가로 공부한 것 : 왜 type을 입력하는지?
<button></button>이면 이미 버튼으로 지정한건데, 굳이 type으로 한번 더 button이라고 하는 이유는?
type 이름이 button일 뿐, 형식이 버튼이라는 뜻이 아님!
type은 submit, reset, button 이렇게 3가지가 있다. type 지정을 안해주면 노타입(no type).
특정 영역을 form 태그로 감싸게 되면, 그 안에 있던 타입명시 없는(no type) 버튼은 전부 submit 버튼으로 동작함.
+ 버튼의 행동 방식. 가능한 값은 다음과 같습니다.
- submit: 버튼이 서버로 양식 데이터를 제출합니다. 지정하지 않은 경우 기본값이며, 유효하지 않은 값일 때도 사용합니다.
- reset: <input type="reset">처럼, 모든 컨트롤을 초깃값으로 되돌립니다.
- button: 기본 행동이 없으며 클릭했을 때 아무것도 하지 않습니다. 클라이언트측 스크립트와 연결할 수 있습니다.
6. ajax
ajax는 jquery를 임포트한 페이지에서만 작동한다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<head>
<style>
.bad {
color: red;
font-weight: bold;
}
</style>
<script>
function q1() {
$('#names-q1').empty(); /*names-q1에 담긴 것들을 모두 지운다*/
$.ajax({
type: "GET", /*get과 post 중 get 타입*/
url: "여기에URL을입력", /*open API 입력*/
data: {},
success: function(aaa){ /*성공하면 aaa에 값을 넣는다(통상적으로 aaa엔 response라고 씀)*/
let rows = aaa['RealtimeCityAir']['row'] /*aaa의 RealtimeCityAir의 row 값들*/
for (let i = 0; i < rows.length; i++) {
let gu_name = rows[i]['MSRSTE_NM']
let gu_mise = rows[i]['IDEX_MVL']
let temp_html = '' /*temp_html이라는 빈 값을 만들어주기*/
if (gu_mise > 70) { /* 70 이상이면 class 'bad'가 적용되게 하기 */
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html); /*names-q1에 temp_html 추가*/
} /*함수가 끝나며 temp_html도 초기화*/
}
})
}
</script>
</head>
<body>
<div>
<h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
<p>모든 구의 미세먼지를 표기해주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<ul id="names-q1">
</ul>
</div>
</body>
7. 매우 중요한 링크!!!!!
고양이 openAPI -> https://api.thecatapi.com/v1/images/search
그리고 jquery 이미지태그 src 바꾸기
<head>
<script>
function q1() {
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function(response){
let imgurl = response[0]['url'];
$("#img-cat").attr("src", imgurl);
}
})
}
</script>
</head>
<body>
<div>
<button onclick="q1()">고양이를 보자</button>
<div>
<img id="img-cat" width="300" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
</div>
</div>
</body>
8. 그리고 로딩후 실행
$(document).ready(function(){
alert('다 로딩됐다!')
});
'스파르타코딩클럽 > 내일배움단' 카테고리의 다른 글
| 스파르타코딩클럽 내일배움단 웹개발 종합반 후기 (0) | 2021.11.21 |
|---|---|
| 웹종 5주차 (0) | 2021.11.16 |
| 내일배움단 웹개발 4주차 (0) | 2021.11.16 |
| 내일배움단 웹개발 3주차 (0) | 2021.11.14 |
| 내일배움단 웹개발 1주차 (0) | 2021.11.13 |
