JSON(Java Script Object Notation)

key : value - key값을 통해서 value값을 얻는다.

json은 문자열이 아니다. 완전한 json데이터이다.

블록으로 관리한다.

xml에 비해 접근법이 간단하다.

key값은 영어를 권장한다.

JSON파일의 시작 괄호는 [, { 둘다 사용 가능하다.

JSON파일 예시 

[
    {
    name:"홍길동",
    age:24,
    address:"서울시"
    },
    {
    name:"성춘향",
    age:16,
    address:"남원시"
    }
]

html 접근 예시

 <p id="demo1"></p>
 <p id="demo2"></p>

 <script type="text/javascript">
 let jsonData = [	// json의 형태
					 { // 0번지
						 name:"홍길동",
					   	 age:24 
					 },
					 { // 1번지
						 name:"성춘향",
					   	 age:24 
					 },
					 { // 2번지
						 name:"일지매",
					   	 age:24 
					 }
				 ];
 // alert(jsonData);

 document.getElementById("demo1").innerHTML 
 			= jsonData[0].name + " " + jsonData[0].age;
 
 let jsonText = '{ "name":"홍두깨", "age":25, "주소":"서울시" }';  // 현재는 문자열이다.
 // alert(jsonText);
 
 let jsonObj = JSON.parse(jsonText);
 let jsonStr = JSON.stringify(jsonObj)
 
 document.getElementById("demo2").innerHTML =  jsonObj.name + " " + jsonObj.주소;

 </script> 

설명

json value 접근방법 : json변수명[index].key로 접근할 수 있다.

alert(jsonData) : 문자열이면 문자열 전체가 보일텐데 jsonData이기 때문에 object가 출력된다.

alert(jsonText) : 문자열이기 때문에 문자열 전체가 출력된다.

JSON.parse(jsonText)  : String → json(object) 변경법

JSON.stringify(jsonObj) : json(object) → String 변경법

json을 String형으로 변경시 key값은 ""따옴표 안에 들어가 있어야 한다. 예시) "name"

실행화면

홍길동 24

홍두깨 서울시

Html파일에서 xml 파일에 직접 접근하기

이러한 내용의 xml 파일이 있다고 가정하자.

<?xml version="1.0" encoding="UTF-8"?>
<고객들>
	<고객>
		<번호>1</번호>
		<이름>홍길동</이름>
		<주소>서울시</주소>
		<방문>2020/03/23</방문>
	</고객>
	<고객>
		<번호>2</번호>
		<이름>성춘향</이름>
		<주소>남원시</주소>
		<방문>2021/01/31</방문>
	</고객>
	<고객>
		<번호>3</번호>
		<이름>일지매</이름>
		<주소>부산시</주소>
		<방문>2019/07/11</방문>
	</고객>
</고객들>

Hhtml 예시

<p id="demo"></p>
<script type="text/javascript">

let xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function () {
	
	if(this.readyState == 4 && this.status == 200){
	 nodeValfunc( this ); // this == xhttp 
	}
}
xhttp.open("GET", "member.xml", true);
xhttp.send();

function nodeValfunc( xml ) { // ( xml ) 객체 넘겨받기
	let num, name;
	let txt, numtxt, xmlDoc;
	
	txt = numtxt = ''; // 빈 문자열로 초기화
	
	xmlDoc = xml.responseXML; 
	
	num = xmlDoc.getElementsByTagName("번호");
	name = xmlDoc.getElementsByTagName("이름");
	console.log(num.length);
	
	for(i=0; i < num.length; i++){
		txt += num[i].childNodes[0].nodeValue + "<br>";
		numtxt += name[i].childNodes[0].nodeValue + "<br>";
	}
	
	document.getElementById("demo").innerHTML = txt + numtxt;
	// 실행하면 번호와 이름이 p태그에 출력된다.
}

</script>

설명

Java Script Ajax : 이런방식으로 데이터와 통신한다.

XMLHttpRequest() : XML 통신을 하기 위한 객체(상태정보)

onreadystatechange : 요청에 대한 응답(readyState의 진행 상태)을 받는 이벤트 리스너

readyState : 진행 상태

    0 -> open 메소드(xhttp.open("GET", "member.txt", true);)를 수행하기 전 상태
    1 -> loading 중...
    2 -> loading 완료
    3 -> Server 처리중
    4 -> Server 처리 완료

status : 상태
    200 -> 성공(success)
    403 -> 접근금지(서버에 문제가 있을 때)
    404 -> 없음(파일(test.txt)을 못찾는거)
    500 -> 구문(문법)에러

this.readyState == 4 && this.status == 200

이와 같은 조건이 되었을 때 정상적으로 요청이 처리되어 응답이 온 경우 입니다.

send : ajax요청을 서버로 전달한다.

responseXML : 응답을 받은 XML

실행화면

Html파일에서 xml 데이터 접근하기

예시

<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>

<script type="text/javascript">
// xml 데이터 접근 예시
let xmltext = "<bookstore>" + 
				  "<book>" + //("book")[0]
				   		"<title>탈무드</title>" +  // childNodes[0]
				  		"<author>man</author>" + // childNodes[1]
				  		"<year>2001</year>" +
				  "</book>" +
				  "<book>" +
				  		"<title>이솝이야기</title>" +
				  		"<author>woman</author>" +
				  		"<year>2004</year>" +
				  "</book>" +
			  "</bookstore>";
		  
let parser, xmlDoc;
// xml로 불러올땐 이작업이 필요없다---------
parser = new DOMParser(); 
xmlDoc = parser.parseFromString(xmltext, "text/html"); // xmltext형태가 parser로 바뀐것
//-----------------------
document.getElementById("demo1").innerHTML
	= xmlDoc.getElementsByTagName("book")[0].childNodes[1].nodeName; // 태그명 얻기
document.getElementById("demo2").innerHTML	
	= xmlDoc.getElementsByTagName("book")[0].childNodes[0].childNodes[0].nodeValue; // 태그안에 데이터(탈무드)가져오기
document.getElementById("demo3").innerHTML
	= xmlDoc.getElementsByTagName("book").length; //2
document.getElementById("demo4").innerHTML
	= xmlDoc.getElementsByTagName("book")[0].childNodes.length; // 3
</script>

설명

DOMParser() :  XML문서를 파싱하는 해석 객체이다.

parseFromString : 문자열을 파싱한다.

xmlDoc.getElementsByTagName("book")[0].childNodes[1].nodeName : 태그명을 가져온다.

xmlDoc.getElementsByTagName("book")[0].childNodes[0].childNodes[0].nodeValue : 해당태그의 value를 가져온다.

실행화면

이클립스에서 json파일 만들기

프로젝트 우클릭 후 New → File

확장자명을 json로 하여 파일을 만들어 주면 생성된다!

이클립스에서 XML문서만들기

프로젝트 우클릭 후 New → Other.. 클릭

Wizards에 xml 검색 → XML File 클릭 

파일명 지정 후 Finish (확장자명 : xml)

XML(eXtensible Markup Language) : 확장 표시 언어

XML 사용목적

Data(공공)를 공유하기 위한 목적. DB에서 필요한 DATA를 파일로 배포하는 것(XML파일)
setup의 목적

XML 배포용 예시 

<선수들> root tag(전체를 묶는 태그)
           <선수>
                    <이름></이름>
                    <나이></나이>
                    <주소></주소>
           </선수>
           <선수>
                    <이름></이름>
                    <나이></나이>
                    <주소></주소>
           </선수>
</선수들>

사용자 지정태그 사용!

태그명 영어 추천(한글로 써도 상관은 없다.)

XML vs HTML

XML은 예시에서 보듯 사용자 지정 태그를 사용한다.

HTML은 웹 지정 태그(표준태그) 사용한다. 예) h1, p, pre

NodeList : node를 index로 가져오는 방법

DOM이 아니다.

value값을 가져올 수 있는 방법 중 하나이다.

사용목적 : id나 class 추가를 못할 때 수정해야 할 경우에 사용한다.

예시

<p>hello</p>
<p>world</p>
<p>I can do it</p>
<p>Never change my mind</p>

<button type="button" onclick="listfunc()">nodelist</button>

<script type="text/javascript">
function listfunc() {
	let nodelist = document.getElementsByTagName('p');

	nodelist[3].innerHTML = "나는 문제없어"; // 3번지 수정
	
	for (var i = 0; i < nodelist.length; i++) { 
		nodelist[i].style.backgroundColor = '#ff0000';
	}
}
</script>

설명

getElementsByTagName(태그) : index로 값을 넘겨받는다.

전체 수정을 하고 싶은 경우 for문을 사용한다.

실행화면

hello

world

I can do it

Never change my mind

버튼 클릭 시 수정된 걸 확인할 수 있다.

DOM(Document Object Model) : 문서 객체 모델

각 tag를 접근하기 위한 object
그 object를 접근하기 위한 함수들의 모음

Document : 문서 안에 tag에 접근하도록 만들어진 객체(내장 object)

자주 사용되는 접근 메서드

getElemetById('id명') : id에 접근
getElemetsByClass('class명') : class들에 접근 (배열로 넘겨준다.)
getElemetsByName('name명') : name들에 접근 (배열로 넘겨준다.)
getElemetsByTagName('tag명') : tag들에 접근 (배열로 넘겨준다.)

childNodes : 요소가 포함하고 있는 자식 요소를 찾고 싶을 때 사용한다.

childNodes 사용 예시

<select id="cars"> <!-- 0번지 -->
	<option>Benz</option> <!-- 1,2번지 -->
	<option>BMW</option>
	<option>volvo</option>
</select>
<button type="button" onclick="cars()">선택</button>
<script type="text/javascript">

function cars() {
	let carName = document.getElementById('cars').childNodes; // 배열로 넘어온다.	
	alert(carName[1].text); // Benz
}
</script>    

설명

document.getElementById('cars').childNodes : id=cars인 요소의 번호를 배열로 넘겨받게 된다.

cars의 요소번호

alert(carName[1].text) : carName의 1번지의 value값을 경고창에 출력하게 된다.

appendChild : 자식 요소의 맨 뒤에 데이터를 추가한다.

appendChild 사용예시

<div id="div1">
	<p id="p1">첫번째 p태그</p>
	<p id="p2">두번째 p태그</p>
</div>

<script type="text/javascript">
function appendfunc() {
	let ptag = document.createElement('p'); // 새로운 <p></p> 추가
	let textNode = document.createTextNode("새로운 p 태그"); 
	
	ptag.id = "newid"; // p tag에 id추가
	ptag.className = "newclass" // p tag에 class추가
	
	ptag.appendChild(textNode) // <p id="newid" class="newclass">새로운 p 태그</p> 완성!
	
	let element = document.getElementById('div1'); // object가져옴
	element.appendChild(ptag); // div태그에 추가된다. p태그말고 테이블 같은걸 많이 추가한다.
}

설명 (태그명,요소명 == 변수명)

createElement(태그) : 새로운 tag를 추가한다.

createTextNode(내용) : tag에 넣을 내용을 추가한다.

태그명.appendChild(내용명) : 새로운 tag 완성! 

요소명.appendChild(태그명) : 요소 안에 새로운 tag를 추가한다. 

insertChild :  자식 요소의 추가할 위치를 선택하여 데이터를 추가한다.

insertChild 사용예시

function insertfunc() {
	let h2tag = document.createElement('h2'); // 모든태그를 추가할 수 있다
	let textNode = document.createTextNode("h2 태그를 추가");
	// id와 class 모두 추가할 수 있다.
	
	h2tag.appendChild(textNode); // <h2>h2 태그를 추가</h2> 완성!
	
	let element = document.getElementById('div1'); 
	//  앞에 붙일 땐 어디 앞에 지정을 해주어야 한다. 추가될 위치를 지정할 수 있다.
	let elementBefore = document.getElementById('p2'); 
	
	element.insertBefore(h2tag, elementBefore) // p1앞에 추가해라
}

설명 (태그명,요소명 == 변수명)

요소명.insertBefore(추가할 태그명, 추가할 위치 태그명) : 추가할 위치 태그명 앞에 추가가 된다.

removeChild :  자식 요소를 삭제한다.

function deletefunc() {
	let element = document.getElementById('div1');
	let removeElement = document.getElementById('p2');
	//  id=div1태그 안의 id=p2를 삭제해라
	element.removeChild(removeElement); 
}

설명 (태그명,요소명 == 변수명)

요소명.removeChild. 삭제할 태그명 :  요소 안에 태그를 삭제한다.

전체코드 실행화면

버튼을 클릭하면 추가 삭제가 된다.

배열의 연산

예제

<h3>배열의 연산</h3>
<table>
<col width="50"><col width="80"><col width="80"><col width="100">
<thead>
	<tr>
		<th>첨자</th><th>a</th><th>b</th><th>a x b</th>
	</tr>
</thead>
<tbody>
	<tr>
		<th>0</th><td>5</td><td>33</td>
		<td>
			<button type="button" onclick="multi(0)">계산결과</button>
	</tr>
	<tr>
		<th>1</th><td>12</td><td>14</td>
		<td>
			<button type="button" onclick="multi(1)">계산결과</button>
	</tr>
	<tr>
		<th>2</th><td>18</td><td>65</td>
		<td>
			<button type="button" onclick="multi(2)">계산결과</button>
	</tr>
</tbody>
</table>
<script type="text/javascript">

let nodeNum = document.getElementsByTagName("td");

let a = new Array(3); // index 0, 3, 6이 필요
let b = new Array(3); // index 1, 4, 7이 필요

for(i=0; a.length; i++){
	a[i] = nodeNum[0 + (3*i)].innerHTML;
	b[i] = nodeNum[1 + (3*i)].innerHTML;
}
function multi(index) {
	let result = a[index] * b[index];
	alert("계산결과는"+result+"입니다");
}
</script>

설명

 버튼 클릭시 계산결과가 나온다.

 table의 값과 관계없이 index번호로 접근하여 계산하는 예제이다.

let nodeNum = document.getElementsByTagName("td");

getElementsByTagName("태그명") : 해당 태그들의 인덱스 번호를 가져온다. 

위 코드의 td태그는 9개, nodeNum의 값은 8이 된다. (index 0부터 시작)

연산할 index값을 for문을 통해 배열에 넣어준다.

환영합니다

예제

<h1>환영합니다</h1>
※현재 시각은
<input type="text" id="date">입니다.
<script type="text/javascript">
function dates() {
	let dates = new Date();
	document.getElementById("date").value = dates.getHours()+":"+
							   	dates.getMinutes()+":"+
							   	dates.getSeconds();
}
setInterval("dates()", 1000);
</script>

설명

 text value값으로 현재 시간을 넣어주는 간단한 예제이다.

 다만, 이방식으로 할 경우 1~9의 시,분,초 앞에 0이 나오질 않는다.

 setInterval()함수를 통해 1초마다 시간이 갱신된다.

시,분,초가 1~9일 때 앞에 0이 붙도록 하는 예제

<h1>환영합니다</h1>
※현재 시각은
<input type="text" size="5" id="timebox">입니다.
<script type="text/javascript">
function nowtime() {
	let now = new Date();
	
	let hour = now.getHours();
	let minute = now.getMinutes();
	let second = now.getSeconds();
	
	if(hour < 10){
		hour = "0"+ hour;
	}else if(minute < 10){
		minute = "0"+ minute;
	}else if(second < 10){
		second = "0"+ second;
	}
	document.getElementById("timebox").value = hour+":"+minute+":"+second;
}
setInterval("nowtime()", 1000);
</script>

설명

조건문을 사용하여 시,분,초가 1~9일 때 앞에 0이 붙도록 하였다.