1. https://luckyguystory.tistory.com/205 를 푸시오.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(function () {
$.ajax({
type : "get",
url : "http://sample.bmaster.kro.kr/contacts?pageno=3&pagesize=10",
success : function (data) {
console.log("complete communication");
$(data.contacts).each(function (index, member) {
console.log(member);
let copy = $("#table").clone();
$(copy).each(function(x) {
$(copy[x]).html("<td>"+member.no+"</td>"
+"<td>"+member.name+"</td>"
+"<td>"+member.tel+"</td>"
+"<td>"+member.address+"</td>"
+"<td><img src='"+member.photo+"'</img></td>"
+"<td><button class='deleteBtn'>삭제</button></td>")
copy.appendTo("#border")
})
});
let tableArr = $("#table");
$('.deleteBtn').click(function () {
$(this.parentNode.parentNode).remove();
})
}
});
});
</script>
</head>
<body>
<table id="border" border="1">
<tr id="table">
<td>no</td>
<td>name</td>
<td>tel</td>
<td>address</td>
<td>photo</td>
<td></td>
</tr>
</table>
</body>
</html>2.json 이란?
JSON(JavaScript Object Notation)은 속성-값 쌍(attribute–value pairs), 배열 자료형(array data types) 또는 기타 모든 시리얼화 가능한 값(serializable value) 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다. 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다. 자료의 종류에 큰 제한은 없으며, 특히 컴퓨터 프로그램의 변수값을 표현하는 데 적합하다.
본래는 자바스크립트 언어로부터 파생되어 자바스크립트의 구문 형식을 따르지만 언어 독립형 데이터 포맷이다. 즉, 프로그래밍 언어나 플랫폼에 독립적이므로, 구문 분석 및 JSON 데이터 생성을 위한 코드는 C, C++, C#, 자바, 자바스크립트, 펄, 파이썬 등 수많은 프로그래밍 언어에서 쉽게 이용할 수 있다.
JSON 포맷은 본래 더글라스 크록포드가 규정하였다. RFC 7159와 ECMA-404 그리고 ISO/IEC 21778:2017 표준에 의해 기술되고 있다. KS 부합화 표준은 아직 제정되지 않았으며, TTA 협회 표준명은 TTAE.OT-10.0394이다. ECMA 표준과 ISO/IEC 표준은 문법만 정의할 정도로 최소한으로만 정의되어 있는 반면 RFC는 시맨틱, 보안적 고려 사항을 일부 제공 한다. JSON의 공식 인터넷 미디어 타입은 application/json이며, JSON의 파일 확장자는 .json이다.
3. ajax 에 대하여 설명하시오.
Ajax(Asynchronous JavaScript and XML, 에이잭스)는 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.
- 표현 정보를 위한 HTML (또는 XHTML) 과 CSS
- 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트
- 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest (Ajax 애플리케이션은 XML/XSLT 대신 미리 정의된 HTML이나 일반 텍스트, JSON, JSON-RPC를 이용할 수 있다).
DHTML이나 LAMP와 같이 Ajax는 자체가 하나의 특정한 기술을 말하는 것이 아니며, 함께 사용하는 기술의 묶음을 지칭하는 용어이다. 실제로 AFLAC와 같이 사실상 Ajax에 바탕을 두고 있는 유사/복합 기술들이 속속 나타나고 있다.
Ajax 애플리케이션은 실행을 위한 플랫폼으로 위에서 열거한 기술들을 지원하는 웹 브라우저를 이용한다. 이것을 지원하는 브라우저로는 모질라 파이어폭스, 인터넷 익스플로러, 오페라, 사파리, 구글 크롬 등이 있다. 단, 오페라는 현재 XSL 포맷팅 객체와 XSLT 변환을 지원하지 않는다.
4. 클릭시 아래가 복사 되도록 하시오
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#eDiv').click(function () {
console.log("click event!");
let copy = $(this).clone(this);
copy.appendTo($('body'));
});
$("#eDiv").mousedown(function () {
console.log("mousedown event!");
});
$("#eDiv").mouseup(function () {
console.log("mouseup event!");
});
$("#eDiv").mousemove(function () {
console.log("mousemove event!");
});
$("#eDiv").mouseover(function () {
console.log("mouseover event!");
});
$("#eDiv").mouseout(function () {
console.log("mouseout event!");
});
$("#eDiv").mouseenter(function () {
console.log("mouseenter event!");
});
$("#eDiv").mouseleave(function () {
console.log("mouseleave event!");
});
})
</script>
<style>
#eDiv {
width: 100px;
height: 100px;
background: #ff0000;
line-height: 100px;
text-align: center;
color: #ffffff;
font-weight: bolder;
margin: 20px;
display: inline-block;
}
</style>
</head>
<body>
<div id="eDiv">jQuery Event</div>
</body>
</html>