지구정복

[JavaScript-jQuery, Ajax] 1/14 | jQuery에서 Ajax사용, jQuery UI 사용하기(기본사용, button, event생성, 버튼icon추가, checkbox, radioButton, progressbar, slider, spinner, selectmenu, autocomplete, accordion, 구구단, 우편번호검색.. 본문

데이터 엔지니어링 정복/HTML-CSS-JavaScript-Spring-Node.js

[JavaScript-jQuery, Ajax] 1/14 | jQuery에서 Ajax사용, jQuery UI 사용하기(기본사용, button, event생성, 버튼icon추가, checkbox, radioButton, progressbar, slider, spinner, selectmenu, autocomplete, accordion, 구구단, 우편번호검색..

eeaarrtthh 2021. 1. 14. 21:38
728x90
반응형

복습 및 배울내용

jQuery
	- Javascript Dom Framework(Library)
	- selector
	- 메서드
	- 이벤트
	www.jquery.com 에 가면 여러 api들이 있다. - api Documentation
	
	* jQuery를 공부해야하는 이유
	- 전자정부프레임워크 : 전자정부를 만들기 위한 프레임워크(공공기관에선 모두 이를 사용)
	오픈소스들을 합친 것
	전자정부에서 DOM을 다루는 표준을 jQuery로 설정해놓았다.
	https://www.egovframe.go.kr - 개발환경가이드 - 3.9가이드

	- jQuery에서 ajax 사용법
	$.ajax({
		url : 웹페이지주소			*
		type : 전송방식(get/post)		*
		data : 요청데이터
		async : 동기화, 비동기화 여부(디폴트는 비동기화이기 때문에 생략)
		dataType : 데이터 타입이 리턴형식
		success : 정상수행일 때( 4, 200 )	*
		error : 비정상일 때			*
	})
	위 정보들을 객체화해서 ajax에 담아주면 된다.
	* 있는 것들은 필수정보

 

1. jQuery에서 AJAX사용하기

더보기

1. 기본 사용 예제

새로운 다이나믹웹프로젝트 - 웹콘텐츠폴더에 js 폴더와 data폴더 만들기 - js폴더에 jQuery라이브러리 2개 넣기

- data폴더에 아래 xml1.jsp 데이터 넣기 - 웹콘텐츠폴더에 ex01.jsp만들고 코딩시작

-xml1.jsp

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>
<books>
	<book>
		<name>모던 웰 디자인을 위한 HTML5 + CSS3 입문</name>
		<publisher> 한빛미디어</publisher>
		<author>윤인성</author>
		<price>30000원</price>
	</book>
	<book>
		<name>모던 웹을 위한 JavaScript + jQuery 입문</name>
		<publisher>한빛미디어</publisher>
		<author>윤인성</author>
		<price>32000원</price>
	</book>
	<book>
		<name>모던 웹을 위한 node.j 5 프로그래밍</name>
		<publisher> 한빛미디어</publisher>
		<author>윤인성</author>
		<price>22000원</price>
	</book>
	<book>
		<name>모던 웹을 위한 HTML5 프로그래밍</name>
		<publisher> 한빛미디어</publisher>
		<author>윤인성</author>
		<price>30000원</price>
	</book>
</books>

 -ex01.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.5.1/jquery.min.js"></script>

<script type="text/javascript">
	jQuery( document ).ready( function () {
		$( '#btn' ).on('click', () => {
			$.ajax({
				url: './data/xml1.jsp',
				type: 'get',
				dataType: 'text',
				success: function( data ) {
					console.log( '성공' );
					console.log( typeof data );
					console.log( data );
				},
				error: function() {
					console.log( '실패' );
				}
			})
		})
	});

</script>

</head>
<body>

<button id="btn">요청</button>
<br><hr><br>
<div id="result"></div>

</body>
</html>

이번에는 xml1.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.5.1/jquery.min.js"></script>

<script type="text/javascript">
	jQuery( document ).ready( function () {
		$( '#btn' ).on('click', () => {
			$.ajax({
				url: './data/xml1.jsp',
				type: 'get',
				dataType: 'text',
				success: function( data ) {
					$(data).find( 'book' ).each( function() {
						console.log( $(this).find('name').text() );
						console.log( $(this).find('publisher').text() );
						console.log( $(this).find('author').text() );
						console.log( $(this).find('price').text() );
					})
					
					
				},
				error: function() {
					console.log( '실패' );
				}
			})
		})
	});

</script>

</head>
<body>

<button id="btn">요청</button>
<br><hr><br>
<div id="result"></div>

</body>
</html>

ajax에 데이터쿼리열을 추가해서 데이터를 넘겨보자. 

이를 위해 jdbc드라이브와 context.xml을 추가하고 xml2.jsp를 아래와 같이 작성한다.

-xml2.jsp

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@page import="javax.naming.NamingException"%>
<%@ page import="javax.naming.Context" %>
<%@ page import="javax.naming.InitialContext" %>
<%@ page import="javax.sql.DataSource" %>

<%@page import="java.sql.Connection"%>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.SQLException" %>

<%
	String strName = request.getParameter( "name" );

	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	StringBuffer result = new StringBuffer();
	
	try {
		Context initCtx = new InitialContext();
		Context envCtx = (Context)initCtx.lookup("java:comp/env");
		DataSource dataSource = (DataSource)envCtx.lookup("jdbc/mariadb2");
		
		conn = dataSource.getConnection();
		
		String sql = "select name, publisher, author, price from books where name like ?";
		pstmt = conn.prepareStatement(sql);
		pstmt.setString(1, "%"+strName+"%");
		rs = pstmt.executeQuery();
		
		result.append( "<books>" );
		while( rs.next() ){
			result.append( "<book>" );
			result.append( "<name>"+rs.getString("name")+"</name>" );
			result.append( "<publisher>"+rs.getString("publisher")+"</publisher>" );
			result.append( "<author>"+rs.getString("author")+"</author>" );
			result.append( "<price>"+rs.getString("price")+"</price>" );
			result.append( "</book>" );
		}
		result.append( "</books>" );
		
	} catch(NamingException e) {
		System.out.println( "[에러] : " + e.getMessage() );
	} catch(SQLException e) {
		System.out.println( "[에러] : " + e.getMessage() );
	} finally {
		if ( rs != null ) rs.close();
		if ( pstmt != null ) pstmt.close();
		if ( conn != null ) conn.close();
	}
	
	out.println( result );
%>

-ex02.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.5.1/jquery.min.js"></script>

<script type="text/javascript">
	jQuery( document ).ready( function () {
		$( '#btn' ).on('click', () => {
			$.ajax({
				url: './data/xml2.jsp',
				data: {
					'name': 'CSS'
				},
				type: 'get',
				dataType: 'text',
				success: function( data ) {
					$(data).find( 'book' ).each( function() {
						console.log( $(this).find('name').text() );
						console.log( $(this).find('publisher').text() );
						console.log( $(this).find('author').text() );
						console.log( $(this).find('price').text() );
					})
					
					
				},
				error: function() {
					console.log( '실패' );
				}
			})
		})
	});

</script>

</head>
<body>

<button id="btn">요청</button>
<br><hr><br>
<div id="result"></div>

</body>
</html>

 

 

2. jQuery로 UI 만들기

더보기

 1. 기본 사용법

jqueryui.com/

 

jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQue

jqueryui.com

 에서 아래 두가지 파일을 다운로드 받는다.

 그리고 새로운 다이나믹웹프로젝트를 만들고 다운로드파일 2개를 압축풀고 아래처럼 js 폴더 안에 넣는다.

그리고 js폴더에 기존 jQuery 라이브러리 2개도 추가해준다.

 그리고 css폴더를 새로 만들고 압축푼 파일중에서 jquery-ui-themes-1.12.1 - themes 안에 폴더모두를 css폴더 안에 넣어준다. 각 폴더별로 하나의 테마디자인이다.

버튼

 이제 실제로 jQuery UI를 사용해보자. 아래와 같이 코딩한다. 테마 디자인은 base로 사용해보자.

<%@ 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>

<link rel="stylesheet" href="./css/base/jquery-ui.css" />
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>

<script type="text/javascript">
	$(document).ready( function () {
		//btn2를 버튼으로 디자인하기
		$('#btn2').button();
	})
</script>

</head>
<body>

<button id="btn1">버튼1</button><br><br>
<button id="btn2">버튼2</button><br><br>

</body>
</html>

 이때 css폴더를 바꿔주면 아래와 같이 바뀐다.

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />

버튼을 표현하는 다른 태그들도 똑같이 적용시킬 수 있다. 그리고 버튼 아닌 태그들도 버튼디자인으로 만들 수 있다.

<%@ 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>

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>

<script type="text/javascript">
	$(document).ready( function () {
		//btn2를 버튼으로 디자인하기
		$('#btn2').button();
		$('input[type="button"]').button();
		$('input[type="submit"]').button();
		
		$('a').button();
		$('#btn3').button();
	})
</script>

</head>
<body>

<button id="btn1">버튼1</button><br><br>
<button id="btn2">버튼2</button><br><br>
<input type="button" value="버튼3"/><br><br>
<input type="submit" value="버튼4"/><br><br>

<a href="https://www.daum.net">다음 바로가기</a><br><br>
<div id="btn3">버튼5</div><br><br>

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

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body {font-size: 80% } /*버튼의 폰트사이즈 줄이기*/
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>

<script type="text/javascript">
	$(document).ready( function () {
		$('#btn1').button().on( 'click', function() {
			alert( '버튼 클릭' );
		});
	})
</script>

</head>
<body>

<div id="btn1">버튼1</div><br><br>

</body>
</html>

링크를 버튼으로 만들면 버튼의 이벤트 처리 이후에 a태그에 작성된 링크로 이동하는데 이때 a태그의 기능을 빼려면 아래와 같이 작성한다. 다음 바로가기를 누르면 경고창만 뜨고 다음으로 이동하지 않는다.

<%@ 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>

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body {font-size: 80% }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>

<script type="text/javascript">
	$(document).ready( function () {
		$('#btn1').button().on( 'click', function() {
			alert( '버튼 클릭' );
		});
		
		$('a').button().on( 'click', function( e ) {
			alert( '버튼 클릭' );
			e.preventDefault();	//a 태그의 전송기능 제거하기
		});
	})
</script>

</head>
<body>

<div id="btn1">버튼1</div><br><br>
<a href="https://www.daum.net">다음 바로가기</a><br><br>

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

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body {font-size: 80% }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>

<script type="text/javascript">
	$(document).ready( function () {
		$('#btn1').button().on( 'click', function() {
			alert( '버튼 클릭' );
		});
		
		$('a').button().on( 'click', function( e ) {
			alert( '버튼 클릭' );
			e.preventDefault();	//a 태그의 전송기능 제거하기
		});
		
		//e는 이벤트 객체이다.
		$('input[type="submit"]').button().on( 'click', function( e ) {
			alert( '버튼 클릭' );
			e.preventDefault();
		})
	})
</script>

</head>
<body>

<div id="btn1">버튼1</div><br><br>

<a href="https://www.daum.net">다음 바로가기</a><br><br>

<form action="test.jsp" method="get">
data : <input type="text" name="data"/>
<input type="submit" value="전송하기" />
</form>

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

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body {font-size: 80% }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>

<script type="text/javascript">
	$(document).ready( function () {
		$('#btn1').button({
			icon: 'ui-icon-gear',
			iconPosition: 'end'
		})
		$('#btn2').button()
	})
</script>

</head>
<body>

<div id="btn1">버튼1</div><br><br>
<div id="btn2">버튼2</div><br><br>

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

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body {font-size: 80% }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>

<script type="text/javascript">
	$(document).ready( function () {
		$('#btn1').button({
			icon: 'ui-icon-gear',
			iconPosition: 'end'
		})
		$('#btn2').button({
			icon: 'ui-icon-power',
			showLabel: false	//버튼의 텍스트값 지우고 아이콘만 보이게하기
		})
	})
</script>

</head>
<body>

<div id="btn1">버튼1</div><br><br>
<div id="btn2">버튼2</div><br><br>

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

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body {font-size: 80% }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>

<script type="text/javascript">
	$(document).ready( function () {
		$('input[type="checkbox"]').checkboxradio();
	})
</script>

</head>
<body>

<fieldset>
	<legend>상품 등급</legend>
	<label for="cb-1">1 Star</label>
	<input type="checkbox" id="cb-1"/>
	<label for="cb-2">2 Star</label>
	<input type="checkbox" id="cb-2"/>
	<label for="cb-3">3 Star</label>
	<input type="checkbox" id="cb-3"/>
	<label for="cb-4">4 Star</label>
	<input type="checkbox" id="cb-4"/>
</fieldset>

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

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body {font-size: 80% }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>

<script type="text/javascript">
	$(document).ready( function () {
		$('input[type="radio"]').checkboxradio();
	})
</script>

</head>
<body>

<fieldset>
	<legend>상품 등급</legend>
	<label for="cb-1">1 Star</label>
	<input type="radio" name="r1" id="cb-1"/>
	<label for="cb-2">2 Star</label>
	<input type="radio" name="r1" id="cb-2"/>
	<label for="cb-3">3 Star</label>
	<input type="radio" name="r1" id="cb-3"/>
	<label for="cb-4">4 Star</label>
	<input type="radio" name="r1" id="cb-4"/>
</fieldset>

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

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body {font-size: 80% }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>

<script type="text/javascript">
	$(document).ready( function () {
		$('input[type="radio"]').checkboxradio().on('click', function() {
			alert( 'click' );
		});
	})
</script>

</head>
<body>

<fieldset>
	<legend>상품 등급</legend>
	<label for="cb-1">1 Star</label>
	<input type="radio" name="r1" id="cb-1"/>
	<label for="cb-2">2 Star</label>
	<input type="radio" name="r1" id="cb-2"/>
	<label for="cb-3">3 Star</label>
	<input type="radio" name="r1" id="cb-3"/>
	<label for="cb-4">4 Star</label>
	<input type="radio" name="r1" id="cb-4"/>
</fieldset>

</body>
</html>

 

Progressbar

<%@ 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>

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body {font-size: 80% }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>

<script type="text/javascript">
	$(document).ready( function () {
		let data = 50;
		$('#progressbar').progressbar({
			value: data
		});
		
		$('#btn1').button().on('click', () => {
			console.log( data );
			data -= 5;
			//$('#progressbar').progressbar( 'value', data );
			$('#progressbar').progressbar({
				value: data
			});
		})
		$('#btn2').button().on('click', () => {
			console.log( data );
			data += 5;
			//$('#progressbar').progressbar( 'value', data );
			$('#progressbar').progressbar({
				value: data
			});
		})
	})
</script>

</head>
<body>

<div id="progressbar"></div>
<br><hr><br>
<div>
	<button id="btn1">감소</button>
	<button id="btn2">증가</button>
</div>

</body>
</html>

 

 Slider

<%@ 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>

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body {font-size: 80% }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>

<script type="text/javascript">
	$(document).ready( function () {
		$('#slider').slider({
			//orientation: 'vertical' //slider 수직으로 만들기
			value: 50, //기본값 설정
			min: 0,
			max: 100,
			step: 10, //증가치 설정
			//slider가 움직일 때 value값 가져오는 이벤트
			change: function( e, ui ) {
				console.log( 'change' );
				console.log( $(this).slider( 'value' ) );
				console.log( ui.value );
			}
		});
	})
</script>

</head>
<body>

<div id="slider"></div>

</body>
</html>

이벤트 주는 방법이 change말고 slide가 있다. 

<%@ 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>

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body {font-size: 80% }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>

<script type="text/javascript">
	$(document).ready( function () {
		$('#slider').slider({
			//orientation: 'vertical' //slider 수직으로 만들기
			value: 50, //기본값 설정
			min: 0,
			max: 100,
			/* 
			step: 10, //증가치 설정
			//slider가 움직일 때 value값 가져오는 이벤트
			change: function( e, ui ) {
				console.log( 'change' );
				console.log( $(this).slider( 'value' ) );
				console.log( ui.value );
			}
			 */
			 
			slide: function( e, ui ) {
				console.log( 'slide' );
			}
		});
	})
</script>

</head>
<body>

<div id="slider"></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>

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body {font-size: 80% }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>

<script type="text/javascript">
	$(document).ready( function () {
		$('#slider').slider({
			range: true, //범위가 있는 슬라이더 설정
			values: [75, 90],
			min: 0,
			max: 100,
			slide: function( event, ui ) {
				//console.log( $(this).slider('values', 0), '-', $(this).slider('values', 1) );
				console.log( ui.values[0], '-', ui.values[1] );
			}
		});
	})
</script>

</head>
<body>

<div id="slider"></div>

</body>
</html>

 

Spinner

<%@ 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>

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body {font-size: 80% }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>

<script type="text/javascript">
	$(document).ready( function () {
		$( '#spinner' ).spinner({
			min: 5,
			max: 155,
			step: 10,
			//위아래 화살표 누를때마다 이벤트 처리
			spin: function() {
				console.log( $(this).spinner('value') )
			}
		});
		$( '#btn' ).button().on('click', function() {
			console.log( $('#spinner').spinner('value') )
			//$('#spinner').spinner('value', 105 )
		})
	})
</script>

</head>
<body>

<input type="text" id="spinner" value="10" readonly="readonly"/>
<br><hr><br>
<button id="btn">값 확인</button>

</body>
</html>

 

Selectmenu

<%@ 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>

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body {font-size: 80% }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>

<script type="text/javascript">
	$(document).ready( function () {
		$('#files1').selectmenu({
			width: 500,
			change: function( event, ui ) {
				console.log($(this).val() );
				console.log( ui.item.value );
			}
		});
		
		$('#files2').selectmenu({
			width: 500,
			change: function( event, ui ) {
				console.log($(this).val() );
				console.log( ui.item.value );
			}
		});
	})
</script>

</head>
<body>

<select id="files1">
	<option value="jquery">jQuery.js</option>
	<option value="jqueryui">ui.jQuery.js</option>
	<option value="somefile">some unknown file</option>
</select>
<br><br>

<select id="files2">
	<optgroup label="Script">
		<option value="jquery">jQuery.js</option>
		<option value="jqueryui">ui.jQuery.js</option>
	</optgroup>
	<optgroup label="Script">
		<option value="somefile">some unknown file</option>
		<option value="somefile">some unknown file</option>
	</optgroup>
</select>

</body>
</html>

 

실습) selectmenu를 이용해서 구구단 만들기

-gugudan.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>

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body {font-size: 80% }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready( function() {
	let first = 0;
	let second = 0;
	let result = 0;
	
	$('#first').selectmenu({
		width: 100,
		change: function() {
			first = parseInt( $(this).val() );
		}
	});
	
	$('#second').selectmenu({
		width: 100,
		change: function() {
			second = parseInt( $(this).val() );
		}
	});
	
	$('#btn').button().on( 'click', function() {
		result = first * second;
		console.log( result );
	});
});

</script>

</head>
<body>

<select id="first">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
	<option>6</option>
	<option>7</option>
	<option>8</option>
	<option>9</option>
</select>
&nbsp;&nbsp;
<select id="second">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
	<option>6</option>
	<option>7</option>
	<option>8</option>
	<option>9</option>
</select>
&nbsp;&nbsp;
<button id="btn">구구단 출력</button>
<hr>

</body>
</html>

 

Autocomplete

자동완성 기능이다.

<%@ 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>

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body {font-size: 80% }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>

<script type="text/javascript">
	$(document).ready( function () {
		const availableTags = [
	      "ActionScript",
	      "AppleScript",
	      "Asp",
	      "BASIC",
	      "C",
	      "C++",
	      "Clojure",
	      "COBOL",
	      "ColdFusion",
	      "Erlang",
	      "Fortran",
	      "Groovy",
	      "Haskell",
	      "Java",
	      "JavaScript",
	      "Lisp",
	      "Perl",
	      "PHP",
	      "Python",
	      "Ruby",
	      "Scala",
	      "Scheme"
		];
		$('#tags').autocomplete({
			source: availableTags
		})
	})
	
	
</script>

</head>
<body>

<input type="text" id="tags"/>

</body>
</html>

이번에는 웹콘텐트 폴더에 data폴더를 만들고 그 안에 json파일을 만든다.

그리고 만든 json파일을 불러와서 웹페이지에서 autocomplete로 만들어보자.

-json.jsp (데이터 파일)

<%@ page language="java" contentType="text/json; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
{
	"data":["ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang",
	"Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"]
}

-ex12.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>

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body {font-size: 80% }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>

<script type="text/javascript">
	$(document).ready( function () {	
		$.ajax({
			url:'./data/json.jsp',
			type: 'get',
			dataType: 'json',
			success: function( json ) {
				const availableTags = json.data;
				$('#tags').autocomplete({
					source: availableTags
				})
			},
			error: function() {
				
			}
		})

	})
	
	
</script>

</head>
<body>

<input type="text" id="tags"/>

</body>
</html>

 

Accordion

아코디언처럼 내용이 보여진다.

<%@ 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>

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body {font-size: 80% }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>

<script type="text/javascript">
	$(document).ready( function () {	
		$('#accordion').accordion();
		
		$('#btn').button().on('click', function() {
			let data = '<h3>Section 5</h3>';
			data += '<div>';
			data += '	<p>';
			data += '	새로운 데이터';
			data += '	새로운 데이터';
			data += '	새로운 데이터';
			data += '	</p>';
			data += '</div>';
			
			$('#accordion').append( data );
			$('#accordion').accordion( 'refresh' );
		})
	})
	
	
</script>

</head>
<body>

<button id="btn">추가</button>
<br><hr><br>
<div id="accordion">
  <h3>Section 1</h3>
  <div>
  	<p>
	    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
	    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
	    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
	    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
	    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
	    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
	    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
	    suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
	    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
	    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
	    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
	    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
	    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
	    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
	    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
	    mauris vel est.
    </p>
    <p>
	    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
	    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
	    inceptos himenaeos.
    </p>
  </div>
</div>

</body>
</html>

 

 

실습) 우편번호 검색기 accordion으로 만들기 

아래 그림처럼 결과가 나오면 된다. 이때 jqueryui를 이용해서 디자인한다.

 먼저 아래와 같이 세팅한다.

 -context.xml

<?xml version="1.0" encoding="utf-8" ?>
<Context>
	<Resource
		name = "jdbc/mariadb2"
		auth = "Container"
		type = "javax.sql.DataSource"
		driverClassName = "org.mariadb.jdbc.Driver"
		url = "jdbc:mysql://localhost:3307/sample"
		username = "root"
		password = "!123456"
	/>
</Context>

 -zipcode.jsp (data 폴더)

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
	request.setCharacterEncoding( "utf-8" );
	String strDong = request.getParameter("strDong");
	//String strDong = "개포";
	
%>

<%@ page import="javax.naming.NamingException"%>
<%@ page import="javax.naming.Context" %>
<%@ page import="javax.naming.InitialContext" %>
<%@ page import="javax.sql.DataSource" %>

<%@page import="java.sql.Connection"%>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.SQLException" %>

<%
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	StringBuffer result = new StringBuffer();
	
	try {
	Context initCtx = new InitialContext();
	Context envCtx = (Context)initCtx.lookup("java:comp/env");
	DataSource dataSource = (DataSource)envCtx.lookup("jdbc/mariadb2");
	
	conn = dataSource.getConnection();
	
	String sql = "select zipcode, sido, gugun, dong, ri, bunji, seq from zipcode where dong like ?";
	pstmt = conn.prepareStatement(sql);
	pstmt.setString( 1, strDong + "%" );
	rs = pstmt.executeQuery();
	
	result.append( "<result>" );
	while ( rs.next() ) {
		result.append( "<address>" );
		result.append( "	<seq>" + rs.getString( "seq" ) + "</seq>" );
		result.append( "	<zipcode>" + rs.getString( "zipcode" ) + "</zipcode>" );
		result.append( "	<sido>" + rs.getString( "sido" ) + "</sido>" );
		result.append( "	<gugun>" + rs.getString( "gugun" ) + "</gugun>" );
		result.append( "	<dong>" + rs.getString( "dong" ) + "</dong>" );
		result.append( "	<ri>" + rs.getString( "ri" ) + "</ri>" );
		result.append( "	<bunji>" + rs.getString( "bunji" ) + "</bunji>" );
		result.append( "</address>" );
	}
	result.append( "</result>" );
		
	} catch (NamingException e) {
		System.out.println( "[Error] : " + e.getMessage() );
	} catch (SQLException e) {
		System.out.println( "[Error] : " + e.getMessage() );
	} finally {
		if ( rs != null ) rs.close();
		if ( pstmt != null ) pstmt.close();
		if ( conn != null ) conn.close();
	}
	
	out.println( result );
%>

-zipcodeEx01.jsp (메인실행jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" href="./css/ui-darkness/jquery-ui.css" />
<style type="text/css">
	body {font-size: 80% }
</style>
<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>

<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
<script type="text/javascript">
	$( document ).ready( function() {
		$('#btn').button().on( 'click', () => {
			const strDong = $( '#dong' ).val();

			$.ajax({
				url: './data/zipcode.jsp?strDong='+strDong,
				type: 'get',
				dataType: 'xml',
				success: function( xml ) {
					$( '#accordion' ).accordion();
					
					$( xml ).find('address').each( function() {
						let data = '<h3>' + $(this).find('zipcode').html() + '<h3>';
						data += '<div>';
						data += '	<p>';
						data += 	$(this).find('sido').html()+'&nbsp';
						data += 	$(this).find('gugun').html()+'&nbsp';
						data += 	$(this).find('dong').html()+'&nbsp';
						data += 	$(this).find('ri').html()+'&nbsp';
						data += 	$(this).find('bunji').html();
						data += '	</p>';
						data += '</div>';
						
						$( '#accordion' ).append( data );
						$( '#accordion' ).accordion('refresh');
					})
				},
				error: function() {
					console.log( 'fail' );
				}
			})
			
			
		})
	});
</script>

</head>
<body>

<form>
<fieldset>
<legend>우편번호 검색기</legend>
동이름: <input type="text" id="dong" />
<input type="button" id="btn" value="동이름검색" />
</fieldset>

<br><hr><br>
<div id="accordion"></div>
</form>

</body>
</html>

 

728x90
반응형
저작자표시 동일조건

'데이터 엔지니어링 정복 > HTML-CSS-JavaScript-Spring-Node.js' 카테고리의 다른 글

[Bootstrap] 1/18 | SPA개념 및 특징, W2UI사용하기(레이아웃, 이벤트, 영역 안에 데이터넣기, 그리드, 우편번호검색기), BootStrap사용하기(반응성, typography, mark, blockquote, dl)  (0) 2021.01.18
[JavaScript-jQuery, Ajax] 1/15 | jQuery UI 사용하기(DatePicker, Dialog, Menu, Tabs, Tab으로 구구단만들기, Tooltip), Model2 게시판 jQuery UI으로 구현하기  (0) 2021.01.15
[JavaScript-jQuery] 1/13 | jQuery(각종 메서드, 우편번호검색기)  (0) 2021.01.13
[JavaScript-jQuery] 1/12 | XMLHttpRequest(우편번호 검색기, crossdomain해결하고 데이터가져오기), jQuery(기본사용 및 태그셀렉터)  (0) 2021.01.12
[JavaScript-Ajax] 1/11 | Ajax(데이터전송형식(CSV,XML,JSON-라이브러리이용해서 데이터베이스이용)), XMLHttpRequest(동기방식, 비동기방식(CSV,XML,JSON 데이터 가져오기))  (0) 2021.01.11
'데이터 엔지니어링 정복/HTML-CSS-JavaScript-Spring-Node.js' Related Articles more
Comments