JSON
- Javascript Object Notation 의 약자
- 자바스크립트 객체를 자바스크립트 외부로 전송하기 위해 문자열 형태로 표현
- 데이터가 간결하고 사람이 이해하기 쉬움
| 자바스크립트 Object | JSON (Javascript Object Notion) |
| var object = { name: ‘이름’, age: 20, major: ‘GLS’, friends: [‘철수’, ‘영희’] } |
{ “name”: “이름”, “age”: 20, “major”: “GLS”, “friends”: [“철수“,”영희”] } |
- JSON.parse 를 이용해 JSON 을 자바스크립트 객체로 변환
- JSON.stringify 를 이용해 자바스크립트 객체를 JSON 으로 변환
var obj = {
a: 'JSON',
b: 'NOSJ',
arr: [1, 2, 'test']
}
console.log(obj);
var json = JSON.stringify(obj);
console.log(json);
var newObj = JSON.parse(json);
console.log(newObj);
결과:
{a: 'JSON', b: 'NOSJ', arr: Array(3)}
{"a":"JSON","b":"NOSJ","arr":[1,2,"test"]}
{a: 'JSON', b: 'NOSJ', arr: Array(3)}
var todos = {};
$("#addButton").click(function() {
var text = $("#inputBox").val();
todos[text] = false;
$("#inputBox").val("");
console.log(todos);
});
Data 어트리뷰트
- HTML 엘리먼트에 데이터를 저장
- $().data(‘key’, ‘value’) 로 값 저장
- $().data(‘key’) 로 값 접근
<script>
var students = [
{ name:'김군오', id:'219xxx' },
{ name:'홍길동', id:'210xxx' }
];
var ul = $('ul');
for (let student of students) {
var li = $('<li>' + student.name + '</li>');
li.data('id', student.id);
li.click(function(event) {
var el = $(event.target);
alert(el.data('id'));
});
ul.append(li);
}
</script>
Todo List
- 추가 버튼을 클릭하면 할일목록 생성
- 삭제버튼 누르면 삭제
- 체크박스 클릭하면 취소선 처리
var todos = {};
$("#addButton").click(function() {
var text = $("#inputBox").val();
todos[text] = false;
$("#inputBox").val("");
console.log(todos);
$(".contents ul").append(liTemplate(text));
});
function inputTemplate(text) {
var inputTag = $('<input type="checkbox" id="checkBox">');
inputTag.data('value', text);
return inputTag;
}
function buttonTemplate(text) {
var buttonTag = $('<button id="delButton">X</button>');
buttonTag.data('value', text);
return buttonTag;
}
function liTemplate(text) {
var li = $('<li></li>');
li.attr('value', text);
li.append(inputTemplate(text));
li.append(text);
li.append(buttonTemplate(text));
li.click(function(event) {
var el = $(event.target);
//console.log(event);
//console.log(el);
console.log(el.data('value'));
if (el.is("button")) {
delete todos[text];
$(`li[value='${text}']`).remove();
}
else if (el.is("input[type='checkbox']")) {
var isChecked = el.is(":checked");
if (isChecked) {
$(`li[value='${text}']`).addClass("checked");
todos[text] = true;
} else {
$(`li[value='${text}']`).removeClass("checked");
todos[text] = false;
}
}
});
return li;
}