{"id":154,"date":"2019-08-10T01:42:08","date_gmt":"2019-08-09T22:42:08","guid":{"rendered":"http:\/\/atonko.ru\/?p=154"},"modified":"2022-03-18T16:39:55","modified_gmt":"2022-03-18T13:39:55","slug":"%d0%b3%d1%83%d0%b3%d0%bb-%d1%82%d0%b0%d0%b1%d0%bb%d0%b8%d1%86%d1%8b-%d0%ba%d0%b0%d0%ba-%d0%b1%d0%b0%d0%b7%d0%b0-%d0%b4%d0%b0%d0%bd%d0%bd%d1%8b%d1%85-%d0%b4%d0%bb%d1%8f-%d0%b2%d0%b5%d0%b1-%d0%bf-3","status":"publish","type":"post","link":"https:\/\/alextonkonogov.ru\/?p=154","title":{"rendered":"Google \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043a\u0430\u043a \u0431\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0427\u0430\u0441\u0442\u044c 2"},"content":{"rendered":"\n<p>\u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u044b:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0443\u0437\u043d\u0430\u043b\u0438 \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 Google Apps Script, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u043a \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u0435\u0440\u0432\u0443\u044e \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044e;<\/li><li>\u0437\u0430\u043b\u043e\u0436\u0438\u043b\u0438 \u043e\u0441\u043d\u043e\u0432\u0443 \u043f\u043e\u0434 \u043d\u0430\u0448 \u0431\u0443\u0434\u0443\u0449\u0438\u0439 \u0440\u043e\u0443\u0442\u0438\u043d\u0433 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432;<\/li><li>\u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0438\u0445 \u0438\u0437 \u043d\u0435\u0435;<\/li><li>\u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435;<\/li><li>\u0443\u0437\u043d\u0430\u043b\u0438 \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442, \u0447\u0442\u043e\u0431\u044b \u0432\u043d\u0435\u0441\u0435\u043d\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u0441\u0442\u0443\u043f\u0438\u043b\u0438 \u0432 \u0441\u0438\u043b\u0443. <\/li><\/ul>\n\n\n\n<p>\n\n\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438.\n\n<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\n\n\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438\n\n<\/h3>\n\n\n\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Bootstrap. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0430\u043f\u043a\u0443 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>index.html;<\/li><li>main.js;<\/li><\/ol>\n\n\n\n<p>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u201cindex.html\u201d:<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:16px\"><code lang=\"markup\" class=\"language-markup\">&lt;!doctype html&gt;\n&lt;html lang=\"ru\"&gt;\n  &lt;head&gt;\n    &lt;!-- Required meta tags --&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"&gt;\n    &lt;title&gt;\u041c\u043e\u0438 \u0437\u0430\u0434\u0430\u0447\u0438&lt;\/title&gt;\n    &lt;!-- Bootstrap CSS --&gt;\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH\/1fQ784\/j6cY\/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\"&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n\n    &lt;div class=\"container\"&gt;\n      &lt;!-- \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441 \u0437\u0430\u0434\u0430\u0447\u0430\u043c\u0438 --&gt;\n      &lt;div id=\"tasksTableDiv\" class=\"table-responsive mt-5\"&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n    \n    &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.1.0\/jquery.min.js\"&gt;&lt;\/script&gt;\n    &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.3\/umd\/popper.min.js\" integrity=\"sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK\/l8WvCWPIPm49\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n    &lt;script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.1\/js\/bootstrap.min.js\" integrity=\"sha384-smHYKdLADwkXOn1EmN1qk\/HfnUcbVRZyYmZ4qpPea6sjB\/pTJ0euyQp0Mk8ck+5T\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n    &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/handlebars.js\/4.0.5\/handlebars.min.js\"&gt;&lt;\/script&gt;\n    &lt;script type=\"text\/javascript\" src=\"main.js\"&gt;&lt;\/script&gt;&lt;!-- \u0441\u043a\u0440\u0438\u043f\u0442 \u0441 \u043d\u0430\u0448\u0438\u043c \u043a\u043e\u0434\u043e\u043c --&gt;\n\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>\u0414\u0430\u043b\u0435\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0448 \u0444\u0430\u0439\u043b \u201cmain.js\u201d \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0442\u0443\u0434\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434, \u043d\u0435 \u0437\u0430\u0431\u044b\u0432 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:16px\"><code lang=\"javascript\" class=\"language-javascript\">var myApp = \"https:\/\/docs.google.com\/spreadsheets\/d\/1M1OKuBxGoXXXXXXXXXXXXXXXXXXXXXXXXXXXXS3EWj6Bs\/edit#gid=0\";\/\/URL \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\n\n$( document ).ready(function() {\/\/\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f, \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u0430 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e\n\tgetTasks ();\/\/\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u0437\u0430\u0434\u0430\u0447\n});\n\nfunction getTasks () {\n    var action = \"getTasks\";\n    var url = myApp+\"?action=\"+action\n\n    \/\/\u043f\u043e\u0434\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c GET \u0437\u0430\u043f\u0440\u043e\u0441\n    var xhr = new XMLHttpRequest();\n    xhr.open(\"GET\", url, true);\n    xhr.setRequestHeader('Content-Type', 'application\/x-www-form-urlencoded');\n    xhr.onreadystatechange = function() {\n        if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {\n        \t\/\/\u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0443\u0441\u043f\u0435\u0445\u0430 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442 \u0432 JSON \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u043d\u0430\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443\n        \tvar data = JSON.parse(xhr.response);\n        \ttasksTable (data);\n        }\n    };\n    try { xhr.send(); } catch (err) {console.log(err) }\n}\n\n\/\/\u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438 \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u0438\u0437 \u043d\u0438\u0445 \u0442\u0430\u0431\u043b\u0438\u0446\u0443\nfunction tasksTable (data) {\n\t$('#tasksTableDiv').html( function () {\n\t\tvar th = '';\n\t\tvar td = '';\n\n\t\tfor ( i = 0; i &lt; data.length; i++ ) {\n\t\t\t\/\/\u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b\n\t\t\tif ( i == 0 ) {\n\t\t\t\tth +=   '&lt;tr>'+\n\t\t\t\t\t     '&lt;th>'+data[i][0]+'&lt;\/th>'+\n\t\t\t\t\t     '&lt;th>'+data[i][1]+'&lt;\/th>'+\n\t\t\t\t\t     '&lt;th>'+data[i][2]+'&lt;\/th>'+\n\t\t\t\t\t '&lt;\/tr>';\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t\/\/\u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0447\u0438\u0442\u0430\u0435\u043c \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435\n\t\t\tvar status = ( data[i][2] == 0 ) ? '\u0412 \u043e\u0447\u0435\u0440\u0435\u0434\u0438' : '\u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430';\n\t\t\ttd +=   '&lt;tr>'+\n\t\t\t\t\t'&lt;td>'+data[i][0]+'&lt;\/td>'+\n\t\t\t\t\t'&lt;td>'+data[i][1]+'&lt;\/td>'+\n\t\t\t\t\t'&lt;td>'+status+'&lt;\/td>'+\n\t\t\t\t'&lt;\/tr>';\n\t\t}\n\t\t\/\/\u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0433\u043e\u0442\u043e\u0432\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443\n\t\treturn '&lt;table class=\"table\">&lt;thead>'+th+'&lt;\/thead>&lt;tbody>'+td+'&lt;\/tbody>&lt;\/table>'\n\t})\n}<\/code><\/pre>\n\n\n\n<p>\u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c index.html \u0438, \u0435\u0441\u043b\u0438 \u0432\u0441\u0435 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u0442\u043e \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a\u0443\u044e \u0441\u0438\u043c\u043f\u0430\u0442\u0438\u0447\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"330\" src=\"https:\/\/atonko.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_00-33-41-1024x330.png\" alt=\"\" class=\"wp-image-159\" srcset=\"https:\/\/alextonkonogov.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_00-33-41-1024x330.png 1024w, https:\/\/alextonkonogov.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_00-33-41-300x97.png 300w, https:\/\/alextonkonogov.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_00-33-41-768x247.png 768w, https:\/\/alextonkonogov.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_00-33-41.png 1363w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u041f\u043e\u043a\u0430 \u043d\u0430\u0448\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0443\u043c\u0435\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u0437\u0430\u0434\u0430\u0447, \u043d\u043e \u043c\u044b \u0432\u0435\u0434\u044c \u0443\u0436\u0435 \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u0438\u043b\u0438 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f, \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447. \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0432\u0441\u0435 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043d\u043e\u0432\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443<\/h3>\n\n\n\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0438 \u043d\u0430\u043c \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 HTML \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0444\u043e\u0440\u043c\u0430 \u0441 \u043f\u043e\u043b\u0435\u043c \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0438 \u043a\u043d\u043e\u043f\u043a\u0430, \u043f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0431\u0443\u0434\u0435\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438.  \u0412\u0441\u0435 \u044d\u0442\u043e \u0434\u0435\u043b\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0432 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u043c \u043e\u043a\u043d\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443.<\/p>\n\n\n\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u043e\u0441\u043b\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0441 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c &#8220;tasksTableDiv&#8221; \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 html \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:16px\"><code lang=\"markup\" class=\"language-markup\">&lt;!-- \u043a\u043d\u043e\u043f\u043a\u0430 \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430 --&gt;\n&lt;button type=\"button\" class=\"btn btn-primary mt-3\" data-toggle=\"modal\" data-target=\"#addTaskModal\"&gt;\u041d\u043e\u0432\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p>\u041f\u0435\u0440\u0435\u0434 \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u043c\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u044d\u0433\u0430 body \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c html \u043a\u043e\u0434 \u0441 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435\u043c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430.<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:16px\"><code lang=\"markup\" class=\"language-markup\">&lt;!-- \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 --&gt;\n&lt;div class=\"modal fade\" id=\"addTaskModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"exampleModalLongTitle\" aria-hidden=\"true\"&gt;\n  &lt;div class=\"modal-dialog\" role=\"document\"&gt;\n    &lt;div class=\"modal-content\"&gt;\n      &lt;div class=\"modal-header\"&gt;\n        &lt;h5 class=\"modal-title\" id=\"exampleModalLongTitle\"&gt;\u041d\u043e\u0432\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430&lt;\/h5&gt;\n        &lt;button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"&gt;\n          &lt;span aria-hidden=\"true\"&gt;\u00d7&lt;\/span&gt;\n        &lt;\/button&gt;\n      &lt;\/div&gt;\n      &lt;div class=\"modal-body\"&gt;\n        &lt;form id=\"addTaskForm\" onsubmit=\"return false;\"&gt;\n          &lt;div class=\"form-group\"&gt;\n            &lt;label for=\"task\"&gt;\u0417\u0430\u0434\u0430\u0447\u0430&lt;\/label&gt;\n            &lt;input id=\"task\" name=\"task\" class=\"form-control form-control-sm\" type=\"text\"&gt;\n          &lt;\/div&gt;\n        &lt;\/form&gt;\n      &lt;\/div&gt;\n      &lt;div class=\"modal-footer\"&gt;\n        &lt;button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\"&gt;\u041e\u0442\u043c\u0435\u043d\u0430&lt;\/button&gt;\n        &lt;button type=\"button\" class=\"btn btn-success\" onclick=\"addTask()\"&gt;\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c&lt;\/button&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e addTask() \u0432 main.js:<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:16px\"><code lang=\"javascript\" class=\"language-javascript\">function addTask () {\n\tvar task = $('#task').val();\n\tvar action = \"addTask\";\n\n\tvar xhr = new XMLHttpRequest();\n\tvar body = 'task=' + encodeURIComponent(task) + '&amp;action=' + encodeURIComponent(action);\n\txhr.open(\"POST\", myApp, true);\n\txhr.setRequestHeader('Content-Type', 'application\/x-www-form-urlencoded');\n\txhr.onreadystatechange = function() {\n        if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {\n        \talert(xhr.response);\n        \tdocument.getElementById(\"addTaskForm\").reset();\/\/\u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0444\u043e\u0440\u043c\u0443\n\t\t$('#addTaskModal').modal('hide');\/\/\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043c\u043e\u0434\u0430\u043b\u043a\u0443\n\t\tgetTasks ();\/\/\u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0434\u0430\u0447\n        }\n    };\n\ttry { xhr.send(body);} catch (err) {console.log(err) }\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"413\" src=\"https:\/\/atonko.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_02-37-44-1024x413.png\" alt=\"\" class=\"wp-image-176\" srcset=\"https:\/\/alextonkonogov.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_02-37-44-1024x413.png 1024w, https:\/\/alextonkonogov.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_02-37-44-300x121.png 300w, https:\/\/alextonkonogov.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_02-37-44-768x310.png 768w, https:\/\/alextonkonogov.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_02-37-44.png 1364w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0447\u0443<\/h3>\n\n\n\n<p>\u0414\u043b\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447, \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0432\u0435\u0441\u0438\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043d\u0430 \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443-\u0441\u0441\u044b\u043b\u043a\u0443 \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e.<\/p>\n\n\n\n<p>\u041c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432\u044b\u0432\u043e\u0434\u0430 \u0441\u043f\u0438\u0441\u043a\u0430 \u0437\u0430\u0434\u0430\u0447 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:16px\"><code lang=\"javascript\" class=\"language-javascript\">function tasksTable (data) {\n\t$('#tasksTableDiv').html( function () {\n\t\tvar th = '';\n\t\tvar td = '';\n\n\t\tfor ( i = 0; i &lt; data.length; i++ ) {\n\t\t\t\/\/\u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b\n\t\t\tif ( i == 0 ) {\n\t\t\t\tth +=   '&lt;tr>'+\n\t\t\t\t\t\t'&lt;th>'+data[i][0]+'&lt;\/th>'+\n\t\t\t\t\t  \t'&lt;th>'+data[i][1]+'&lt;\/th>'+\n\t\t\t\t\t  \t'&lt;th>'+data[i][2]+'&lt;\/th>'+\n\t\t\t\t\t  \t'&lt;th>\u0423\u0434\u0430\u043b\u0438\u0442\u044c&lt;\/th>'+\n\t\t\t\t\t  '&lt;\/tr>';\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t\/\/\u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0447\u0438\u0442\u0430\u0435\u043c \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435\n\t\t\tvar status = ( data[i][2] == 0 ) ? '\u0412 \u043e\u0447\u0435\u0440\u0435\u0434\u0438' : '\u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430';\n\t\t\ttd +=   '&lt;tr>'+\n\t\t\t\t\t'&lt;td>'+data[i][0]+'&lt;\/td>'+\n\t\t\t\t\t'&lt;td>'+data[i][1]+'&lt;\/td>'+\n\t\t\t\t\t'&lt;td>'+status+'&lt;\/td>'+\n\t\t\t\t\t'&lt;td>&lt;button type=\"button\" class=\"btn btn-link\" onclick=\"deleteTask(\\''+data[i][1]+'\\')\">\u0423\u0434\u0430\u043b\u0438\u0442\u044c&lt;\/button>&lt;\/td>'+\n\t\t\t\t'&lt;\/tr>';\n\t\t}\n\t\t\/\/\u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0433\u043e\u0442\u043e\u0432\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443\n\t\treturn '&lt;table class=\"table\">&lt;thead>'+th+'&lt;\/thead>&lt;tbody>'+td+'&lt;\/tbody>&lt;\/table>'\n\t})\n}<\/code><\/pre>\n\n\n\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438:<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:16px\"><code lang=\"javascript\" class=\"language-javascript\">function deleteTask (task) {\n\tvar action = \"deleteTask\";\n\tvar xhr = new XMLHttpRequest();\n\tvar body = 'task=' + encodeURIComponent(task) + '&amp;action=' + encodeURIComponent(action);\n\txhr.open(\"POST\", myApp, true);\n\txhr.setRequestHeader('Content-Type', 'application\/x-www-form-urlencoded');\n\txhr.onreadystatechange = function() {\n        if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {\n        \talert(xhr.response);\n\t\tgetTasks ();\/\/\u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0434\u0430\u0447\n        }\n    };\n\ttry { xhr.send(body);} catch (err) {console.log(err) }\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"429\" src=\"https:\/\/atonko.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_01-29-08-1024x429.png\" alt=\"\" class=\"wp-image-165\" srcset=\"https:\/\/alextonkonogov.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_01-29-08-1024x429.png 1024w, https:\/\/alextonkonogov.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_01-29-08-300x126.png 300w, https:\/\/alextonkonogov.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_01-29-08-768x322.png 768w, https:\/\/alextonkonogov.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_01-29-08.png 1364w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u0442\u0430\u0442\u0443\u0441 \u0437\u0430\u0434\u0430\u0447\u0438<\/h3>\n\n\n\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0435 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e \u0441 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c JS. \u041d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043c\u044b \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u0435\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f. \u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u0443\u0441\u0430. \u041f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u043d\u0438\u0436\u0435, \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0432 \u043a\u0435\u0439\u0441\u044b \u0434\u043b\u044f switch \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445 \u043d\u0438\u0436\u0435.<\/p>\n\n\n\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u0449\u0435 \u043e\u0434\u043d\u043e \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e:<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:16px\"><code lang=\"markup\" class=\"language-markup\">&lt;!-- \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438 --&gt;\n&lt;div class=\"modal fade\" id=\"updateTaskModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\"&gt;\n  &lt;div class=\"modal-dialog modal-dialog-centered\" role=\"document\"&gt;\n    &lt;div class=\"modal-content\"&gt;\n      &lt;div class=\"modal-header\"&gt;\n        &lt;h5 class=\"modal-title\"&gt;&lt;\/h5&gt;\n        &lt;button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"&gt;\n          &lt;span aria-hidden=\"true\"&gt;\u00d7&lt;\/span&gt;\n        &lt;\/button&gt;\n      &lt;\/div&gt;\n      &lt;div class=\"modal-body\"&gt;&lt;\/div&gt;\n      &lt;div class=\"modal-footer\"&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p> \u041c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432\u044b\u0432\u043e\u0434\u0430 \u0441\u043f\u0438\u0441\u043a\u0430 \u0437\u0430\u0434\u0430\u0447: <\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:16px\"><code lang=\"javascript\" class=\"language-javascript\">function tasksTable (data) {\n\t$('#tasksTableDiv').html( function () {\n\t\tvar th = '';\n\t\tvar td = '';\n\n\t\tfor ( i = 0; i &lt; data.length; i++ ) {\n\t\t\t\/\/\u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b\n\t\t\tif ( i == 0 ) {\n\t\t\t\tth +=   '&lt;tr>'+\n\t\t\t\t\t\t'&lt;th>'+data[i][0]+'&lt;\/th>'+\n\t\t\t\t\t  \t'&lt;th>'+data[i][1]+'&lt;\/th>'+\n\t\t\t\t\t  \t'&lt;th>'+data[i][2]+'&lt;\/th>'+\n\t\t\t\t\t  \t'&lt;th>\u0423\u0434\u0430\u043b\u0438\u0442\u044c&lt;\/th>'+\/\/\n\t\t\t\t\t '&lt;\/tr>';\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t\/\/\u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0447\u0438\u0442\u0430\u0435\u043c \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435\n\t\t\tvar status = ( data[i][2] == 0 ) ? '\u0412 \u043e\u0447\u0435\u0440\u0435\u0434\u0438' : '\u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430';\n\t\t\tvar color = ( data[i][2] == 1 ) ? 'class=\"table-success\"' : '';\n\t\t\ttd +=   '&lt;tr '+color+'>'+\n\t\t\t\t\t'&lt;td>'+data[i][0]+'&lt;\/td>'+\n\t\t\t\t\t'&lt;td>'+data[i][1]+'&lt;\/td>'+\n\t\t\t\t\t'&lt;td>&lt;button type=\"button\" class=\"btn btn-link\" onclick=\"updateTaskModal(\\''+data[i][1]+'\\', \\''+data[i][2]+'\\', \\'status\\')\">'+status+'&lt;\/button>&lt;\/td>'+\n\t\t\t\t\t'&lt;td>&lt;button type=\"button\" class=\"btn btn-link\" onclick=\"deleteTask(\\''+data[i][1]+'\\')\">\u0423\u0434\u0430\u043b\u0438\u0442\u044c&lt;\/button>&lt;\/td>'+\n\t\t\t\t '&lt;\/tr>';\n\t\t}\n\t\t\/\/\u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0433\u043e\u0442\u043e\u0432\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443\n\t\treturn '&lt;table class=\"table\">&lt;thead>'+th+'&lt;\/thead>&lt;tbody>'+td+'&lt;\/tbody>&lt;\/table>'\n\t})\n}<\/code><\/pre>\n\n\n\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0437\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u0444\u043e\u0440\u043c\u044b \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430, \u0442.\u043a. \u0435\u0441\u043b\u0438 \u043c\u044b \u043c\u0435\u043d\u044f\u0435\u043c \u0441\u0442\u0430\u0442\u0443\u0441, \u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u043e \u0441\u0442\u0430\u0442\u0443\u0441\u0430\u043c\u0438, \u0430 \u0435\u0441\u043b\u0438 \u043c\u044b \u043c\u0435\u043d\u044f\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u0442\u043e \u043d\u0430\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043f\u043e\u043b\u0435 \u0434\u043b\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f.<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:16px\"><code lang=\"javascript\" class=\"language-javascript\">function updateTaskModal(task, currentValue, where) {\n\tvar title = '\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443';\n\tswitch (where) {\n\t\tcase \"status\":\n\t\t\tvar input = '&lt;div class=\"form-group\"&gt;'+\n\t\t\t                '&lt;label for=\"status\"&gt;\u0421\u0442\u0430\u0442\u0443\u0441&lt;\/label&gt;'+\n\t\t\t                '&lt;select id=\"status\" name=\"status\" class=\"form-control form-control-sm\"&gt;'+\n\t\t\t                \t'&lt;option value=\"0\" '+isSelected(currentValue, 0)+'&gt;\u0412 \u043e\u0447\u0435\u0440\u0435\u0434\u0438&lt;\/option&gt;'+\n\t\t\t                \t'&lt;option value=\"1\" '+isSelected(currentValue, 1)+'&gt;\u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430&lt;\/option&gt;'+\n\t\t\t                '&lt;\/select&gt;'+\n\t\t\t            '&lt;\/div&gt;';\n\t\t\tbreak;\n\t}\n\n\tvar form = '&lt;form id=\"updateTaskForm\" onsubmit=\"return false;\"&gt;'+input+'&lt;\/form&gt;';\n\tvar buttons = '&lt;button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\"&gt;\u041e\u0442\u043c\u0435\u043d\u0430&lt;\/button&gt;'+\n            \t      '&lt;button type=\"button\" class=\"btn btn-success\" onclick=\"updateTask(\\''+task+'\\', \\''+where+'\\')\"&gt;\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c&lt;\/button&gt;';\n\n\t$('#updateTaskModal .modal-header .modal-title').html(title);\n\t$('#updateTaskModal .modal-body').html(form);\n\t$('#updateTaskModal .modal-footer').html(buttons);\n\t$(\"#updateTaskModal\").modal(\"show\");\n}\n\nfunction isSelected(currentValue, value) {\n\tif (currentValue == value) return \"selected\";\n}<\/code><\/pre>\n\n\n\n<p>\u0418 \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442 \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:16px\"><code lang=\"javascript\" class=\"language-javascript\">function updateTask(task, where) {\n\tvar action = \"updateTask\";\n\n\tswitch (where) {\n\t\tcase \"status\":\n\t\t\tvar newValue = $('#status').val();\n\t\t\tbreak;\n\t}\n\t\n\tvar xhr = new XMLHttpRequest();\n\tvar body = 'task=' + encodeURIComponent(task) + '&amp;where=' + encodeURIComponent(where) + '&amp;newValue=' + encodeURIComponent(newValue) + '&amp;action=' + encodeURIComponent(action);\n\txhr.open(\"POST\", myApp, true);\n\txhr.setRequestHeader('Content-Type', 'application\/x-www-form-urlencoded');\n\txhr.onreadystatechange = function() {\n        if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {\n        \t$(\"#updateTaskModal\").modal(\"hide\");\n        \talert(xhr.response);\n\t\tgetTasks ();\/\/\u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0434\u0430\u0447\n        }\n    };\n\ttry { xhr.send(body);} catch (err) {console.log(err) }\n\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"433\" src=\"https:\/\/atonko.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_02-28-18-1024x433.png\" alt=\"\" class=\"wp-image-168\" srcset=\"https:\/\/alextonkonogov.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_02-28-18-1024x433.png 1024w, https:\/\/alextonkonogov.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_02-28-18-300x127.png 300w, https:\/\/alextonkonogov.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_02-28-18-768x324.png 768w, https:\/\/alextonkonogov.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_02-28-18.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"399\" src=\"https:\/\/atonko.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_02-28-44-1024x399.png\" alt=\"\" class=\"wp-image-169\" srcset=\"https:\/\/alextonkonogov.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_02-28-44-1024x399.png 1024w, https:\/\/alextonkonogov.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_02-28-44-300x117.png 300w, https:\/\/alextonkonogov.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_02-28-44-768x299.png 768w, https:\/\/alextonkonogov.ru\/wp-content\/uploads\/2019\/08\/2019-08-10_02-28-44.png 1365w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u044b: \u0443\u0437\u043d\u0430\u043b\u0438 \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 Google Apps Script, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u043a \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u0435\u0440\u0432\u0443\u044e \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044e; \u0437\u0430\u043b\u043e\u0436\u0438\u043b\u0438 \u043e\u0441\u043d\u043e\u0432\u0443 \u043f\u043e\u0434 \u043d\u0430\u0448 \u0431\u0443\u0434\u0443\u0449\u0438\u0439 \u0440\u043e\u0443\u0442\u0438\u043d\u0433 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432; \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0438&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-154","post","type-post","status-publish","format-standard","hentry","category-google-apps-script"],"_links":{"self":[{"href":"https:\/\/alextonkonogov.ru\/index.php?rest_route=\/wp\/v2\/posts\/154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alextonkonogov.ru\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alextonkonogov.ru\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alextonkonogov.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alextonkonogov.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=154"}],"version-history":[{"count":7,"href":"https:\/\/alextonkonogov.ru\/index.php?rest_route=\/wp\/v2\/posts\/154\/revisions"}],"predecessor-version":[{"id":730,"href":"https:\/\/alextonkonogov.ru\/index.php?rest_route=\/wp\/v2\/posts\/154\/revisions\/730"}],"wp:attachment":[{"href":"https:\/\/alextonkonogov.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alextonkonogov.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alextonkonogov.ru\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}