웹_프론트_백엔드/JAVA프레임윅기반_풀스택

2020.05.13

shine94 2020. 5. 13. 08:58

1. jQuery010_AJAX4.html

 : 어제 코드에서 form element 의 serialize()를 사용하여 재작성함

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery + AJAX</title>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
</head>
<!--
	도로명 주소 오픈 API
	홈 : https://www.juso.go.kr/addrlink/main.do
	호출 API : https://www.juso.go.kr/CommonPageLink.do?link=/addrlink/devAddrLinkRequestSample
			↑ 위 페이지 들어가서 'API정보/요청변수/출력결과' 문서 읽기!
			★API 승인키 신청 : 개발용, 90일

			GET 방식 / POST 방식 둘다 지원함
	
	var api_key = "devU01TX0FVVEgyMDIwMDUxMjE2NTIwODEwOTc1MDE=";
	
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<h3>$.ajax()+post : 도로명 주소</h3>
<form name="form" id="form" method="post">
	현재페이지: <input type="number" name="currentPage" value="1"/><br> <!-- 요청 변수 설정 (현재 페이지. currentPage : n > 0) -->
	페이지당출력개수: <input type="number" name="countPerPage" value="10"/><br><!-- 요청 변수 설정 (페이지당 출력 개수. countPerPage 범위 : 0 < n <= 100) --> 
	승인키: <input type="text" name="confmKey" value="devU01TX0FVVEgyMDIwMDUxMjE2NTIwODEwOTc1MDE="/><br><!-- 요청 변수 설정 (승인키) -->
	검색어: <input type="text" name="keyword" value="테헤란로" onkeydown="enterSearch();"/><br><br><!-- 요청 변수 설정 (키워드) -->
	<input type="button" onClick="getAddr();" value="검색하기"/>
</form><br>
<div id="list" ></div><!-- 검색 결과 리스트 출력 영역 -->
<script>
/* POST 방식 request
	$.ajax({name:value, name:value, ... })

	url ★: request 보낼 url
	type ★ : "GET" 혹은 "POST"
	data : request 에 전송할 데이터, object 타입, POST 방식인 경우 여기에 넘겨야 한다
		ex) data : {"id" : "scott", "pw" : "tiger"}

		이때 form element 의 serialize()를 사용하면 form 의 데이터를 한번에 object 화 된다.
*/

function getAddr(){
	// 적용예 (api 호출 전에 검색어 체크) 	
	if (!checkSearchedWord(document.form.keyword)) {
		return ;
	}
	
	$.ajax({
		url : "http://www.juso.go.kr/addrlink/addrLinkApiJsonp.do"  //인터넷망
		, type : "post"
		// , data : {  // post request 에 필요한 parameter
		// 	currentPage : $("#form").find('[name="currentPage"]').val()
		// 	, countPerPage : $("#form").find('[name="countPerPage"]').val()
		// 	, confmKey : $("#form").find('[name="confmKey"]').val()
		// 	, keyword : $("#form").find('[name="keyword"]').val()
		// }
		// 위의 코드를 한줄로 요약...!!
		, data: $("#form").serialize()	// form 의 데이터를 한 번에 object 화 하기
		, dataType: "jsonp"   // cross-domain 문제 (JSON with Padding)
		, crossDomain: true

		, success : function(xmlStr){

			$("#list").html("");
			makeList(xmlStr.returnXml);
		}
		
	});
}

function makeList(xmlStr){
	var htmlStr = "";
	htmlStr += "<table>";
	$(xmlStr).find("juso").each(function(){
		htmlStr += "<tr>";
		htmlStr += "<td>"+$(this).find('roadAddr').text()+"</td>";    // 전체 도로명 주소
		htmlStr += "<td>"+$(this).find('roadAddrPart1').text()+"</td>"; // 도로명 주소 (참고항목제외)
		htmlStr += "<td>"+$(this).find('roadAddrPart2').text()+"</td>"; // 도로명주소 참고항목
		htmlStr += "<td>"+$(this).find('jibunAddr').text()+"</td>";  // 지번주소
		htmlStr += "<td>"+$(this).find('engAddr').text()+"</td>";  // 도로명주소(영문)
		htmlStr += "<td>"+$(this).find('zipNo').text()+"</td>";  // 우편번호
		htmlStr += "<td>"+$(this).find('admCd').text()+"</td>";  // 행정구역코드
		htmlStr += "<td>"+$(this).find('rnMgtSn').text()+"</td>";  // 도로명코드
		htmlStr += "<td>"+$(this).find('bdMgtSn').text()+"</td>";  // 건물관리번호
		htmlStr += "<td>"+$(this).find('detBdNmList').text()+"</td>";  // 상세건물명
		/** API 서비스 제공항목 확대 (2017.02) **/
		htmlStr += "<td>"+$(this).find('bdNm').text()+"</td>";  // 건물명
		htmlStr += "<td>"+$(this).find('bdKdcd').text()+"</td>"; // 공동주택여부(1 : 공동주택, 0 : 비공동주택)
		htmlStr += "<td>"+$(this).find('siNm').text()+"</td>";  // 시도명
		htmlStr += "<td>"+$(this).find('sggNm').text()+"</td>";  // 시군구명
		htmlStr += "<td>"+$(this).find('emdNm').text()+"</td>"; // 읍면동명
		htmlStr += "<td>"+$(this).find('liNm').text()+"</td>";  // 법정리명
		htmlStr += "<td>"+$(this).find('rn').text()+"</td>";  // 도로명
		htmlStr += "<td>"+$(this).find('udrtYn').text()+"</td>";  // 지하여부(0 : 지상, 1 : 지하)
		htmlStr += "<td>"+$(this).find('buldMnnm').text()+"</td>";  // 건물본번
		htmlStr += "<td>"+$(this).find('buldSlno').text()+"</td>"; // 건물부번
		htmlStr += "<td>"+$(this).find('mtYn').text()+"</td>";  // 산여부(0 : 대지, 1 : 산)
		htmlStr += "<td>"+$(this).find('lnbrMnnm').text()+"</td>";  // 지번본번(번지)
		htmlStr += "<td>"+$(this).find('lnbrSlno').text()+"</td>";  // 지번부번(호)
		htmlStr += "<td>"+$(this).find('emdNo').text()+"</td>";  // 읍면동일련번호
		htmlStr += "</tr>";
	});
	htmlStr += "</table>";
	$("#list").html(htmlStr);
}

//특수문자, 특정문자열(sql예약어의 앞뒤공백포함) 제거
function checkSearchedWord(obj){
	if(obj.value.length >0){
		//특수문자 제거
		var expText = /[%=><]/ ;
		if(expText.test(obj.value) == true){
			alert("특수문자를 입력 할수 없습니다.") ;
			obj.value = obj.value.split(expText).join(""); 
			return false;
		}
		
		//특정문자열(sql예약어의 앞뒤공백포함) 제거
		var sqlArray = new Array(
			//sql 예약어
			"OR", "SELECT", "INSERT", "DELETE", "UPDATE", "CREATE", "DROP", "EXEC",
             		 "UNION",  "FETCH", "DECLARE", "TRUNCATE" 
		);
		
		var regex;
		for(var i=0; i<sqlArray.length; i++){
			regex = new RegExp( sqlArray[i] ,"gi") ;
			
			if (regex.test(obj.value) ) {
			    alert("\"" + sqlArray[i]+"\"와(과) 같은 특정문자로 검색할 수 없습니다.");
				obj.value =obj.value.replace(regex, "");
				return false;
			}
		}
	}
	return true ;
}

function enterSearch() {
	var evt_code = (window.netscape) ? ev.which : event.keyCode;
	if (evt_code == 13) {    
		event.keyCode = 0;  
		getAddr(); //jsonp사용시 enter검색 
	} 
}
</script>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

 

 

2. jQuery008_Dimension1.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery Dimension</title>
<style>
#div1 {
    height: 150px;
    width: 300px;
    padding: 10px;
    margin: 3px;
    border: 1px solid blue;
    background-color: lightblue;
}

#div3{
	width: 100px;
	height: 100px;
	background-color: yellow;
	position: absolute;
}

</style>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
/*
	element 의 사이즈나 
 	browser windows 사이즈 

 	width()  - element 의 width
 	height() - element 의 height
 	innerWidth() - width + padding
 	innerHeight() - height + padding
 	outerWidth() - innerWidth + border
 	outerHeight() - innerHeight + border
 	outerWidth(true) - innerWidth + border + margin
 	outerHeight(true) - innerHeight + border + margin
*/

$(document).ready(function(){
	$("#btn01").click(function(){
		var txt = "";
		var div1 = $("#div1");

		txt += "width: " + div1.width() + "<br>";
		txt += "height: " + div1.height() + "<br>";
		txt += "innerWidth: " + div1.innerWidth() + "<br>";
		txt += "innerHeight: " + div1.innerHeight() + "<br>";
		txt += "outerWidth: " + div1.outerWidth() + "<br>";
		txt += "outerHeight: " + div1.outerHeight() + "<br>";
		txt += "outerWidth(true): " + div1.outerWidth(true) + "<br>";
		txt += "outerHeight(true): " + div1.outerHeight(true) + "<br>";

		div1.html(txt);
	});

	// width(), height() 에 매개변수 주면 새로운 값으로 세팅
	$("#btn02").click(function(){
		$("#div1").width(500).height(200);
	});

	// $(document) : HTML document
	// $(window) : browser viewport
	//	document 가 window 보다 클 수 있다. (스크롤바 생김)
	$("#btn03").click(function(){
		var txt = "";

		txt += "Document W/H: " + $(document).width()
				+ "x" + $(document).height() + "<br>";
		txt += "Window W/H: " + $(window).width()
				+ "x" + $(document).width() + "<br>";

		$("#div2").html(txt);
	});

	// 브라우저 창의 크기가 변할때 onresize 이벤트 발생
	$(window).resize(function(){
		var txt = "";

		txt += "Document W/H: " + $(document).width()
				+ "x" + $(document).height() + "<br>";
		txt += "Window W/H: " + $(window).width()
				+ "x" + $(document).width() + "<br>";

		$("#div2").html(txt);
	});

});

</script>

<body>

<div id="div1"></div>
<br>

<button id="btn01">btn01 dimension</button>
<br><br>
<button id="btn02">btn02 set width&height</button>
<br><br>
<button id="btn03">btn03 doc & window</button>
<br><br>
<div id="div2"></div>

<!-- 윈도우 크기가 변경될때마다 자동으로 변경되게 하기 -->

<hr>
<div style="height:120px; position:relative;">
	<div id="div3"></div>
</div>
<button id="btn04">btn04 anim</button>
<button id="btn05">btn05 position</button>

</body>
</html>

 

 

3. jQuery008_Dimension2.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery Dimension</title>
<style>
#div1{
	position: absolute;
	margin: 0;
	padding: 0;
}

#circle{
	position: absolute;
	width: 50px;
	height: 50px;
	border-radius: 50%;  /* 원으로 만든다 */
	display: none;
	background-color: tomato;
	margin: 0;
	padding: 0;
}
</style>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
	// 클릭시 좌표 알아내기
	$(document).click(function(event){
		// 화면에 클릭한 좌표
		//alert(event.pageX + " " + event.pageY);

		var txt = event.pageX + " " + event.pageY;
		$("#div1").css({
			"left" : event.pageX
			, "top" : event.pageY
		});
		//$("#div1").text(txt);

		// 클릭한 곳에 동그라미가 나타났다 사라지게 하기
		$("#circle").css({
			"left" : event.pageX - ($("#circle").outerWidth(true) / 2)
			, "top" : event.pageY - ($("#circle").outerHeight(true) / 2)
		});

		//$("#circle").fadeIn(2000).fadeOut(2000);

		$("#circle").stop(true).fadeIn(100, function(){
			$("#circle").fadeOut(500);
		});

	});

});


</script>
<body>
<h1>화면을 클릭해보세요!</h1>
<div id="div1"></div>
<div id="circle"></div>
</body>
</html>

 

 

4. jQuery009_DomTraversing1.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery DOM</title>
<style>
.ancestors, .ancestors * { 
    display: block;
    border: 2px solid grey;
    color: grey;
    padding: 3px;
    margin: 10px;
}

.selected {
	color: red; 
	border: 2px solid red;
}

#btnbox{
	position:fixed;
	right: 0px;
	top: 0px;
	border: 1px cyan solid;
	width: 150px;
	background-color: rgba(255,255,255,0.7);
}

button {
	color: black;
	border: 1px solid black;
	margin: 2px;	
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
/*
 Traversing Up: 함수들
	parent()
	parents()
	parentsUntil()
	
Traversing Down: 
	children()
	find()

Traversing Sibling:
	siblings()
	next()
	nextAll()
	nextUntil()
	prev()
	prevAll()
	prevUntil()
 */

$(document).ready(function(){

	// 어떤 버튼이든지 눌리면 selected 클래스 제거
	$("button").click(function(){
		$("*").removeClass("selected") ;
	});
	
	//---------------------------------------------
	// parent()
	$("#btn11").click(function(){
		$("span").parent().addClass("selected");
	});
	
	// parents()
	$("#btn12").click(function(){
		$("span").parents().addClass("selected");
	});
	
	// parents("ul")
	$("#btn13").click(function(){
		// "span" 의 조상중에서 "ul"만 선택됨.
		$("span").parents("ul").addClass("selected");
	});
	
	// parentesUntil()
	$("#btn14").click(function(){
		// "span" 상위 element 들 중 "div" 전까지 선택됨.
		$("span").parentsUntil("div").addClass("selected");
	});
	
	//-----------------------------------------
	//
	// children
	$("#btn21").click(function(){
		$("div").children().addClass("selected");
	});
	
	// children("..")
	$("#btn22").click(function(){
		$("div").children("p").addClass("selected");  
	});
	
	// find()
	$("#btn23").click(function(){
		$("div").find("span").addClass("selected");
	});
	
	// find(*)
	$("#btn24").click(function(){
		$("div").find("*").addClass("selected");
	});
	
	//-----------------------------------------
	// siblings()
	$("#btn31").click(function(){
		$("#sibling h2").siblings().addClass("selected");  
	});

	$("#btn32").click(function(){
		$("#sibling h2").siblings("p").addClass("selected");
	});

	// next()
	$("#btn33").click(function(){
		$("#sibling h2").next().addClass("selected");
	});
	
	// nextAll()
	$("#btn34").click(function(){
		$("#sibling h2").nextAll().addClass("selected");
	});
	
	// nextUntil(..)
	$("#btn35").click(function(){
		// "#sibling h2"의 밑의 형제들을 "h6" 전까지 선택됨.
		$("#sibling h2").nextUntil("h6").addClass("selected");
	});
	
	// TODO.. 나머지는 직접 해보자
	// prev()
	$("#btn36").click(function(){
		$("#sibling h5").prev().addClass("selected");
	});
	
	// prevAll()
	$("#btn37").click(function(){
		$("#sibling h5").prevAll().addClass("selected");
	});
	
	// prevUntil()
	$("#btn38").click(function(){
		// "#sibling h5" 위의 형제들을 "span" 전까지 선택됨
		$("#sibling h5").prevUntil("span").addClass("selected");  
	});
	
});

</script>
</head>
<body> body

<div class="ancestors">div
  <div>div
    <ul>ul  
      <li>li
        <span>span</span>
      </li>
    </ul>   
  </div>

  <div>div   
    <p>p
        <span>span</span>
      </p> 
  </div>
  
	<div id="sibling">div (parent) #sibling
		<p>p</p>
		<span>span</span>
		<h2>h2</h2>
		<h3>h3</h3>
		<h4>h4</h4>
		<h5>h5</h5>
		<h6>h6</h6>
		<p>p</p>
	</div>
  
</div>

<div id="btnbox">
	<button id="btn11">btn11 parent()</button>
	<button id="btn12">btn12 parents()</button>
	<button id="btn13">btn13 parents(..)</button>
	<button id="btn14">btn14 parentsUntil()</button>
	<br><br>
	
	<button id="btn21">btn21 children()</button>
	<button id="btn22">btn22 children(..)</button>
	<button id="btn23">btn23 find(..)</button>
	<button id="btn24">btn24 find(*)</button>
	<br><br>
	
	<button id="btn31">btn31 siblings()</button>
	<button id="btn32">btn32 siblings(..)</button>
	<button id="btn33">btn33 next()</button>
	<button id="btn34">btn34 nextAll()</button>
	<button id="btn35">btn35 nextUntil()</button>
	<button id="btn36">btn36 prev()</button>
	<button id="btn37">btn37 prevAll()</button>
	<button id="btn38">btn38 prevUntil()</button>
</div>



</body>
</html>

 


5. jQuery009_DomTraversing2.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>filtering</title>
<style>
div {
	border: 1px solid black;
}
.selected {
	background-color: yellow;
}
#btnbox{
	position:fixed;
	right: 0px;
	top: 0px;
	border: 1px cyan solid;
	width: 150px;
	background-color: rgba(255,255,255,0.7);
}

button {
	color: black;
	border: 1px solid black;
	margin: 2px;	
}

</style>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
/*
 이미 select 된 element 에 대해 추가적으로 select 하는 (필터링) 하는 함수
 first()
 last()
 eq()
 filter()
 not() 
 */

 $(document).ready(function(){
	 
	 // 버튼 클릭되면 일단 selected 클래스 제거
	 $("button").click(function(){
		$("*").removeClass("selected");
	});
	 //---------------------------------------
	 // first() select 된것들중 첫번째
	 $("#btn11").click(function(){
	 	$("div").first().addClass("selected");
	 });

	 // last() select 된것들중 마지막
	 $("#btn12").click(function(){
		$("div").last().addClass("selected");
	 });

	// eq(i) 인덱스로 선택 가능
	 $("#btn13").click(function(){
		$("div").eq(1).addClass("selected");
	});
	
	// filter() 
	 $("#btn14").click(function(){
		$("div").filter(".intro").addClass("selected");
	});
	
	// not()
	 $("#btn15").click(function(){
		$("div").not(".intro").addClass("selected");
	});
	 
	 
 });
 
</script>
<body>

<h1>필터링</h1>

<p>paragraph1</p>
<div class="intro">
  <p>paragraph2-1</p>
  <p>paragraph2-2</p>
</div>
<br>

<div>
  <p>paragraph3-1</p>
  <p>paragraph3-2</p>
</div>
<br>

<div>
  <p>paragraph4-1</p>
  <p>paragraph4-2</p>
</div>

<br>

<span id="btnbox">
	<button id="btn11">btn11 first()</button>
	<button id="btn12">btn12 last()</button>
	<button id="btn13">btn13 eq()</button>
	<button id="btn14">btn14 filter()</button>
	<button id="btn15">btn15 not()</button>
</span>

</body>
</html>

 


6. jQuery012_filter.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>filter</title>
<style>
table, th, td{
	border: 1px solid black;
	border-collapse: collapse;
	width: 100%;
}
tr:nth-child(even){
	background-color: lightgrey;
}
</style>

</head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){
	$("#myInput").on("keyup", function(){
		var value = $(this).val().toLowerCase();

		// filter(callback)
		//	callback() 안에서 각 element 에 대한 조작 가능.
		$("#myTable tr").filter(function(){
			// toggle(true) 나타나기, toggle(false) 사라지기
			// indexOf() : 주어진 값과 일치하는 인덱스 값을 반환, 일치하는 값이 없으면 -1을 반환
			$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
		});
	})
});

</script>

<body>
<h2> 테이블 filter </h2>

<input id="myInput" placeholder="검색..">
<br><br>

<table>
<thead>
	<tr>
		<th>name</th>
		<th>email</th>
	</tr>
</thead>
<tbody id="myTable">
<tr>
	<td>honggildong</td>
	<td>hong@naver.com</td>
</tr>
<tr>
	<td>james dean</td>
	<td>james@daum.net</td>
</tr>
<tr>
	<td>eun siri</td>
	<td>eunsil@gmail.com</td>
</tr>
</tbody>
</table>


</body>
</html>

 


7. jQuery013_when_then.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>when & then</title>
<style>
.box1 {
	width:150px;
	height : 150px;
	background-color:  #3f8d3f;
	position: absolute;
	left : 50px;
	top : 0;
}
.box2 {
	width:150px;
	height:150px;
	background-color:  #82d3f2;
	position: absolute;
	left :50px;
	top :150px;
}
.box3 {
	width:150px;
	height:150px;
	background-color:  yellow;
	position: absolute;
	left :50px;
	top :300px;
}
</style>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
/*
	$.when() 함수는 
	thenable object 들 (다른말로 deferred object)들의
	이벤트가 끝나면 리턴타입은 Promise 객체 리턴
	https://api.jquery.com/jquery.when/
		  
	deferred.then() 함수
	deferred 들이 다 마무리 되면 콜백 함수 호출
	https://api.jquery.com/deferred.then/
 */
$(document).ready(function(){
	$("#run").click(function(e){
		var $box1 = $(".box1");
		var $box2 = $(".box2");
		var $box3 = $(".box3");

		// 박스 안에 순서대로 집어 넣어서 동시에 실행하기 때문에
		// 같이 진행됨, non blocking 방식
		//$box1.animate({left: "200px"}, 1000);
		//$box2.animate({top: "0px"}, 1500);
		//$box3.animate({top: "150px"}, 2000); 

		// $box1과 $box2 의 애니메니션이 다 끝나고 나서 $box3이 움직이게 하려면?
		// 콜백함수를 이용하여 가능..!!
		// 콜백 지옥이 만들어질 수 있다 ㅠㅠ
		//$box1.animate({left: "200px"}, 1000);
		//$box2.animate({top: "0px"}, 1500, function(){
		//	$box3.animate({top: "150px"}, 2000); 
		//});

		// 콜백지옥을 방지할 수 있는 방법이 있다..!!
		// 방법. delay 하기
		//$box1.animate({left: "200px"}, 1000);
		//$box2.animate({top: "0px"}, 1500);

		//$box3.delay(1500).animate({top: "150px"}, 2000); 

		// $box1 과 $box2 중 누가 먼저 끝날지 알 수 없고
		// 얼마 후에 끝날지도 알 수 없다면...!!

		// 방법. $when() 사용
		// 이벤트들이 끝나면 수행하는 Promise 객체 리턴
		// thenable object (다른말로 deferred object)
		// $box1.animate({left: "200px"}, 1000);
		// $box2.animate({top: "0px"}, 1500);

		// $.when($box1, $box2).then(function(){
		// 	alert("완료");
		// });

		$.when($box1.animate({left : "200px"}, 1000))
			.then(function(){
				return $.when($box2.animate({top : "0px"}, 1500));
			})
			.then(function(){
				return $box3.animate({top: "150px"}, 2000);
			})
		  ;
		

	});	
});
</script>

<body>
<button id="run">run</button>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

 


8. jQuery 애니메이션 배너 만들기

 : 구조(html) -> 스타일링(CSS) -> 동작(JS) 순으로

** lost.html (구조)

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Animation banner</title>
<link href="lost.css" rel="stylesheet" type="text/css">
</head>
<body>

<div class="ad" id="ad-1">

    <!-- 파도 -->
    <ul id="water">
        <li id="water-back"></li>
        <li id="water-front"></li>
    </ul>

    <!-- 구름 -->
    <div id="clouds">
        <ul id="cloud-group-1">
            <li class="cloud-1"></li>
            <li class="cloud-2"></li>
            <li class="cloud-3"></li>
        </ul>
        <ul id="cloud-group-2">
            <li class="cloud-1"></li>
            <li class="cloud-2"></li>
            <li class="cloud-3"></li>
        </ul>
    </div>

    <!-- 보트 -->
    <ul id="boat">
        <li>
            <div id="question-mark"></div>
        </li>
    </ul>

    <div id="content">
        <h2 id="title1">Lost at sea?</h2>
        <h3 id="title2">Relax - we've got your rudder.</h3>
        <form id="form">
            <input type="text" id="email" value="" placeholder="Email address ...">
            <button id="submit">Guide me</button>
        </form>
    </div>

</div>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="lost.js" type="text/javascript"></script>
</html>

 

** lost.css (스타일링)

// 익명함수
(function(){
    // 바다
    var $waterFront = $("#water-front");
    var $waterBack = $("#water-back");

    // 파도는 계속 넘실거릴것이다...!!
    (function loopSea(){
        $waterFront
            .animate({'bottom' : '-65px', 'left' : '-30px'}, 500)
            .animate({'bottom' : '-60px', 'left' : '-25px'}, 500);

        $waterBack
            .animate({'bottom' : '15px', 'left' : '-20px'}, 500)
            .animate({'bottom' : '10px', 'left' : '-25px'}, 500);

        $.when($waterFront, $waterBack).done(loopSea);
    })();

    // 구름
    var $cloud1 = $("#cloud-group-1");
    var $cloud2 = $("#cloud-group-2");

    // 구름도 계속 뭉게 뭉게할 것이다..!!
    (function loopCloud(){
        $cloud1
            .animate({'left' : '-720px'}, 10000)
            .animate({'left' : '0px'}, 0);

        $cloud2
            .animate({'left' : '0px'}, 10000)
            .animate({'left' : '720px'}, 0, loopCloud);
    })();

    // 보트
    var $boat = $('#boat');
    // 물음표
    var $questionMark = $('#question-mark');
    // title 2개, form 
    var $title1 = $('#title1');
    var $title2 = $('#title2');
    var $form = $('#form');

    $boat.css({'left' : '-220px'});   // 최초, 화면 왼쪽 바깥의 위치
    $questionMark.css({'opacity' : 0});    // 최초 투명
    $title1.css({'opacity' : 0});   // 최초 투명
    $title2.css({'opacity' : 0});   // 최초 투명
    $form.css({'left' : '370px'});  // 최초, 화면 왼쪽 바깥의 위치

    // 페이지 로딩될때 단 한번 실행..!!
    // 한번 끄떡 움직이는 것까지 함께 구현
    // 방법1 : animate() + callback
    //$boat.animate({'left' : '20px'}, 2000, function(){
    //    loopBoat();
    //    $questionMark.delay(500).animate({'opacity' : 1}, 1000, 
    //        /* $questionMark 끝나고 실행되는 함수 */function(){
    //            $title1.animate({'opacity' : 1}, 1000, function(){
    //                $title2.animate({'opacity' : 1}, 1000, function(){
    //                    $form.animate({'left' : 0}, 500); // end $form
    //                });// end title2
    //            }); // end $title1
    //        }); // end $questionMark
    //}); // end $boat

    // 방법2 : $.when()   .then() 사용
    $when($boat.animate({'left' : '20px'}, 2000))
        .then(function(){
            loopBoat;
        })
        .then(function(){
            $questionMark.delay(500).animate({'opacity' : 1}, 1000)
        })
        .then(function(){
            $title1.animate({'opacity' : 1}, 1000)
        })
        .then(function(){
            $form.animate({'left' : 0}, 500)
        })


    // 보트가 계속 위 아래로 흔들 흔들 구현
    function loopBoat(){
        $boat
            .animate({'bottom' : '15px'}, 500)
            .animate({'bottom' : '25px'}, 500, loopBoat)
    }

})()

 

** lost.js (동작)

// 익명함수
(function(){
    // 바다
    var $waterFront = $("#water-front");
    var $waterBack = $("#water-back");

    // 파도는 계속 넘실거릴것이다...!!
    (function loopSea(){
        $waterFront
            .animate({'bottom' : '-65px', 'left' : '-30px'}, 500)
            .animate({'bottom' : '-60px', 'left' : '-25px'}, 500);

        $waterBack
            .animate({'bottom' : '15px', 'left' : '-20px'}, 500)
            .animate({'bottom' : '10px', 'left' : '-25px'}, 500);

        $.when($waterFront, $waterBack).done(loopSea);
    })();

    // 구름
    var $cloud1 = $("#cloud-group-1");
    var $cloud2 = $("#cloud-group-2");

    // 구름도 계속 뭉게 뭉게할 것이다..!!
    (function loopCloud(){
        $cloud1
            .animate({'left' : '-720px'}, 10000)
            .animate({'left' : '0px'}, 0);

        $cloud2
            .animate({'left' : '0px'}, 10000)
            .animate({'left' : '720px'}, 0, loopCloud);
    })();

    // 보트
    var $boat = $('#boat');
    // 물음표
    var $questionMark = $('#question-mark');
    // title 2개, form 
    var $title1 = $('#title1');
    var $title2 = $('#title2');
    var $form = $('#form');

    $boat.css({'left' : '-220px'});   // 최초, 화면 왼쪽 바깥의 위치
    $questionMark.css({'opacity' : 0});    // 최초 투명
    $title1.css({'opacity' : 0});   // 최초 투명
    $title2.css({'opacity' : 0});   // 최초 투명
    $form.css({'left' : '370px'});  // 최초, 화면 왼쪽 바깥의 위치

    // 페이지 로딩될때 단 한번 실행..!!
    // 한번 끄떡 움직이는 것까지 함께 구현
    // 방법1 : animate() + callback
    // [하지만] 이 방법은 콜백 지옥이 만들어질 수 있다 (가독성이 나쁨)
    //$boat.animate({'left' : '20px'}, 2000, function(){
    //    loopBoat();
    //    $questionMark.delay(500).animate({'opacity' : 1}, 1000, 
    //        /* $questionMark 끝나고 실행되는 함수 */function(){
    //            $title1.animate({'opacity' : 1}, 1000, function(){
    //                $title2.animate({'opacity' : 1}, 1000, function(){
    //                    $form.animate({'left' : 0}, 500); // end $form
    //                });// end title2
    //            }); // end $title1
    //        }); // end $questionMark
    //}); // end $boat

    // 방법2 : $.when()   .then() 사용, 가독성이 좋음..!!
    //$.when($boat.animate({'left' : '20px'}, 2000))
    //    .then(function(){
    //        loopBoat();
    //        return $.when($questionMark.delay(500).animate({opacity : 1}, 1000));
    //    })
    //    .then(function(){
    //        return $.when($title1.animate({'opacity' : 1}, 1000));
    //    })
    //    .then(function(){
    //        return $.when($title2.animate({'opacity' : 1}, 1000));
    //    })
    //    .then(function(){
    //        //$form.animate({'left' : 0}, 500);
    //        $form.animate({'left' : 0}, 500, reload);
    //    })
    //    ;

    // 방법2 : 단일 애니메이션의 연속인 경우 promise() 만으로 가능
    $boat.animate({'left' : '20px'}, 2000).promise()
        .then(function(){
            loopBoat();
            return $questionMark.delay(500).animate({opacity : 1}, 1000).promise();
        })
        .then(function(){
			return $title1.animate({'opacity' : 1}, 1000).promise();
		})
		.then(function(){
			return $title2.animate({'opacity' : 1}, 1000).promise();
		})
		.done(function(){
			$form.animate({'left' : 0}, 500);
		})
    ;

    // 보트가 계속 위 아래로 흔들 흔들 구현
    function loopBoat(){
        $boat
        .animate({'bottom' : '15px'}, 500)
        .animate({'bottom' : '25px'}, 500, loopBoat)
    }

    
    function reload(){
        setTimeout(function(){
            location.reload();
        }, 5000);
    }
    
})()

 


9. ui001_datepicker.html 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DatePicker</title>
<!-- 
	jQuery UI 는
	JavaScript 와 jQuery 기반 라이브러리로
	GUI widget,  각종 애니메이션 효과, 테마 등을 편리하게(?) 사용할수 있도록 제공한다.
	
	공식: https://jqueryui.com/
-->
<!-- jQuery 라이브러리 우선 -->
<!-- <script src="https://code.jquery.com/jquery.min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- jQuery UI 적용 CSS : 종류가 많고 다운로드 받아 커스터마이징 가능 -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<!-- jQuery JS 파일 -->
<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>

</head>
<body>
    
<script>

$(function(){
  //$("#datepicker1").datepicker(); // 기본포맷 mm/dd/yyyy
  // 날짜 포멧 바꿔서 datepicker 사용하기
  $("#datepicker1").datepicker({
    dateFormat : 'yy-mm-dd'
  });
});

</script>
    
BirthDate: <input type="text" id="datepicker1">

<hr>

<script>

$(function() {
  $( "#datepicker2" ).datepicker({
    dateFormat: 'yy.mm.dd',
    prevText: '이전 달',
    nextText: '다음 달',
    monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
    monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
    dayNames: ['일','월','화','수','목','금','토'],
    dayNamesShort: ['일','월','화','수','목','금','토'],
    dayNamesMin: ['일','월','화','수','목','금','토'],
    showMonthAfterYear: true,
    changeMonth: true,
    changeYear: true,
    yearSuffix: '년'
  });
});

</script>
    
생년월일: <input type="text" id="datepicker2">

<hr>

<script>

  // 다음과 같이 하면, 디폴트 세팅으로 변경이 됨  (이후 전체 datepicker 에 영향을 줌)
	// ※ 아래 주석을 풀지 말고 먼저 보고, 주석해제후 다시 보자

  $.datepicker.setDefaults({
    dateFormat: 'yy-mm',
    prevText: '이전 달',
    nextText: '다음 달',
    monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
    monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
    dayNames: ['일', '월', '화', '수', '목', '금', '토'],
    dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
    dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
    showMonthAfterYear: true,
    yearSuffix: '년'
  });

  $(function(){
    $("#datepicker31, #datepicker32").datepicker();
  })

</script>

<p>조회기간:
  <input type="text" id="datepicker31"> ~
  <input type="text" id="datepicker32">
</p>

<hr>

<script>

  $(function(){
      $("#datepicker41, #datepicker42").datepicker();
  })
  
  </script>

<p>조회기간:
  <input type="text" id="datepicker41"> ~
  <input type="text" id="datepicker42">
</p>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

 

 

10. ui002_coloranim.html 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Color Animation</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">  -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- 아래 코드 빼면 color animation 안됨 -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

 <style>
   .toggler { width: 500px; height: 200px; position: relative; }
   #button { padding: .5em 1em; text-decoration: none; }
   #effect { width: 240px; height: 170px; padding: 0.4em; position: relative; background: #fff; }
   #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
 </style>
</head>
<script>
// color 애니메이션 사용하고 싶으면 jQuery UI를 이용해야 함..!!
$(function(){
  var state = true;

  $("#button").on("click", function(){
    if(state){
      $("#effect").animate({
        color: "#FFF",
        backgroundColor: "#AA0000",
        width: 500
      }, 1000);
    } else {
      $("#effect").animate({
        color: "#000",
        backgroundColor:"#FFF",
        width: 240
      }, 1000);
    }
    state = !state;
  });

});


</script>
<body>
<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Animate</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>
 
<button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button>
 
</body>
</html><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

'웹_프론트_백엔드 > JAVA프레임윅기반_풀스택' 카테고리의 다른 글

2020.05.15  (0) 2020.05.15
2020.05.14  (0) 2020.05.14
2020.05.12  (0) 2020.05.12
2020.05.11  (0) 2020.05.11
2020.05.08  (0) 2020.05.08

'웹_프론트_백엔드/JAVA프레임윅기반_풀스택'의 다른글

  • 현재글2020.05.13

관련글

shine의 개발 노트

게임 서버 개발자, 샤인의 IT 공부 노트

티스토리툴바