JSON(Javascript Object Notation) 객체는 클라이언트와 서버의 통신에서 데이터를 주고 받을 때 주로 이용 합니다. 프로그램 종류에 구애 받지 않고 가벼운 텍스트 형태로 만들어 졌다는 장접이 있어 개발자들이 많이 사용합니다. JSON 은 lightweight(저중량) 데이터를 교환하는 형식으로 컴퓨터 시스템이 파싱하고 생성하기 쉽게 만들어졌습니다.
. JSON 은 다음과 같은 특징을 갖고 있습니다.
JSON 은 Javascript 를 기반으로 만들어 졌으며 특정 언어에 종속 되지 않는 완벽한 독립적인 텍스트 형식을 갖고 있습니다.
JSON 객체의 데이터는 이름 (key) / 값(value) 의 쌍으로 구성합니다. { 로 시작해서} 로 끝납니다. key 와 value 사이는 ; (콜론) 으로 구분합니다. 그리고 각각의 데이터와 데이터 사이에는 , (콤마) 로 구분합니다.
1.JSON 데이터는 이름과 값의 쌍으로 이루어 집니다. 2.JSON 데이터는 쉼표로 나열됩니다. 3.객체(object) 는 중괄호( { } ) 로 둘러쌓아 표현합니다. 4.배열(array) 은 대괄호 ( [ ] ) 로 둘러쌓아 표현합니다.
<title>JSON 객체</title>
<script>
function init(){
var emp={"name":"민들레"
,"age":"25",
"tel":"010-123-4567",
"address":"서울"};
var msg="";
msg += "이름: "+ emp.name + "<br>"
+ "나이 : "+emp.age + "<br>"
+ "전화 : "+emp.tel + "<br>"
+ "주소 1: "+emp.address + "<br>"
+ "주소 2: "+emp["address"] + "<br>"
+ "주소 3: "+emp['address'] + "<br>"
document.getElementById("result").innerHTML=msg;
}
// JSON 데이터
// JSON 데이터는 이름과 값의 쌍으로 구성됩니다.
// 이러한 JSON 데이터는 이름 , 콜론 , 값의 순서로 구성됩니다.
// 문법 => "데이터이름" : 값
// 다음예제는 데이터의 이름이 "name" 이고 , 값은 "식빵"이라는 문자열을 갖는 JSON 데이터의 예제입니다.
// 예제 = > "name":"식빵"
// 데이터의 이름도 문자열 이므로 , 항상 큰 따옴표 와 함께 입력해야합니다.
</script>
</head>
<body onload="init()">
<h2>JSON 표기법</h2>
<div id="result"></div>
</body>
위코드 실행 결과이다.
JSON 객체를 이런식으로 사용할수 있고 , 주소 1 , 2 , 3 은 각각 다른형태로 사용가능하다는 것을 보여준다.
JSON 을 이용한 LOGIN 화면
<title> JSON Login </title>
<script>
var emp = {
"id" : "korea",
"pw" : "1234",
"tel":"010-1234-5678",
"name" : "HOYA",
"point" : "3750"};
function login(){
var a = document.getElementById("id").value;
var b = document.getElementById("pw").value;
var c = document.getElementById("tel").value;
if(emp.id== a && emp.pw == b && emp.tel == c)
document.getElementById("confirm").innerHTML
= "<span style='color:green'>"+emp["name"]
+ "님 환영합니다.<br>현재 포인트는 " + emp['point']+ "점 입니다.</span>";
else
document.getElementById("confirm").innerHTML
= "<span style='color:red'> 아이디 또는 비밀번호가 틀립니다~~ . </spam>";
}
</script>
</head>
<body>
<label for="input">[로그인 화면]</label><br><br>
<input type = "text" id="id"><span>아이디를 입력하시오</span><br>
<input type = "text" id="pw"><span>비밀번호를 입력하시오</span><br>
<input type = "text" id="tel"><span>전화번호를 입력하시오</span><br>
<button id = "log" onclick="login()">Login</button><br><br>
<span id="confirm"></span>
</body>
위에 로그인 성공 화면 과 실패 화면을 나타낸다.
코드를 활용해서 로그인 화면을 구현하는데 활용 가능하다.
* HTML5 와 Canvas
웹 페이지 그래픽의 전통적인 방법 1. 사진이나 그림 <img> 태그 이용 2. 그래픽은 자바 애플릿이나 플래시 등 플러그인 사용
=> 문제점이 많다.
. 캔버스 도입
- 플러그인의 도움 없이 자바스크립트 코드로 웹 페이지에서 자유롭게 그래픽을 수행할수 있는 캔버스 기능을 도입.
- 캔버스 기능은 새로 도입된 <canvas> 태그로 브라우저 화면상에 할당된 공간에서 이루어진다.
- 캔버스의 그래픽 그리기는 자바스크립트 코드로만 가능하다.
<canvas> 태그 형식
<canvas id = "캔버스 객체 id" style = "CSS3 스타일 시트" width= "캔버스 영역의 너비" height="캔버스 영역의 높이">
이 태그를 지원하지 않는 브라우저가 출력할 HTML 텍스트 </canvas>
: width,height : 캔버스가 만들어지는 영역의 크기(픽셀단위)로 생략가능 , 각각 디폴트 300 , 150 픽셀
- 브라우저는 <canvas> 태그가 만들어진 영역에 사각형의 빈 캔버스 공간을 할당하며 , 하나의 웹 페이지에 여러개의 캔버스를 만들 수 있다.
. 캔버스 그리기의 2가지 유형
- 첫번째 방법은 beginPath()를 호출하여 빈 경로를 만들고 , 경로(Path)에 먼저 선,원,사각형 등의 도형을 모아 놓고 한 번에 캔버스에 그림을 그리는 방법이다.
- 두번째 방법은 경로에 담지 않고 바로 캔버스에 그리는 방법이다.
. 컨텍스트 객체의 메소드
. beginPath() // 이전 경로를 모두 지우고 새로 시작한다 . (경로와 관련) . closePath() // 경로의 끝과 시작점을 연결하는 선을 추가하고 경로를 닫는다. (경로와 관련) . moveTO() // 경로에 새 점을 만든다. (경로와 관련) . lineTo() // 경로의 끝 점과 연결하는 선을 추가한다.(경로와 관련) . rect() // 경로에 사각형을 추가한다. (경로와 관련) . arc() // 경로에 원호를 추가한다. (경로와 관련)
. fill() // 경로에 만들어진 모든 도형(사각형과 원호)을 외곽선없이 내부만 색으로 채워 캔버스를 그린다. (경로에 있는 도형 캔버스 그리기) . stroke() // 경로에 담겨 있는 모든 도형을 외곽선만 캔버스에 그린다.(경로에 있는 도형 캔버스 그리기)
. clearRect() // 캔버스에서 사각형 영역을 채운다 (캔버스에 바로그리기) . fillRect() // 캔버스에 외곽선 없이 사각형 영역을 색으로 바로 칠한다. (캔버스에 바로그리기) . storkeText() // 텍스트 (문자열) 를 캔버스에 바로 그린다. (캔버스에 바로그리기) . storkeRect() // 사각형을 경로에 추가하지 않고 캔버스에 바로 그린다.(캔버스에 바로그리기) . drawImage() // 이미지를 캔버스에 바로 그린다 .(캔버스에 바로그리기)
<title>캔버스 그리기</title>
</head>
<body>
<h3>캔버스 그리기</h3>
<hr>
<canvas id="myCanvas" style="background-color:aliceblue"
width="250" height="150"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// getContext("2d")가 리턴한 객체는 2차원 그래픽에 사용되는
// 프로퍼티와 메서드를 가진 CanvasRenderingContext2D 타입
// 객체이다. 이것을 context 객체라고 부르기도 한다.
// 캔버스 객체는 2차원과 3차원을 모두 지원한다
// 2차원은 canvas.getContext("2d") 를
// 3차원은 canvas.getContext("webgl") 를 호출하면 된다.
// webgl => Web Graphics Library 는 플러그인 도움없이
// 브라우저를 막론하고 2D / 3D 차원의 그래픽을 지원하는 자바스크립트 API 이다.
// getContext() = > 컨버스에 그림을 그리는 컨텍스트 객체 리턴
// 파란선으로 사각형 그리기
context.beginPath(); // 빈경로 만들기
context.strokeStyle = "blue"; // 선 색 설정
context.rect(30,30,50,50); // (30,30)에서 50x50 크기 사각형을 경로에 삽입
context.stroke(); // 경로에 있는 모든 도형의 외곽선 그리기
// violet 색으로 채운 사각형 그리기
context.beginPath(); // 빈 경로 만들기
context.fillStyle = "violet"; // 채우기 색
context.rect(60,60,50,50); // (60,60) 에서 50x50 크기 사각형을 경로에 삽입
context.fill(); // 경로에 있는 모든 도형의 내부만 채워 그리기
// green 색으로 텍스트 만들기
context.font = "20px Gothic";
context.fillStyle = "green"; // 채우기 색
context.fillText("Text in Canvas",100,50); // 텍스트를 경로에 넣지않고 바로 그리기
</script>
</body>
캔버스 그리기 실행 화면이다 . 캔버스 활용 예를 보여주고있다.
<title>선의 색과 굵기</title>
</head>
<body>
<h3>선의 색과 굵기</h3>
<hr>
<canvas id="myCanvas" style="background-color:aliceblue"
width="180" height="300"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// 1픽셀의 blue 직선 그리기
context.beginPath();
context.moveTo(20,20);
context.lineTo(150,50);
context.strokeStyle = "blue";
context.stroke(); // 1 픽셀의 blue 직선 그리기
context.beginPath();
context.moveTo(150,20);
context.lineTo(20,50);
context.strokeStyle = "red";
context.stroke(); // 1 픽셀의 red 직선 그리기
// 10 픽셀 yellowgreen 사각형 그리기
context.beginPath();
context.rect(20,80,120,50);
context.lineWidth = 10; // 선 굵기 10 픽셀
context.strokeStyle = "yellowgreen"; // 선 색
context.stroke();
// 20 픽셀 violet 색 원호 그리기
context.beginPath();
context.arc(80,220,50,0.5*Math.PI , 0 , false) // 0.8 * Math.PI /2 => 90 각도 , 0 => 3시 방향
context.lineWidth = 20 ; // 선굵기 20 픽셀
context.strokeStyle = "violet"; // 선 색
context.stroke();
</script>
</body>
