javascript
- ajax 기술
- XmlHttpRequest -> 원격에 데이터를 요청할 수 있다
format
text - responseText
xml - responseXML크로스 도메인(CORS)
프록시 : 크로스도메인을 허용하지 않은 사이트를 강제로 허용하게 하는 법
jsp + jstl / servlet 사용
프록시를 사용해 우편번호 출력
zipcode.jsp -> strDong이름 -> zipcode.xml
<addresses>
<address>
<zipcode>
...
</bunji>
</address>
...
</addresses>
zipcode_json.jsp
[
{
"zipcode":"...",
...
"bunji":"..."
}
...
] xml방식
json방식
jQuery(https://jquery.com/)
: dom-html javascript lib
- jquery.com : core
- desktop : jquery ui
- mobile : jquery demo
jquery -> html 접근
selector < = css 과 비슷
$('selector').처리할 내용
css(css효과)
css('color','red') - 글자색 변경
css('background', 'red') - 배경색 변경
JQuery 사용법
작성위치
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript">
// javaxcript
// jquery 시작
// $ - jQuery로 해석
$(document).ready(function() {
console.log('Hello jQuery 1');
});
$(document).ready(function() {
console.log('Hello jQuery 2');
});
</script>
</head>
<body>
Hello jQuery
<script type="text/javascript">
$(document).ready(function() {
console.log('Hello jQuery 3');
});
</script>
</body>
</html>jQuery 버전
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 개발버전 -->
<!-- <script type="text/javascript" src="./js/jquery-3.7.0.js"></script> -->
<!-- 서비스버전 -->
<!--<script type="text/javascript" src="./js/jquery-3.7.0.min.js"></script> -->
<!-- CDN버전 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
// $ - jQuery로 해석
$(document).ready(function() {
console.log('Hello jQuery 1');
});
</script>
</head>
<body>
Hello jQuery
</body>
</html>jQuery 출력 방법
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- CDN버전 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
// window.jquery => jquery => $ - jQuery로 해석
$(document).ready(function() {
console.log('Hello jQuery 1');
});
jQuery(document).ready(function() {
console.log('Hello jQuery 2');
});
$(function() {
console.log('Hello jQuery 3');
});
$(() => {
console.log('Hello jQuery 4');
});
</script>
</head>
<body>
Hello jQuery
</body>
</html>CSS(글자 색)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('*').css('color', 'blue');
// 객체형태
$('*').css({
color: 'green'
});
});
</script>
</head>
<body>
<h2>header-1</h2>
<h3>header-2</h3>
<h2>header-3</h2>
<h3>header-4</h3>
</body>
</html>태그로 CSS표현
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h2').css('color', 'blue');
$('h3').css('color', 'pink');
$('h'+'3').css('color', 'pink');
const selector = 'h3';
const val = 'grey';
$(selector).css('color', val);
// 태그연결
$('h2, h3').css('color', 'margenta');
});
</script>
</head>
<body>
<h2>header-1</h2>
<h3>header-2</h3>
<h2>header-3</h2>
<h3>header-4</h3>
</body>
</html>아이디 CSS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 아이디
$('#i1, #i3').css('color', 'blue');
});
</script>
</head>
<body>
<h2 id="i1">header-1</h2>
<h3 id="i2">header-2</h3>
<h2 id="i3">header-3</h2>
<h3 id="i4">header-4</h3>
</body>
</html>클래스 CSS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 클래스
// 태그 연결
$('.c1, .c3').css('color', 'green');
//header-3만 blue 처리
$('h2.c3').css('color', 'green');
//header-2만 green 처리
$('.c1.c2').css('color', 'green');
});
</script>
</head>
<body>
<h2 class="c1">header-1</h2>
<h3 class="c1 c2">header-2</h3>
<h2 class="c3">header-3</h2>
<h3 class="c4">header-4</h3>
</body>
</html>자손과 후손
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//자손('>') 후손(' ')
// 요소 창을 확인해서 비교할 것
// 자손만 blue처리하지만 후손은 자손안에 포함되어있기 때문에 같이 blue로 출력된다.
$('div > *').css('color', 'blue');
// 후손도 blue처리함
$('div *').css('color', 'blue');
});
</script>
</head>
<body>
<div>
<ul>
<li>사과</li>
<li>수박</li>
<li>딸기</li>
</ul>
<ul>
<li>사과</li>
<li>수박</li>
<li>딸기</li>
</ul>
</div>
</body>
</html>속성값
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//속성표현 (^=, *= ...)
// type이 text인 속성을 yellow 처리
$('input[type="text"]').css('background-color', 'yellow');
// data가 text2인 속성을 green 처리
$('input[data="text2"]').css('background-color', 'green');
// data에 te이 포함되면 green처리 (*=도 마찬가지)
//$('input[data^="te"]').css('background-color', 'green');
//css val
// value값을 넣는다.
$('input[data="text1"]').val('hi jq');
});
</script>
</head>
<body>
<input type="text" data="text1"><br><br>
<input type="password" data="text2"><br><br>
</body>
</html>버튼을 통해 색상 변경
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('table').css('width', '500');
// 색상 변경
document.getElementById('btn1').onclick = function() {
$('tr:odd').css('background-color', 'blue');
$('tr:even').css('background-color', 'skyblue');
$('tr:first').css('background-color', 'pink');
// 수식화
$('tr:nth-child(2n)').css('background-color', 'blue');
$('tr:nth-child(2n+1)').css('background-color', 'skyblue');
$('tr:eq(0)').css('background-color', 'pink'); // 첫번째값
};
// 초기화 설정
document.getElementById('btn2').onclick = function() {
$('tr:odd').css('background-color', 'white');
$('tr:even').css('background-color', 'white');
};
});
</script>
</head>
<body>
<button id="btn1">색변경</button>
<button id="btn2">초기화</button>
<table>
<tr>
<th>이름</th>
<th>혈액형</th>
<th>지역</th>
</tr>
<tr>
<th>tester</th>
<th>A</th>
<th>서울</th>
</tr>
<tr>
<th>tester</th>
<th>A</th>
<th>서울</th>
</tr>
<tr>
<th>tester</th>
<th>A</th>
<th>서울</th>
</tr>
<tr>
<th>tester</th>
<th>A</th>
<th>서울</th>
</tr>
<tr>
<th>tester</th>
<th>A</th>
<th>서울</th>
</tr>
</table>
</body>
</html>메서드화
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 메서드화
//eq
//first / last
//$('tr').eq(0).css('color', 'blue');
$('tr').first().css('color', 'blue');
$('tr').last().css('color', 'blue');
$('tr').eq(-2).css('color', 'blue');
});
</script>
</head>
<body>
<button id="btn1">색변경</button>
<button id="btn2">초기화</button>
<table>
<tr>
<th>이름</th>
<th>혈액형</th>
<th>지역</th>
</tr>
<tr>
<th>tester</th>
<th>A</th>
<th>서울</th>
</tr>
<tr>
<th>tester</th>
<th>A</th>
<th>서울</th>
</tr>
<tr>
<th>tester</th>
<th>A</th>
<th>서울</th>
</tr>
<tr>
<th>tester</th>
<th>A</th>
<th>서울</th>
</tr>
<tr>
<th>tester</th>
<th>A</th>
<th>서울</th>
</tr>
</table>
</body>
</html>parent() / children() prev() / next()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// parent() / children()
// prev() / next()
// sibling()
//$('#l1').css('color', 'yellow';)
//$('#l1').parent.css('color', 'red';)
$('#d1').children().css('color', 'blue');
$('#d1').children('ol').css('color', 'green');
$('#d1').prev().css('color', 'pink');
$('#d1').next().css('color', 'margenta');
});
</script>
</head>
<body>
<div>
<div>내용1</div>
<div>내용2</div>
<div id="d1">
<ul>
<li id="l1">사과</li>
<li>수박</li>
<li>딸기</li>
</ul>
<ul>
<li id="l2">사과</li>
<li>수박</li>
<li>딸기</li>
</ul>
</div>
<div>내용3</div>
<div>내용4</div>
<div id="d1">
</div>
</div>
</body>
</html>배열(console.log)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
const array = [
{name: 'daum', link:'https://www.daum.net'},
{name: 'naver', link:'https://www.naver.com'},
{name: 'google', link:'https://www.google.com'}
];
//console.log(array);
for(let i=0; i<array.length; i++) {
console.log(array[i].name, '/', array[i].link);
}
//for in
//forEach
array.forEach(function(item) {
console.log(item.name, '/', item.link);
});
$.each(array, function(index, item) {
//console.log('array');
console.log(index, '/', item.name, '/', item.link);
});
});
</script>
</head>
<body>
</body>
</html>배열(document)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
const array = [
{name: 'daum', link:'https://www.daum.net'},
{name: 'naver', link:'https://www.naver.com'},
{name: 'google', link:'https://www.google.com'}
];
let output = '';
$.each(array, function(index, item) {
output += '<a href="' + item.link + '">';
output += '<div>' + item.name + '</div>'
output += '</a>';
});
document.body.innerHTML = output;
});
</script>
</head>
<body>
</body>
</html>객체로 출력
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
const array = [
{name: 'daum', link:'https://www.daum.net'},
{name: 'naver', link:'https://www.naver.com'},
{name: 'google', link:'https://www.google.com'}
];
let output = '';
$.each(array, function(index, item) {
output += '<a href="' + item.link + '">';
output += '<div>' + item.name + '</div>'
output += '</a>';
});
document.body.innerHTML = output;
});
</script>
</head>
<body>
</body>
</html>index/item
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h1').each(function(index, item) {
console.log(index, '/', item);
console.log(item.innerHTML);
// 값을 새로 바꿈
this.innerHTML = 'NEW Text : ' + index;
});
});
</script>
</head>
<body>
<h1>H1</h1>
<h1>H2</h1>
<h1>H3</h1>
<h1>H4</h1>
<h1>H5</h1>
</body>
</html>데이터
- csv : 문자열
- xml : 문자열
- json : 문자열 / 라이브러리
web 2.0
jsp(model2) : 데이터 생성
->
ajax
->
javascript : parsing
web 3.0
blockchain
