{"id":306483,"date":"2020-07-06T09:00:25","date_gmt":"2020-07-06T09:00:25","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=306483"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=306483","title":{"rendered":"50\/200+ \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u043f\u043e JavaScript"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/509682\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/b6\/ci\/wg\/b6ciwgnykdiccqgqa3shiu3q4zk.png\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f! \u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0412\u0430\u0448\u0435\u043c\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432 \u2014 \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u0432\u0438\u043a\u0442\u043e\u0440\u0438\u043d\u0443 \u043f\u043e JavaScript, \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0443\u044e \u0438\u0437 50 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<p>  \u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u2014 \u043b\u0443\u0447\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u0442\u0432\u0430.<\/p>\n<h3>\u041f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0435<\/h3>\n<p>  \u0414\u0430\u043d\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 <a href=\"https:\/\/github.com\/lydiahallie\/javascript-questions#readme\" rel=\"nofollow\">\u044d\u0442\u043e\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>. \u0415\u0433\u043e \u0430\u0432\u0442\u043e\u0440, Lydia Hallie, \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043a\u0430\u043a \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0445 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u0438, \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0441\u0440\u0435\u0434\u0438 \u043d\u0438\u0445 \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435, \u043a\u0430\u043a \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0434\u0430\u0436\u0435 \u043e\u043f\u044b\u0442\u043d\u043e\u043c\u0443 JavaScript-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043f\u043e\u043a\u0430\u0436\u0443\u0442\u0441\u044f \u043d\u0435\u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438. \u041e\u0434\u043d\u0430\u043a\u043e \u0441\u0440\u0435\u0434\u0438 \u044d\u0442\u0438\u0445 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u0435\u0441\u0442\u044c \u0438 \u0442\u0430\u043a\u0438\u0435, \u0434\u043b\u044f \u043e\u0442\u0432\u0435\u0442\u0430 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u043b\u0430\u0434\u0435\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u043c\u0438 \u0437\u043d\u0430\u043d\u0438\u044f\u043c\u0438. \u0412 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0440\u0443\u0441\u0441\u043a\u0438\u0439 \u043f\u0435\u0440\u0435\u0432\u043e\u0434, \u043d\u043e, \u043c\u044f\u0433\u043a\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u043e\u043d \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0436\u0435\u043b\u0430\u0442\u044c \u043b\u0443\u0447\u0448\u0435\u0433\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043e\u0442\u0432\u0435\u0442\u043e\u0432 (\u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0439) \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442\u044c \u0437\u0430\u043d\u043e\u0432\u043e.<\/p>\n<p>  \u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u044f (\u043e\u0442\u0432\u0435\u0442\u044b) \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0432 \u043f\u043e\u043b\u043d\u043e\u0439 \u043c\u0435\u0440\u0435 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u0441\u0443\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. \u042d\u0442\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f \u0444\u043e\u0440\u043c\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u2014 \u043e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0447\u0435\u043a\u043b\u0438\u0441\u0442, \u0430 \u043d\u0435 \u0443\u0447\u0435\u0431\u043d\u0438\u043a. \u041e\u0442\u0432\u0435\u0442\u044b, \u0441\u043a\u043e\u0440\u0435\u0435, \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u043e\u0439 \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432 \u043d\u0430 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/JavaScript\" rel=\"nofollow\">MDN <\/a> \u0438\u043b\u0438 <a href=\"https:\/\/learn.javascript.ru\/\" rel=\"nofollow\">Javascript.ru<\/a>. \u0412\u043f\u0440\u043e\u0447\u0435\u043c, \u043c\u043d\u043e\u0433\u0438\u0435 \u0438\u0437 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0438\u0441\u0447\u0435\u0440\u043f\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u043e\u0442\u0432\u0435\u0442\u044b.<br \/>  <a name=\"habracut\"><\/a><br \/>  \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043a\u043e\u0434 \u043d\u0435\u043e\u0434\u043d\u043e\u043a\u0440\u0430\u0442\u043d\u043e \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d, \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u0437\u0430\u0441\u0442\u0440\u0430\u0445\u043e\u0432\u0430\u043d \u043e\u0442 \u043e\u0448\u0438\u0431\u043e\u043a, \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u043a\u0440\u043e\u043c\u0435 \u0442\u0435\u0445, \u043a\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u043e\u0448\u0438\u0431\u043e\u043a, \u043e\u043f\u0435\u0447\u0430\u0442\u043e\u043a, \u043d\u0435\u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0435\u0439, \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0441\u0442\u0438 \u0444\u043e\u0440\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u043e\u043a \u0438 \u0442.\u043f., \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0432\u043e\u0434, \u043f\u0440\u043e\u0448\u0443 \u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u043b\u0438\u0447\u043a\u0443, \u0431\u0443\u0434\u0443 \u043f\u0440\u0438\u0437\u043d\u0430\u0442\u0435\u043b\u0435\u043d (\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u043d\u0430 GitHub \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442\u0441\u044f).<\/p>\n<p>  \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u044d\u0442\u043e \u0432\u0441\u0435, \u0447\u0442\u043e \u044f \u0445\u043e\u0442\u0435\u043b \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u044f.<\/p>\n<h3>\u041f\u0440\u0430\u0432\u0438\u043b\u0430<\/h3>\n<p>  \u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u043f\u0440\u043e\u0441\u0442\u044b\u0435: 50 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432, 3-4 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u043e\u0442\u0432\u0435\u0442\u0430, \u0440\u0435\u0439\u0442\u0438\u043d\u0433: \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u0438 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0432\u0435\u0442\u043e\u0432, \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441: \u043d\u043e\u043c\u0435\u0440 \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<p>  \u041f\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0446\u0435\u043d\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0432\u0435\u0442\u043e\u0432 \u0438 \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u0432\u043e\u0434 \u043e\u0431 \u0443\u0440\u043e\u0432\u043d\u0435 \u0432\u043b\u0430\u0434\u0435\u043d\u0438\u044f JavaScript: \u0431\u043e\u043b\u044c\u0448\u0435 80% \u2014 \u043e\u0442\u043b\u0438\u0447\u043d\u043e, \u0431\u043e\u043b\u044c\u0448\u0435 50% \u2014 \u043d\u0435\u043f\u043b\u043e\u0445\u043e, \u043c\u0435\u043d\u044c\u0448\u0435 50%\u2026 \u043d\u0443, \u0412\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435.<\/p>\n<p>  \u041a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0432\u043e\u043f\u0440\u043e\u0441\u0443 \u043f\u0440\u0438\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0435. \u041f\u0440\u0438 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u043e\u0442\u0432\u0435\u0442\u0435 \u0434\u0430\u043d\u043d\u043e\u0435 \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>  \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u0438 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0432\u0435\u0442\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u0432\u044b\u0439 \u043d\u043e\u043c\u0435\u0440 \u0432\u043e\u043f\u0440\u043e\u0441\u0430 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435, \u0443 \u0412\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0430\u0443\u0437\u0443, \u043f\u0435\u0440\u0435\u0434\u043e\u0445\u043d\u0443\u0442\u044c \u0438 \u0432 \u043b\u044e\u0431\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u0441 \u0442\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438\u0441\u044c.<\/p>\n<p>  \u041d\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0432, \u043f\u043e\u0440\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u0434\u0435\u043b\u0443.<\/p>\n<h3>\u0412\u0438\u043a\u0442\u043e\u0440\u0438\u043d\u0430<\/h3>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/harryheman\/embed\/preview\/pogaawv?height=300&amp;slug-hash=pogaawv&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  \u041a\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f <a href=\"https:\/\/github.com\/harryheman\/harryheman.github.io\/tree\/master\/JSQ\" rel=\"nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<h3>\u041c\u0435\u0445\u0430\u043d\u0438\u043a\u0430<\/h3>\n<p>  \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0432 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0432\u0438\u043a\u0442\u043e\u0440\u0438\u043d\u0430 \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e.<\/p>\n<p>  \u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"xml\">&lt;head&gt;     &lt;meta charset=&quot;UTF-8&quot;&gt;     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;     &lt;title&gt;200+ \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u043f\u043e JavaScript&lt;\/title&gt;     &lt;!-- \u0448\u0440\u0438\u0444\u0442 --&gt;     &lt;link href=&quot;https:\/\/fonts.googleapis.com\/css2?family=Ubuntu&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;     &lt;!-- \u0441\u0442\u0438\u043b\u0438 --&gt;     &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;     &lt;!-- \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 \u0441 \u0442\u0438\u043f\u043e\u043c &quot;\u043c\u043e\u0434\u0443\u043b\u044c&quot; --&gt;     &lt;script type=&quot;module&quot; src=&quot;script.js&quot;&gt;&lt;\/script&gt; &lt;\/head&gt; &lt;body&gt;&lt;\/body&gt; <\/code><\/pre>\n<p>  \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438:<\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">CSS:<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"css\">* {     margin: 0;     padding: 0;     box-sizing: border-box;     font-family: Ubuntu, sans-serif;     font-size: 1em;     text-align: center;     letter-spacing: 1.05px;     line-height: 1.5em;     color: #111;     user-select: none; }  @media (max-width: 512px) {     * {         font-size: .95em;     } }  html {     position: relative; }  body {     padding: 1em;     min-height: 100vh;     background: radial-gradient(circle, skyblue, steelblue);     display: flex;     flex-direction: column;     justify-content: start;     align-items: center; }  h1 {     margin: .5em;     font-size: 1.05em; }  output {     margin: .5em;     display: block; }  .score {     font-size: 1.25em; }  form {     text-align: left; }  form p {     text-align: left;     white-space: pre; }  form button {     position: relative;     left: 50%;     transform: translateX(-50%); }  button {     margin: 2em 0;     padding: .4em .8em;     outline: none;     border: none;     background: linear-gradient(lightgreen, darkgreen);     border-radius: 6px;     box-shadow: 0 1px 2px rgba(0, 0, 0, .4);     font-size: .95em;     cursor: pointer;     transition: .2s; }  button:hover {     color: #eee; }  label {     cursor: pointer; }  input {     margin: 0 10px 0 2em;     cursor: pointer; }  details {     font-size: .95em;     position: absolute;     bottom: 0;     left: 50%;     transform: translateX(-50%);     width: 90%;     background: #eee;     border-radius: 4px;     cursor: pointer; }  details h3 {     margin: .5em; }  details p {     margin: .5em 1.5em;     text-align: justify;     text-indent: 1.5em; }  .right {     color: green; }  .wrong {     color: red; } <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<p>  \u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 (assets) \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0431\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 question (\u0432\u043e\u043f\u0440\u043e\u0441), answers (\u043e\u0442\u0432\u0435\u0442\u044b), rightAnswer (\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442) \u0438 explanation (\u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435):<\/p>\n<pre><code class=\"javascript\">[ {     question: `         function sayHi() {             console.log(name);             console.log(age);             var name = &quot;Lydia&quot;;             let age = 21;         }          sayHi();     `,     answers: `         A: Lydia \u0438 undefined         B: Lydia \u0438 ReferenceError         C: ReferenceError \u0438 21         D: undefined \u0438 ReferenceError     `,     rightAnswer: `D`,     explanation: `         \u0412\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u044b \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e name \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 var. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e name \u043f\u043e\u0434\u043d\u0438\u043c\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0438. Name \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 undefined \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u043d\u0435 \u0434\u043e\u0439\u0434\u0435\u0442 \u0434\u043e \u0441\u0442\u0440\u043e\u043a\u0438, \u0433\u0434\u0435 \u0435\u0439 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 Lydia. \u041c\u044b \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 name, \u043a\u043e\u0433\u0434\u0430 \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0435\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u0435\u0434\u0435\u043d\u043e undefined. \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e let (\u0438 const), \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u044e\u0442\u0441\u044f, \u043d\u043e \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 var, \u043d\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f. \u0414\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u0438\u043c \u0434\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u0435\u043d. \u042d\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f &quot;\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043c\u0435\u0440\u0442\u0432\u043e\u0439 \u0437\u043e\u043d\u043e\u0439&quot;. \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c \u0434\u043e \u0438\u0445 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f, JavaScript \u0432\u044b\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 ReferenceError.     ` }, ... ] <\/code><\/pre>\n<p>  \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u043a\u0440\u0438\u043f\u0442:<\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">JavaScript<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">\/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 - \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 import assets from '.\/assets.js'  \/\/ IIFE ;((D, B) =&gt; {     \/\/ \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a - \u0432\u043e\u043f\u0440\u043e\u0441     const title = D.createElement('h1')     B.append(title)      \/\/ \u0440\u0435\u0439\u0442\u0438\u043d\u0433: \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u0438 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0432\u0435\u0442\u043e\u0432     const score = D.createElement('output')     score.className = 'score'     B.append(score)      \/\/ \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441: \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u0432\u044b\u0439 \u043d\u043e\u043c\u0435\u0440 \u0432\u043e\u043f\u0440\u043e\u0441\u0430     const progress = D.createElement('output')     progress.className = 'progress'     B.append(progress)      \/\/ \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0432\u043e\u043f\u0440\u043e\u0441\u0430, \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u043e\u0442\u0432\u0435\u0442\u0430 \u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b     const div = D.createElement('div')     B.append(div)      \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u0438 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0432\u0435\u0442\u043e\u0432 \u0438\u0437 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430     \/\/ \u0438\u043b\u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c 0     let rightAnswers = +localStorage.getItem('rightAnswers') || 0     let wrongAnswers = +localStorage.getItem('wrongAnswers') || 0      \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u0438\u0437 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430     \/\/ \u0438\u043b\u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u0435\u043c\u0443 0     let i = +localStorage.getItem('i') || 0      \/\/ \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u0432\u043e\u043f\u0440\u043e\u0441     showQuestion()      \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0440\u0435\u0439\u0442\u0438\u043d\u0433 \u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441     updateScoreAndProgress()      function showQuestion() {         \/\/ \u0435\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u0440\u0430\u0432\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432         \/\/ \u0437\u043d\u0430\u0447\u0438\u0442, \u0438\u0433\u0440\u0430 \u043e\u043a\u043e\u043d\u0447\u0435\u043d\u0430,         \/\/ \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442         if (i === assets.length) {             return showResult()         }          \/\/ \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a-\u0432\u043e\u043f\u0440\u043e\u0441 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 - \u043d\u043e\u043c\u0435\u0440\u0430 \u0432\u043e\u043f\u0440\u043e\u0441\u0430         switch (i) {             case 4:                 title.textContent = `\u0427\u0442\u043e \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0430\u043b\u0438\u0434\u043d\u044b\u043c?`                 break;             case 9:                 title.textContent = `\u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442?`                 break;             case 12:                 title.textContent = `\u041d\u0430\u0437\u043e\u0432\u0438\u0442\u0435 \u0442\u0440\u0438 \u0444\u0430\u0437\u044b \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439`                 break;             case 13:                 title.textContent = `\u0412\u0441\u0435 \u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u044b?`                 break;             case 14:                 title.textContent = `\u041a\u0430\u043a\u0438\u043c \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442?`                 break;             case 20:                 title.textContent = `\u0427\u0435\u043c\u0443 \u0440\u0430\u0432\u043d\u043e sum?`                 break;             case 21:                 title.textContent = `\u041a\u0430\u043a \u0434\u043e\u043b\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d cool_secret?`                 break;             case 23:                 title.textContent = `\u041a\u0430\u043a\u0438\u043c \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442?`                 break;             case 25:                 title.textContent = `\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0434\u0432\u0435 \u0432\u0435\u0449\u0438: \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438 this`                 break;             case 27:                 title.textContent = `\u041a\u0430\u043a\u0438\u043c \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442?`                 break;             case 29:                 title.textContent = `\u041a\u0430\u043a\u0438\u043c \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442?`                 break;             case 30:                 title.textContent = `\u0427\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432 event.target \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443?`                 break;             case 33:                 title.textContent = `\u041a\u0430\u043a\u0438\u043c \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442?`                 break;             case 34:                 title.textContent = `\u041a\u0430\u043a\u0438\u0435 \u0438\u0437 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f &quot;\u043b\u043e\u0436\u043d\u044b\u043c\u0438&quot;?`                 break;             case 38:                 title.textContent = `\u0412\u0441\u0435 \u0432 JavaScript \u044d\u0442\u043e`                 break;             case 39:                 title.textContent = `\u041a\u0430\u043a\u0438\u043c \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442?`                 break;             case 40:                 title.textContent = `\u041a\u0430\u043a\u0438\u043c \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442?`                 break;             case 41:                 title.textContent = `\u0427\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 setInterval?`                 break;             case 42:                 title.textContent = `\u041a\u0430\u043a\u0438\u043c \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442?`                 break;             case 42:                 title.textContent = `\u041a\u0430\u043a\u043e\u0432\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 num?`                 break;             case 49:                 title.textContent = `\u041a\u0430\u043a\u0438\u043c \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442?`                 break;              default:                 title.textContent = `\u0427\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u0435\u0434\u0435\u043d\u043e \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c?`                 break;         }          \/\/ \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 - \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442,         \/\/ \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0435\u0433\u043e \u0434\u0435\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043f\u043e\u043b\u0443\u0447\u0438\u0432 \u0432\u043e\u043f\u0440\u043e\u0441, \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442 \u0438 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435         const {             question,             rightAnswer,             explanation         } = assets[i]          \/\/ \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043e\u0442\u0432\u0435\u0442\u0430 - \u044d\u0442\u043e input type=&quot;radio&quot;,         \/\/ \u0441\u0442\u0440\u043e\u043a\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 (\u043a\u0440\u0438\u0442\u0435\u0440\u0438\u0435\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043d\u043e\u0441 \u0441\u0442\u0440\u043e\u043a\u0438 - \\n)         \/\/ \u043f\u0435\u0440\u0432\u044b\u0439 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b - \u043f\u0443\u0441\u0442\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438,         \/\/ \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u043c\u0441\u044f \u043e\u0442 \u043d\u0438\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e slice(1, -1),         \/\/ \u0442\u0430\u043a\u0436\u0435 \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u043f\u0440\u043e\u0431\u0435\u043b\u044b         const answers = assets[i].answers             .split('\\n')             .slice(1, -1)             .map(i =&gt; i.trim())          \/\/ HTML-\u0448\u0430\u0431\u043b\u043e\u043d         const template = `         &lt;form action=&quot;#&quot;&gt;             &lt;p&gt;&lt;em&gt;\u0412\u043e\u043f\u0440\u043e\u0441:&lt;\/em&gt;&lt;br&gt; ${question}&lt;\/p&gt;              &lt;p&gt;&lt;em&gt;\u0412\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043e\u0442\u0432\u0435\u0442\u043e\u0432:&lt;\/em&gt;&lt;\/p&gt;&lt;br&gt;             ${answers.reduce((html, item) =&gt; html += `&lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;answer&quot; value=&quot;${item}&quot;&gt;${item}&lt;\/label&gt;&lt;br&gt;`, '')}              &lt;button type=&quot;submit&quot;&gt;\u041e\u0442\u0432\u0435\u0442\u0438\u0442\u044c&lt;\/button&gt;         &lt;\/form&gt;         &lt;details&gt;             &lt;summary&gt;\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442&lt;\/summary&gt;             &lt;section&gt;                 &lt;h3&gt;\u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442: ${rightAnswer}&lt;\/h3&gt;                 &lt;p&gt;${explanation}&lt;\/p&gt;             &lt;\/section&gt;         &lt;\/details&gt;`          \/\/ \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440         div.innerHTML = template          \/\/ \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0444\u043e\u0440\u043c\u0443         const form = div.querySelector('form')          \/\/ \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u0438\u043d\u043f\u0443\u0442         form.querySelector('input').setAttribute('checked', '')          \/\/ \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0443 \u0444\u043e\u0440\u043c\u044b         form.addEventListener('submit', ev =&gt; {             \/\/ \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b             ev.preventDefault()              \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043e\u0442\u0432\u0435\u0442\u0430             const chosenAnswer = form.querySelector('input:checked').value.substr(0, 1)              \/\/ \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043e\u0442\u0432\u0435\u0442             checkAnswer(chosenAnswer, rightAnswer)         })     }      function checkAnswer(chosenAnswer, rightAnswer) {         \/\/ \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0442\u0432\u0435\u0442\u0430         let isRight = true          \/\/ \u0435\u0441\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c,         \/\/ \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0432\u0435\u0442\u043e\u0432,         \/\/ \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0432\u0435\u0442\u043e\u0432 \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435,         \/\/ \u0438\u043d\u0430\u0447\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0432\u0435\u0442\u043e\u0432,         \/\/ \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0432\u0435\u0442\u043e\u0432 \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435         \/\/ \u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0443 false         if (chosenAnswer === rightAnswer) {             rightAnswers++             localStorage.setItem('rightAnswers', rightAnswers)         } else {             wrongAnswers++             localStorage.setItem('wrongAnswers', wrongAnswers)             isRight = false         }          \/\/ \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0443         const button = div.querySelector('button')          \/\/ \u0435\u0441\u043b\u0438 \u043e\u0442\u0432\u0435\u0442 \u0431\u044b\u043b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c         if (isRight) {             \/\/ \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u043c \u043e\u0431 \u044d\u0442\u043e\u043c             title.innerHTML = `&lt;h1 class=&quot;right&quot;&gt;\u0412\u0435\u0440\u043d\u043e!&lt;\/h1&gt;`              \/\/ \u0432\u044b\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443             button.disabled = true              \/\/ \u0447\u0435\u0440\u0435\u0437 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438             \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0435\u0439\u0442\u0438\u043d\u0433\u0430 \u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u0430             \/\/ \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0442\u0430\u0439\u043c\u0435\u0440             const timer = setTimeout(() =&gt; {                 updateScoreAndProgress()                 showQuestion()                 clearTimeout(timer)             }, 1000)              \/\/ \u0435\u0441\u043b\u0438 \u043e\u0442\u0432\u0435\u0442 \u0431\u044b\u043b \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c         } else {             \/\/ \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u043c \u043e\u0431 \u044d\u0442\u043e\u043c             title.innerHTML = `&lt;h1 class=&quot;wrong&quot;&gt;\u041d\u0435\u0432\u0435\u0440\u043d\u043e!&lt;\/h1&gt;`              \/\/ \u0432\u044b\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0438\u043d\u043f\u0443\u0442\u044b             div.querySelectorAll('input').forEach(input =&gt; input.disabled = true)              \/\/ \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435             div.querySelector('details').setAttribute('open', '')              \/\/ \u043c\u0435\u043d\u044f\u0435\u043c \u0442\u0435\u043a\u0441\u0442 \u043a\u043d\u043e\u043f\u043a\u0438             button.textContent = '\u041f\u043e\u043d\u044f\u0442\u043d\u043e'              \/\/ \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438             \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0435\u0439\u0442\u0438\u043d\u0433\u0430 \u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u0430             \/\/ \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a             button.addEventListener('click', () =&gt; {                 updateScoreAndProgress()                 showQuestion()             }, {                 once: true             })         }          \/\/ \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430         i++          \/\/ \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435         localStorage.setItem('i', i)     }      function updateScoreAndProgress() {         \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0440\u0435\u0439\u0442\u0438\u043d\u0433         score.innerHTML = `&lt;span class=&quot;right&quot;&gt;${rightAnswers}&lt;\/span&gt; - &lt;span class=&quot;wrong&quot;&gt;${wrongAnswers}&lt;\/span&gt;`          \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441         progress.innerHTML = `${i + 1} \/ ${assets.length}`     }      function showResult() {         \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u043d\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0432\u0435\u0442\u043e\u0432         const percent = (rightAnswers \/ assets.length * 100).toFixed()          \/\/ \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0434\u043b\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430         let result          \/\/ \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0432\u0435\u0442\u043e\u0432         \/\/ \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c result \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435         if (percent &gt;= 80) {             result = `\u041e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442! \u0412\u044b \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u0437\u043d\u0430\u0435\u0442\u0435 JavaScript.`         } else if (percent &gt; 50) {             result = `\u041d\u0435\u043f\u043b\u043e\u0445\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u043d\u043e \u0435\u0441\u0442\u044c \u043a \u0447\u0435\u043c\u0443 \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u044c\u0441\u044f.`         } else {             result = `\u0412\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0432\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0430\u043b\u0438 \u0438\u0437\u0443\u0447\u0430\u0442\u044c JavaScript.`         }          \/\/ \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b         B.innerHTML = `         &lt;h1&gt;\u0412\u0430\u0448 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442&lt;\/h1&gt;         &lt;div&gt;             &lt;p&gt;\u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0432\u0435\u0442\u043e\u0432: &lt;span class=&quot;right&quot;&gt;${rightAnswers}&lt;\/span&gt;&lt;\/p&gt;             &lt;p&gt;\u041d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0432\u0435\u0442\u043e\u0432: &lt;span class=&quot;wrong&quot;&gt;${wrongAnswers}&lt;\/span&gt;&lt;\/p&gt;             &lt;p&gt;\u041f\u0440\u043e\u0446\u0435\u043d\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0432\u0435\u0442\u043e\u0432: ${percent}&lt;\/p&gt;             &lt;p&gt;${result}&lt;\/p&gt;             &lt;button&gt;\u0417\u0430\u043d\u043e\u0432\u043e&lt;\/button&gt;         &lt;\/div&gt;         `          \/\/ \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443         \/\/ \u043e\u0447\u0438\u0449\u0430\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435         \/\/ \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443,         \/\/ \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a         B.querySelector('button').addEventListener('click', () =&gt; {             localStorage.clear()             location.reload()         }, {             once: true         })     } })(document, document.body) <\/code><\/pre>\n<p>  <\/div>\n<\/p><\/div>\n<p>  \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0434\u0440\u0443\u0437\u044c\u044f.<\/p>\n<p>  \u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442\u2026<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/509682\/\"> https:\/\/habr.com\/ru\/post\/509682\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/509682\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/b6\/ci\/wg\/b6ciwgnykdiccqgqa3shiu3q4zk.png\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f! \u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0412\u0430\u0448\u0435\u043c\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432 \u2014 \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u0432\u0438\u043a\u0442\u043e\u0440\u0438\u043d\u0443 \u043f\u043e JavaScript, \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0443\u044e \u0438\u0437 50 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<p>  \u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u2014 \u043b\u0443\u0447\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u0442\u0432\u0430.<\/p>\n<h3>\u041f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0435<\/h3>\n<p>  \u0414\u0430\u043d\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 <a href=\"https:\/\/github.com\/lydiahallie\/javascript-questions#readme\" rel=\"nofollow\">\u044d\u0442\u043e\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>. \u0415\u0433\u043e \u0430\u0432\u0442\u043e\u0440, Lydia Hallie, \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043a\u0430\u043a \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0445 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u0438, \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0441\u0440\u0435\u0434\u0438 \u043d\u0438\u0445 \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435, \u043a\u0430\u043a \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0434\u0430\u0436\u0435 \u043e\u043f\u044b\u0442\u043d\u043e\u043c\u0443 JavaScript-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043f\u043e\u043a\u0430\u0436\u0443\u0442\u0441\u044f \u043d\u0435\u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438. \u041e\u0434\u043d\u0430\u043a\u043e \u0441\u0440\u0435\u0434\u0438 \u044d\u0442\u0438\u0445 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u0435\u0441\u0442\u044c \u0438 \u0442\u0430\u043a\u0438\u0435, \u0434\u043b\u044f \u043e\u0442\u0432\u0435\u0442\u0430 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u043b\u0430\u0434\u0435\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u043c\u0438 \u0437\u043d\u0430\u043d\u0438\u044f\u043c\u0438. \u0412 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0440\u0443\u0441\u0441\u043a\u0438\u0439 \u043f\u0435\u0440\u0435\u0432\u043e\u0434, \u043d\u043e, \u043c\u044f\u0433\u043a\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u043e\u043d \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0436\u0435\u043b\u0430\u0442\u044c \u043b\u0443\u0447\u0448\u0435\u0433\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043e\u0442\u0432\u0435\u0442\u043e\u0432 (\u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0439) \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442\u044c \u0437\u0430\u043d\u043e\u0432\u043e.<\/p>\n<p>  \u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u044f (\u043e\u0442\u0432\u0435\u0442\u044b) \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0432 \u043f\u043e\u043b\u043d\u043e\u0439 \u043c\u0435\u0440\u0435 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u0441\u0443\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. \u042d\u0442\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f \u0444\u043e\u0440\u043c\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u2014 \u043e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0447\u0435\u043a\u043b\u0438\u0441\u0442, \u0430 \u043d\u0435 \u0443\u0447\u0435\u0431\u043d\u0438\u043a. \u041e\u0442\u0432\u0435\u0442\u044b, \u0441\u043a\u043e\u0440\u0435\u0435, \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u043e\u0439 \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0445 \u043f\u043e\u0438\u0441\u043a\u043e\u0432 \u043d\u0430 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/JavaScript\" rel=\"nofollow\">MDN <\/a> \u0438\u043b\u0438 <a href=\"https:\/\/learn.javascript.ru\/\" rel=\"nofollow\">Javascript.ru<\/a>. \u0412\u043f\u0440\u043e\u0447\u0435\u043c, \u043c\u043d\u043e\u0433\u0438\u0435 \u0438\u0437 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0438\u0441\u0447\u0435\u0440\u043f\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u043e\u0442\u0432\u0435\u0442\u044b.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-306483","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/306483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=306483"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/306483\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=306483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=306483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=306483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}