[Javascript] JSON을 활용해서 javascript 객체 생성하기

2022.03.17(58일 차_목요일)

JSON 표기법

JSON는 JavaScript Object Notation의 약자
서로 다른 프로그래밍 언어 간에 데이터를 교환하기 위한 표기법
Key(이름) , Value(값)으로 이루어진 객체 구조

JSON의 기본적인 형태


javascript
// 1) 프로퍼티 <-> 값
 var obj = {
 "프로퍼티 이름" : "값",
 }
 
 // 2) 메소드
 var obj = {
 "메소드 이름" : function() {alert('This is method')}
 }
 
//  3) 메소드(인수)
 var obj = {
 "메소드 이름" : function(인수) {alert('This is method')}
 }

Javascript 객체 생성

memberJson.js 생성


javascript
// 자바스크립트로 패키지를 만들수 있다.
 
var com = new Object(); // com이라는 이름으로 객체 하나 생성
 
com.util = new Object(); // com.util이 생기면서 객체 하나 생성
 
 
// 메서드 생성
com.util.Member = function(id,name,addr) {
	this.id = id;
	this.name = name;
	this.addr = addr;
};
 
// 메소드를  json형식으로 
com.util.Member.prototype = { // json의 중괄호 newsTitleJson
		
		// Key     Value
		setValue: function(id,name,addr) {
			this.id = id;
			this.name = name;
			this.addr = addr;
		},
		
		// 하나의 데이터를 가져오는 setter 
		setId:function(id) {
			this.id = id;
		},
		// 전체데이터 가져오는 getter
		getValue:function() {
			
			return this.id + ":" + this.name + ":" + this.addr;
		},
		
		getId:function() {
			return this.id;
		},
		
		// 메소드로 만드는 getter
		toString:function() {
			return this.id + ":" + this.name + ":" + this.addr
		}
};

memberJsonClass.jsp - (객체 생성 페이지)


html
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 
<script type="text/javascript" src="<%=cp%>/data/js/log.js"></script>
<script type="text/javascript" src="<%=cp%>/data/js/memberJson.js"></script>
 
<script type="text/javascript">
 
	function memberClass() {
		
		//객체 생성
		//1.
		var member = new com.util.Member("suzi","수지","서울");
		log("member1: " + member.id + ", " + member.name + ", " + member.addr);
		
		//2. setter 이용
		member.setValue("inna","인나","부산");
		log("member2: " + member.id + ", " + member.name + ", " + member.addr);
		
		//3. getter 이용
		var memberInfo = member.getValue();
		log("member.getValue(): " + memberInfo);
		
		//4.
		member.setId("insung");
		log("member.toString(): " + member.toString());//member의 toString으로 읽어낸다
		
		//5.
		var id = member.getId();
		log("member.getId(): " + id);
		
	}
	
	window.onload = function() {
		memberClass();
	}
 
</script>
 
</head>
<body>
<h1>Javascript 클래스 사용[JSON]</h1>
 
<hr/>
 
<div id="console"></div>
</body>
</html>

실행화면

JSON 형식 데이터 읽어오기

newsTitleJson.jsp - (JSON 데이터 읽어와서 출력)


html
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 
<style type="text/css">
 
.news {
 
	font-size: 10pt;
	display: block; /* 화면을 보여주겠다  none은 숨기는것 */
	margin: 0 auto;
	background: yellow;
	color: blue;
	border: 1px dashed black;
	width: 50%;
 
}
 
.newsError {
 
	font-size: 10pt;
	display: block; /* 화면을 보여주겠다  none은 숨기는것 */
	margin: 0 auto;
	background: orange;
	color: red;
	border: 1px dashed black;
	width: 50%;
}
</style>
 
<script type="text/javascript" src="<%=cp%>/data/js/httpRequest.js"></script>
 
<script type="text/javascript">
 
	function newsTitle() {
		sendRequest("newsTitleJSON_ok.jsp",null,displayNewsTitle,"GET")//경로,데이터,콜백함수,방식
	}
	
	function displayNewsTitle() {
		
		if(httpRequest.readyState==4) {
			if(httpRequest.status==200) {
				
				var jsonStr = httpRequest.responseText;
				//alert(jsonStr);
				
				//eval는 변수를 js의 함수처럼 사용하는 명령어
				var jsonObject = window.eval('(' + jsonStr + ')');
				//alert(jsonObject);
				//alert(jsonObject.count);
				//alert(jsonObject.titles[2].publisher);
				
				var count = jsonObject.count;
				
				if(count>0) {
					
					var htmlData = "<ol>";
					
					for(var i=0; i<jsonObject.titles.length; i++) {
						
						var publisherStr = jsonObject.titles[i].publisher;
						
						var headlineStr = jsonObject.titles[i].headline;
						
						htmlData += "<li>" + headlineStr + " [" +
							publisherStr + "]</li>";
						
					}
					
					htmlData += "</ol>";
					
					var newsDiv = document.getElementById("newsDiv");
					newsDiv.innerHTML = htmlData;
					
					
				}
				
				
			}
		}
			
	}
	
	window.onload = function() {
		newsTitle();
	}
 
</script>
 
</head>
<body>
 
<h1>헤드라인 뉴스</h1>
<hr/>
<br/>
 
<div style="width: 50%; margin: 0 auto;">뉴스보기</div>
 
<div id="newsDiv" class="news"></div>
 
</body>
</html>

newsTitleJSON_ok.jsp - (JSON 데이터 반환)


html
<%@ page contentType="text/plain; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	//JSON형태 데이터는 xml도 아니고 html도 아니고 text이다 그래서 위에 text/plain;으로 써준다.
%>
 
{
 
 
	"count":6,
	"titles":[
		{
		"publisher":"동아",
		"headline":"[속보] 김세환 선관위 사무총장 사의 표명"
		},
		{
		"publisher":"CNN",
		"headline":"50만원짜리 삼성폰 실물공개…'가성비 갑vs충전기는?'"
		},
		{
		"publisher":"한국",
		"headline":"1억 넣으면 하루 5400원씩 매일 이자 준다는 '이것'"
		},
		{
		"publisher":"JTBC",
		"headline":"'GOS 논란 삼성 사과하라'…주총 찾은 1600명 개미들"
		},
		{
		"publisher":"KBS",
		"headline":"피해 급증 우크라…젤렌스키 대통령, 결단 내렸다"
		},
		{
		"publisher":"MBC",
		"headline":"중립국 핀란드 변화에…'푸틴, 땅치고 후회할 수도'"	
		}
	]
 
 
}

실행화면

저작자표시 비영리

블로그의 정보

무작정 개발

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

	// 1) 프로퍼티 <-> 값
	var obj = {
	"프로퍼티 이름" : "값",
	}

	// 2) 메소드
	var obj = {
	"메소드 이름" : function() {alert('This is method')}
	}

	// 3) 메소드(인수)
	var obj = {
	"메소드 이름" : function(인수) {alert('This is method')}
	}

	// 자바스크립트로 패키지를 만들수 있다.

	var com = new Object(); // com이라는 이름으로 객체 하나 생성

	com.util = new Object(); // com.util이 생기면서 객체 하나 생성


	// 메서드 생성
	com.util.Member = function(id,name,addr) {
	this.id = id;
	this.name = name;
	this.addr = addr;
	};

	// 메소드를 json형식으로
	com.util.Member.prototype = { // json의 중괄호 newsTitleJson

	// Key Value
	setValue: function(id,name,addr) {
	this.id = id;
	this.name = name;
	this.addr = addr;
	},

	// 하나의 데이터를 가져오는 setter
	setId:function(id) {
	this.id = id;
	},
	// 전체데이터 가져오는 getter
	getValue:function() {

	return this.id + ":" + this.name + ":" + this.addr;
	},

	getId:function() {
	return this.id;
	},

	// 메소드로 만드는 getter
	toString:function() {
	return this.id + ":" + this.name + ":" + this.addr
	}
	};

	<%@ page contentType="text/html; charset=UTF-8"%>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
	<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	%>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>

	<script type="text/javascript" src="<%=cp%>/data/js/log.js"></script>
	<script type="text/javascript" src="<%=cp%>/data/js/memberJson.js"></script>

	<script type="text/javascript">

	function memberClass() {

	//객체 생성
	//1.
	var member = new com.util.Member("suzi","수지","서울");
	log("member1: " + member.id + ", " + member.name + ", " + member.addr);

	//2. setter 이용
	member.setValue("inna","인나","부산");
	log("member2: " + member.id + ", " + member.name + ", " + member.addr);

	//3. getter 이용
	var memberInfo = member.getValue();
	log("member.getValue(): " + memberInfo);

	//4.
	member.setId("insung");
	log("member.toString(): " + member.toString());//member의 toString으로 읽어낸다

	//5.
	var id = member.getId();
	log("member.getId(): " + id);

	}

	window.onload = function() {
	memberClass();
	}

	</script>

	</head>
	<body>
	<h1>Javascript 클래스 사용[JSON]</h1>

	<hr/>

	<div id="console"></div>
	</body>
	</html>

	<%@ page contentType="text/plain; charset=UTF-8"%>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
	<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	//JSON형태 데이터는 xml도 아니고 html도 아니고 text이다 그래서 위에 text/plain;으로 써준다.
	%>

	{


	"count":6,
	"titles":[
	{
	"publisher":"동아",
	"headline":"[속보] 김세환 선관위 사무총장 사의 표명"
	},
	{
	"publisher":"CNN",
	"headline":"50만원짜리 삼성폰 실물공개…'가성비 갑vs충전기는?'"
	},
	{
	"publisher":"한국",
	"headline":"1억 넣으면 하루 5400원씩 매일 이자 준다는 '이것'"
	},
	{
	"publisher":"JTBC",
	"headline":"'GOS 논란 삼성 사과하라'…주총 찾은 1600명 개미들"
	},
	{
	"publisher":"KBS",
	"headline":"피해 급증 우크라…젤렌스키 대통령, 결단 내렸다"
	},
	{
	"publisher":"MBC",
	"headline":"중립국 핀란드 변화에…'푸틴, 땅치고 후회할 수도'"
	}
	]


	}

블로그의 정보

활동하기

공유하기

다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역