본문 바로가기
자바스크립트

jQuery 이벤트, ajax 21. 03. 04.

Levinni 2021. 3. 5. 07:57

- 00event.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>2021. 3. 4. 오전 9:28:26</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>
	$(function() {
/* 		$("h1").on({
			"mouseenter" : function() {
				$(this).css({color:"red", backgroundColor:"black"}) // 이벤트 발생 시점의 나. h1
			},
			"mouseleave" : function() {
				$(this).css({color:"black", backgroundColor:"white"})
			}
		}); */
		$("h1").hover(function() {
			$(this).css({color:"red", backgroundColor:"black"}) // 이벤트 발생 시점의 나. h1
		}, function() {
			$(this).css({color:"black", backgroundColor:"white"})
		});
		$("h1").off("mouseleave"); // 이벤트 제거
		
		// 이벤트 전달
		$("a").click(function() {
			$(this).css("background", "gray"); 	// 사용자 정의 이벤트
//			event.preventDefault(); 			// 기본 이벤트 제거(이동 제거됨)
//			event.stopPropagation(); 			// 이벤트 전달 중지
//			return false;
		});
		$("h2").click(function() {
			$(this).css("background", "blue");
		});
	});
	</script>
</head>
<body>
	<h1>안녕하세요</h1>
	<h1>적당히 시원한 바람이</h1>
	<h1>불어 기분이 좋아요. 유후~</h1>
	
	<h2><a href="https://www.naver.com">링크</a></h2>
</body>
</html>

 

- 01mouse.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>2021. 3. 4. 오전 10:11:55</title>
	<style>
		#inner {padding: 50px; background: yellow; width: 10px; height: 10px;}
		#outer {padding: 50px; background: red; display: inline-block;}
	</style>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>
	$(function() {
		$("#outer").mouseenter(function() {
			$("body").append("<h1>mouse enter</h1>");
		}).mouseover(function() { // 대부분 안 씀.
			$("body").append("<h1>mouse over</h1>");
		});
		
		$(document).mousemove(function() { // 이벤트 대상: window, document, body(영역만)
			// 이벤트 객체
//			console.log(event.x, event.y);
			$("#x").text(event.x);
			$("#y").text(event.y);
		});
		
		$("textarea")
		.keydown(function() {
			$("#length1").text($(this).val().length);
		})
		.keyup(function() { // 이게 맞는 길이 값임.
			$("#length2").text($(this).val().length);
		})
		.keypress(function() { // down + up. 마우스 클릭은 많이 쓰지만 키프레스는 안 씀.
			$("#length3").text($(this).val().length);
		})
	});
	</script>
</head>
<body>
	<h1>pointer x : <span id="x">0</span> y : <span id="y">0</span></h1>
	<div id="outer">
		<div id="inner"></div>
	</div>
	<h1>현재 텍스트의 길이 값 keydown : <span id="length1">0</span></h1>
	<h1>현재 텍스트의 길이 값 keyup : <span id="length2">0</span></h1>
	<h1>현재 텍스트의 길이 값 keypress : <span id="length3">0</span></h1>
	<textarea rows="10" cols="30"></textarea>
</body>
</html>

 

 

- 02check.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>2021. 3. 4. 오전 11:11:08</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>
	$(function() {
		$("#id").change(function() {
			// 체크여부 확인
			// 체크하거나 해제하거나
//			var ck = this.checked; // js dom 게터
//			var ck = $(this).prop("checked");
			
			/* $(":checkbox").each(function() {
				this.checked = ck; // 세터
			}); */
			
//			$(":checkbox").prop("checked", ck); // jQuery 문법
			$(":checkbox").prop("checked", this.checked);
		});
		$("h1").click(function() {
			$(this).next().fadeToggle(1000, function() {
				alert("완료");
			});
		});
	});
	</script>
</head>
<body>
	<input type="checkbox" id="id"> 전체 선택
	<hr>
	<input type="checkbox"> A	
	<input type="checkbox"> B
	<input type="checkbox"> C
	
	<h1>여기를 누르세요.</h1>
	<h2>이것이 대상입니다.</h2>	
	<h1>여기를 누르세요.</h1>
	<h2>이것이 대상입니다.</h2>	
	<h1>여기를 누르세요.</h1>
	<h2>이것이 대상입니다.</h2>	
</body>
</html>

 

- 03jqueryui.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>2021. 3. 4. 오전 11:29:47</title>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script>
		$(function() {
			$("div").accordion();
		})
	</script>
</head>
<body>
	<div>
		<h3>첫번째</h3>
		<p>국회의 정기회는 법률이 정하는 바에 의하여 매년 1회 집회되며, 국회의 임시회는 대통령 또는 국회재적의원 4분의 1 이상의 요구에 의하여 집회된다. 지방의회의 조직·권한·의원선거와 지방자치단체의 장의 선임방법 기타 지방자치단체의 조직과 운영에 관한 사항은 법률로 정한다.</p>
		<h3>두번째</h3>
		<p>국가는 주택개발정책등을 통하여 모든 국민이 쾌적한 주거생활을 할 수 있도록 노력하여야 한다. 근로자는 근로조건의 향상을 위하여 자주적인 단결권·단체교섭권 및 단체행동권을 가진다.</p>
		<h3>세번째</h3>
		<p>제1항의 탄핵소추는 국회재적의원 3분의 1 이상의 발의가 있어야 하며, 그 의결은 국회재적의원 과반수의 찬성이 있어야 한다. 다만, 대통령에 대한 탄핵소추는 국회재적의원 과반수의 발의와 국회재적의원 3분의 2 이상의 찬성이 있어야 한다.</p>
		<h3>네번째</h3>
		<p>국가는 재해를 예방하고 그 위험으로부터 국민을 보호하기 위하여 노력하여야 한다. 국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다.</p>
	</div>	
</body>
</html>

 

- 04dbclick.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>2021. 3. 4. 오후 12:13:30</title>
	<style>
	div {width: 50px; height: 50px; background: yellow;}
	</style>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>
		$(function() {
			$("div").click(function() {
				$(this).stop().animate({
					width : '+=50',
					height : '+=50'
				}, "slow");
			}).stop().dblclick(function() {
				// Queue. 클릭 두 번 시행하고 더블클릭도 시행함. 싱글쓰레드라
				$(this).stop().animate({
					width : '-=50',
					height : '-=50'
				}, "slow");
			});
			// .stop queue 제거
		});
	</script>
</head>
<body>
	<div></div>	
</body>
</html>

 

- 05ajax.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>2021. 3. 4. 오후 12:37:30</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>
		$(function() {
			$("button").click(function() {
				/* $.ajax({
					url : "NewFile.xm",
					success : function(data, msg, xhr) {
//						alert(data); // object
						console.log(data);
						var str = "<table>";
						$(data).find("student").each(function() {
							str += "<tr>"
							str += "<td>" + $(this).find("no").text() + "</td>"; // this는 student
							str += "<td>" + $(this).find("name").text() + "</td>";
							str += "<td>" + $(this).find("kor").text() + "</td>";
							str += "<td>" + $(this).find("eng").text() + "</td>";
							str += "<td>" + $(this).find("mat").text() + "</td>";
							str += "</tr>"
						});
						str += "</table>"
						$("body").append(str);
						console.log(msg);
						console.log(xhr);
					},
					error : function(a, b, c) {
						console.log(a); // xhr
						console.log(b); // msg status(string)
						console.log(c); // error thrown
					},
					complete : function() { // 많이 안 씀.
						alert("완료");
					}
				});	 */
				
				$.ajax("NewFile.xml").done(function(data, msg, xhr) {
					 var str = "<table>";
					$(data).find("student").each(function() {
						str += "<tr>"
						str += "<td>" + $(this).find("no").text() + "</td>";
						str += "<td>" + $(this).find("name").text() + "</td>";
						str += "<td>" + $(this).find("kor").text() + "</td>";
						str += "<td>" + $(this).find("eng").text() + "</td>";
						str += "<td>" + $(this).find("mat").text() + "</td>";
						str += "</tr>"
					});
					str += "</table>"
					$("body").append(str);
					console.log(msg);
					console.log(xhr);
				});
			});
		});
	</script>
</head>
<body>
	<button>ajax 호출</button>	
</body>
</html>

 

- 05ajax2CrossDomain.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>2021. 3. 4. 오후 12:37:30</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>
		$(function() {
			$("button").click(function() {
				var url = 'https://www.juso.go.kr/addrlink/addrLinkApi.do?currentPage=1&countPerPage=5&keyword=%EB%8C%80%ED%95%99%EA%B5%90&confmKey=devU01TX0FVVEgyMDIxMDIxNTE2NTkxMDExMDgwODI='
				$.ajax(url).done(function(data, msg, xhr) {
				console.log(data);
				});
			});
			// cross domain
			// 출처 소스가 어디에서 나왔는가?
					
			// ajax.jsp >> localhost
			// ajax를 통해 가져오려는 곳 >> juso.go.kr
			
			// 1. proxy server로 경유
			// 2. jsonp
			// xml로 직접 가져오는 것은 불가. > jsonp
		});
	</script>
</head>
<body>
	<button>ajax 호출</button>	
</body>
</html>

 

- 위 예제를 위한 도로명주소 API 만들기. 06source.jsp

<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>2021. 3. 4. 오후 2:27:55</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<%
String currentPage = "1";
String countPerPage = "5";
String confmKey = "devU01TX0FVVEgyMDIxMDIxNTE2NTkxMDExMDgwODI=";
String keyword = "대학교";
String apiUrl = "https://www.juso.go.kr/addrlink/addrLinkApi.do?currentPage="+currentPage
								+"&countPerPage="+countPerPage+"&keyword="+URLEncoder.encode(keyword,"UTF-8")
								+"&confmKey="+confmKey;
System.out.println(apiUrl);
out.println(apiUrl); // 브라우저 출력
%>	
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

저작자표시

'자바스크립트' 카테고리의 다른 글

ajax 끝 21. 03. 05.  (0) 2021.03.05
jQuery 21. 03. 03.  (0) 2021.03.03
브라우저 객체 모델 21. 03. 02  (0) 2021.03.02
속성과 메서드 21. 02. 26.  (0) 2021.03.02
Part 03. js 코어 라이브러리(Date, Array) 21. 02. 25.  (0) 2021.02.25

'자바스크립트' Related Articles

티스토리툴바