{"id":1178,"date":"2022-02-23T17:52:33","date_gmt":"2022-02-23T08:52:33","guid":{"rendered":"http:\/\/mylittleforest.kr\/wordpress\/?p=1178"},"modified":"2022-02-23T17:52:39","modified_gmt":"2022-02-23T08:52:39","slug":"jquery-todo%eb%a6%ac%ec%8a%a4%ed%8a%b8-2","status":"publish","type":"post","link":"http:\/\/mylittleforest.kr\/wordpress\/blog\/2022\/02\/23\/1178\/","title":{"rendered":"jQuery Todo\ub9ac\uc2a4\ud2b8 \u2013 2"},"content":{"rendered":"\n<h2>JSON<\/h2>\n\n\n\n<ul><li>Javascript Object Notation \uc758 \uc57d\uc790<\/li><li>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uac1d\uccb4\ub97c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc678\ubd80\ub85c \uc804\uc1a1\ud558\uae30 \uc704\ud574 \ubb38\uc790\uc5f4 \ud615\ud0dc\ub85c \ud45c\ud604<\/li><li>\ub370\uc774\ud130\uac00 \uac04\uacb0\ud558\uace0 \uc0ac\ub78c\uc774 \uc774\ud574\ud558\uae30 \uc26c\uc6c0<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-table is-style-regular\">\n<table style=\"width: 100%; height: 48px;\" border=\"2\">\n<thead>\n<tr style=\"height: 39px;\">\n<td style=\"height: 38px; width: 32.0238%;\">\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 Object<\/td>\n<td style=\"height: 38px; width: 67.6191%;\">JSON (Javascript Object Notion)<\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr style=\"height: 38px;\">\n<td style=\"height: 10px; width: 32.0238%;\">var object = {<br \/>\u00a0 name: &#8216;\uc774\ub984&#8217;,<br \/>\u00a0 age: 20,<br \/>\u00a0 major: &#8216;GLS&#8217;,<br \/>\u00a0 friends: [&#8216;\ucca0\uc218&#8217;, &#8216;\uc601\ud76c&#8217;]<br \/>}<\/td>\n<td style=\"height: 10px; width: 67.6191%;\">{<br \/>\u00a0 &#8220;name&#8221;: &#8220;\uc774\ub984&#8221;,<br \/>\u00a0 &#8220;age&#8221;: 20,<br \/>\u00a0 &#8220;major&#8221;: &#8220;GLS&#8221;,<br \/>\u00a0 &#8220;friends&#8221;: [\u201c\ucca0\uc218\u201c,&#8221;\uc601\ud76c&#8221;]<br \/>}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n\n\n\n<ul><li><strong>JSON.parse<\/strong> \ub97c \uc774\uc6a9\ud574 JSON \uc744 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uac1d\uccb4\ub85c \ubcc0\ud658<\/li><li><strong>JSON.stringify<\/strong> \ub97c \uc774\uc6a9\ud574 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uac1d\uccb4\ub97c JSON \uc73c\ub85c \ubcc0\ud658<\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nvar obj = {\n    a: 'JSON',\n    b: 'NOSJ',\n    arr: &#x5B;1, 2, 'test']\n}\n\nconsole.log(obj);\n\nvar json = JSON.stringify(obj);\nconsole.log(json);\n\nvar newObj = JSON.parse(json);\nconsole.log(newObj);\n\n\uacb0\uacfc:\n{a: 'JSON', b: 'NOSJ', arr: Array(3)}\n{&quot;a&quot;:&quot;JSON&quot;,&quot;b&quot;:&quot;NOSJ&quot;,&quot;arr&quot;:&#x5B;1,2,&quot;test&quot;]}\n{a: 'JSON', b: 'NOSJ', arr: Array(3)}\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nvar todos = {};\n\n$(&quot;#addButton&quot;).click(function() {\n    var text = $(&quot;#inputBox&quot;).val();\n    todos&#x5B;text] = false;\n    $(&quot;#inputBox&quot;).val(&quot;&quot;);\n    console.log(todos);\n});\n<\/pre><\/div>\n\n\n<h2><a href=\"https:\/\/www.w3schools.com\/jquery\/misc_data.asp\" target=\"_blank\" rel=\"noreferrer noopener\">Data \uc5b4\ud2b8\ub9ac\ubdf0\ud2b8<\/a><\/h2>\n\n\n\n<ul><li>HTML \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5<\/li><li><strong>$().data(\u2018key\u2019, \u2018value\u2019)<\/strong> \ub85c \uac12 \uc800\uc7a5<\/li><li><strong>$().data(\u2018key\u2019)<\/strong> \ub85c \uac12 \uc811\uadfc<\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n    &lt;script&gt;\n      var students = &#x5B;\n        { name:'\uae40\uad70\uc624', id:'219xxx' },\n        { name:'\ud64d\uae38\ub3d9', id:'210xxx' }\n      ];\n\n      var ul = $('ul');\n      for (let student of students) {\n        var li = $('&lt;li&gt;' + student.name + '&lt;\/li&gt;');\n        li.data('id', student.id);\n        li.click(function(event) {\n          var el = $(event.target);\n          alert(el.data('id'));\n        });\n\n        ul.append(li);\n      }\n    &lt;\/script&gt;\n<\/pre><\/div>\n\n\n<div class=\"wp-block-file\"><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0525-jquery-data-attribute-1.html\">0525-jquery-data-attribute-1<\/a><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0525-jquery-data-attribute-1.html\" class=\"wp-block-file__button\" download>\ub2e4\uc6b4\ub85c\ub4dc<\/a><\/div>\n\n\n\n<h2>Todo List<\/h2>\n\n\n\n<ul><li>\ucd94\uac00 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uba74 \ud560\uc77c\ubaa9\ub85d \uc0dd\uc131<\/li><li>\uc0ad\uc81c\ubc84\ud2bc \ub204\ub974\uba74 \uc0ad\uc81c<\/li><li>\uccb4\ud06c\ubc15\uc2a4 \ud074\ub9ad\ud558\uba74 \ucde8\uc18c\uc120 \ucc98\ub9ac<\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nvar todos = {};\n\n$(&quot;#addButton&quot;).click(function() {\n    var text = $(&quot;#inputBox&quot;).val();\n    todos&#x5B;text] = false;\n    $(&quot;#inputBox&quot;).val(&quot;&quot;);\n    console.log(todos);\n\n    $(&quot;.contents ul&quot;).append(liTemplate(text));\n});\n\nfunction inputTemplate(text) {\n    var inputTag = $('&lt;input type=&quot;checkbox&quot; id=&quot;checkBox&quot;&gt;');\n    inputTag.data('value', text);\n    return inputTag;\n}\n\nfunction buttonTemplate(text) {\n    var buttonTag = $('&lt;button id=&quot;delButton&quot;&gt;X&lt;\/button&gt;');\n    buttonTag.data('value', text);\n    return buttonTag;\n}\n\nfunction liTemplate(text) {    \n    var li = $('&lt;li&gt;&lt;\/li&gt;');\n\n    li.attr('value', text);\n    li.append(inputTemplate(text));\n    li.append(text);\n    li.append(buttonTemplate(text));\n\n    li.click(function(event) {\n        var el = $(event.target);\n        \/\/console.log(event);\n        \/\/console.log(el);\n        console.log(el.data('value'));\n    \n        if (el.is(&quot;button&quot;)) {\n            delete todos&#x5B;text];\n            $(`li&#x5B;value='${text}']`).remove();\n        }\n        else if (el.is(&quot;input&#x5B;type='checkbox']&quot;)) {\n            var isChecked = el.is(&quot;:checked&quot;);\n            if (isChecked) {\n                $(`li&#x5B;value='${text}']`).addClass(&quot;checked&quot;);\n                todos&#x5B;text] = true;\n            } else {\n                $(`li&#x5B;value='${text}']`).removeClass(&quot;checked&quot;);\n                todos&#x5B;text] = false;\n            }\n        }\n    });    \n\n    return li;\n}\n<\/pre><\/div>\n\n\n<div class=\"wp-block-file\"><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0524-jquery-todolist-2.html\">0524-jquery-todolist-2<\/a><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/0524-jquery-todolist-2.html\" class=\"wp-block-file__button\" download>\ub2e4\uc6b4\ub85c\ub4dc<\/a><\/div>\n\n\n\n<div class=\"wp-block-file\"><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/todolist.js\">todolist<\/a><a href=\"http:\/\/mylittleforest.kr\/wordpress\/wp-content\/uploads\/2022\/02\/todolist.js\" class=\"wp-block-file__button\" download>\ub2e4\uc6b4\ub85c\ub4dc<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>JSON Javascript Object Notation \uc758 \uc57d\uc790 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uac1d\uccb4\ub97c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc678\ubd80\ub85c \uc804\uc1a1\ud558\uae30 \uc704\ud574 \ubb38\uc790\uc5f4 \ud615\ud0dc\ub85c \ud45c\ud604 \ub370\uc774\ud130\uac00 \uac04\uacb0\ud558\uace0 \uc0ac\ub78c\uc774 \uc774\ud574\ud558\uae30 \uc26c\uc6c0 JSON.parse \ub97c \uc774\uc6a9\ud574 JSON \uc744 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uac1d\uccb4\ub85c \ubcc0\ud658 JSON.stringify \ub97c \uc774\uc6a9\ud574 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uac1d\uccb4\ub97c JSON \uc73c\ub85c \ubcc0\ud658 Data \uc5b4\ud2b8\ub9ac\ubdf0\ud2b8 HTML \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 \ub370\uc774\ud130\ub97c \uc800\uc7a5 $().data(\u2018key\u2019, \u2018value\u2019) \ub85c \uac12 \uc800\uc7a5 $().data(\u2018key\u2019) \ub85c \uac12 \uc811\uadfc Todo List \ucd94\uac00 \ubc84\ud2bc\uc744 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false},"categories":[38],"tags":[],"_links":{"self":[{"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/posts\/1178"}],"collection":[{"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/comments?post=1178"}],"version-history":[{"count":8,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/posts\/1178\/revisions"}],"predecessor-version":[{"id":1191,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/posts\/1178\/revisions\/1191"}],"wp:attachment":[{"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/media?parent=1178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/categories?post=1178"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mylittleforest.kr\/wordpress\/wp-json\/wp\/v2\/tags?post=1178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}