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

2020.05.12

shine94 2020. 5. 12. 09:00

1. 온라인 프로토타이핑 툴(웹 기획, Oven) 

 : https://ovenapp.io

 


2. 프레임워크 

 : 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 

   클래스들을 제공하는 것

 

 

3. jQuery001_Intro.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery Intro</title>
</head>

<script>
function hideP(){
	// HTML은 대소문자 구분 안하나 XML은 대소문자 구분함...!!
	var elements = document.getElementsByTagName("p");

	for(i = 0; i < elements.length; i++) {
		// elements[i].addEventListener("click", function() {
		// 	this.style.display = "none";
		// });

		// 아래와 같이도 가능
		elements[i].addEventListener("click", hideElement);
	}

} // end hideP()

function hideElement() {
	this.style.display = "none";

} // end hideElement()

// 함수나 변수 이름으로 $ 가능
$ = 10;
alert($ * 4);

</script>

<!-- onload : 로딩이 끝났을 때 -->
<body onload="hideP()">

<p>없어지는 마술을 보여줄께.</p>
<p>요것도.</p>
<p>따다~~!</p>

</body>
</html>

 


4. jQuery001_Intro2.html 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery Intro</title>
<!-- 
	jQuery 란?
	JavaScript 라이브러리 중 하나입니다.
	JavaScript 의 프로그래밍을 혁신적으로 단순화 시키고 편리하게 제작가능케 함
	가장 널리 쓰이고, 가장 오래 쓰여온 JavaScript 라이브러리로
	오늘날 주요 웹사이트는 거의다 jQuery를 사용함.
	
	
	주요기능)
	- HTML DOM 을 쉽게 다룰수 있다
	- CSS 를 쉽게 다룰수 있다.
	- HTML 이벤트 등도 쉽게 다룰수 있다
	- 다양한 이펙트 와 애니메이션도 쉽게 다룰수 있다.
	- AJAX 를 쉽게 다룰수 있다. 
	  (브라우저마다 다르게 코딩해야하는 부분이 있을 수 있다, 이러한 부분은 jQuery는 극복하였다.)
	- 코드 보안성(?) 쉽게 다룰수 있다 (?)
	

	공식사이트: http://jquery.com/
	모토: write less, do more
	일본어: ジェイクエリー
	
	다운로드시 2가지 버젼)
	압축된 버젼 :     jquery.min.js  (배포용)
	비악축 버젼 :     jquery.js  (개발,디버깅용)
	
	
	다양한 CDN 존재)
	-구글 CDN  https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
	-MS CDN  https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js
	
	※ CDN : Content Delivery Network  혹은 Content Distribution Network
	컨텐츠의 배포를 위해 세계 곳곳에 다운로드 가능한 서버에 컨텐츠를 배치시키고 다운로드 가능케 함.
	CDN 의 이점 : 이미 방문한 사이트를 통해 이미  해단 컨텐츠가 다운로드되어 캐시 된 경우 로딩속도 향상 기대
	
	
 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
// ready는 매개변수가 함수로 와야 함
$(document).ready(function() {
	$("p").click(function() {
		$(this).hide();
	});
});

</script>
 
</head>
<body>

<p>jQuery로 없어지는 마술을 보여줄께.</p>
<p>요것도.</p>
<p>따다~~!</p>

</body>
</html>

 


5. jQuery001_Intro3.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Hide & Show</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("#hide").click(function() {
        $("p").hide();
    });

    $("#show").click(function() {
        $("p").show();
    });
});


/*
 이벤트 함수에는 여러개의 함수를 등록할수 있다.
 $(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
});

$(document).ready(function(){
    $("#show").click(function(){
        $("p").show();
    });
});
*/

</script>
</head>
<body>

<p>Hide 버튼을 누르면 사라지는 매직!</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

 


6. jQuery002_Syntax.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery Syntax</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- 
기본적은 jQuery 구문은 

HTML element 선택 +  그 element 에 동작(action) 수행

	기본구문:
	
	$(selector).action()
	
		$ : jQuery 에 접근하기 위한 함수
		(selector) : 다양한 방법으로 element 선택 가능.
	
	
	$(this).hide() - 현재 element.
	$("p").hide() - 모든 <p> element 를 숨긴다
	$(".test").hide() - class="test" 인 모든 element 를 숨긴다 
	$("#test").hide() - id="test" 인 모든 element 를 숨긴다

 -->
 
 <script>
// 	기본적으로 jQuery을 사용하는 웹페이지들은
//	다음 코드로 시작함
//$(document).ready(함수);
$(document).ready(function() {
	alert('ready() 함수');
});

//'document' 즉, 웹문서의 로딩이 '완료'되면
//ready() 의 매개변수로 주어진 함수를 수행
$(document).ready(function() {
	alert('명훈아 명훈아 명훈아');
});

// 축약된 형태도 많이 사용
//$(함수);
$(function() {
	alert('ready() 함수2');
})

$(document).ready(function() {
	$("button").click(function() {
		$("p").hide();
	});
});

</script>
 
<body>

<h2>jQuery 기본구문</h2>

<p>p 요소 입니다</p>
<p>이것도 p 요소 입니다</p>

<button>클릭</button>

</body>
</html>

 


7. jQuery003_Selector1.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("button").click(function() {
        $("#test").hide();
    });
});

</script>
</head>
<!-- 
기본적으로 jQuery Selector 는
CSS Selector 를 그대로 사용한다.
그러나, 그 밖에도 jQuery 에서 제공하는 고유한 selector 들이 있다.

jQuery 에서 모든 selector 들은 $( ) 안에 명시된다.


$("*")    모든 element
$(this)		현재 element

$("p.intro")
$("p:first")
$("ul li:first")
$("[href]")
$("a[target='_blank']")


https://api.jquery.com/category/selectors/

https://api.jquery.com/button-selector/

-->
 
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>

<button>Click me</button>

<!-- 
https://www.w3schools.com/jquery/trysel.asp


$("#Lastname")
$(".intro")
$(".intro, #Lastname")
$("h1")
$("h1, p")
$("p:first")      // 첫 p element
$("p:last")
$("tr:even")
$("tr:odd")
$("p:first-child")
$("p:first-of-type")
$("p:last-child")
$("p:last-of-type")
$("li:nth-child(1)")
$("li:nth-last-child(1)")
$("li:nth-of-type(2)")
$("li:nth-last-of-type(2)")
$("b:only-child")
$("h3:only-of-type")
$("div > p")
$("div p")
$("ul + p")
$("ul ~ table")
$("ul li:eq(0)")
$("ul li:gt(0)")
$("ul li:lt(2)")
$(":header")
$(":header:not(h1)")
$(":animated")
$(":focus")
$(":contains(Duck)")
$("div:has(p)")
$(":empty")
$(":parent")
$("p:hidden")
$("table:visible")
$(":root")
$("p:lang(it)")
$("[id]")
$("[id=my-Address]")
$("p[id!=my-Address]")
$("[id$=ess]")
$("[id|=my]")
$("[id^=L]")
$("[title~=beautiful]")
$("[id*=s]")
$(":input")
$(":text")
$(":password")
$(":radio")
$(":checkbox")
$(":submit")
$(":reset")
$(":button")
$(":image")
$(":file")
$(":enabled")
$(":disabled")
$(":selected")
$(":checked")
$("*")
 -->

</body>
</html>

 


8. jQuery003_Selector2.html 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery Selector</title>
<style>
  div {
    background: yellow;
    border: 1px solid #AAA;
    width: 80px;
    height: 80px;
    margin: 0 5px;
    float: left;
  }
  div.colored {
    background: green;
  }
</style>

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

<script>

// TODO

</script>
</head>
<body>

<button id="run">Run</button>
 
<div></div>
<div id="mover"></div>
<div></div>

<script>
// :animated 라는 selector 는
// 현재 animation 중인 element 에 적용
$("#run").click(function() {
  $("div:animated").toggleClass("colored");
});

function animateIt() {
  $("#mover").slideToggle("slow", /* 애니메이션 끝나면 수행하는 함수 */animateIt);
}
animateIt();

</script>

</body>
</html>

 


9. jQuery004_Event.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery Event</title>
<style>
p {
	background-color: cyan;
	padding: 3px;
}
</style>
</head>
<!-- 
	다양한 이벤트들
	1. 마우스 관련 이벤트
		click   ( ↓,↑  / 왼쪽 버튼만)
		dblclick
		mouseenter ( ↓  / 모든 버튼)
		mouseleave
		
	2. 키보드 관련 이벤트
		keypress
		keydown
		keyup
		
	3. 폼 관련 이벤트
		submit
		change
		focus
		blur
		
	4. Document/Window 관련 이벤트
		load
		resize
		scroll
		unload
		
		
	대부분의 jQuery '이벤트 함수'들이 위 DOM 이벤트들과 1:1 대응됨. (100%는 아님)
	
	
	$("p").click(function(){
	  // action goes here!!
	});
	
	jQuery 이벤트 함수의 매개변수가 '함수' 임에 유의
 -->
 
 <!--
 이벤트 함수들
 $(document).ready()    :  
 
 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 
<script>
 
$(document).ready(function(){

	// 클릭하면(click())사라지게 하기
	$("p#p01").click(function() {
		$(this).hide();
	});

	// 더블클릭하면(dblclick()) 
	// 사라졌던게 나타나기
	$('p#p02').dblclick(function() {
		$("p#p01").slideDown();
	});

	// 마우스 올려놓으면 (mouseenter())
	$("p#p03").mouseenter(function() {
		$(this).html("<b>mouse가 </b>올려짐");
	});

	// 마우스 올려져 있다가 나가면 (mouseleave())
	$("p#p04").mouseleave(function() {
		$(this).text("마우스 빠짐");
	});

	$("p#p04").mouseenter(function() {
		$(this).text("마우스 들어옴");
	});
	
	// mousedown() + mouseup() = click()
	// 마우스 눌려지면 (mousedown())
	$("p#p05").mousedown(function() {
		$(this).css("color", "red");
	});

	// 마우스 눌렸다 떼지면 (mouseup())
	$("p#p06").mouseup(function() {
		$("#img").attr("src", "../img/example_img_girl.jpg");
	});
	

	// hover(func1, func2)  : mouseenter 와 mouseleave 롤 동시에 처리
	// 마우스가 들어오면 배경색 노랑색으로
	// 마우스가 나가면 배경색 cyan 색으로
	$("p#p07").hover(function() {
		$(this).css("background-color", "yellow");
	}, 
	function() {
		$(this).css("background-color", "cyan");
	});

	// focus() 되면
	// 배경색을 노랑색으로 바꾸세요.
	$("input#p08").focus(function() {
		$(this).css("background-color", "yellow");
		$(this).val("focus됨");
	});

	// blur() 되면(focus에서 벗어나면 blur라고 함..!!)
	// 배경색을 다시 하얀색으로 바꾸기
	$("input#p08").blur(function() {
		$(this).css("background-color", "white");
		$(this).val("blur됨")
	});

	// on(이벤트, func)
	// on({이벤트1:func1, 이벤트2:func2, ... }) 여러 이벤트 핸들러 지정
	$("p#p09").on("click", function() {
		$(this).css("background-color", "yellow");
	});

	$("p#p10").on({
		mouseenter : function() {
			$(this).css("background-color", "lightgray");
		}
		, mouseleave : function() {
			$(this).css("background-color", "tomato")
		}
		, click : function() {
			$(this).css("background-color", "yellow")
		}
		});
    
 	// off() 는 해당 element 의 특정 이벤트 제거
	$("#btnOff").click(function() {
		$("p#p10").off("click");	// click 이벤트 제거
	});

}); 
</script>
 
<body>
<p id="p01">p01 click</p>
<p id="p02">p02 dblclick</p>
<p id="p03">p03 mouseenter</p>
<p id="p04">p04 mouseleave</p>
<p id="p05">p05 mousedown</p>
<p id="p06">p06 mouseup
	<img id="img" src="">
</p>
<p id="p07">p07 hover</p>
focus & blur: p08 <input id="p08"/></br>
<p id="p09">p09 on</p>
<p id="p10">p10 on</p>

<button id="btnOff">btnOff 클릭 이벤트 제거</button>


<!-- 
	on(), off()
	
	과거에는
	bind(), unbine() 함수		Deprecated 3.0
	live(), die() 함수			Deprecated 1.7

	참조: http://api.jquery.com/category/events/
	
	jQuery 도 deprecated 된 함수나 객체들 많다.  레퍼런스를 참조하자
 -->

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

 

 

10. jQuery005_Effect1.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery effect</title>
<style>
p {
	background-color: cyan;
	width : 120px;
	height : 50px;
    padding : 0px 3px;
}
</style>
</head>

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

<script>
// hide(), show(), toggle() 함수
// ** size 와 opacity 변함
// $(selector).hide(speed,callback);
// $(selector).show(speed,callback);
// $(selector).toggle(speed,callback);
// speed 는 millisecond 나 혹은 "slow", "fast"
$(document).ready(function(){
	// #hide1 버튼이 click 되면 #p1 을 hide() 
	// #show1 버튼이 click 되면 #p1 을 show()
    $("#hide1").click(function(){
		$("#p1").hide();
    });
    $("#show1").click(function(){
		$("#p1").show();
    });

    $("#hide2").click(function(){
		$("#p21").hide("slow");
		$("#p22").hide("fast");
		$("#p23").hide(2000);
    });
    
    // #show2 버튼을 click 하면 위의 3개가 show()
    // show()의 매개변수 주기
    $("#show2").click(function(){
		$("#p21").show("slow");
		$("#p22").show("fast");
		$("#p23").show(2000)
    });
    
    // #toggle2 버튼을 click 하면 위의 3개가 toggle()
    // toggle() 의 매개변수 주기
    $("#toggle2").click(function(){
		$("#p21").toggle("slow");
		$("#p22").toggle("fast");
		$("#p23").toggle(2000)
    });

// fadeIn() fadeOut() fadeToggle() fadeTo() 함수
// ** opacity 가 변함.
// $(selector).fadeIn(speed,callback);    
//$(selector).fadeOut(speed,callback);
//$(selector).fadeToggle(speed,callback);
//$(selector).fadeTo(speed,opacity,callback);

    $("#fadeIn1").click(function(){
		$("#p3").fadeIn();
    });
    $("#fadeOut1").click(function(){
        $("#p3").fadeOut();
    });


    $("#fadeIn2").click(function(){
		$("#p41").fadeIn("slow");
		$("#p42").fadeIn("fast");
		$("#p43").fadeIn(2000);
    });
    
	// #fadeOut2 버튼을 click() 하면 
	// 위 3개 #p41, #p42, #p43 을 fadeOut()
	// 매개변수 주기
    $("#fadeOut2").click(function(){
    	$("#p41").fadeOut("slow");
		$("#p42").fadeOut("fast");
		$("#p43").fadeOut(2000);
    });
	
	// #fadeToggle2 버튼을 click() 하면 
	// 위 3개 #p41, #p42, #p43 을 fadeToggle()
	// 매개변수 주기
    $("#fadeToggle2").click(function(){
    	$("#p41").fadeToggle("slow");
		$("#p42").fadeToggle("fast");
		$("#p43").fadeToggle(2000);
    });


	// fadeTo() : 사라지는 것은 아니고 특정 투명도로 변환
    $("#fadeTo3").click(function(){
		$("#p51").fadeTo("slow", 0.15);
		$("#p52").fadeTo("slow", 0.4);
		$("#p53").fadeTo("slow", 0.7);
    });

// slideDown() slideUp() slideToggle()
// $(selector).slideDown(speed,callback);
// $(selector).slideUp(speed,callback);
// $(selector).slideToggle(speed,callback);
	$("#slideUp").click(function(){
		$("#p61").slideUp();
		$("#p62").slideUp("slow");
		$("#p63").slideUp("fast");
		$("#p64").slideUp(2000);
	});
	
	// #slideDown을 click() 하면 위 네개를
	// slideDown() 시키기
	// 매개변수 주기
	$("#slideDown").click(function(){
		$("#p61").slideDown();
		$("#p62").slideDown("slow");
		$("#p63").slideDown("fast");
		$("#p64").slideDown(2000);
	});
	
	// #slideToggle을 click() 하면 위 네개를
	// slideToggle() 시키기
	// 매개변수 주기
	$("#slideToggle").click(function(){
		$("#p61").slideToggle();
		$("#p62").slideToggle("slow");
		$("#p63").slideToggle("fast");
		$("#p64").slideToggle(2000, tada);
	});
	 
});

function tada(){
	alert("짜잔");
}


</script>

<body>
<h2>hide() show() toggle()</h2>
<button id="hide1">hide1</button>
<button id="show1">show1</button>
<br>
<p  id="p1">p1<br>hide&show</p>
<br>
<button id="hide2">hide2</button>
<button id="show2">show2</button>
<button id="toggle2">#toggle2</button>
<br>
<p  id="p21">p21<br>slow</p>
<p  id="p22">p22<br>fast</p>
<p  id="p23">p23<br>2000</p>
<hr>

<h2>fadeIn() fadeOut() fadeToggle() fadeTo()</h2>
<button id="fadeIn1">fadeIn1</button>
<button id="fadeOut1">fadeOut1</button>
<br>
<p id="p3" style="display:none;">p3<br>fadeIn</p>
<br>

<button id="fadeIn2">fadeIn2</button>
<button id="fadeOut2">fadeOut2</button>
<button id="fadeToggle2">fadeToggle2</button>
<br>
<p id="p41" style="display:none;">p41<br>slow</p>
<p id="p42" style="display:none;">p42<br>fast</p>
<p id="p43" style="display:none;">p43<br>2000</p>
<br>

<button id="fadeTo3">fadeTo3</button>
<p id="p51" >p51<br>0.15</p>
<p id="p52" >p52<br>0.4</p>
<p id="p53" >p53<br>0.7</p>
<hr>

<h2>slideDown() slideUp() slideToggle()</h2>

<button id="slideUp">slideUp</button>
<button id="slideDown">slideDown</button>
<button id="slideToggle">slideToggle</button>
<p id="p61">p61<br>slideUp/Down</p>
<p id="p62">p62<br>slow</p>
<p id="p63">p63<br>fast</p>
<p id="p64">p64<br>2000</p>


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

 


11. jQuery005_Effect2.html 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>animate()</title>
<style>
div.square {
	background:#98bf21;
	height:100px;
	width:100px;
	position:absolute;
	text-align: center;
}
</style>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script> 
/*
	거의 대부분의 CSS property 에 대해 애니메이션이 가능하다.
	그러나!
	property 이름은 camel notation 으로 되어야 한다..
	즉 CSS 에서 padding-left 는 jQuery 애니메이션에서는 paddingLeft 이어야 한다
	
	또한, 기본적은 jQuery 라이브러리에선 color 애니메이션은 없다.
	color 애니메이션을 하려면 추가적인 plugin을 포함해야 한다 http://plugins.jquery.com/
	
	animate() 함수: CSS property 에 대해서 animation 수행
	
		$(selector).animate({params},speed,callback);
*/


$(document).ready(function(){
	$("#btn01").click(function() {
		$("div#d01").animate({left: '250px'});
	});

	
    // 여러가지 애니메이션 동시에
	$("#btn02").click(function() {
		$("div#d02").animate({
			left: '250px'
			, opacity: '0.5'
			, height: '150px'
			, width: '150px'
		});
	});


    // 상대적인 값 (relative value)를 지정한 애니메이션 가능
	$("#btn03").click(function() {
		$("div#d03").animate({
			left: '250px'
			, height: '+=150px'
			, width: '+=150px'
		});
	});

    
    // pre-defined 값 설정 가능
    // "show", "hide", "toggle"
	$("#btn04").click(function() {
		$("div#d04").animate({
			width: 'toggle'
		});
	});


    // 애니메이션 Queue 설정
	$("#btn05").click(function() {
		var div = $("div#d05");
		// 줄만 세워둔거임, 실행은 알아서 자기순서되면 진행이 되는 것임
		// 그렇기 때문에 줄 세움과 동시에 짜잔 팝업이 뜨고
		// 짜잔 팝업을 끄면 그다음 애니메이션이 실행됨
		// 논블로킹 방식..!!
		div.animate({height: '300px', opacity: '0.4'}, "slow");
		div.animate({width: '300px', opacity: '0.8'}, "slow");
		div.animate({height: '100px', opacity: '0.4'}, "slow");
		div.animate({width: '100px', opacity: '1.0'}, "slow");
		alert("짜잔");	// 과연 언제 수행될까?  non-blocking 방식!
	});


	// #btn06 을 click() 하면  #d06 이
	// 1. 오른쪽으로 100px 이동하고,  width 는 200px 로 'slow' 하게 변하기
	// 2. 글자크기가 fontSize   3em 로 'slow' 하게 커지기  
	$("#btn06").click(function() {
		var div = $("div#d06");
		div.animate({left: '100px', width: '200ox'}, "slow");
		div.animate({fontSize: '3em'}, "slow");

		// 주의! animate() 는 색상에 대해서는 애니메이션 안한다
		div.animate({color: "blue"}, "slow");
	});

    
    // jQuery 의 모든 '액션'에 관한 메소드는 method chainging 이 된다.
    // $(selector).action()
	$("#btn07").click(function() {
		$("div#d07").css("color", "red")
					.slideUp(2000)
					.slideDown(2000)
					;
	});

});
     
</script> 

<body>

<div style="height:150px">
<button id="btn01">btn01</button>
<div id="d01" class="square">d01</div>
</div>

<div style="height:150px">
<button id="btn02">btn02</button>
<div id="d02" class="square">d02</div>
</div>

<div style="height:150px">
<button id="btn03">btn03</button>
<div id="d03" class="square">d03</div>
</div>

<div style="height:150px">
<button id="btn04">btn04</button>
<div id="d04" class="square">d04</div>
</div>


<div style="height:150px">
<button id="btn05">btn05</button>
<div id="d05" class="square">d05</div>
</div>


<div style="height:150px">
<button id="btn06">btn06</button>
<div id="d06" class="square">d06</div>
</div>


<div style="height:150px">
<button id="btn07">btn07</button>
<div id="d07" class="square">d07</div>
</div>

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

 


12. jQuery005_Effect3.html 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>stop()</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script> 

// $(selector).stop(stopAll,goToEnd);

// stopAll : 애니메이션 queue 가 clear 되는지 여부, 
//			디폴트값은 false, 즉 중간에 stop 되면 현재 애니메이션만 중단되고 다음 애니메이션이 진행 
// goToEnd : stop() 될때 곧바로 애니메이션의 끝 상태로.  디폴트 값은 false

$(document).ready(function(){
	
	// #start 버튼을 누르면 다음 애니메이션이 '차례대로' 진행
	// 1. 사각형이 오른쪽으로 100px 움직이고 (5초)
	// 2. 글자 크기가 3em 으로 커지게 하기 (5초)
	$("#start").click(function() {
		$("div").animate({left: '100px'}, 5000);
		$("div").animate({fontSize: '3em'}, 5000);

		//alert("언제 나올까용?")
		//alert("또?? 이건?")
	});

	$("#stop").click(function() {
		$("div").stop();
	});

	$("#stop2").click(function() {
		$("div").stop(true);	// 애니메이션 큐의 모든 애니메이션 종료
	});


 	// 첫번째 anim중 stop() 하면? 아래 각각의 경우는?
	$("#stop3").click(function() {
		// 곧바로 끝으로 가서 다음 애니메이션을 진행한다
		//$("div").stop(false, true);
		// 바로 끝으로 가지만 글자는 커지지 않는다!
		$("div").stop(true, true);
	});

});
</script> 
</head>
<body>

<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="stop2">Stop all</button>
<button id="stop3">Stop but finish</button>


<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

</body>
</html>

 


13. jQuery006_HTML1.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery HTML 다루기</title>
<style>
p#test1{
	color:blue;
	background-color:yellow;
}
</style>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
/*
1. Get : 읽어오는 것
text() - HTML 요소의 content 리턴
html() - HTML 요소의 content 리턴 (HTML 태그 포함)
val() - 폼 요소의 value 리턴
attr() - Attribute 값 리턴
css() - css 값 리턴

2. Set : 값을 변경하는 것
text(string) - HTML 요소의 content 변경
html(string) - HTML 요소의 content 변경 (HTML 태그 포함)
val(value) - 폼 요소의 value 값 변경
attr(name, value) - Attribute 값 변경
css(property, value) - css 값 변경
*/

$(document).ready(function(){
	// 1. Get : 읽어오는 것..!!
    $("#btn11").click(function(){
        alert("text(): " + $("#test1").text());
    });
    $("#btn12").click(function(){
        alert("html(): " + $("#test1").html());
    });
    $("#btn13").click(function(){
        alert("val(): " + $("#test2").val());
    });
    $("#btn14").click(function(){
        alert("attr():" + $("#test3").attr("href"));
    });
    $("#btn15").click(function(){
        //alert("css():" + $("#test1").css("color"));

        //alert("css():" + $("#test1").css("color") + " "
        //        + $("#test1").css("background-color")
        //);


        // 한꺼번에 여러가지 css 값을 읽어 올수도 있다
        var cssObj = $("#test1").css(["color", "backgroundColor"]);
        alert("css() : " + cssObj.color + " " + cssObj.backgroundColor);
    });

    // 2. Set
    // 매개변수를 주면 값을 변경할수 있다.
    $("#btn21").click(function(){
        $("#test1").text("test1: Hello <b>World!</b>");
    });
    $("#btn22").click(function(){
        $("#test1").html("test1: Hello <b>World!</b>");
    });
    $("#btn23").click(function(){
        $("#test2").val("Donald Trump");
    });

    $("#btn24").click(function(){
        $("#test3").attr("href", "https://www.jQuery.com")
        
        // 한꺼번에 여러 attribute 변경 가능
        // href 와 title 변경하기
        $("#test3").attr({
            href: "http://daum.net",
            title: "다음"
        });
    });
    $("#btn25").click(function(){
    	$("#test1").css("color", "red");
    	
    	// 한꺼번에 여러 CSS 변경 가능
    	// 글자색 --> white ,   배경색 -->  gray
    	$("#test1").css({
            color: "white",
            backgroundColor: "gray"
        });
    });
    
    
    // $(selector)  <-- 여러개의 element 일수도 있다.
    // 과연 이때 text(), html(), val() 값은 어케 동작하나?
    // text(), html(), val() 은 callback 함수를 매개변수로 넘겨줄수 있다.
    // callback 함수의 매개변수는 2개 (index, oldvalue)이고
    // 결국 callback 함수의 리턴값이 새로운 값으로 된다.
   
    $("#btn31").click(function(){
    	var result ="";
        //result += $(".c1").text();    // 전부 다 추출됨.
        //alert(result);

        // text(함수) <-- 이 함수는 select 된 각 element 에 대해 동작함.
        // i : index, oldValue : 값
        //$(".c1").text(function(i, oldvalue){
        //    result += i + " : " + oldvalue + "\n";
        //});
        //alert(result);

        // callback 함수에 return 값이 있으면 '변경' 발생
        $(".c1").text(function(i, oldValue){
            return oldValue + "(" + i + ")";
        });
    });
    $("#btn32").click(function(){
		$(".c1").html(function(i, oldValue){
            return oldValue + "<b>(" + i +")</b>";
        });
    });
    $("#btn33").click(function(){
		$(".i1").val(function(i, oldValue){
            return oldValue + "(" + i + ")";
        });
    });
    $("#btn34").click(function(){
		$(".c1").attr("title", function(i, oldValue) {
            return oldValue + "(" + i + ")";
        });
    });
    
});
</script>

<body>

<p id="test1" >test1: 이것은 <b>굵은</b> 텍스트다</p>
<p>test2: <input type="text" id="test2" value="아이언맨"></p>
<p>test3: <a href="https://www.naver.com" id="test3" title="대표포탈">네이버</a></p>
<hr>
<h2> GET: text(), html(), val(), attr(), css()</h2>
<button id="btn11">btn11 text()</button>
<button id="btn12">btn12 html()</button>
<button id="btn13">btn13 val()</button>
<button id="btn14">btn14 attr()</button>
<button id="btn15">btn15 css()</button>
<hr>
<h2> SET: text(..), html(..), val(..), attr(..), css(..)</h2>
<button id="btn21">btn21 text(..)</button>
<button id="btn22">btn22 html(..)</button>
<button id="btn23">btn23 val(..)</button>
<button id="btn24">btn24 attr(..)</button>
<button id="btn25">btn25 css(..)</button>
<hr>

<h2>Callback 함수</h2>
<p class="c1" title="월">c1 월요일</p>
<p class="c1" title="화">c1 화요일</p>
<p class="c1" title="수">c1 수요일</p>
<p class="c1" title="목">c1 목요일</p>
<p class="c1" title="금">c1 금요일</p>
<input class="i1" type="text" value="월요일"/>
<input class="i1" type="text" value="화요일"/>
<input class="i1" type="text" value="수요일"/>
<br>
<button id="btn31">btn31 text(func)</button>
<button id="btn32">btn32 html(func)</button>
<button id="btn33">btn33 val(func)</button>
<button id="btn34">btn34 attr(func)</button>
<hr>


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

 

 
14. jQuery006_HTML2.html 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>element & content</title>
</head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
/*
   jQuery 를 사용하면 HTML element 나 content 를 쉽게 다룰수 있습니다

  append() - content 맨끝에 삽입
  prepend() - content 맨앞에 삽입 
  after() - element 다음에 삽입
  before() - element 이전에 삽입

  remove() :  element 삭제
  empty() : element 의 child element 들 삭제

*/
$(document).ready(function(){
    $("#btn11").click(function(){
        $("p").append(" <b>Appended text</b>");
    });

    $("#btn12").click(function(){
        $("ol").append("<li>Appended item</li>")
    });
 	
    // append, prepend 등에 여러개 매개변수 가능
    $("#btn13").click(function(){
      var txt1 = "<b>I </b>";     // 1. HTML 텍스트 로 작성
		
		  var txt2 = "<b>love </b>";  		// 2. JS DOM 으로 작성
      txt2 = document.createElement("b");
      txt2.innerHTML = "love ";
		
		  var txt3 = "<i>jQuery</i>";  		// 3. jQuery 로 작성
      txt3 = $("<i></i>").text("jQuety")

      $("p").append(txt1, txt2, txt3);
    });

    
    $("#btn21").click(function(){
    	$("p").prepend("<b>Prepended text</b>")
    });
    
	// #btn22 를 클릭하면 <ol> 의 아이템<li>를 '앞에' 추가
    $("#btn22").click(function(){
    	$("ol").prepend("<li>Prepended item</li>");
    });
    
    //--------------------------------------------
    // after() & before()
    $("#btn31").click(function(){
    	$("img").before("<b>Before</b>");
    });
    $("#btn32").click(function(){
    	$("img").after("<b>After</b>");
    });
	// #btn33 버튼 클릭하면
	// I Love jQuery 가 <img> 뒤에 생성시키기
	// after() 

    $("#btn33").click(function(){
      var txt1 = "<b>I </b>";     // 1. HTML 텍스트 로 작성
		
		  var txt2 = "<b>love </b>";  		// 2. JS DOM 으로 작성
      txt2 = document.createElement("b");
      txt2.innerHTML = "love ";
		
		  var txt3 = "<i>jQuery</i>";  		// 3. jQuery 로 작성
      txt3 = $("<i></i>").text("jQuety")

      $("img").after(txt1, txt2, txt3);
    }); 
    
    //--------------------------------------------------
    // remove() :  element 삭제
    // empty() : element 의 child element 들 삭제
    $("#btn41").click(function(){
        // <p>가 삭제, 더이상 p 추가 버튼 작동 안함
        $("p").remove();
    });
    $("#btn42").click(function(){
      // <ol> 의 자식들만 삭제되는 것임..!!
      // ol가 제거된 것이 아니므로 li추가 버튼 작동 가능
      $("ol").empty();
    });
    $("#btn43").click(function(){
    	$("p").remove("#test");  // remove() 의 매개변수로 jQuery selector 를 넣을수 있다
    });
});

</script>

<body>
<h2>append(), prepend()</h2>

<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

<button id="btn11">btn11 append(text)</button>
<button id="btn12">btn12 append()</button>
<br><br>
<button id="btn21">btn21 prepend(text)</button>
<button id="btn22">btn22 prepend()</button>
<br><br>
<button id="btn13">btn13 append(,,)</button>
<hr>

<h2>before(), after()</h2>
<img src="https://www.w3schools.com/images/w3jquery.gif" alt="jQuery"><br><br>

<button id="btn31">btn31 before</button>
<button id="btn32">btn32 after</button>
<button id="btn33">btn33 after(,,)</button>
<hr>

<h2>remove(), empty()</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>
<button id="btn41">btn41 remove()</button>
<button id="btn42">btn42 empty()</button>
<button id="btn43">btn43 remove(filter)</button>

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

 

 

15. jQuery007_CSS.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery CSS</title>
<style>
.important {
    font-weight: bold;
    font-size: xx-large;
}

.blue {
    color: blue;
}
</style>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

/*
동적으로 CSS 스타일 적용하는 것은 결국 
결국 class 를 추가/제거 하는 형태로 구현합니다
jQuery 는 이를 간단히 구현하는 함수들 제공

 addClass()
 removeClass()
 toggleClass()
*/

$(document).ready(function(){
    $("#btn01").click(function(){
        $("h1, h2, p").addClass("blue");
        $("div#d01").addClass("important");

        // 동시에 여러개 클래스 추가 가능
        $("div#d02").addClass("important blue")
    });
    
    $("#btn02").click(function(){
    	$("h1, h2, p").removeClass("blue");
    });
    
    $("#btn03").click(function(){
        $("h1, h2, p").toggleClass("blue");
        $("div#d01").toggleClass("important")
    });
});
</script>

<body>

<h1>h1 태그</h1>
<h2>h2 태그</h2>

<p>p 태그입니다</p>
<p>이것도 p 태그입니다</p>

<div id="d01">div#d01 중요한 텍스트!</div>
<div id="d02">div#d02 important 텍스트!</div>

<br>
<button id="btn01">btn01 addClass()</button>
<button id="btn02">btn02 removeClass()</button>
<button id="btn03">btn03 toggleClass()</button>

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

 

 

16. jQuery010_AJAX1.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery AJAX</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
/*
 	jQuery를 사용하는 중요한 이유중 하나가
 		AJAX를 간편히 구현할수 있기 때문!
 		AJAX를 브라우저 호환성 고민하지 않고 구현할수 있기 때문!
 	
 	실제 JavaScript 만으로 AJAX를 구현할경우, 브라우저 특성별 코드들을 만드는등 복잡한 과정 많음.
 	jQuery 는 이를 간편화 하였다.
 */

 /*
 	load() 함수
 	$(selector).load(URL, data, callback);
 	
 	서버로부터 데이터를 읽어와서 select된 element 에 넣음
 	
 	URL:  request 할 url
 	data :  쿼리스트링에 해당하는 데이터  (key-value 쌍으로 이루어짐)
 	callback : load() 완료후 수행할 함수
 */ 
 
$(document).ready(function(){
				// ※ 우선 아래 url 의 내용을 확인해보자
		var url = "https://www.w3schools.com/jquery/demo_test.txt";  
	
		// 예제를 위해서 서버에서 돌려야 한다  ( request 이기 때문)
	    $("#btn01").click(function(){
	    	$("#div1").load(url);
	    	
	    });
		
		// jQuery selector 를 붙이는 것도 가능!
	    $("#btn02").click(function(){
	    	// " #p1" : 한칸 띄고 #p1 기재..!!
	    	$("#div1").load(url + " #p1");        // "https://www.w3schools.com/jquery/demo_test.txt #p1"
	    });
		
		// callback 함수는 3개의 parameter 받는다
		//    responseTxt : AJAX request 성공하면 받은 내용
		//    statusTxt : AJAX request status 내용
		//    xhr : XMLHttpRequest object
	    $("#btn03").click(function(){
	        $("#div1").load(url, 
	        		function(responseTxt, statusTxt, xhr){
			            if(statusTxt == "success")
			                alert("성공\n" + xhr.status + "\n" + xhr.statusText);
			            if(statusTxt == "error")
			                alert("에러\n" + xhr.status + "\n" + xhr.statusText);
			        });	    	
	    });
});
 
</script>
<body>
<div id="div1">
<h2>jQuery AJAX</h2>
</div>

<button id="btn01">btn01 load()</button>
<button id="btn02">btn02 load(selector)</button>
<button id="btn03">btn03 load(func)</button>

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

 

 

17. jQuery010_AJAX2.html

<!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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<h3>$.get() $.post() : 서울시 지하철 승하차 인원 정보</h3>
<form>
날짜 (yyyyMMdd): <input type="text" name="date" id="date" value="20181001"/><br><br>

<button id="btn_load" type="button"">승하차정보 가져오기</button>
<button id="btn_remove" type="button"">지우기</button>
</form>
<br><br>
<h2>AJAX + XML</h2>
<table id="demoXML"></table>
<hr>
<h2>AJAX + JSON</h2>
<table id="demoJSON"></table>
<script>
/* jQuery 의 AJAX 함수 get(), post()

	$.get(URL, callback);
	$.post(URL, data, callback);
*/

var api_key = "704c4a6d7262696e33396a544e7551";

$(document).ready(function () {
	$("#btn_load").click(function () {
		var date = document.getElementById("date").value.trim();

		// XML
		var url = "http://openapi.seoul.go.kr:8088/" + api_key + "/xml/CardSubwayStatsNew/1/5/" + date;

		$.get(url, function(date, status){
			//alert(status);

			// 이미 data 에 XML DOM object로 넘어온다
			// application/xml;charset=UTF-8
			//var parser = new DOMParser();
			//data <- parser.paseFromString(responseTxt, "text/xml");

			if(status == "success") {parseXML(date);}
		});


		// JSON
		url = "http://openapi.seoul.go.kr:8088/" + api_key + "/json/CardSubwayStatsNew/1/5/" + date;

		$.get(url, function(date, status){
			// 이미 data 에 JSON object 로 넘어온다
			// application/json;charset=UTF-8
			// data <- JSON.parse(responseTxt);

			if(status == "success") {parseJSON(date);}

		});

	});

	// 지우기
	$("#btn_remove").click(function () {
		//$("#demoXML").html("");
		//$("#demoJSON").html("");
		$("#demoXML").empty();
		$("#demoJSON").empty();
	});
});

// XML 파싱의 경우 jQuery 에서 제공해주는 
// DOM 관련 함수들을 사용하면 간결해진다.
function parseXML(xmlDOM) {
	// var i;

	var table = "<tr><th>호선</th><th>역명</th><th>승차인원</th><th>하차인원</th></tr>";
	// var x = xmlDOM.getElementsByTagName("row");
	// for (i = 0; i < x.length; i++) {
	// 	table += "<tr>";
	// 	table += "<td>" + x[i].getElementsByTagName("LINE_NUM")[0].childNodes[0].nodeValue + "</td>";
	// 	table += "<td>" + x[i].getElementsByTagName("SUB_STA_NM")[0].childNodes[0].nodeValue + "</td>";
	// 	table += "<td>" + x[i].getElementsByTagName("RIDE_PASGR_NUM")[0].childNodes[0].nodeValue + "</td>";
	// 	table += "<td>" + x[i].getElementsByTagName("ALIGHT_PASGR_NUM")[0].childNodes[0].nodeValue + "</td>";		
	// 	table += "</tr>";
	// }
	// document.getElementById("demoXML").innerHTML = table;
	
	
	// jQuery 함수를 사용하여 재작성 해보기...!!
	
	// find(selector)
	// select 된 element 에서 다시 select 한다.
	//alert($(xmlDOM).find("row").length);
	
	// each(함수)
	// select된 element 각각에 적용하는 함수
	$(xmlDOM).find("row").each(function(){
		table += "<tr>";
		table += "<td>" + $(this).find("LINE_NUM").text() + "</td>";
		table += "<td>" + $(this).find("SUB_STA_NM").text() + "</td>";
		table += "<td>" + $(this).find("RIDE_PASGR_NUM").text() + "</td>";
		table += "<td>" + $(this).find("ALIGHT_PASGR_NUM").text() + "</td>";
		table += "</tr>";
	});
	$("#demoXML").html(table);
}

function parseJSON(jsonObj) {
	var row = jsonObj.CardSubwayStatsNew.row;
	var i;

	var table = "<tr><th>호선</th><th>역명</th><th>승차인원</th><th>하차인원</th></tr>";
	for (i = 0; i < row.length; i++) {
		table += "<tr>"; 
		table += "<td>" + row[i].LINE_NUM + "</td>";
		table += "<td>" + row[i].SUB_STA_NM + "</td>";
		table += "<td>" + row[i].RIDE_PASGR_NUM + "</td>";
		table += "<td>" + row[i].ALIGHT_PASGR_NUM + "</td>";
		table += "</tr>"; 
	}
	//document.getElementById("demoJSON").innerHTML = table;
	// 위의 코드 jQuery 함수로 수정 가능
	$("#demoJSON").html(table);
}
</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>

 

 

18. jQuery010_AJAX3.html

<!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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<h3>$.ajax() : 서울시 지하철 승하차 인원 정보</h3>
<form>
날짜 (yyyyMMdd): <input type="text" name="date" id="date" value="20181001"/><br><br>

<button id="btn_load" type="button"">승하차정보 가져오기</button>
<button id="btn_remove" type="button"">지우기</button>
</form>
<br><br>
<h2>AJAX + XML</h2>
<table id="demoXML"></table>
<hr>
<h2>AJAX + JSON</h2>
<table id="demoJSON"></table>
<script>
/*
$.ajax() 함수
  jQuery 내의 모든 AJAX 관련 함수는 내부적으로 $.ajax()를 호출한다
  load(), get(), post() 등을 사용하지 못하는 경우는 $.ajax() 를 사용하면 된다.

[참조]
http://api.jquery.com/jquery.ajax/
https://www.w3schools.com/jquery/ajax_ajax.asp


[구문]
$.ajax({name:value, name:value, ... })

위 name:value 에 전달되어질 주요 name 들은 다음과 같다

url ★: request 보낼 url

type ★ : "GET" 혹은 "POST"

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

cache : 이전의 동일 url 로 request 한결과를 cache 할지 여부 (디폴트값은 true!)

async : 비동기 여부 (디폴트값은 true)

contentType : 서버에 데이터 전송시 사용할 content type
		디폴트는 "application/x-www-form-urlencoded"

success(result,status,xhr) ★ : 
	request 성공한 경우 수행하는 함수
	- result - response 받은 데이터, 
	           JSON 인 경우 이미 파싱 완료되어 JSON object 상태!
	           XML 인 경우 이미 파싱 완료되어 DOM object 상태!
	- status - response status 값
	- xhr - XMLHttpRequest

error(xhr,status,error) :
	request 실패한 경우 수행하는 함수

beforeSend(xhr) :
	request 직전에 수행하는 함수

complete(xhr,status) :
	request 처리 종료후 수행하는 함수, success / error 함수 끝난후.
	
dataFilter(data,type) :
	response 갓 받은 데이터 (raw data)를 처리할때 수행하는 함수
	
*/

var api_key = "704c4a6d7262696e33396a544e7551";
 
 $(document).ready(function(){
	 $("#btn_load").click(function(){
		 var date = document.getElementById("date").value.trim();
		 
		 // XML
		 var url = "http://openapi.seoul.go.kr:8088/" + api_key + "/xml/CardSubwayStatsNew/1/5/" + date;
		
		$.ajax({
			url: url
			, type: "GET"
			, cache: false
			, success: function(data, status){
				if(status == "success") {parseXML(data);}
			}
		});
		 
		 
		// JSON
		url = "http://openapi.seoul.go.kr:8088/" + api_key + "/json/CardSubwayStatsNew/1/5/" + date;
		 
		$.ajax({
			url: url
			, type: "GET"
			, cache: false
			, success: function(data, status){
				if(status == "success") {parseJSON(data);}
			}
		});
	 });
	 
	 $("#btn_remove").click(function(){
		$("#demoXML").html("");
		$("#demoJSON").html("");
	 });
 });
 
 function parseXML(xmlDOM) {
	var table = "<tr><th>호선</th><th>역명</th><th>승차인원</th><th>하차인원</th></tr>";
	$(xmlDOM).find("row").each(function(){
		table += "<tr>";
		table += "<td>" + $(this).find("LINE_NUM").text() + "</td>";
		table += "<td>" + $(this).find("SUB_STA_NM").text() + "</td>";
		table += "<td>" + $(this).find("RIDE_PASGR_NUM").text() + "</td>";
		table += "<td>" + $(this).find("ALIGHT_PASGR_NUM").text() + "</td>";		
		table += "</tr>";
	});
	$("#demoXML").html(table);
}

function parseJSON(jsonObj) {
	var row = jsonObj.CardSubwayStatsNew.row;
	var i;

	var table = "<tr><th>호선</th><th>역명</th><th>승차인원</th><th>하차인원</th></tr>";
	for (i = 0; i < row.length; i++) {
		table += "<tr>"; 
		table += "<td>" + row[i].LINE_NUM + "</td>";
		table += "<td>" + row[i].SUB_STA_NM + "</td>";
		table += "<td>" + row[i].RIDE_PASGR_NUM + "</td>";
		table += "<td>" + row[i].ALIGHT_PASGR_NUM + "</td>";
		table += "</tr>"; 
	}
	$("#demoJSON").html(table);
}
</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>

 

 

19. jQuery010_AJAX3_2.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>AJAX API서울시 지하철역사정보</title>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<!--
■서울시 지하철 역사 정보
http://data.seoul.go.kr/dataList/datasetView.do?infId=OA-12753&srvType=A&serviceKind=1&currentPageNo=1

샘플url

XML 버젼
http://swopenAPI.seoul.go.kr/api/subway/키값넣으세요/xml/stationInfo/0/5/서울
예] http://swopenAPI.seoul.go.kr/api/subway/4d46796d7366726f3833774a774955/xml/stationInfo/0/5/서울

JSON 버젼
http://swopenAPI.seoul.go.kr/api/subway/키값넣으세요/json/stationInfo/0/5/서울
예] http://swopenAPI.seoul.go.kr/api/subway/4d46796d7366726f3833774a774955/json/stationInfo/0/5/서울 

 -->
<body>
<h1>서울시 지하철 역사 정보</h1>
<form>
역명: <input type="text" id="stationname" value="서울"/><br><br>

<button type="button" id="btn_load">역사정보 가져오기</button>
<button type="button" id="btn_remove">지우기</button>
</form>
<br><br>
<h2>AJAX + XML</h2>
<table id="demoXML"></table>
<hr>
<h2>AJAX + JSON</h2>
<table id="demoJSON"></table>

<script>
var api_key = "704c4a6d7262696e33396a544e7551";

$(document).ready(function(){
	$("#btn_load").click(function(){
		// 장소를 인코딩 하기
		// 한글의 경우 url encoding 필요
		var place = $("#stationname").val();
		place = encodeURI(place);   // encodrURI() 사용
		

		var url = "http://swopenAPI.seoul.go.kr/api/subway/" + api_key + "/xml/stationInfo/0/5/" + place;
		
		// xml
		$.ajax({
				url: url
				, type: "GET"
				, cache: false
				, success: function(data, status){
					if(status == "success") {parseXML(data);}
				}
		});


		var url = "http://swopenAPI.seoul.go.kr/api/subway/" + api_key + "/json/stationInfo/0/5/" + place;
		
		// JSON
		$.ajax({
			 url :  url,
			 type : "GET",
			 cache : false,
			 success : function(data, status){
				 if(status == "success") parseJSON(data);
			 }
		});
	});
	  
	  $("#btn_remove").click(function(){
		 $("#demoXML").html("");
		 $("#demoJSON").html("");
	  });
 });

function parseXML(xmlDOM) {
	var table = "<tr><th>역명</th><th>아이디</th><th>호선</th><th>영문명</th></tr>";

	// var row = xmlDOM.getElementsByTagName("row");
	// for(i = 0; i < row.length; i++){
	// 	table += "<tr>";
	// 	table += "<td>" + row[i].getElementsByTagName("statnNm")[0].childNodes[0].nodeValue + "</td>";
	// 	table += "<td>" + row[i].getElementsByTagName("subwayId")[0].childNodes[0].nodeValue + "</td>";
	// 	table += "<td>" + row[i].getElementsByTagName("subwayNm")[0].childNodes[0].nodeValue + "</td>";
	// 	table += "<td>" + row[i].getElementsByTagName("statnNmEng")[0].childNodes[0].nodeValue + "</td>";
	// 	table += "</tr>";
	// }

	// document.getElementById('demoXML').innerHTML = table;

	$(xmlDOM).find("row").each(function(){
		table += "<tr>";
		table += "<td>" + $(this).find("statnNm").text() + "</td>";
		table += "<td>" + $(this).find("subwayId").text() + "</td>";
		table += "<td>" + $(this).find("subwayNm").text() + "</td>";
		table += "<td>" + $(this).find("statnNmEng").text() + "</td>";
		table += "</tr>";
	});
	$("#demoXML").html(table);

}

function parseJSON(jsonText){
	var stationList = jsonText.stationList;
	var i;

	var table = "<tr><th>역명</th><th>아이디</th><th>호선</th><th>영문명</th></tr>";

	for(i = 0; i < stationList.length; i++) {
		table += "<tr>";
		table += "<td>" + stationList[i].subwayId+ "</td>";
		table += "<td>" + stationList[i].subwayId + "</td>";
		table += "<td>" + stationList[i].subwayNm + "</td>";
		table += "<td>" + stationList[i].statnNmEng + "</td>";
		table += "</tr>";
	}

	//document.getElementById("demoJSON").innerHTML = table;
	$("#demoJSON").html(table);

}
</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><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

 

 

20. jQuery010_AJAX3_3.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>AJAX API자치구단위 서울 생활인구 일별 집계표</title>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
<!--
■자치구단위 서울 생활인구 일별 집계표
http://data.seoul.go.kr/dataList/datasetView.do?infId=OA-15379&srvType=S&serviceKind=1&currentPageNo=1

http://openapi.seoul.go.kr:8088/(인증키)/(요청파일타입)/SPOP_DAILYSUM_JACHI/(요청시작INDEX)/(요청종료INDEX)/(기준일ID)/(시군구코드)

샘플url

XML 버젼
http://openapi.seoul.go.kr:8088/(인증키)/xml/SPOP_DAILYSUM_JACHI/1/5/
예] http://openapi.seoul.go.kr:8088/4d46796d7366726f3833774a774955/xml/SPOP_DAILYSUM_JACHI/1/5/
예] http://openapi.seoul.go.kr:8088/4d46796d7366726f3833774a774955/xml/SPOP_DAILYSUM_JACHI/1/5/20190101
예] http://openapi.seoul.go.kr:8088/4d46796d7366726f3833774a774955/xml/SPOP_DAILYSUM_JACHI/1/5/20190101/11000

JSON 버젼
http://openapi.seoul.go.kr:8088/(인증키)/json/SPOP_DAILYSUM_JACHI/1/5/
예] http://openapi.seoul.go.kr:8088/4d46796d7366726f3833774a774955/json/SPOP_DAILYSUM_JACHI/1/5/
예] http://openapi.seoul.go.kr:8088/4d46796d7366726f3833774a774955/json/SPOP_DAILYSUM_JACHI/1/5/20190101
예] http://openapi.seoul.go.kr:8088/4d46796d7366726f3833774a774955/json/SPOP_DAILYSUM_JACHI/1/5/20190101/11000


※ 한번에 1000개 까지의 데이터만 볼수 있슴

-->
<body>
<h1>자치구단위 서울 생활인구 일별 집계표</h1>
<form>
날짜: <input type="date" id="stdr_de_id" value="2019-01-01" placeholder="yyyy-mm-dd"/><br>
시작index <input type="number" id="start_index" value="1"/><br>
끝index <input type="number" id="end_index" value="5"/><br><br>

<button type="button" id="btn_load">정보 가져오기</button>
<button type="button" id="btn_remove">지우기</button>
</form>
<br><br>
<h2>AJAX + XML</h2>
<table id="demoXML"></table>
<hr>
<h2>AJAX + JSON</h2>
<table id="demoJSON"></table>


<script>
var api_key = "704c4a6d7262696e33396a544e7551";  // 자신의 키값 입력하기!

$(document).ready(function(){
	$("#btn_load").click(function(){
		// 한글의 경우 url encoding 필요
		var stdr_de_id = $("#stdr_de_id").val();
		var start_index = $("#start_index").val();
		var end_index = $("#end_index").val();
		stdr_de_id = stdr_de_id.replace(/-/g, '');   // - 없애기


		var url = "http://openapi.seoul.go.kr:8088/" + api_key + "/xml/SPOP_DAILYSUM_JACHI/" + start_index + "/" + end_index + "/" + stdr_de_id;

		// XML 버젼
		$.ajax({
				url: url
				, type: "GET"
				, cache: false
				, success: function(data, status){
					if(status == "success") {parseXML(data);}
				}
		});


		var url = "http://openapi.seoul.go.kr:8088/" + api_key + "/json/SPOP_DAILYSUM_JACHI/" + start_index + "/" + end_index + "/" + stdr_de_id;
	
		$.ajax({
			url :  url,
			type : "GET",
			cache : false,
			success : function(data, status){
				if(status == "success") parseJSON(data);
			}
		 });
		
	 });
	 
	 $("#btn_remove").click(function(){
		$("#demoXML").html("");
		$("#demoJSON").html("");
	 });
});


function parseXML(xmlDOM) {
	var table = "<tr><th>날짜</th><th>구ID</th><th>총생활인구수</th><th>일최대이동인구수</th></tr>";

	// var row = xmlDOM.getElementsByTagName("row");
	// for(i = 0; i < row.length; i++){
	// 	table += "<tr>";
	// 	table += "<td>" + row[i].getElementsByTagName("STDR_DE_ID")[0].childNodes[0].nodeValue + "</td>";
	// 	table += "<td>" + row[i].getElementsByTagName("SIGNGU_CODE_SE")[0].childNodes[0].nodeValue + "</td>";
	// 	table += "<td>" + row[i].getElementsByTagName("TOT_LVPOP_CO")[0].childNodes[0].nodeValue + "</td>";
	// 	table += "<td>" + row[i].getElementsByTagName("DAIL_MXMM_LVPOP_CO")[0].childNodes[0].nodeValue + "</td>";
	// 	table += "</tr>";
	// }

	// document.getElementById('demoXML').innerHTML = table;

	$(xmlDOM).find("row").each(function(){
		table += "<tr>";
		table += "<td>" + $(this).find("STDR_DE_ID").text() + "</td>";
		table += "<td>" + $(this).find("SIGNGU_CODE_SE").text() + "</td>";
		table += "<td>" + $(this).find("TOT_LVPOP_CO").text() + "</td>";
		table += "<td>" + $(this).find("DAIL_MXMM_LVPOP_CO").text() + "</td>";
		table += "</tr>";
	});
	$("#demoXML").html(table);

}

function parseJSON(jsonText){
	var row = jsonText.SPOP_DAILYSUM_JACHI.row;

	var table = "<tr><th>날짜</th><th>구ID</th><th>총생활인구수</th><th>일최대이동인구수</th></tr>";

	for(i = 0; i < row.length; i++) {
		table += "<tr>";
		table += "<td>" + row[i].STDR_DE_ID+ "</td>";
		table += "<td>" + row[i].SIGNGU_CODE_SE + "</td>";
		table += "<td>" + row[i].DAY_LVPOP_CO + "</td>";
		table += "<td>" + row[i].DAIL_MXMM_LVPOP_CO + "</td>";
		table += "</tr>";
	}


	//document.getElementById("demoJSON").innerHTML = table;
	$("#demoJSON").html(table);
}
</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><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

 

 

21. jQuery010_AJAX4.html

<!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()
		}
		, 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>

 

[추가] API 승인키 신청 : 개발용, 90일

juso.go.kr/addrlink/devAddrLinkRequestWrite.do?returnFn=write&cntcMenu=URL

[추가] 검색 API 사용법 문서 읽기!

juso.go.kr/addrlink/devAddrLinkRequestGuide.do?menu=roadApi

[추가] API활용 체험

juso.go.kr/addrlink/devAddrLinkRequestUse.do?menu=roadSearch

[추가] postman을 이용하여 JSON data 확인하기

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

2020.05.14  (0) 2020.05.14
2020.05.13  (0) 2020.05.13
2020.05.11  (0) 2020.05.11
2020.05.08  (0) 2020.05.08
2020.05.07  (0) 2020.05.07

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

  • 현재글2020.05.12

관련글

shine의 개발 노트

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

티스토리툴바