function inputTemplate(text, checked) {
var inputTag = $('<input type="checkbox" id="checkBox">');
inputTag.data('value', text);
inputTag.attr('checked', checked);
return inputTag;
}
추가버튼, 체크박스, 삭제버튼 클릭시 저장함수 saveTodos(); 호출
시작시 서버에 저장된 메모정보 로드
$.ajax("http://localhost:3000/todos").done(function(result) {
console.log(result);
todos = result;
for (const todo of Object.keys(todos)) {
$(".contents ul").append(liTemplate(todo, todos[todo]));
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax-wordbook</title>
</head>
<body>
<ul></ul>
<h2></h2>
<p></p>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
var dict = $('ul');
var title = $('h2');
var p = $('p');
$.getJSON('dict.json')
.done(function(data) {
for(var word of data) {
var li = $('<li></li>');
li.text(word.title);
li.data('word', word);
li.click(function(event) {
var el = $(event.target);
var word = el.data('word');
title.text(word.title);
p.text(word.description);
});
dict.append(li);
}
});
</script>
</body>
</html>
var todos = {};
$("#addButton").click(function() {
var text = $("#inputBox").val();
todos[text] = false;
$("#inputBox").val("");
console.log(todos);
});
<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>
var a = Math.floor(Math.random() * 10);
var b = Math.floor(Math.random() * 10);
var answer;
while (answer != (a + b)) {
answer = prompt(a + '+' + b + '= ?');
}
console.log("정답입니다.");
function max(arr) {
var _max = -99999; // 아주 작은수
for (var i of arr) {
if (i > _max) {
_max = i;
}
}
return _max;
}
console.log("가장 큰 수는 " + max([5, 7, 10, 2, 8]) + "입니다.");
<ul id="list"></ul>
<script>
var list = document.getElementById("list");
var products = ['데스크탑', '모니터', '노트북', '스피커', '마우스'];
var html = '';
for (var product of products) {
html += '<li>' + product + '</li>';
}
list.innerHTML = html;
</script>
