Crescendo Code

5월 15일 (월) - [ AJAX 추가예제 / JQuery 예제 ] 본문

KIC 백엔드 수업

5월 15일 (월) - [ AJAX 추가예제 / JQuery 예제 ]

Crecok 2023. 5. 15. 17:47
반응형

JavaScript

AJAX 기술

XmlHttpRequest : 원격에 데이터를 요청할 수 있다.

  - format

 

const request = new XMLHttpRequest();

 

request.onreadystatechange = function() {

   if ( request.readyState == 4 ) {

      if ( request.status == 200 ) {

         alert( '정상 );

         ...

         responseText

         responseXML

      } else {

         alert( '페이지 처리 에러' );

      }

   }

};

 

데이터 

- CSV 

  - 문자열

- XML

  - 문자열

- JSON

  - 문자열 

  - 라이브러리

 

1. JSP (Model2) - 데이터 생성

2. Javascript - parsing

- 1과 2 사이에 AJAX 기술 적용

 

Web 3.0

Blockchain

 

 

AJAX 기능을 이용해 우편번호 검색기 만들기

 

▶ 다이나믹 프로젝트 AjaxZipcodeEx01 생성 후 디렉터리 구조 만들기

 

 

jQuery 라이브러리

- HTML DOM에 대한 접근을 편리하게 하기 위한 Javascript Library

 

 

사이트 : https://jquery.com

 

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

- Desktop용 JQuery UI

- Mobile용 JQuery Mobile (이 수업에선 다루지 않음)

 

▶ 두 파일 다운로드 ( 우클릭 - 다른 이름으로 저장 )

 

 

 

▶ 다이나믹 프로젝트 JQueryEx01 생성

▶ webapp 폴더에 js 폴더를 만들고 위에 다운받은 두 개의 js 파일 넣기

 

▶ webapp 폴더에 jquery01.jsp 파일 생성 후 코드 작성

<%@ 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">
	// javascript
	// 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 CDN

 

▶ 위 다운로드 사이트에서 아래 링크 클릭

 

 

 

▶ 아래 코드 복사 후 그 아래 코드 예제에 사용

 

 

 

▶ webapp 폴더에 jquery02.jsp 파일 생성 후 코드 작성

<%@ 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" src="./js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
	$( document ).ready( function() { 
		console.log( 'Hello jQuery 1' );
	});
</script>
</head>
<body>
Hello jQuery
</body>
</html>

 

 

jQuery 의 여러가지 사용법

 

 

▶ jquery03.jsp 파일 생성 및 코드 작성

<%@ 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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">

	// window.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>

개발자도구 결과 확인

 

 

jQuery - CSS

 

 

- jQuery → HTML

- jQuery 선택자는 CSS는 Selector 문법을 그대로 따른다.

 

$( 'selector' ).처리할 내용 ..

 

css( css 효과 )

css( 'color', 'red' ) : 글자색 (전경색)

css( 'backgroundColor', 'red' ) : 배경색

 

 

jQuery - CSS 적용 예제 (1)

 

 

▶ jquery04 생성 및 코드 작성

<%@ 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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
	$( document ).ready( function() { 
		// '*' = 전체
		$( '*' ).css( 'color', 'red' );
	});
</script>
</head>
<body>

<h2>Header-1</h2>
<h3>Header-2</h3>
<h2>Header-3</h2>
<h3>Header-4</h3>

</body>
</html>

출력 화면과 개발자도구 → 요소 (Elements) 확인

 

 

▶ 위 코드의 script 부분 변경을 아래 코드로 변경

<script type="text/javascript">
	$( document ).ready( function() { 
		$( '*' ).css({
			color : 'blue'
		});
	});
</script>

출력 화면과 개발자도구 → 요소 (Elements) 확인

 

 

jQuery - CSS 적용 예제 (2)

 

 

▶ jquery05.jsp 파일 생성 및 코드 작성

<%@ 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 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', 'red' );
		// $( 'h3' ).css( 'color', 'blue' );
		// $( 'h' + '3' ).css( 'color', 'blue' );
		
		// const selector = 'h3';
		// const val = 'green';
		// $( selector ).css( 'color', val );
		
		// , : 태그 연결
		$( 'h2, h3' ).css( 'color', 'magenta' );
	});
	
</script>
</head>
<body>

<h2>Header-1</h2>
<h3>Header-2</h3>
<h2>Header-3</h2>
<h3>Header-4</h3>

</body>
</html>

 

 

jQuery - CSS 적용 예제 (3)

 

 

▶ jquery06.jsp 파일 생성 및 코드 작성

- 아이디 선택자 예제

<%@ 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 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', 'red' );
	});
	
</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>

 

 

 

 

jQuery - CSS 적용 예제 (4)

 

 

▶ jquery07.jsp 파일 생성 및 코드 작성

- 클래스 선택자 예제

<%@ 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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">

	$( document ).ready( function() { 
		// $( '.c1' ).css( 'color', 'blue' );
		
		// $( 'h2.c1' ).css( 'color', 'blue' );
		
		$( '.c1.c2' ).css( 'color', 'blue' );
	});
	
</script>
</head>
<body>

<h2 class="c1">Header-1</h2>
<h3 class="c1 c2">Header-2</h3>
<h2 class="c2">Header-3</h2>
<h3 class="c2">Header-4</h3>

</body>
</html>

 

 

jQuery - CSS 적용 예제 (5)

 

 

▶ jquery08.jsp 파일 생성 및 코드 작성

- 자손과 후손 선택자 예제

<%@ 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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">

	$( document ).ready( function() { 
		// 자손( '>' )과 후손( ' ' )
		// $( 'div > *' ).css( 'color', 'red' );
		$( 'div *' ).css( 'color', 'red' );
	});
	
</script>
</head>
<body>

<div>
	<ul>
		<li>사과</li>
		<li>수박</li>
		<li>딸기</li>
	</ul>
	<ul>
		<li>사과</li>
		<li>수박</li>
		<li>딸기</li>
	</ul>
</div>

</body>
</html>

 

 

jQuery - CSS 적용 예제 (6)

 

 

▶ jquery09.jsp 파일 생성 및 코드 작성

- 속성 선택자 예제

<%@ 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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">

	$( document ).ready( function() { 
		// 속성 ( ^=, *=, ... )
		$( 'input[type="text"]' ).css( 'background-color', 'yellow' );
		$( 'input[data="text2"]' ).css( 'background-color', 'blue' );
	});
	
</script>
</head>
<body>

<input type="text" data="text1"><br /><br />
<input type="password" data="text2"><br /><br />

</body>
</html>

- 존재하지 않는 임의의 속성(코드에서는 data)을 부여해도 속성처럼 가져올 수 있다.

 

 

▶ script 부분 코드 변경

<script type="text/javascript">

	$( document ).ready( function() { 
		// 속성 ( ^=, *=, ... )
		$( 'input[type="text"]' ).css( 'background-color', 'yellow' );
		// $( 'input[data="text2"]' ).css( 'background-color', 'blue' );
		// $( 'input[data^="te"]' ).css( 'background-color', 'blue' );
		// css, val
		$( 'input[data="text1"]' ).val( 'Hello jQuery' );
		
	});
	
</script>

 

jQuery - CSS 적용 예제 (7)

 

 

▶ jquery10.jsp 파일 생성 및 코드 작성

- 콜론 ( : ) 예제

<%@ 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 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', '800' );
		
		document.getElementById( 'btn1' ).onclick = function() {
			$( 'tr:odd' ).css( 'background-color', 'blue' );
			$( 'tr:even' ).css( 'background-color', 'green' );
			
			$( 'tr:first' ).css( 'background-color', 'red' );
		};
		
		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>

 

▶ 코드 수정

<%@ 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 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', '800' );
		
		document.getElementById( 'btn1' ).onclick = function() {
			// $( 'tr:odd' ).css( 'background-color', 'blue' );
			// $( 'tr:even' ).css( 'background-color', 'green' );
			
			// $( 'tr:first' ).css( 'background-color', 'red' );
			$( 'tr:nth-child(2n)' ).css( 'background-color', 'blue' );
			$( 'tr:nth-child(2n+1)' ).css( 'background-color', 'yellow' );
			
			$( 'tr:eq(0)').css( 'background-color', 'red' );
		};
		
		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>

 

 

 

jQuery - CSS 적용 예제 (8)

 

 

▶ jquery11.jsp 파일 생성 및 코드 작성

- eq / first / last 예제

<%@ 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 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( -1 ).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>

 

 

JQuery - CSS 적용 예제 8 (  )

 

 

▶ jquery12.jsp 파일 생성 및 코드 작성

<%@ 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 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', 'red' );
		// $( '#l1' ).parent().css( 'color', 'blue' );
		
		$( '#d1' ).children().css( 'color', 'red' );
		$( '#d1' ).children( 'ol' ).css( 'color', 'blue' );
		
		$( '#d1' ).prev().css( 'color', 'green' );
		$( '#d1' ).next().css( 'color', 'green' );
		
	});
	
</script>
</head>
<body>

<div>
	<div>내용1</div>
	<div>내용2</div>
	<div id="d1">
		<ul>
			<li id="l1">사과</li>
			<li>수박</li>
			<li>딸기</li>
		</ul>
		<ol>
			<li id="l2">사과</li>
			<li>수박</li>
			<li>딸기</li>
		</ol>
	</div>
	<div>내용3</div>
	<div>내용4</div>
</div>

</body>
</html>

 

<%@ 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 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 : 'http://www.daum.net' },
			{ name : 'naver', link : 'http://www.naver.com' },
			{ name : 'google', link : 'http://www.google.com' },
		];
		
		console.log( array );
		
		// for 문을 통해 데이터 가져오기
		for( let i=0; i<array.length; i++ ) {
			console.log( array[i].name, ' / ', array[i].link );
		}
		
		// for in 문을 통해 데이터 가져오기
		// for( key in array ) {
			// console.log( )
		// }
		
		// 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>

 

 

<%@ 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 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 : 'http://www.daum.net' },
			{ name : 'naver', link : 'http://www.naver.com' },
			{ name : 'google', link : 'http://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>

 

 

<%@ 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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">

	$( document ).ready( function() {
		const obj = { name : 'daum', link : 'http://www.daum.net' };

		$.each( obj, function( key, value ) {
			console.log( key, '/', value );
		});
	});
	
</script>
</head>
<body>

</body>
</html>

 

<%@ 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 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 );
			console.log( this.innerHTML );
			
			this.innerHTML = 'New Text : ' + index;
		});
	});
	
</script>
</head>
<body>

<h1>Header-1</h1>
<h1>Header-2</h1>
<h1>Header-3</h1>
<h1>Header-4</h1>
<h1>Header-5</h1>

</body>
</html>
반응형
저작자표시 비영리 변경금지 (새창열림)

'KIC 백엔드 수업' 카테고리의 다른 글

5월 17일 (수) - [ jQuery UI / 구구단 / 우편번호 검색기 ]  (0) 2023.05.17
5월 16일 (화) - [ JQuery 구문 / 시작단 ~ 끝단 구구단 / 우편번호 검색기 ]  (1) 2023.05.16
5월 12일 (금) - []  (0) 2023.05.12
5월 11일 (목) - [ myBatis 어노테이션 기법 / 우편번호 검색기 / Simple 게시판 검색기능 구현 ]  (1) 2023.05.12
5월 10일 (수) - [ myBatis 프레임워크를 통한 우편번호 검색기 / Simple 게시판 구현 ]  (1) 2023.05.10
'KIC 백엔드 수업' Related Articles more
Comments