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

2020.05.11

shine94 2020. 5. 11. 09:04

1. Js008_BOM1_window.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BOM - window </title>
</head>
<!-- 
BOM : Browser Object Model 
      (브라우저 객체 모델)
      
JavaScrpt 는 소위 BOM 이라 불리우는 '브라우저 객체 모델' 을 통해
'브라우저' 를 제어 합니다.

BOM 은 특별히 '표준' 이 정해져 있는 모델이 아닙니다.
그러나, 
오늘날 대부분의 브라우저들이 
'JavaScript' 를 통해 그리고 'BOM 의 object 들과 method' 들로 통해
제어되고 있으며 이들 브라우저들이 대체로 같은 이름의  object 와 method 들은 사용하다 보니
BOM 이 마치 '표준'처럼 여겨져 사용되고 있습니다.
(사실, 브라우저마다 조금씩 다르게 구현된 부분도 있습니다)

BOM 의 object 계층은 다음과 같습니다.

window
	├─ document 
	├─ screen
	├─ location
	├─ history
	└─ navigator
	
■ window 객체

	BOM 의 최상위 객체.
	모든 '전역(global)' 객체, 변수, 함수는 자동적으로 window 객체 멤버가 된다.
	일반적으로 window객체가 '생략' 되며,  이 경우 
	자동적으로 window 객체 멤버입니다.
	
	document 또한 window 객체 멤버임에 주목!
	
		window.document.getElementById("header");
			↕  
		document.getElementById("header");

-->

<!-- var 없이 변수 선언하면 전부 window 객체..!! -->

<script>
// 전역변수 x, window 소속
var x = 10;

function myFunc1() {
	//document.getElementById("result1").innerHTML
	//	= "전역 x = " + x;

	window.document.getElementById("result1").innerHTML
		= "전역 x = " + window.x; //+ ", 전역 a = " + a;

}

function myFunc2() {
	x = x + 3;
	document.getElementById('result2').innerHTML = x;
}

function myFunc3() {
	a = 40;	// 함수 안에서 선언했다고 다 지역변수 아니다, var 사용하지 않으면 자동으로 전역변수다..!!
	document.getElementById('result3').innerHTML = a;
}

function myFunc4() {
	a += 20; // myFunc3에서 a를 선언해야 사용 가능
	document.getElementById('result4').innerHTML = a;
}
// 함수 안에서 지역변수로 사용할 거라면 꼭!! var 사용하기..!!
</script>

<body>
<h2>window 객체</h2>
<br>
<button type="button" onclick="myFunc1();">전역 변수 x </button>
 : <span id="result1"></span><br><br>
<button type="button" onclick="myFunc2();">전역 변수 x 3증가 </button>
 : <span id="result2"></span><br><br>
<button type="button" onclick="myFunc3();">a = 40</button>
 : <span id="result3"></span><br><br>
<button type="button" onclick="myFunc4();">a = a + 20 </button>
 : <span id="result4"></span><br><br>

<hr>
<script>
//alert(), confirm(), prompt() 도 window 소속

function myFunc5() {
	var answer = window.confirm('confirm() 도 window 소속');
	document.getElementById('result5').innerHTML = answer;
}

function myFunc6() {
	var name = window.prompt('너의 이름은?');
	document.getElementById('result6').innerHTML = name;
}
</script>
<input type="button" onclick="window.alert('alert함수도 window 소속')" value='alert() 함수'/><br><br>
<input type="button" onclick="myFunc5()" value='confirm() 함수'/>
: <span id="result5"></span><br><br>
<input type="button" onclick="myFunc6()" value='prompt() 함수'/>
: <span id="result6"></span><br><br>

<hr>

<h4>open() 함수</h4>
<!-- 
	팝업 창 띄움
	요즘은 대부분의 브라우저가 팝업을 허용하지 않는 옵션이 켜져 있어서 특별한 경우 아니면 쓰진 않는것을 추천
 -->
<script>
function myFunc7(){
	// open(url, 새창이름, 새창옵션);
	// 리턴값도 window 객체
	myWindow = open('Js008_BOM1_pop.html', '팝업창', 'width=350, height=400, left=50, top=10')
}
</script>
<button type="button" onclick="myFunc7()">open()</button>
<br><br>
<button type="button" onclick="myWindow.close()">close()</button> <!-- 열린 창 닫기 -->
<br><br>
<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><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

 

** Js008_BOM1_pop.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Popup </title>
</head>
<body>
~~~  닫아보세요 ~~~<br><br>
<!-- Chrome 에서는 동작 안함 -->
<button type="button" onclick="TODO">닫기</button>
<p id="result8"></p>
</body>
</html>

 

 

2. Js008_BOM2_screen.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BOM - screen</title>
</head>
<!-- 
window.screen object  
(window) 는 생략 가능

'사용자 스크린 (모니터) 를 다루는 객체'

다음과 같은 property 값이 있다.
screen.width        스크린 크기
screen.height
screen.availWidth    사용 사용 가능한 영역 (OS 차지 영역 (ex:작업표시줄) 제외)    
screen.availHeight
screen.colorDepth     색상 bit 수
screen.pixelDepth     (최근 브라우저에선 colorDepth 와 pixelDepth 는 같다)

반면에 다음은 '브라우저'의 크기다
window.innerWidth 와 window.innerHeight   브라우저 안 내부 영역 <body> 영역
window.outerWidth 와 window.outerHeight   브라우저 창 전체 크기 

	// 실제로는 브라우저 호환 등의 문제로 다음과 같이 체크해야 한다  (IE8 이하..)
	var w = window.innerWidth
	|| document.documentElement.clientWidth
	|| document.body.clientWidth;
	
	var h = window.innerHeight
	|| document.documentElement.clientHeight
	|| document.body.clientHeight;

 -->
<script>
function showScreen(){
	document.getElementById("demo").innerHTML = 
	"Screen width & height : " + screen.width + " x " + screen.height + "<br>" +
	"availWidth & arailHeight : " + screen.availWidth + " x " + screen.availHeight + "<br>" +
	"Screen Color Deptn : " + screen.colorDepth + "<br>" +
	"Screen Pixel Depth: " + screen.pixelDepth + "<br>" +
	"window.innerWidth x innerHeight: " + window.innerWidth + " x " + window.innerHeight + "<br>" + 
	"window.outerWidth x outerHeight: " + window.outerWidth + " x " + window.outerHeight + "<br>"
	;
}

</script>

<!-- 
	onload : 해당 element 의 로딩이 끝나면 호출
	onresize : element 사이즈 변경될 때마다 호출
-->

<body onresize="showScreen()" onload="showScreen()">
<p id="demo"></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><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

 

 

3. Js008_BOM3_location.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>BOM - location</title>
</head>
<!-- 
window.location object

브라우저의 현재 URL 정보를 다루거나,
다른 페이지로 이동할때 사용함  ( 새로운 request 발생 ! )

location.href  : 현 페이지의 href (URL) 값 리턴함.★★★
location.hostname : 호스트 이름       ex) www.naver.com
location.pathname :  현 페이지의 경로   (프로토콜 제외)
location.protocol :  웹 프로토콜 리턴  (http: or https:)
location.port : 포트번호  (80 http, 443 https 인 경우, 브라우저에서 안보여주거나 0 을 표시)
location.assign : 새 웹문서 로딩
location.search : 쿼리문자열 
location.reload() : 새로고침


 -->
<body>
<h3>location</h3>
<script>
	//TODO  // 현재시각: reload() 확인용
</script>

<!-- location.assign()보다 location.href를 많이 사용함, 
	[주의!!] 인터넷 익스플로어에서는 location.href를 함수처럼 사용하나 
	인터넷 익스플로어 이외에는 함수처럼 사용하지 않기 때문에 동작되지 않는다..!! -->
<p id="demo"></p>
<button type="button" onclick="location.assign('https://www.naver.com')">assign()</button>
<br><br>
<button type="button" onclick="location.href='https://www.daum.net'"> location.href = </button>
<br><br>
<button type="button" onclick="location.reload()"> reload() </button>
<br>


<script>
document.getElementById("demo").innerHTML = 
"현재 페이지 URL : <br>" + location.href + "<br>" + 
"호스트 이름 : <br>" + location.hostname + "<br>" + 
"현 페이지 경로 : <br>" + location.pathname + "<br>" +
"프로토콜 : <br>" + location.protocol + "<br>" +
"포트번호 : <br> " + location.port + "<br>" +
"쿼리문자열 : <br> " + location.search + "<br>"
</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>

 

 

4. VSC workspace 설정 해지

 : 단축키 Ctrl + Shift + P > remove 검색 > Workspaces: Remove Folder from Workspace... 클릭

> Select workspace folder를 현재 작업페이지로 선택

> File > Open Recent > Clear Recently Opened

 

 

5. Js008_BOM4_history1.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>history 1</title>
</head>
<!-- 
※ 본 예제는 history1 ~ history3 3개의 html 파일 필요, title 과 h1 주목.

'브라우저가 기억하고 있는' 이전/이후 페이지로 이동 (★새로 request를  발생하는 것이 아니다★)

history.back()   이전 페이지 이동
history.forward()  이후 페이지 이동
history.go(숫자)      이동 숫자,  -2 를 입력하면  2단계 이전 방문
history.length      방문기록에 저장된 목록의 개수를 반환

history object 로 이동시는 새로운 request 를 발생시키는 것이 아니라
브라우저가 기억하는 사이트를 표시하는 것이기 때문에
form 에 직전에 입력한 것까지도 그대로 복원된다.  (password, file 등은 브라우저 별로 예외)

 -->
<body>
<h2>history 1</h2>
<script>
document.write(new Date() + "<br>"); // 시간 확인,  새로고침 여부 확인용
document.write("history.length : " + history.length  + "<hr>");

</script>

이름: <input type="text"/><br><br>

<input type="button" value="history 2" onclick="location.href = 'Js008_BOM4_history2.html'"/>
<input type="button" value="history 3" onclick="location.href = 'Js008_BOM4_history3.html'"/>
<br>
<hr>
<input type="button" value="back()" onclick="history.back()">
<input type="button" value="forward()" onclick="history.forward()">
<input type="button" value="go(-1)" onclick="history.go(-1)">
<input type="button" value="go(-2)" onclick="history.go(-2)">
<input type="button" value="go(1)" onclick="history.go(1)">
<input type="button" value="go(2)" onclick="history.go(2)">
<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>

 

** Js008_BOM4_history2.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>history 2</title>
</head>
<!-- 
브라우저가 기억하고 있는 이전/이후 페이지 이동

history.back()   이번 페이지 이동
history.forward()  이후 페이지 이동

 -->
<body>
<h2>history 2</h2>
<script>
document.write(new Date() + "<br>"); // 시간 확인,  새로고침 여부 확인용
document.write("history.length : " + history.length  + "<hr>");
</script>

별명: <input type="text"/><br><br>

<input type="button" value="history 1" onclick="location.href = 'Js008_BOM4_history1.html'"/>
<input type="button" value="history 3" onclick="location.href = 'Js008_BOM4_history3.html'"/>
<br>
<hr>
<input type="button" value="back()" onclick="history.back()">
<input type="button" value="forward()" onclick="history.forward()">
<input type="button" value="go(-1)" onclick="history.go(-1)">
<input type="button" value="go(-2)" onclick="history.go(-2)">
<input type="button" value="go(1)" onclick="history.go(1)">
<input type="button" value="go(2)" onclick="history.go(2)">
<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><br>
</body>
</html>

 

** Js008_BOM4_history3.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>history 3</title>
</head>
<!-- 
브라우저가 기억하고 있는 이전/이후 페이지 이동

history.back()   이번 페이지 이동
history.forward()  이후 페이지 이동

 -->
<body>
<h2>history 3</h2>
<script>
document.write(new Date() + "<br>"); // 시간 확인,  새로고침 여부 확인용
document.write("history.length : " + history.length  + "<hr>");
</script>

별명: <input type="text"/><br><br>

<input type="button" value="history 1" onclick="location.href = 'Js008_BOM4_history1.html'"/>
<input type="button" value="history 2" onclick="location.href = 'Js008_BOM4_history2.html'"/>
<br>
<hr>
<input type="button" value="back()" onclick="history.back()">
<input type="button" value="forward()" onclick="history.forward()">
<input type="button" value="go(-1)" onclick="history.go(-1)">
<input type="button" value="go(-2)" onclick="history.go(-2)">
<input type="button" value="go(1)" onclick="history.go(1)">
<input type="button" value="go(2)" onclick="history.go(2)">
<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><br>
</body>
</html>

 

 

6. Js009_DOM1_get.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>DOM:get함수들</title>
</head>
<!-- 
■ DOM (Document Object Model)
HTML 페이지가 로드 되면 
브라우저는 이 HTML 페이지를 다루기위한
DOM 을 생성합니다.

■ DOM 은 'W3C 표준' 입니다.
- 이는 모든 언어에 오픈된 규약입니다.
	즉, JavaScript 외에 다른 언어로도
	DOM 표준을 따르는 HTML문서를 다룰수 있다.
	
- 'W3C DOM 표준'은  크게 3파트로 구성
	1. Core DOM
	2. XML DOM
	3. HTML DOM

■ HTML DOM 표준의 목적은! 
HTML element를 다루기 위한
표준방법을 제시하는 겁니다.

■ JavaScript 는 DOM 구조의 HTML페이지를
다루기 위한 언어입니다.

- JS는 DOM 안의 모든 element를 변경할수 있다.
- JS는 DOM 안의 모든 attribute를 변경할수 있다.
- JS는 DOM 안의 모든 CSS 를 변경할수 있다.
- JS는 DOM 안의  element 나 attribute를 삭제할수 있다.
- JS는 DOM 안에  element 나 attribute를 추가할수 있다
- JS는 DOM 안의 event를 다룰수 있다.
- JS는 DOM 안에 event를 추가할수 있다.    

■ JavaScript 는 
	window.document 객체를 통해 DOM 구조 다룹니다

 -->
<body>
<!-- getElementById(아이디)  :  해당 '아이디' 값을 가진 element 한개 리턴 (여러개 있으면 첫번째만 리턴) -->
<h2>getElementById(아이디)</h2>
<p id="demo1">첫번째 demo 입니다</p>
<p id="demo1">두번째 demo 입니다</p>
<p id="demo3">세번째 demo 입니다</p>

<script>
// id 값이 중복되는 경우 첫번째 element 만 가져온다.
// id 값은 유니크한 값으로 원래는 중복된 값을 지정해서는 안됨..!!
// CSS 세상에서는 중복되더라도 원래 안되지만 모두 검색되나
// JS 세상에서는 짤없이 첫번째 element 만 가져온다.
document.write('결과' + document.getElementById('demo1').innerHTML);

</script>

<hr>
<!-- getElementsByTagName(태그) : '태그' 의 'element들' 을 배열로 리턴 -->
<h2>getElementsByTagName(태그)</h2>
<div>div 입니다</div>
<div>div 입니다</div>
<div>div 입니다</div>

<script>
// div element들을 찾아서 차례대로 "div1 입니다" "div2 입니다"..  로 내용 바꾸기
var elements = document.getElementsByTagName("div");

for(i = 0; i < elements.length; i++) {
	var element = elements[i];
	element.innerHTML = "div" + i + "입니다!";
}
// 해당 스크립트가 실행될때 아래의 코드가 로딩이 되지 않은 상태였기 때문에
// 아래의 div에는 적용되지 않음...!!
</script>

<hr>
<!-- getElementsByClassName(클래스) : '클래스' 의 'element들' 을 배열로 리턴 -->
<h2>getElementsByClassName(클래스)</h2>
<div class="c1 c2 c3">c1 c2 c3</div>
<div class="c3">c3</div>
<div class="c2 c3 c4">c2 c3 c4</div>
<div class="c4 c5 c6">c4 c5 c6</div>

<script>
// c3 class 를 갖고 있는 element 의
// 배경색을 노랑색으로 바꾸세요
// getElementsByClassName("c3")
// element.style.background
var elements = document.getElementsByClassName("c3");

for(i = 0; i < elements.length; i++) {
	var element = elements[i];
	element.style.backgroundColor = "yellow";
}
</script>

<hr>
<!-- getElementsByName(name) : 'name' 의 'form element들' 을 배열로 리턴 -->
<h2>getElementsByName(name)</h2>
<form>
name1: <input type="text" value="name1" name="name1"/><br>
name1: <input type="text" value="name1" name="name1"/><br>
name2: <input type="text" value="name2" name="name2"/><br>
</form>

<script>
// name=name1 인 element들을 찾아서
// 배경색을 노란색으로 하고 입력사이즈를 50으로 변경해보기
var elements = document.getElementsByName('name1');

for(i = 0; i < elements.length; i++) {
	var element = elements[i];

	// 배경색을 노란색
	element.style.backgroundColor = "yellow";

	// 입력사이즈를 50..!!
	element.style.size = 50;

	// value 가 없는 attribute 의 경우
	// true, false로 설정해주거나
	element.disabled = true;

	// 아래와 같이 설정해주면 된다
	element.value = "getElementsByName";
}
</script>

<hr>
<!-- querySelectorAll(selector) : 'CSS selector' 의 'element들' 을 배열로 리턴 -->
<h2>querySelectorAll(selector)</h2>

<p class="intro">class intro</p>
<p class="intro">class intro</p>
<p class="retro">class retro</p>

<script>
// p.intro selector 에 해당하는 element 들을 찾아서 배경색 하늘색으로
var elements = document.querySelectorAll("p.intro");

for(i = 0; i < elements.length; i++) {
	var element = elements[i];
	element.style.backgroundColor = "cyan";
}
</script>

<!-- 
HTML DOM 구조에서 object collection 사용 가능

document.anchors
document.body
document.documentElement
document.embeds
document.forms
document.head
document.images
document.links
document.scripts
document.title

-->


<hr>
<!-- document.forms : document 의 모든 <form> element 들 -->
<h2>document.forms</h2>

<form name="frm1">
	<input value="폼 1_1" name="input1_1"/>
	<input value="폼 1_2" name="input1_2"/>
</form>
<form name="frm2">
	<input value="폼 2_1" name="input2_1"/>
	<input value="롬 2_2" name="input2_2"/>
	<input value="롬 2_3" name="input2_3"/>
</form>
<form name="frm3">
	<input value="폼 3_1" name="input3_1"/>
	<input value="폼 3_2" name="input3_2"/>
	<input value="폼 3_3" name="input3_3"/>
	<input value="폼 3_4" name="input3_4"/>
</form>
<p id="frm_result1"></p>
<p id="frm_result2"></p>

<script>
// form 들을 다 뒤져서 form element 들의 value 들을 
var frm1 = document.forms['frm1'];

var result = "";
for(i = 0; i < frm1.length; i++) {	// 여기서 form.length 는 그 안의 form element 들의 개수
	result += frm1.elements[i].value + " ";	// form 요소의 elements 배열
}

document.getElementById('frm_result1').innerHTML = result;
document.getElementById('frm_result2').innerHTML = 
		//document.forms['frm2']['input2_2'].value;
		document.forms.frm2.input2_2.value;
</script>

<hr>
<!-- document.images : document 의 모든 <img> element 들 -->
<h2>document.images</h2>

<img src="https://www.w3schools.com/js/pic_htmltree.gif">
<img src="https://www.w3schools.com/js/pic_navigate.gif">
<p id="demo4"></p>

<script>
// 모든 이미지들의 테두리를 4px solid blu 로 만들기
var elements = document.images;	// <img> element 들

for(i = 0; i < elements.length; i++) {
	var element = elements[i];
	element.style.border = "4px solid blue";
}

document.getElementById('demo4').innerHTML = elements.length + " 개의 이미지";
</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>
</body>
</html>

 

 

7. Js009_DOM2_event1.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM eventListener</title>
</head>
<style>
div#demo {
	width:200px;
	height:200px;
	background-color: yellow;
	text-align: center;
	
}
</style>
<body>
<!-- 
event : ~~할때
event listener : 위 event 때에 동작하는 함수


특정 element 에 event listener 를 추가 하는 방법
	element.addEventListener("이벤트", 함수)
	element.on이벤트 = 함수 

특정 element 에 event listener 를 삭제 하는 방법
	element.removeEventListener("이벤트", 함수)
	element.on이벤트 = undefined

Listener 로 동작하는 함수는 이벤트 발생때마다 동작(호출)되는데
이때 발생된 이벤트 정보가 담긴 event 객체를 매개변수로 받을수 있다.
	event.type : 이벤트 타입
	event.target : 이벤트가 발생한 객체

DOM 모든 이벤트
	https://www.w3schools.com/jsref/dom_obj_event.asp
DOM event 객체	
	https://www.w3schools.com/jsref/obj_event.asp
-->
<div id="demo">이벤트 없어요</div><br>
<button id="add_event">이벤트 추가</button>
<button id="remove_event">이벤트 삭제</button>
<p id="event"></p>

<script>
var demoBox = document.getElementById("demo");
var addButton = document.getElementById("add_event"); 
var removeButton = document.getElementById("remove_event");

function clickHandler(event) {
	document.getElementById('event').innerHTML = event.type + ' ' + event.target;

	var bgcolor = demoBox.style.background;

	if(bgcolor != 'greenyellow') {
		demoBox.style.background = 'greenyellow'
	} else {
		demoBox.style.background = 'yellow'
	}
}

function mouseOverHandler(event) {
	document.getElementById('event').innerHTML = event.type + " " + event.target;
	demoBox.style.outline = "3px solid red";
}

addButton.addEventListener("click", function() {
	demoBox.addEventListener("click", clickHandler);	// 이벤트 등록
	demoBox.innerHTML = "클릭해보세요";

	// onXXX() attribute 사용하여 이벤트 등록
	demoBox.onmouseover = mouseOverHandler;
	demoBox.onmouseout = function(event) {
		demoBox.style.outline = ""
	}
})

removeButton.addEventListener('click', function() {
	demoBox.removeEventListener('click', clickHandler);	// 이벤트 해제
	demoBox.innerHTML = "이벤트 없어요"

	// onXXX() attribute 사용하여 이벤트 해제
	demoBox.onmouseover = undefined;	// 이벤트 삭제
	demoBox.onmouseout = undefined;
})
</script>

<!-- Window object 에 event handler 추가 -->
<p id="windowSize"></p>

<script>
/*
// resize 는 onresize 임
// 화면을 줄이면 그때 화면에 값 출력..!!
// 첫 번째 방법
window.addEventListener("resize", function() {
	document.getElementById('windowSize').innerHTML
		= window.innerWidth + " x " + window.innerHeight;
})
*/

// 화면을 줄이면 그때 화면에 값 출력..!!
// 두 번째 방법
window.onresize = function() {
	document.getElementById('windowSize').innerHTML
		= window.innerWidth + " x " + window.innerHeight;
}

// 페이지 '전체' 로딩 완료 후
// 페이지 로딩 되자마자 화면에 값 출력
window.onload = function() {
	document.getElementById('windowSize').innerHTML
		= window.innerWidth + " x " + window.innerHeight;
}
</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>
</body>
</html>

 


8. Js009_DOM2_event2.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM bubble/capture</title>
</head>
<style>
ul, li {padding: 5px;margin: 3px;}
ul{background-color: pink;}
li{background-color: cyan;}
</style>
<!-- 
element.addEventListener("이벤트", 함수, useCapture)

https://javascript.info/bubbling-and-capturing


window.event 객세 사용
	event.stopPropagation();


-->
<body>
<ul>
  <li onclick="show(this)">Coffee</li>
  <li onclick="show(this)">Tea
    <ul>
      <li onclick="event.stopPropagation(); show(this)">Black tea</li>
      <li onclick="show(this)">Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

<script>
function show(e) {
  // text 만 보이기
  alert(e.childNodes[0].nodeValue);
}


</script>

<br>
<ul id="ad">
  <li>커피</li>
  <li>차
    <ul>
      <li>홍차</li>
      <li>녹차</li>
    </ul>
  </li>
  <li>우유</li>
</ul>

<script>
// 위 <li> 클릭하면 show(this) 가 작동되도록 이벤트
var li = document.querySelectorAll("ul#ad li");

for(i=0; i < li.length; i++) {
  //li[i].addEventListener("click", function() {show(this);});  // bubbling 방식
  li[i].addEventListener("click", function() {show(this);}, true);  // capturing 방식
}

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

 

 

9. Js009_DOM3_node.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM Navigation</title>
</head>
<!-- 
DOM 에서 node 


node type (종류) 와    nodeType 값
	Element node		1       <h1 class="heading">W3Schools</h1>
	Attribute node		2        class = "heading" (deprecated)
	Text node			3        W3Schools
	Comment node		8        
	Document node		9        HTML 문서 자신, <html> 의 부모
	DOCUMENT_TYPE_NODE	10       <!Doctype html>
	
	** 명심! Element node 가 text 를 갖고 있는 것이 아니다!!! 

JS 로 DOM 의 node 간 navigate 할수 있다.
- parentNode
- childNodes[nodenumber]
- firstChild
- lastChild
- nextSibling
- previousSibling
- attributes

 -->
<body>
<h2>childNodes, nodeValue</h2>
<!-- childNodes 와 nodeValue -->
<h3 id="id01">My First Page</h3>
<p id="id02"></p>
<script>
document.getElementById('id02').innerHTML
	//= document.getElementById('id01').innerHTML
	//= document.getElementById('id01').firstChild.nodeValue;
	= document.getElementById('id01').childNodes[0].nodeValue
	;

// nodeValue 는
// 	- Element node 의 nodeValue 는 undefined
//  - Text node 의 nodeValue 는 text값
//  - Attribute node 의 nodeValue 는 attribute value
</script>


<br><hr>
<h2>document.body</h2>
<p onclick="alert(document.body.innerHTML)">클랙하면 body 의 컨텐츠가!</p>


<br><hr>
<h2>document.documentElement</h2>
<p onclick="alert(document.documentElement.innerHTML)">클릭하면 document 의 컨텐츠가!</p>

<br><hr>
<h2>nodeType</h2>
<p id="id03"></p>
<script>
document.getElementById('id03').innerHTML
	= document.getElementById('id01').nodeType;	// 1: element node

</script>


<!-- document.body 노드 밑의 
	 모든 child 노드의 nodeValue, nodeType 을 출력해보세요
	 
	 hint) document.body.childNodes 사용
-->
 
<br><hr>
<h2>childNodes, nodeName, nodeType, nodeValue</h2>
<!-- body elment node 의 child 들의 nodeName, nodeType, nodeValue -->
<p id="id04"></p>
<script>
var c = document.body.childNodes;

var txt = "";
for(i = 0; i < c.length; i++) {
	txt += c[i].nodeName + " | "
			+ c[i].nodeType + " | "
			+ c[i].nodeValue
			+ "<br>";
}

document.getElementById('id04').innerHTML = txt;
</script>


<br><hr>
<h2>attributes</h2>
<!-- 특정 element.attributes : attribute node 만 추출한다 -->
<img id="img01"
	src="https://www.w3schools.com/html/img_girl.jpg"
	alt="girl"
	width="150"
	height="200"/>

<p id="id05"></p>
<script>
var c = document.getElementById('img01').attributes;
var txt = "";

for(i = 0; i < c.length; i++) {
	txt += c[i].nodeName + " | "
			+ c[i].nodeType + " | "
			+ c[i].nodeValue + " | "
			+ "<br>";
}

document.getElementById('id05').innerHTML = txt;
</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>
</body>
</html>

 


10. Js009_DOM4_ element.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM - Node</title>
<style>
div { padding: 3px; }
p { background-color: cyan;}
table, th, td{
	border: 1px solid black;
	border-collapse: collapse;
	padding: 5px;
}
td{
	background-color: orange;
}

span, input{
	display:inline-block; 
	width:200px;
}

</style>
</head>
<!-- 
	node 를 생성할수 있다.!
	생성된 노드를 원하는 node 에 붙일수 있다.!
	
	document.createElement()
	document.createTextNode()
	
	E.appendChild(A) : 
		A를 E의 마지막 child 로 append 된다.
	E.insertBefore(A, B) : 
		E 의 child 중에  B 앞에 A를 child 로 insert 한다.
	E.removeChild(A) :
		E 의 child 중에 A 를 제거한다.
-->
 
<!-- 
 	attribute 를 세팅할수도 있다
 	E.setAttribute("attribute 이름", "attribute 값");
 	
 	attribute 를 제거
 	E.removeAttribute("attribute 이름");
 	
 	attribute 값 리턴
 	E.getAttribute("attribute 이름");  
 	
 	attribute 를 갖고 있는지 여부, true/false 리턴
 	E.hasAttribute("attribute 이름");   
-->

<body>

<div id="div1" style="background-color: yellow">
	div1입니다
	<p id="p1">p1 입니다</p>
	<p id="p2">p2 입니다</p>
</div>

<script>
var para;
var node;
var parent, child;
var element = document.getElementById("div1");

// 단계별로 확인해보자

// appendChild()
para = document.createElement("p");	// <p> element 생성
node = document.createTextNode("appendChild()로 추가");	// #text 노드 생성
para.appendChild(node);

element.appendChild(para);	// div1 의 마지막 child 로 append 됨


// insertBefore()
para = document.createElement("p");	// <p> element 생성
node = document.createTextNode("insertBefore()로 추가");	// #text 노드 생성
para.appendChild(node);
child = document.getElementById('p1');
element.insertBefore(para, child)

// removeChild()
parent = document.getElementById('div1');
child = document.getElementById('p2');
parent.removeChild(child);

</script>


<div>
<table id="table1">
<tr>
	<th>이름</th>
	<th>아이디</th>
</tr>
<tr>
	<td><!-- this 는 그 element다 -->
	<span onclick="doChange(this)">
	홍길동
	</span>
	</td>
	<td>
	<span onclick="doChange(this)">
	Mr.Hong
	</span>
	</td>
</tr>
</table>
</div>

<script>
//document.getElementById('table1').style.border = "4px solid red";
//document.getElementById('table1').setAttribute('style', 'border: 4px solid red');
document.getElementById('table1').style.setProperty('border', '4px solid red')
</script>

<script>
function doChange(e) {
var nodeName = e.nodeName.toUpperCase();
var parent = e.parentNode;

	if(nodeName == "SPAN") {
		// e 가 <span> 이었으면 <input> 으로 바꾸기
		var txt = e.innerHTML.trim();
		parent.removeChild(e);

		var node = document.createElement("input");
		node.value = txt;

		// 두가지 케이스(포커스가 이동할때, 엔터를 입력할때) 일 때는 다시 <span>으로 변경 되어야 함
		node.setAttribute('onfocusout', 'doChange(this)');	// 포커스 이동
		node.setAttribute('onkeydown', 'doEnter(this)');	// 엔터 입력

		parent.appendChild(node);
		node.focus();
	} else if (nodeName == "INPUT") {
		// e 가 <input> 이었으면 <span>으 로 바꾸기
		// 두가지 케이스(포커스가 이동할때, 엔터를 입력할때) 일 때는 다시 <span>으로 변경 되어야 함
		var txt = e.value.trim();
		parent.removeChild(e);
		
		var node = document.createElement("span");
		var txtNode = document.createTextNode(txt);
		node.appendChild(txtNode);
		node.setAttribute('onclick', 'doChange(this)');
		parent.appendChild(node);
	}

}

function doEnter(e) {
	if(event.keyCode ==	13) {	// Enter 키 코드 값 13
		doChange(e);
	}
}

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

 

[주의!] F12 개발자 모드는 소스 보는 곳이 아님, DOM을 보는 곳임!!

 


11. 동기(Synchronous) 방식  

 : request 하면 client 는 response 를 받을때까지 다음(다른)작업 진행 못함,
   브라우저에선 request 가 발생하면 기존의 페이지를 없애고 response 받은 뒤에야 페이지를

   다시 그려주는 ‘페이지 reloading’ 이 발생
   예) 주문한 후에 커피가 나올때까지 순서대로 기다리는 방식

 


12. 비동기(Asynchronous) 방식 

 : 비동기로 request 해도, 바로 다음(다른) 작업 진행 가능, 

   ‘페이지 reloading’ 이 발생없이 작동 가능,

   response 되는 순서는 꼭 request 되는 순서와 일치 하지 않을수 있다, 

   클라이언트 입장에선 비동기로 request 한거에 대한 response 가 언제 도착할지 모르기 때문에   

   response 도착시 이벤트 처리를 통해 처리해야 한다.
   예) 주문한 후에 진동벨이 울리면 커피를 가지로 오는 방식

 

 

13. AJAX(Asynchronous Javascript And XML)

 : 브라우저(클라이언트)에서 페이지 리로딩 과정 없이 서버와 백그라운드에서 비동기 방식으로 

   request-response 가능하게 하는 기술(주의! 언어가 아니라 기술임..!!)

 


14. AJAX 를 구현하기
    Client -------- 1) 백그라운드로 request할 URL 설계 ---------------> Server
    Client -------- 2) 어떻게 request 할지 설계 ------------------------> Server
    Client <------ 3) 그 URL로 서버에 무슨 동작을 할 것인가 설계 ----- Server
    Client <------ 4) 동작 후에 어떤 결과를 response할 것인지 설계 --- Server
    Client -------- 5) response 받아서 어떻게 처리할지 설계 ------------ Server

 


15. AJAX reuqest는 데이터를 response 받는 용도로 주로 XML, JSON에서 많이 다루나

     포맷과 무관하게 모든 데이터들이 전부 response 가능하다.

 

 

16. Js010_amin.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM Animation</title>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
</head>
<!-- 
window 객체에 다음의 함수들이 있다.

setInterval(함수, 시간간격) 
	: '시간간격' 으로 함수 수행 , ms 단위
	: 리턴값은 '애니메이션id' 객체 리턴
	
clearInterval('애니메이션id')
	: ''애니메이션id' 의 애니메이션 종료
 -->
<body>
<button onclick="clock();">시간</button>
<br><br>
<p id="timeboard"></p>
<script>
var clockAnimId = undefined;

function clock(){

  if(!clockAnimId) {
    // 애니메이션 시작
    setInterval(tick, 1000);
  } else {
    // 애니메이션 종료
    clearInterval(clockAnimId);
    clockAnimId = undefined;
  }
}

function tick() {
  var d = new Date(); // 현재 시간
  document.getElementById("timeboard").innerHTML
    = d.getFullYear() + "/" +
      + (d.getMonth() + 1) + "/"  // 월은 0 부터 시작
      + d.getDate() + " "  
      + d.getHours() + ":"
      + d.getMinutes() + ":"
      + d.getSeconds();

}

</script>

<hr>

<button onclick="myMove()">Click Me</button>
<br><br>

<div id ="container">
<div id ="animate"></div>
</div>

<script>
function myMove() {
  var elem = document.getElementById('animate');
  var pos = 0;

  var id = setInterval(frame, 5);

  function frame() {
    if(pos == 350) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px'; 
    }
  }

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

 

 

17. Js011_AJAX1.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>AJAX</title>
</head>
<!--
	■ 동기화 (Synchronous) 방식
	 	request - response 관계 

	■ AJAX
	1. Asynchronous JavaScript And XML.
		: 자바스크립트르 활용한 비동기 프로그래밍
		: 꼭 XML만 다루지는 않음.. 텍스트, JSON 등 다룰수 있슴
			(결국 AJAX 는 근시안적 작명의 오류)
	2. AJAX는  프로그래밍 언어가 아니다!
	
	3. XMLHttpRequest object 를 사용하여 서버에 request를 보내고
	  DOM 을 사용하여 화면에 업데이트 한다.
	
	4. 일본어로:  アジャックス

	 
	■ AJAX 장점!
	1. 페이지 로딩 후에도, 서버로부터 데이터 끌고 올수 있다. 
	2. 페이지 리로딩 없이, 서버로부터 데이터 끌고 와서 페이지 업데이트 가능
	        → 페이지 변경시 필요한 네트웍 트래픽(시간, 대역폭) 절약
	3. 서버에 데이터 전송이 서버 조작이 가능하다 (백그라운드로!)
	
	■ AJAX 사용예
	1. 아이디 중복 체크
	2. 포탈 검색어 입력시 suggestion.
	3. 실시간 정보 업데이트 : 실검, 날씨, 뉴스, 주식 정보등..
	4. 스크롤 페이징
	5. 각종 API
	6. SPA (Single Page Web : 단일페이지 웹) 구현
	
	■ AJAX 작동절차
	1. 웹페이지 이벤트 발생 (클릭, 입력, 등...)
	2. XMLHttpRequest object 생성
	3. XMLHttpRequest object 가 서버에 request 한다.
	4. 서버가 request 처리
	5. 서버가 response 를 웹페이지에 보낸다
	6. 웹페이지에서 response 를 읽는다.
	7. 읽은 내용으로 화면을 업데이트 한다
-->

<!-- 
 ※ 크롬의 경우 타 소스로의 AJAX 요청을 원천적으로 차단합니다.
 same-origin policy 정책
--> 

<body>

<div id="demo">
<h2>AJAX XMLHttpRequest</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
var url = "https://www.w3schools.com/js/ajax_info.txt";
function loadDoc() {
	var xhttp = new XMLHttpRequest();	// XHR
	xhttp.onreadystatechange = function() {
		if(this.readyState == 4 && this.status == 200) {
			// 진동벨 울렸을때 수행할 동작들..!!
			document.getElementById('demo').innerHTML
				= this.responseText;
		}
	};

	// open(method, url, async, user, psw) : request 에 대해 명시
	// 커피주문
	xhttp.open('GET', url, true);
	// request 보내기..!
	xhttp.send();
}
</script>
<!-- 
XMLHttpRequest object 의 메소드들

open(method, url, async, user, psw) : request 에 대해 명시

	- method: GET or POST
	- url
	- async: true (asynchronous) or false (synchronous)
	- user: optional user name
	- psw: optional password


send() : GET 방식으로 서버에 request 보냄
send(string) : POST 방식으로 서버에 request 보냄
setRequestHeader() : 

-->
<!-- 
XMLHttpRequest object 의 property 들.

1. onreadystatechange : 함수설정.  readyState 값이 바뀔때마다 호출됨.
2.  readyState : XMLHttpRequest 상태(state) 값 저장
		[값] : [의미]
		0 : request 준비 안됨 (초기화 안됨)
		1 : 서버 연결됨
		2 : request 수신됨.
		3 : request 처리중
		4 : request 끝나고, response 준비됨.
		
3. responseText : response 데이터를 문자열로.
3. responseXML : response 데이터를 XML로.
4. status : request 상태값
		[값] : [의미]
		200 : OK
		403 : Forbidden
		404 : Not Found
		500 : Internal Server Error
		참조 : https://www.w3schools.com/tags/ref_httpmessages.asp

5. statusText : 상태정보 텍스트 : (ex: 'OK' , 'Not Found');

 -->

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

 

 

18. Js011_AJAX2.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>AJAX - XML</title>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
</head>
<script>
// 샘플 XML
var xml_1 = 'https://www.w3schools.com/js/cd_catalog.xml';
var xml_2 = 'https://www.w3schools.com/js/note.xml';
</script> 
<body>
<h2>AJAX + XML 데이터 1</h2>

<button type="button" onclick="loadCdData()">내 CD 목록</button>
<button type="button" onclick="TODO">지우기</button>
<br><br>
<table id="demo"></table>

<script>
function loadCdData() {
  var xhttp = new XMLHttpRequest;

  xhttp.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200) {
      myFunction(this.responseXML);
    }
  };

  xhttp.open("GET", xml_1, true);
  xhttp.send();

}
function myFunction(xmlDOM) {
  var i;

  var table = "<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDOM.getElementsByTagName("CD");
  for(i = 0; i < x.length; i++) {
    table += "<tr>";
    table += "<td>" + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</td>";
    table += "<td>" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</td>";
    table += "</tr>";
  }

  document.getElementById('demo').innerHTML = table;
	
}
</script>

<hr>
<h2>AJAX + XML 데이터 2</h2>

<p><b>Status:</b> <span id="A1"></span></p>
<p><b>Status text:</b> <span id="A2"></span></p>
<p><b>Response:</b> <span id="A3"></span></p>

<button onclick="loadNote(xml_2)">노트 데이터 가져오기</button>

<script>

function loadNote(url) {

	// TODO

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

 

 

19. Js011_AJAX3.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>AJAX - JSON</title>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
</head>
<script>
// 샘플 JSON
var json_1 = 'https://www.w3schools.com/js/json_demo.txt';
</script>
<!-- 
JSON 문자열은
JSON.parse() 를 사용하면 JavaScript object 로 손쉽게 변환된다
-->
<body>
<h2>AJAX + JSON</h2>
<button type="button" onclick="loadPet()">애완동물 목록 보기</button>
<button type="button" onclick="clearTable()">지우기</button>
<br><br>
<table>
<tr>
	<th>이름</th>
	<td id="name"></td>
</tr>
<tr>
	<th>나이</th>
	<td id="age"></td>
</tr>
<tr>
	<th>애완동물목록</th>
	<td id="pets"></td>
</tr>
</table>

<script>
function loadPet(){	
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
		if(this.readyState == 4 && this.status == 200) {
			var myObj = JSON.parse(this.responseText);

			document.getElementById('name').innerHTML = myObj.name;
			document.getElementById('age').innerHTML = myObj.age;

			result = "";

			for(i=0; i < myObj.pets.length; i++) {
				result += myObj.pets[i].animal 
					+ " : " + myObj.pets[i].name + "<br>";
			}
			document.getElementById("pets").innerHTML = "<div>" + result + "</div>";
		}

	}
	xhttp.open('GET', json_1, true);
	xhttp.send();
}

function clearTable(){
	document.getElementById('name').innerHTML = "";
	document.getElementById('age').innerHTML = "";
	document.getElementById('pets').innerHTML = "";
}

</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. Js011_AJAX4.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>
</head>
<!-- 
■서울시 지하철호선별 역별 승하차 인원 정보 
http://data.seoul.go.kr/dataList/datasetView.do?infId=OA-12914&srvType=A&serviceKind=1&currentPageNo=1

샘플url

XML 버젼
http://openapi.seoul.go.kr:8088/키값을넣으세요/xml/CardSubwayStatsNew/1/5/20181001
예) http://openapi.seoul.go.kr:8088/4d46796d7366726f3833774a774955/xml/CardSubwayStatsNew/1/5/20181001  

JSON 버젼
http://openapi.seoul.go.kr:8088/키값을넣으세요/json/CardSubwayStatsNew/1/5/20181001
예) http://openapi.seoul.go.kr:8088/4d46796d7366726f3833774a774955/json/CardSubwayStatsNew/1/5/20181001 
 -->
<body>
<h1>서울시 지하철 승하차 인원 정보</h1>
<form>
날짜 (yyyyMMdd): <input type="text" name="date" id="date" value="20200505"/><br><br>

<button type="button" onclick="loadData()">승하차정보 가져오기</button>
<button type="button" onclick="removeTable()">지우기</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";

function removeTable(){
	document.getElementById('demoXML').innerHTML = "";
	document.getElementById('demoJSON').innerHTML = "";
}

function loadData() {
	var date = document.getElementById('date').value.trim();

	// xml
	var url = "http://openapi.seoul.go.kr:8088/" + api_key + "/xml/CardSubwayStatsNew/1/5/" + date;
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function(){
		if(this.readyState == 4 && this.status == 200){
			parseXML(this.responseXML);
		}
	};
	xhttp.open('GET', url, true);
	xhttp.send();

	// JSON
	var url = "http://openapi.seoul.go.kr:8088/" + api_key +"/json/CardSubwayStatsNew/1/5/" + date;
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function(){
		if(this.readyState == 4 && this.status == 200){
			var jsonObj = JSON.parse(this.responseText);
			parseJSON(jsonObj);
		}
	};
	xhttp.open("GET", url, true);
	xhttp.send();

} // end loadData()

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("LINE_NUM")[0].childNodes[0].nodeValue + "</td>";
		table += "<td>" + row[i].getElementsByTagName("SUB_STA_NM")[0].childNodes[0].nodeValue + "</td>";
		table += "<td>" + row[i].getElementsByTagName("RIDE_PASGR_NUM")[0].childNodes[0].nodeValue + "</td>";
		table += "<td>" + row[i].getElementsByTagName("ALIGHT_PASGR_NUM")[0].childNodes[0].nodeValue + "</td>";
		table += "</tr>";
	}

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

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

	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;
}
</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. Js011_AJAX5.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>
</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" onclick="loadData()">역사정보 가져오기</button>
<button type="button" onclick="removeTable()">지우기</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";

function removeTable(){
	document.getElementById('demoXML').removeChild(document.getElementById('demoXML').childNodes[0]);
	document.getElementById('demoJSON').removeChild(document.getElementById('demoJSON').childNodes[0]);
}

function loadData() {
	// 장소를 인코딩 하기
	var place = decodeURI(document.getElementById('stationname').value.trim());
	
	// xml
	var url = "http://swopenAPI.seoul.go.kr/api/subway/" + api_key + "/xml/stationInfo/0/5/" + place;
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function(){
		if(this.readyState == 4 && this.status == 200){
			parseXML(this.responseXML);
		}
	};
	xhttp.open('GET', url, true);
	xhttp.send();


	// JSON
	var url = "http://swopenAPI.seoul.go.kr/api/subway/" + api_key + "/json/stationInfo/0/5/" + place;
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function(){
		if(this.readyState == 4 && this.status == 200){
			var jsonObj = JSON.parse(this.responseText);
			parseJSON(jsonObj);
		}
	};
	xhttp.open("GET", url, true);
	xhttp.send();

}

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;

}

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

	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;

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

 

 

22. Js011_AJAX6.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>
</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" onclick="loadData()">정보 가져오기</button>
<button type="button" onclick="removeTable()">지우기</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";  // 자신의 키값 입력하기!

function removeTable(){
	document.getElementById('demoXML').removeChild(document.getElementById('demoXML').childNodes[0]);
	document.getElementById('demoJSON').removeChild(document.getElementById('demoJSON').childNodes[0]);
}

function loadData() {
	var date = document.getElementById('stdr_de_id').value.replace(/-/g,"");
	//replaceAll((date + ""), "-", "");
	var start_index = document.getElementById('start_index').value.trim();;
	var end_index = document.getElementById('end_index').value.trim();;
	
	// XML 버젼
	var url = "http://openapi.seoul.go.kr:8088/" + api_key + "/xml/SPOP_DAILYSUM_JACHI/" + start_index + "/" + end_index + "/" + date;
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function(){
		if(this.readyState == 4 && this.status == 200){
			parseXML(this.responseXML);
		}
	};
	xhttp.open('GET', url, true);
	xhttp.send();

	// JSON
	var url = "http://openapi.seoul.go.kr:8088/" + api_key + "/json/SPOP_DAILYSUM_JACHI/" + start_index + "/" + end_index + "/" + date;
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function(){
		if(this.readyState == 4 && this.status == 200){
			var jsonObj = JSON.parse(this.responseText);
			parseJSON(jsonObj);
		}
	};
	xhttp.open("GET", url, true);
	xhttp.send();
	
}

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;

}

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;

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

 

 

23. JSON(JavaScript Object Notation)
     XML(Extensible Markup Language)

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

2020.05.13  (0) 2020.05.13
2020.05.12  (0) 2020.05.12
2020.05.08  (0) 2020.05.08
2020.05.07  (0) 2020.05.07
2020.05.06  (0) 2020.05.06

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

  • 현재글2020.05.11

관련글

shine의 개발 노트

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

티스토리툴바