자바스크립트 json object의 key와 value를 다루는 방법을 알아보겠습니다.


1. JSON 이란?

JSON(JavaScript Object Notation)의 약자로 key와 value를 한 쌍으로 이루어져 있고 특정 key를 이용하여 value 값을 가져올 수 있는 개방형 표준입니다.


JSON은 텍스트로 이루어져 있으므로, 사람과 기계 모두 읽고 쓰기 쉽다.


프로그래밍 언어와 플랫폼에 독립적이므로, 서로 다른 시스템간에 객체를 교환하기에 좋다.


순서가 없는 이름/값 쌍의 집합으로, 이름(키)이 문자열이다.


2. JSON 형식

키-값 쌍(이름:값)의 패턴으로 표현이 됩니다.
let object1 = {

    name:'John', 

    age:25, 

    gender:'boy',

    hobby: ['운동', '영화감상']

}


3. JSON 값 추출

Key에 저장된 Value를 출력합니다.
console.log(object1.name);
// expected output: John

console.log(object1['name']);
// expected output: John


4. 예제보기


5. 관련링크


저작자표시

'javascript' 카테고리의 다른 글

[javascript] 문자열 비교  (0) 2016.02.01
[javascript] 자바스크립트 배열 추가 삭제 array 다루기  (0) 2016.01.29
[javascript] 자바스크립트 json push, input value, 값 넣기  (0) 2016.01.25
[javascript] 자바스크립트 날짜 설정, 날짜 더하기, 빼기  (2) 2016.01.21
[javascript] 자바스크립트 날짜 두자리, 요일 구하기, Date()  (0) 2016.01.20



javascript에서 날짜 설정, 날짜 더하기, 빼기에 대해 

알아보겠습니다.


특정 날짜 설정은 생성자에 문자열을 넣어 날짜를 설정할 수 있습니다.


setDate(), setMonth(), setDay() 를 이용하여 날짜를 더하거나 뺄 수 있습니다.





- html

설정 날짜 : <span id="setDate"></span>
<div>전날 : <span id="yesterday"></span></div>
<div>다음날 : <span id="tomorrow"></span></div>
<div>다음달 : <span id="nextMonth"></span></div>
- javascript   
$(document).ready(function () {
	// 생성자에 문자열을 넣어 특정 날짜 생성
	var date = new Date("2010/12/10");

	var year = date.getFullYear();
	var month = date.getMonth()+1;
	var day = date.getDate();
  var dayoftheweek = date.getDay();

  if (month < 10) {
  	month = "0" + month;
  }
  
  if (day < 10) {
  	day = "0" + day;
  }
  
	$('#setDate').append(year + '-' + month + '-' + day);
  
  // 전날
  $('#yesterday').append(year + '-' + month + '-' +(date.getDate() - 1));
	// 다음날
  $('#tomorrow').append(year + '-' + month + '-' +(date.getDate() + 1));
  
  // 다음달
  date.setMonth(date.getMonth() + 1);
  $('#nextMonth').append(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate());
  
});





다음달을 유의해서 보시기 바랍니다.


앞의 두 예제는 단순이 날짜를 가져와서 + 1 혹은 -1을 하였습니다.


하지만 2010/12/10의 다음달은 2011/1/10일이기 때문에 


date.setMonth(date.getMonth() + 1); 


방법처럼 날짜 변수에 setMonth() 한 다음에


date.getFullYear(), date.getMonth() + 1, date.getDate()


하는 방법이 더 좋은 방법으로 보입니다.



- 예제보기



- [javascript] javascript 날짜 두자리, 요일 구하기, Date()



저작자표시

'javascript' 카테고리의 다른 글

[javascript] 문자열 비교  (0) 2016.02.01
[javascript] 자바스크립트 배열 추가 삭제 array 다루기  (0) 2016.01.29
[javascript] 자바스크립트 json push, input value, 값 넣기  (0) 2016.01.25
[javascript] 자바스크립트 json get value, get key json 키 밸류  (0) 2016.01.22
[javascript] 자바스크립트 날짜 두자리, 요일 구하기, Date()  (0) 2016.01.20


javascript 날짜 두자리 및 요일 구하기에 대해 알아보겠습니다.


javascript에서 날짜를 구하는 함수는 Date() 함수를 이용합니다.


월이나 날짜가 1~9인 경우에는 한 자리로 나오게 되는데 한 자리일 때를 구분하여 

두 자리로 만들어보겠습니다.


또한 getDay 메서드는 요일을 0(일요일)에서 6(토요일)까지의 숫자로 가져옵니다. 


숫자를 구분하여 요일로 가져오겠습니다.


- html

<span id="current"></span>
<span id="dayoftheweek"></span>
- javascript  
$(document).ready(function () {
	var date = new Date();

	var year = date.getFullYear();
	var month = date.getMonth()+1;
	var day = date.getDate();
  var dayoftheweek = date.getDay();

  if (month < 10) {
  	month = "0" + month;
  }
  
  if (day < 10) {
  	day = "0" + day;
  }
  
	$('#current').append(year + '-' + month + '-' + day);
  $('#dayoftheweek').append(getDay(dayoftheweek));
  
});

function getDay(idx) {
	var date = "";
  switch (idx) {
  	case 0:
    	date = "일요일";
    break;
    case 1: 
    	date = "월요일";
    break;
    case 2: 
    	date = "화요일";
    break;
    case 3: 
    	date = "수요일";
    break;
    case 4: 
    	date = "목요일";
    break;
    case 5: 
    	date = "금요일";
    break;
    case 6: 
    	date = "토요일";
    break;
  }
		
	return date;
}




javascript 날짜 두자리 및 요일 구하기에 대해 알아보았습니다.

적절하게 변경하여 깔끔하게 javascript를 이용하여 날짜 및 요일을 적용하세요.

 

예제보기


저작자표시

'javascript' 카테고리의 다른 글

[javascript] 문자열 비교  (0) 2016.02.01
[javascript] 자바스크립트 배열 추가 삭제 array 다루기  (0) 2016.01.29
[javascript] 자바스크립트 json push, input value, 값 넣기  (0) 2016.01.25
[javascript] 자바스크립트 json get value, get key json 키 밸류  (0) 2016.01.22
[javascript] 자바스크립트 날짜 설정, 날짜 더하기, 빼기  (2) 2016.01.21

+ Recent posts

티스토리툴바