티스토리 뷰

Javascript, jQuery

(javascript) 자바스크립트 Json 형식 간단히 알아보기

가독성 0% 2017. 9. 7. 05:09
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1 onclick="json6.alert()">클릭해보세요.</h1>

	<script type="text/javascript">
		/*
		json 기본형
			var json = {"key": "value"}
		*/
		var json = {
			"이름" : "홍길동",
			"번호" : 1,
			"국어" : 90,
			"영어" : 80,
			"수학" : 70
		};
		document.write(json.이름);
		document.write("<br>");
		document.write(json.번호);
		document.write("<br>");
		document.write(json.국어);
		document.write("<br>");
		document.write(json.영어);
		document.write("<br>");
		document.write(json.수학);
		document.write("<br>");
	
		//json 배열형
		var json2 = {
			"학생" : [ "홍길등", "1", "90", "80", "70" ]
		};
		for (var i = 0; i < json2.학생.length; i++) {
			document.write(json2.학생[i]);
			document.write("<br>");
		}
		;
	
		//json을 포함한 계층형
		var json3 = {
			"json4" : {
				"이름" : "홍길동",
				"번호" : 1,
				"국어" : 90,
				"영어" : 80,
				"수학" : 70
			}
		};
		document.write(json3.json4.이름);
		document.write("<br>");
		document.write(json3.json4.번호);
		document.write("<br>");
		document.write(json3.json4.국어);
		document.write("<br>");
		document.write(json3.json4.영어);
		document.write("<br>");
		document.write(json3.json4.수학);
		document.write("<br>");
	
		//json 배열형,계층형 장점만 조합한 형태
		var json4 = {
			"json5" : [
				{
					"이름" : "홍길동",
					"번호" : 1,
					"국어" : 90,
					"영어" : 80,
					"수학" : 70
				},
				{
					"이름" : "김철수",
					"번호" : 2,
					"국어" : 80,
					"영어" : 90,
					"수학" : 70
				}
			]
		};
	
		for (var i = 0; i < json4.json5.length; i++) {
			var item = json4.json5[i];
			document.write(item.이름);
			document.write("<br>");
			document.write(item.번호);
			document.write("<br>");
			document.write(item.국어);
			document.write("<br>");
			document.write(item.영어);
			document.write("<br>");
			document.write(item.수학);
			document.write("<br>");
		}
		;
	
		//함수를 포함한 json
		var json6 = {
			"alert" : function() {
				alert("안녕하세요");
			}
		}
	</script>
</body>
</html>













반응형
저작자표시 비영리 변경금지

'Javascript, jQuery' 카테고리의 다른 글

(jQuery) 제이쿼리 이벤트 처리 간단히 알아보기  (0) 2017.09.11
(jQuery) 제이쿼리 기초 및 class,id,name으로 제어하기  (0) 2017.09.10
(Javascript) 자바스크립트에서 form 입력양식 제어하기  (0) 2017.09.06
(Javascript) 자바스크립트 모바일 및 브라우저 (정보,접속 여부)  (0) 2017.09.06
(Javascript) 자바스크립트 페이지 이동 (이전, 다음, 새로고침) 알아보기  (0) 2017.09.06
공유하기 링크
댓글
최근에 올라온 글
최근에 달린 댓글