제이쿼리 연습방법 - 자바스크립트로 짜인 코드를 제이쿼리 방식으로 변경해 보기
어제 이어서
요소의 삭제
1. $("선택자").remove();
선택한 요소와 그 하위 요소 모두 삭제
2. $("선택자").empty();
선택한 요소의 하위 요소만 삭제(비운다.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>요소 삭제</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<style>
div.paren {
background-color: rgb(248, 248, 193);
width: 400px;
height: 180px;
text-align: center;
overflow: auto;
}
div.ch1 {
background-color: rgb(163, 163, 245);
width: 300px;
height: 50px;
margin: 20px auto;
}
div.ch2 {
background-color: rgb(167, 255, 167);
width: 300px;
height: 50px;
margin: 20px auto;
}
</style>
<body>
<div class="paren">
<b>Parent Element</b>
<div class="ch1">Child Element 1</div>
<div class="ch2">Child Element 2</div>
</div>
<button id="add">add</button>
<button id="rm">remove</button>
<button id="em">empty</button>
</body>
<script>
//div 박스 추가
let i = 2;
$("#add").click(() => {
let elem = `<div class="ch${i % 2+1}">child Element ${++i}</div>`
$(".paren").append(elem);
});
function turnBack() {
setTimeout(function () {
location.reload();
}, 3000);
}
// 전부 다 삭제
$("#rm").click(() => {
$(".paren").remove();
$("button").attr("disabled", true); //버튼 비활성화
turnBack();
});
//내부 하위 요소만 삭제
$("#em").click(() => {
$(".paren").empty();
i = 0;
turnBack();
});
</script>
</html>
서버와 클라이언트 통신 방식
1. 동기 통신(Synchronus)
데이터의 시작, 종료 응답을 해줌, 데이터를 못 받은 부분에도 응답을 해주어서 데이터를 완성 시킴, 서로 싱크를 맞춤
a태그, form 태그의 페이지가 완전히 다른 html 화면으로 바뀌는 것을 동기통신이라고 한다.
데이터를 주고받을 때 시작과 종료를 정하고 양 쪽이 이를 맞춰서 통신하는 방식, 웹에서는 페이지가 변경되는 방식
(<a> <form> 태그, location.href 등을 사용)
2. 비동기 통신(Asynchronus)
반복적으로 계속 처리하는 데이터가 중간에 사라져도 없는 부분 그대로 사용, 싱크를 맞추지 않음
페이지는 그대로인데 일정 영역의 데이터 내용이 바뀌는 부분이 비동기 통신 부분이다. 예) 포털사이트의 뉴스, 리액트
시작과 종료를 따로 정하지 않고 통신하는 방식(대표적 서비스 - 이메일 등)
웹에서는 페이지를 변경하지 않고 안(특정요소)의 내용(데이터)만 바뀌는 방식(RESTFul 방식)
REST(REpresentational State Tranfer)ful 방식 비동기통신방법
url(uri)를 통해 자원(데이터)을 명시하고 method(get, post)를 사용하여 해당 자원을 처리하는 방식
웹에서의 데이터 전송 방식(methode) / 객체 안의 함수와 명칭은 같으나 여기서는 방식
1) get : url에 데이터가 포함되는 방식(주소칸에 데이터 노출)
비밀번호, 아이디, 개인정보의 경우 데이터의 양이 많을 때는 사용하지 않는 것이 좋음, 기술적으로는 문제 되지 않으나 법적으로 문제가 될 수 있음.
2) post : 요청 객체에 데이터가 포함되는 방식
노출되지 않아야 하는 데이터나 데이터의 양이 많은 경우 사용
jQurey의 AJAX(Asynchronus Javascript And Xml)
xml 데이터를 전송할 때 사용하는 문서 양식, html 안에서 사용, 처리가 오래 걸리고 양이 많다. 무겁다
HTTP 프로토콜 내에서 비동기 처리를 위한 자바스크립트 jQuery 라이브러리
원래는 데이터 전송에 xml을 사용했으나(무겁고 처리에 시간이 오래 걸리는 등의 문제로) 현재 JSON을 사용.
+ 원래 자바스크립트에서 제공하는 비동기 통신용 객체
- XMLHttpRequest
문법)
$.ajax({전송용 객체});
전송용 객체의 구성(옵션)
$.ajax({
url : "전송할 서버의 주소",
type : "post", // 기본값은 get
data : "보낼 데이터(json 형식)", 데이터를 받기만 할 경우 생략가능
dataType : "json",
success : function(result_data//변수 이름) { // 전송이 성공했을 경우의 처리 명령어들
},
error : function(error){ //전송이 실패했을 경우의 처리 명령어들
}
});
임시데이터를 만들어 주는 사이트
JSONPlaceholder - Free Fake REST API
{JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month.
jsonplaceholder.typicode.com
json 가지고 와서 테이블로 표현하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax 테스트</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<script>
$(function () {
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts",
dataType: "json",
success: function (data) {
console.log(data[0]);
for(let i = 0; i < data.length; i++){
let tr_elem = `<tr>
<td>${data[i].userId}</td>
<td>${data[i].id}</td>
<td>${data[i].title}</td>
<td>${data[i].body}</td>
</tr>`;
$("#result").append(tr_elem);
}
},
error: function (error) {
console.log(error);
}
});
});
</script>
</head>
<body>
<table id="result">
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>body</th>
</tr>
</table>
</body>
</html>
'공부기록 > JavaScript' 카테고리의 다른 글
| 3월 21일 (2) JavaScript - jQurey 요소 추가, 속성값 가져오기/ 변경하기 (0) | 2023.03.21 |
|---|---|
| 3월 21일 (1) JavaScript - jQurey 선택자(기본, 조합, 관계) (0) | 2023.03.21 |
| 3월 20일 (2) JavaScript - jQuery event, effect (0) | 2023.03.20 |
| 3월 20일 (1) JavaScript - 예제, jQuery (0) | 2023.03.20 |
| 3월 17일 (2) JavaScript - locatoin, history (0) | 2023.03.17 |