{"id":32655,"date":"2025-05-13T23:33:18","date_gmt":"2025-05-14T02:33:18","guid":{"rendered":"https:\/\/mastertrend.info\/?p=32655"},"modified":"2026-04-28T14:50:55","modified_gmt":"2026-04-28T17:50:55","slug":"%d1%81%d0%be%d0%b7%d0%b4%d0%b0%d0%b9%d1%82%d0%b5-%d1%81%d0%b2%d0%be%d0%b5-%d0%bf%d0%b5%d1%80%d0%b2%d0%be%d0%b5-%d0%b2%d0%b5%d0%b1-%d0%bf%d1%80%d0%b8%d0%bb%d0%be%d0%b6%d0%b5%d0%bd%d0%b8%d0%b5","status":"publish","type":"post","link":"https:\/\/mastertrend.info\/ru\/crea-tu-primera-app-web\/","title":{"rendered":"\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0441\u0432\u043e\u0435 \u043f\u0435\u0440\u0432\u043e\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043e\u0441\u0432\u043e\u0439\u0442\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0435\u0437 \u0441\u0442\u0440\u0435\u0441\u0441\u0430 \ud83d\ude80\ud83d\udcbb"},"content":{"rendered":"<h2 class=\"table-content-link\">\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0441\u0432\u043e\u0435 \u043f\u0435\u0440\u0432\u043e\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435: \u0437\u0430\u043c\u0435\u0442\u043a\u0438 + \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u043b\u0435\u0433\u043a\u043e \u0438 \u0431\u044b\u0441\u0442\u0440\u043e \ud83d\udcdd\u26a1<\/h2>\n<p>\u041d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u043c, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044f\u0437\u044b\u043a\u043e\u0432, \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c. \u0418\u043d\u043e\u0433\u0434\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043f\u0440\u043e\u0449\u0435 \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0418\u0418. \u041d\u0435 \u0432\u043e\u043b\u043d\u0443\u0439\u0441\u044f! \u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u043c, \u0443\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0438, \u0447\u0442\u043e \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u043c! \ud83c\udf10\u2728<\/p>\n<h2 id=\"what-you-rsquo-ll-build\">\u0427\u0442\u043e \u0432\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0435\u0441\u044c \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c<\/h2>\n<p>\u0421\u043b\u0435\u0434\u0443\u044f \u044d\u0442\u043e\u043c\u0443 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0443, \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0438 \u043f\u043e\u0434\u0441\u0447\u0435\u0442\u0430 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0438 \u0441\u043b\u043e\u0432.<\/p>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d\u043e \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442 \u0442\u0435\u043a\u0441\u0442 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0438\u043b\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0442\u0435\u043a\u0441\u0442, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u043e\u0441\u043b\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0437\u0436\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0430\u0434\u0440\u0435\u0441\u0430, URL-\u0430\u0434\u0440\u0435\u0441\u0430 \u0438 \u0442. \u0434. \ud83d\udcc4\ud83d\udd17<\/p>\n<figure><picture><source media=\"(min-width: 1024px)\" data-=\"\" \/><source media=\"(min-width: 768px)\" data-=\"\" \/><source media=\"(min-width: 481px)\" data-=\"\" \/><source media=\"(min-width: 0px)\" data-=\"\" \/><img decoding=\"async\" style=\"display: block; height: auto; max-width: 100%;\" src=\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0449\u0435\u0433\u043e \u0437\u0430\u043c\u0435\u0442\u043a\u0438, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044f \u0438 \u0441\u043f\u0438\u0441\u043e\u043a URL-\u0430\u0434\u0440\u0435\u0441\u043e\u0432.\" width=\"960\" height=\"569\" title=\"\"> <\/picture><\/figure>\n<p>\u041e\u043d \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u0438 \u0441\u043b\u043e\u0432\u0430, \u0447\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441\u0442\u0440\u043e\u043a (\u0442\u0435\u043a\u0441\u0442\u0430). \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0435: \u0432 \u044d\u0442\u043e\u043c \u0438 \u0441\u0443\u0442\u044c! \u041d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u0432\u044b \u0438\u0437\u0443\u0447\u0438\u0442\u0435 \u043e\u0441\u043d\u043e\u0432\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0438 \u0442\u043e\u0433\u0434\u0430 \u0432\u0435\u0441\u044c \u043c\u0438\u0440 \u0431\u0443\u0434\u0435\u0442 \u0443 \u0432\u0430\u0448\u0438\u0445 \u043d\u043e\u0433. \ud83e\uddaa\ud83d\udcbb<\/p>\n<h2 id=\"how-you-rsquo-ll-build-it\">\u041a\u0430\u043a \u0432\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0435\u0441\u044c \u044d\u0442\u043e \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c?<\/h2>\n<p>\u0425\u043e\u0442\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0447\u0435\u043d\u044c \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b, \u043e\u043d\u0438 \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0442\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438: HTML, CSS \u0438 JavaScript. \u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043d\u0430\u0447\u0430\u0442\u044c, \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043d\u044f\u0442\u044c \u0438\u0445 \u0440\u043e\u043b\u0438. \ud83d\udcda<\/p>\n<ul>\n<li>HTML: \u044f\u0437\u044b\u043a \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0433\u0438\u043f\u0435\u0440\u0442\u0435\u043a\u0441\u0442\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0430\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u0421 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043c\u0435\u0442\u0438\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443\u043a\u0430\u0437\u0430\u0432, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u043e\u043d \u0430\u0431\u0437\u0430\u0446\u0435\u043c, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c \u0438\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0441\u043f\u0438\u0441\u043a\u0430.<\/li>\n<li>CSS: \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u043d\u0442. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u044d\u0442\u043e\u0442 \u044f\u0437\u044b\u043a, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u043a\u0440\u0430\u0441\u0438\u0442\u044c \u0430\u0431\u0437\u0430\u0446 \u0432 \u0437\u0435\u043b\u0435\u043d\u044b\u0439 \u0446\u0432\u0435\u0442, \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u0436\u0438\u0440\u043d\u044b\u043c \u0448\u0440\u0438\u0444\u0442\u043e\u043c \u0438\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0431\u043e\u043a\u043e\u0432\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c \u0440\u044f\u0434\u043e\u043c \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435\u0439. \ud83c\udfa8<\/li>\n<li>JavaScript: \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u0432\u043e\u0435\u043c\u0443 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0443. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0447\u0430\u0441\u0442\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438, \u0438\u043b\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \u0438\u043b\u0438 \u0432\u0438\u0434\u0435\u043e\u0438\u0433\u0440\u0443. \ud83c\udfae<\/li>\n<\/ul>\n<p>\u041e\u043d <a href=\"https:\/\/web.dev\" target=\"_blank\" rel=\"noopener noreferrer\">\u0432\u0435\u0431\u0441\u0430\u0439\u0442.dev<\/a> (escrito por miembros del equipo de Chrome) y MDN, la Red de Desarrolladores de Mozilla, son dos excelentes fuentes de informaci\u00f3n sobre tecnolog\u00edas web fundamentales.<\/p>\n<figure><picture><source media=\"(min-width: 1024px)\" data-=\"\" \/><source media=\"(min-width: 768px)\" data-=\"\" \/><source media=\"(min-width: 481px)\" data-=\"\" \/><source media=\"(min-width: 0px)\" data-=\"\" \/><img decoding=\"async\" style=\"display: block; height: auto; max-width: 100%;\" src=\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598858_798_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" alt=\"\u0414\u043e\u043c\u0430\u0448\u043d\u044f\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u0430\u0439\u0442\u0430 web.dev \u0441 \u0443\u0447\u0435\u0431\u043d\u044b\u043c\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c\u0438 \u043f\u043e HTML, CSS \u0438 JavaScript.\" width=\"1388\" height=\"734\" title=\"\"> <\/picture><\/figure>\n<h2 id=\"the-app-structure\">\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u0442\u0435, \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u0442\u0440\u0435\u0445 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432: index.html, styles.css \u0438 script.js. \ud83d\uddc2\ufe0f<\/p>\n<p>\u0414\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439, \u0432\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0435\u0431-\u0431\u0440\u0430\u0443\u0437\u0435\u0440. \u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0431\u044d\u043a\u044d\u043d\u0434\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0430\u043c \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432\u044b\u0439 \u044f\u0437\u044b\u043a \u0432\u0440\u043e\u0434\u0435 PHP \u0438\u043b\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u0435, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u044c <a title=\"\u041a\u0430\u043a \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440 Linux \u0432 Windows 11\" href=\"https:\/\/mastertrend.info\/ru\/%d0%bb%d0%be%d0%ba%d0%b0%d0%bb%d1%8c%d0%bd%d1%8b%d0%b9-%d0%b2%d0%b5%d0%b1-%d1%81%d0%b5%d1%80%d0%b2%d0%b5%d1%80-linux\/\" target=\"_blank\" rel=\"noopener\" data-wpil-monitor-id=\"5749\">\u0444\u0430\u0439\u043b index.html \u043f\u0440\u044f\u043c\u043e \u0432 \u0432\u0430\u0448\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/a> \u0438 \u0432\u0441\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f. \ud83d\ude0a<\/p>\n<p>\u0412\u0430\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0432\u0430\u0448 \u0442\u0435\u043a\u0441\u0442, \u043d\u0435 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044f \u0435\u0433\u043e \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u043d\u0430 \u0434\u0438\u0441\u043a\u0435, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 JavaScript \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 API \u0432\u0435\u0431-\u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u2014 \u043c\u043e\u0449\u043d\u0443\u044e \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0443 \u0444\u0430\u0439\u043b\u0430\u043c cookie. \ud83c\udf6a\ud83d\udcbe<\/p>\n<h2 id=\"how-to-build-the-note-taker\">\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0431\u043b\u043e\u043a\u043d\u043e\u0442 \u0434\u043b\u044f \u0437\u0430\u043f\u0438\u0441\u0435\u0439<\/h2>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0442\u0440\u0438 \u0444\u0430\u0439\u043b\u0430 \u0432 \u043e\u0434\u043d\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435, \u0430 \u0437\u0430\u0442\u0435\u043c \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 index.html \u0432 \u0432\u0435\u0431-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0441 \u0441\u0430\u0439\u0442\u0430 <a href=\"https:\/\/github.com\/bobbykjack\/text\" target=\"_blank\" rel=\"noopener\">\u044d\u0442\u043e\u0442 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 GitHub<\/a>. \ud83d\udce5<\/p>\n<h3 id=\"building-the-structure-with-html\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e HTML<\/h3>\n<p>\u0424\u0430\u0439\u043b index.html \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 HTML. \u0412\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0434\u0432\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0430\u0439\u043b\u0430, \u0447\u0442\u043e\u0431\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043c\u043e\u0433 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u0438\u0445 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430.<\/p>\n<p>\u041a\u0430\u043a \u0438 \u0432\u0441\u0435 HTML-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b, \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u0440\u0430\u0437\u0434\u0435\u043b \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435, \u0438 \u0440\u0430\u0437\u0434\u0435\u043b \u0442\u0435\u043b\u0430, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435:<\/p>\n<pre><code class=\"hljs html\"><span class=\"hljs-meta\">html<\/span>&gt;\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\u0433\u043e\u043b\u043e\u0432\u0430<\/span>&gt;<\/span>\r\n    ...\r\n<span class=\"hljs-tag\"><span class=\"hljs-name\">\u0433\u043e\u043b\u043e\u0432\u0430<\/span>&gt;<\/span><\/code><\/pre>\n<p><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\u0442\u0435\u043b\u043e<\/span>&gt;<\/span><br \/>\n&#8230;<br \/>\n<span class=\"hljs-tag\"><span class=\"hljs-name\">\u0442\u0435\u043b\u043e<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\"><span class=\"hljs-name\">html<\/span>&gt;<\/span><\/p>\n<pre><code class=\"hljs html\"><\/code><\/pre>\n<pre><code class=\"hljs html\"><\/code><\/pre>\n<p>\u041c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0430\u0442\u043a\u0438\u0435, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430) \u0438 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0444\u0430\u0439\u043b styles.css:<\/p>\n<pre><code class=\"hljs html\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a<\/span>&gt;<\/span>\u0422\u0435\u043a\u0441\u0442<span class=\"hljs-tag\"><span class=\"hljs-name\">\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\u0441\u0432\u044f\u0437\u044c<\/span> <span class=\"hljs-attr\">\u043e\u0442\u043d.<\/span>=<span class=\"hljs-string\">&quot;\u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439&quot;<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;\u0441\u0442\u0438\u043b\u0438.css&quot;<\/span> \/&gt;<\/span>\r\n<\/code><\/pre>\n<p>\u0422\u0435\u043b\u043e \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0435, \u043d\u043e \u0432 \u043d\u0435\u043c \u0435\u0441\u0442\u044c \u0432\u0441\u0435\u0433\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0436\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439:<\/p>\n<pre><code class=\"hljs html\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\u0434\u0438\u0432<\/span> <span class=\"hljs-attr\">\u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440<\/span>=<span class=\"hljs-string\">&quot;\u043f\u0440\u0438\u043b\u0430\u0432\u043e\u043a&quot;<\/span>&gt;<\/span>\r\n        \u0441\u043b\u043e\u0432\u0430: <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\u043e\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0442\u044c<\/span> <span class=\"hljs-attr\">\u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440<\/span>=<span class=\"hljs-string\">&quot;\u0441\u043b\u043e\u0432\u0430&quot;<\/span>&gt;<\/span>0<span class=\"hljs-tag\"><span class=\"hljs-name\">\u043e\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0442\u044c<\/span>&gt;<\/span>\r\n        \/ \u0441\u0438\u043c\u0432\u043e\u043b\u044b: <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\u043e\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0442\u044c<\/span> <span class=\"hljs-attr\">\u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440<\/span>=<span class=\"hljs-string\">&quot;\u0441\u0438\u043c\u0432\u043e\u043b\u044b&quot;<\/span>&gt;<\/span>0<span class=\"hljs-tag\"><span class=\"hljs-name\">\u043e\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0442\u044c<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\"><span class=\"hljs-name\">\u0434\u0438\u0432<\/span>&gt;<\/span><\/code><\/pre>\n<p><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c<\/span> <span class=\"hljs-attr\">\u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440<\/span>=<span class=\"hljs-string\">&quot;\u0442\u0435\u043a\u0441\u0442&quot;<\/span> <span class=\"hljs-attr\">\u0430\u0432\u0442\u043e\u0444\u043e\u043a\u0443\u0441<\/span>=<span class=\"hljs-string\">\u00ab1\u00bb<\/span>&gt;<\/span><span class=\"hljs-tag\"><span class=\"hljs-name\">\u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c<\/span>&gt;<\/span><\/p>\n<pre><code class=\"hljs html\"><\/code><\/pre>\n<p><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439<\/span> <span class=\"hljs-attr\">\u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a<\/span>=<span class=\"hljs-string\">\u00ab\u0441\u043a\u0440\u0438\u043f\u0442.js\u00bb<\/span>&gt;<\/span><span class=\"hljs-tag\"><span class=\"hljs-name\">\u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439<\/span>&gt;<\/span><\/p>\n<pre><code class=\"hljs html\"><\/code><\/pre>\n<pre><code class=\"hljs html\"><\/code><\/pre>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 div \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u043b\u043e\u0432 \u0438 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0442\u0435\u043a\u0441\u0442\u0430.<\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b id, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 \u0440\u0435\u0448\u0430\u044e\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0433\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0434\u043b\u044f \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043c\u043e\u0447\u044c \u043d\u0430\u043c \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u0446\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0438\u0445 \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>\u0422\u0435\u043a\u0441\u0442\u043e\u0432\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u2014 \u044d\u0442\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0444\u043e\u0440\u043c\u044b, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0442\u0435\u043a\u0441\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0443 \u0430\u0432\u0442\u043e\u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u043a\u0438 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0433\u043e\u0442\u043e\u0432\u044b \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0444\u0430\u0439\u043b JavaScript, script.js.<\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0444\u0430\u0439\u043b index.html \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u043d\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u0438 \u0434\u0430\u0436\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c, \u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u044d\u0442\u0430\u043f\u0435, \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u0430\u043a, \u043a\u0430\u043a \u0432\u044b \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0435.<\/p>\n<figure><picture><source media=\"(min-width: 1024px)\" data-=\"\" \/><source media=\"(min-width: 768px)\" data-=\"\" \/><source media=\"(min-width: 481px)\" data-=\"\" \/><source media=\"(min-width: 0px)\" data-=\"\" \/><img decoding=\"async\" style=\"display: block; height: auto; max-width: 100%;\" src=\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598858_678_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" alt=\"\u0412\u0438\u0434 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0433\u0434\u0435 \u0432\u0441\u0435 \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u043b\u0435\u0432\u043e\u043c \u0443\u0433\u043b\u0443.\" width=\"960\" height=\"569\" title=\"\"> <\/picture><\/figure>\n<h3 id=\"making-things-look-good-with-css\">\u0421\u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0438\u0445 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u043c\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS<\/h3>\n<p>CSS \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0430\u043c \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0447\u0430\u0441\u0442\u0438 \u0432\u0430\u0448\u0435\u0439 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0432\u044b\u0431\u0438\u0440\u0430\u044f \u044d\u0442\u0438 \u0447\u0430\u0441\u0442\u0438 \u0438 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043a\u0430\u043a \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 \u0438 \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430. \u042d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u043e\u0441\u043e\u0431\u043e \u0438\u0437\u044b\u0441\u043a\u0430\u043d\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0438 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442. \u041e\u0434\u043d\u0430\u043a\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0433\u043b\u0430\u0434\u0438\u0442\u044c \u043e\u0441\u0442\u0440\u044b\u0435 \u0443\u0433\u043b\u044b, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u044f. \ud83c\udfa8\u2728<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0439\u0442\u0435 \u043a\u043e\u0440\u043f\u0443\u0441, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043e\u0431\u0449\u0438\u0439 \u0434\u0438\u0437\u0430\u0439\u043d:<\/p>\n<pre><code class=\"hljs css\"><span class=\"hljs-selector-tag\">\u0442\u0435\u043b\u043e<\/span> {\r\n    <span class=\"hljs-selector-tag\">\u0434\u043e\u043f\u0443\u0441\u043a<\/span>: 0;\r\n    <span class=\"hljs-selector-tag\">\u043f\u0440\u043e\u043a\u043b\u0430\u0434\u043a\u0430<\/span>: 0;\r\n    <span class=\"hljs-selector-tag\">\u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c<\/span>: <span class=\"hljs-selector-tag\">\u0441\u0435\u0442\u043a\u0430<\/span>;\r\n    <span class=\"hljs-selector-tag\">\u043c\u0438\u043d-\u0432\u044b\u0441\u043e\u0442\u0430<\/span>: 100<span class=\"hljs-selector-tag\">\u0432\u0445<\/span>;\r\n    <span class=\"hljs-selector-tag\">\u0441\u0435\u0442\u043a\u0438-\u0448\u0430\u0431\u043b\u043e\u043d\u044b-\u0441\u0442\u0440\u043e\u043a\u0438<\/span>: <span class=\"hljs-selector-tag\">\u043c\u0438\u043d-\u043a\u043e\u043d\u0442\u0435\u043d\u0442<\/span> 1<span class=\"hljs-selector-tag\">\u0444\u0440<\/span>;\r\n}\r\n<\/code><\/pre>\n<p>Este CSS utiliza la disposici\u00f3n en cuadr\u00edcula para posicionar los conteos de palabras y caracteres en una fila estrecha sobre el textarea. La propiedad grid-template-rows especifica que la fila del conteo debe ser lo m\u00e1s corta posible (min-content) y el textarea debe llenar el espacio restante (1fr).<\/p>\n<p>\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0438\u043c\u0435\u0435\u0442 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0441\u0442\u0438\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442 \u0435\u0433\u043e \u043e\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430, \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0437\u0430 \u0441\u0447\u0435\u0442 \u0444\u043e\u043d\u0430:<\/p>\n<pre><code class=\"hljs css\"><span class=\"hljs-selector-id\">#\u0441\u0447\u0435\u0442\u0447\u0438\u043a<\/span> {\r\n    <span class=\"hljs-selector-tag\">\u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u043e \u0448\u0440\u0438\u0444\u0442\u043e\u0432<\/span>: <span class=\"hljs-selector-tag\">\u0431\u0435\u0437 \u0437\u0430\u0441\u0435\u0447\u0435\u043a<\/span>;\r\n    <span class=\"hljs-selector-tag\">\u0444\u043e\u043d\u043e\u0432\u044b\u0439 \u0446\u0432\u0435\u0442<\/span>: <span class=\"hljs-selector-id\">1\u0422\u041f5\u0422\u04447\u04447\u04447<\/span>;\r\n    <span class=\"hljs-selector-tag\">\u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430<\/span>: <span class=\"hljs-selector-tag\">\u0446\u0435\u043d\u0442\u0440<\/span>;\r\n    <span class=\"hljs-selector-tag\">\u0448\u0438\u0440\u0438\u043d\u0430<\/span>: 100%;\r\n    <span class=\"hljs-selector-tag\">\u043f\u0440\u043e\u043a\u043b\u0430\u0434\u043a\u0430<\/span>: 0<span class=\"hljs-selector-class\">.5\u044d\u043c<\/span> 0;\r\n}\r\n<\/code><\/pre>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0430 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0440\u0430\u0437\u0431\u043e\u0440\u0447\u0438\u0432\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u0438 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u0435\u0441\u0442\u0430 \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0430. \u041b\u0438\u043d\u0438\u044f, \u043e\u0442\u0434\u0435\u043b\u044f\u044e\u0449\u0430\u044f \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0438 \u043e\u0442 \u0442\u0435\u043a\u0441\u0442\u0430, \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u044d\u0442\u043e\u0439 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438.<\/p>\n<pre><code class=\"hljs css\"><span class=\"hljs-selector-tag\">\u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c<\/span> {\r\n    <span class=\"hljs-selector-tag\">\u0448\u0438\u0440\u0438\u043d\u0430<\/span>: 100%;\r\n    <span class=\"hljs-selector-tag\">\u0432\u044b\u0441\u043e\u0442\u0430<\/span>: 100%;\r\n    <span class=\"hljs-selector-tag\">\u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430<\/span>: 16<span class=\"hljs-selector-tag\">\u043f\u0442<\/span>;\r\n    <span class=\"hljs-selector-tag\">\u043f\u0440\u043e\u043a\u043b\u0430\u0434\u043a\u0430<\/span>: 1<span class=\"hljs-selector-tag\">\u0432<\/span>;\r\n    <span class=\"hljs-selector-tag\">\u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u0440\u043e\u0431\u043a\u0438<\/span>: <span class=\"hljs-selector-tag\">\u0440\u0430\u043c\u043a\u0430-\u043a\u043e\u0440\u043e\u0431\u043a\u0430<\/span>;\r\n    <span class=\"hljs-selector-tag\">\u043a\u043e\u043d\u0442\u0443\u0440<\/span>: 0;\r\n    <span class=\"hljs-selector-tag\">\u0433\u0440\u0430\u043d\u0438\u0446\u0430<\/span>: <span class=\"hljs-selector-tag\">\u043d\u0438\u043a\u0442\u043e<\/span>;\r\n    <span class=\"hljs-selector-tag\">\u0432\u0435\u0440\u0445\u043d\u044f\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430<\/span>: 1<span class=\"hljs-selector-tag\">\u043f\u0438\u043a\u0441.<\/span> <span class=\"hljs-selector-tag\">\u0442\u0432\u0435\u0440\u0434\u044b\u0439<\/span> <span class=\"hljs-selector-id\">#999<\/span>;\r\n}<\/code><\/pre>\n<figure><picture><source media=\"(min-width: 1024px)\" data-=\"\" \/><source media=\"(min-width: 768px)\" data-=\"\" \/><source media=\"(min-width: 481px)\" data-=\"\" \/><source media=\"(min-width: 0px)\" data-=\"\" \/><img decoding=\"async\" style=\"display: block; height: auto; max-width: 100%;\" src=\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598859_152_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" alt=\"\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043f\u043e\u043b\u043e\u0441\u0443 \u043f\u043e\u0434\u0441\u0447\u0435\u0442\u0430 \u0432\u0432\u0435\u0440\u0445\u0443 \u0438 \u043f\u043e\u043b\u043d\u043e\u0440\u0430\u0437\u043c\u0435\u0440\u043d\u0443\u044e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043d\u0438\u0436\u0435.\" width=\"960\" height=\"569\" title=\"\"> <\/picture><\/figure>\n<h3 id=\"adding-functionality-with-javascript\">\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JavaScript<\/h3>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0438 \u0441\u0442\u0438\u043b\u044c \u0433\u043e\u0442\u043e\u0432\u044b, \u0432\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c: \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0447\u0442\u043e-\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c. \ud83d\udee0\ufe0f<\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u0434\u0430\u0436\u0435 \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043d\u0435\u043f\u043b\u043e\u0445\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0434\u0435\u043b\u0430\u043b. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u0449\u0438\u0445 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439:<\/p>\n<ul>\n<li>\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0435\u0433\u043e \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/li>\n<li>\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0439\u0442\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0438 \u0441\u043b\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0443 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \ud83d\udcca<\/li>\n<\/ul>\n<p>\u041e\u0431\u0430 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u044e\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u0418\u0442\u0430\u043a, \u0441\u043a\u0440\u0438\u043f\u0442 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u0441\u044b\u043b\u043e\u043a \u043d\u0430 \u044d\u0442\u0438 \u0443\u0437\u043b\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 getElementById:<\/p>\n<pre><code class=\"hljs js\"><span class=\"hljs-keyword\">\u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430<\/span> \u0441\u043b\u043e\u0432\u0430 = <span class=\"hljs-built_in\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442<\/span>.getElementById(<span class=\"hljs-string\">&quot;\u0441\u043b\u043e\u0432\u0430&quot;<\/span>);\r\n<span class=\"hljs-keyword\">\u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430<\/span> \u0441\u0438\u043c\u0432\u043e\u043b\u044b = <span class=\"hljs-built_in\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442<\/span>.getElementById(<span class=\"hljs-string\">&quot;\u0441\u0438\u043c\u0432\u043e\u043b\u044b&quot;<\/span>);\r\n<span class=\"hljs-keyword\">\u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430<\/span> \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c = <span class=\"hljs-built_in\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442<\/span>.getElementById(<span class=\"hljs-string\">&quot;\u0442\u0435\u043a\u0441\u0442&quot;<\/span>);\r\n<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0441\u043b\u043e\u0432\u0430, \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u0438 \u0442\u0435\u043a\u0441\u0442 \u2014 \u044d\u0442\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435, \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0432 HTML-\u0444\u0430\u0439\u043b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 id.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u043b\u043e \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430:<\/p>\n<pre><code class=\"hljs js\">textarea.addEventListener(<span class=\"hljs-string\">&quot;\u0432\u0445\u043e\u0434&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">\u0444\u0443\u043d\u043a\u0446\u0438\u044f<\/span>(<span class=\"hljs-params\">\u0435\u0432<\/span>) <\/span>{ localStorage.setItem(<span class=\"hljs-string\">&quot;\u0442\u0435\u043a\u0441\u0442&quot;<\/span>, ev.\u0446\u0435\u043b\u0435\u0432\u043e\u0435.\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435); update_counts(ev.target.value); });\r\n<\/code><\/pre>\n<p>\u041f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u2014 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e JavaScript \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u0440\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0442\u0435\u043b\u044c \u043a \u0443\u0437\u043b\u0443 textarea, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u00abinput\u00bb. \u0422\u043e \u0435\u0441\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u043a\u0442\u043e-\u0442\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c API \u0432\u0435\u0431-\u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0438\u0437 ev.target.value. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 ev \u2014 \u043e\u0431\u044a\u0435\u043a\u0442, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u043b\u043e \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0442\u0435\u043b\u044c, ev.target \u2014 \u0443\u0437\u0435\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u0430 ev.target.value \u2014 \u0442\u0435\u043a\u0441\u0442 \u044d\u0442\u043e\u0439 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438.<\/p>\n<p>\u041c\u0435\u0442\u043e\u0434 setItem \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0432\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430: \u0438\u043c\u044f \u043a\u043b\u044e\u0447\u0430 \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u0438 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0438 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c update_counts(), \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0442\u043e\u0442 \u0436\u0435 \u0442\u0435\u043a\u0441\u0442. \u041c\u044b \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u043c \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0438 \u0442\u0435\u043a\u0441\u0442, \u0432\u0430\u043c \u0437\u0430\u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0435\u0433\u043e \u0441\u043d\u043e\u0432\u0430 \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0437\u0430\u0431\u043e\u0442\u0438\u0442\u044c\u0441\u044f \u043e\u0431 \u044d\u0442\u043e\u043c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0442\u0435\u043b\u044c:<\/p>\n<pre><code class=\"hljs js\"><span class=\"hljs-built_in\">\u043e\u043a\u043d\u043e<\/span>.addEventListener(<span class=\"hljs-string\">&quot;\u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0430&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">\u0444\u0443\u043d\u043a\u0446\u0438\u044f<\/span>(<span class=\"hljs-params\">\u0435\u0432<\/span>) <\/span>{\r\n    <span class=\"hljs-keyword\">\u0432\u0430\u0440<\/span> \u0442\u0435\u043a\u0441\u0442 = localStorage.getItem(<span class=\"hljs-string\">&quot;\u0442\u0435\u043a\u0441\u0442&quot;<\/span>); \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c.\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 = \u0442\u0435\u043a\u0441\u0442; update_counts(\u0442\u0435\u043a\u0441\u0442); });\r\n<\/code><\/pre>\n<p>\u042d\u0442\u043e\u0442 \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u043e\u043a\u043d\u0430, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0435\u043c \u0441\u043e\u0431\u043e\u0439 \u0432\u0435\u0440\u0445\u043d\u0435\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043e\u043a\u043d\u0430 \u0432\u044b\u0437\u043e\u0432 getItem() \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043d\u043e\u0435 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430. \u0417\u0430\u0442\u0435\u043c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u0438, \u043a\u0430\u043a \u0438 \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u044b\u0448\u0435, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 update_counts() \u0441 \u044d\u0442\u0438\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c.<\/p>\n<p>\u041e\u0441\u0442\u0430\u0432\u0448\u0430\u044f\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 update_counts(), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"hljs js\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">\u0444\u0443\u043d\u043a\u0446\u0438\u044f<\/span>\u00a0<span class=\"hljs-title\">update_counts<\/span>(<span class=\"hljs-params\">\u0442\u0435\u043a\u0441\u0442<\/span>) <\/span>{ chars.innerHTML = text.length; \u0441\u043b\u043e\u0432\u0430.innerHTML = \u0442\u0435\u043a\u0441\u0442.\u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c(<span class=\"hljs-string\">' '<\/span>).\u0434\u043b\u0438\u043d\u0430; }\r\n<\/code><\/pre>\n<p>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438, \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e innerHTML. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043b\u0438\u043d\u044b \u0441\u0442\u0440\u043e\u043a\u0438 \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u0430\u0435\u0442 \u043d\u0430\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432.<\/p>\n<p>text.split(&#039; &#039;) \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 \u043f\u043e \u043f\u0440\u043e\u0431\u0435\u043b\u0430\u043c, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0432\u0438\u0434\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441\u0442\u0440\u043e\u043a. \u041a\u0430\u043a \u0438 \u0441\u0442\u0440\u043e\u043a\u0438, \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u0438\u043c\u0435\u044e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043b\u0438\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u0430\u0435\u0442 \u043d\u0430\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435.<\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u0442\u0435 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0448\u0438\u0431\u043e\u043a:<\/p>\n<ol>\n<li>\u041e\u043d \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u0441\u043b\u043e\u0432\u043e \u0432 \u0441\u0442\u0440\u043e\u043a\u0435, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432\u043e\u043a\u0440\u0443\u0433 \u043d\u0435\u0433\u043e \u043d\u0435\u0442 \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432.<\/li>\n<li>\u041f\u0440\u0438 \u043f\u043e\u043b\u043d\u043e\u043c \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u0435\u0434\u0435\u043d\u043e \u043e\u0434\u043d\u043e \u0441\u043b\u043e\u0432\u043e \u0438\u0437-\u0437\u0430 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u0438 split.<\/li>\n<\/ol>\n<p>\u0427\u0442\u043e\u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c \u043f\u0435\u0440\u0432\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 (\\s \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u00ab\u043f\u0443\u0441\u0442\u043e\u0439 \u0441\u0438\u043c\u0432\u043e\u043b\u00bb) \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u0440\u043e\u0431\u0435\u043b\u0430. \u0427\u0442\u043e\u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c \u0432\u0442\u043e\u0440\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443, \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u043c \u043f\u0443\u0441\u0442\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438\u0437 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430:<\/p>\n<pre><code class=\"hljs js\">    \u0441\u043b\u043e\u0432\u0430.innerHTML = \u0442\u0435\u043a\u0441\u0442.\u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c(<span class=\"hljs-regexp\">\/\\\u0441\/<\/span>).\u0444\u0438\u043b\u044c\u0442\u0440(<span class=\"hljs-function\"><span class=\"hljs-keyword\">\u0444\u0443\u043d\u043a\u0446\u0438\u044f<\/span>(<span class=\"hljs-params\">\u043d<\/span>) <\/span>{ <span class=\"hljs-keyword\">\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f<\/span> \u043d != <span class=\"hljs-string\">''<\/span>; }).\u0434\u043b\u0438\u043d\u0430;\r\n<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435 \u044d\u0442\u0443 \u0441\u0442\u0440\u043e\u043a\u0443, \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b MDN \u0434\u043b\u044f <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/split\" target=\"_blank\" rel=\"noopener noreferrer\">\u0440\u0430\u0441\u043a\u043e\u043b\u043e\u0442\u044c<\/a> \u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/filter\" target=\"_blank\" rel=\"noopener noreferrer\">\u0444\u0438\u043b\u044c\u0442\u0440<\/a>.<\/p>\n<figure><picture><source media=\"(min-width: 1024px)\" data-=\"\" \/><source media=\"(min-width: 768px)\" data-=\"\" \/><source media=\"(min-width: 481px)\" data-=\"\" \/><source media=\"(min-width: 0px)\" data-=\"\" \/><img decoding=\"async\" style=\"display: block; height: auto; max-width: 100%;\" src=\"https:\/\/mastertrend.info\/wp-content\/uploads\/2025\/01\/1736598859_129_Crea-Tu-Primera-Aplicacion-Web-Una-App-de-Notas-Sencilla.png\" alt=\"\u0412\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043e\u0431\u0440\u0430\u0437\u0446\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u0430, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u0442\u043e\u0447\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0438 \u0441\u043b\u043e\u0432.\" width=\"960\" height=\"569\" title=\"\"> <\/picture><\/figure>\n<hr \/>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0432\u0441\u0435\u0433\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b\u043e\u0432. \u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u0442\u043e\u043a, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0431\u043e\u043b\u044c\u0448\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/location\" target=\"_blank\" rel=\"noopener\" data-schema-attribute=\"mentions\">\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e window.location<\/a> \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e URL-\u0430\u0434\u0440\u0435\u0441\u0430 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u043f\u0443\u0442\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u043c\u0435\u043d\u0438, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u0432 localStorage.setItem. \ud83d\uddd2\ufe0f\ud83c\udf0d<\/p>","protected":false},"excerpt":{"rendered":"<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0441\u0432\u043e\u0435 \u043f\u0435\u0440\u0432\u043e\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0439\u0442\u0435 \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u0441\u043b\u043e\u0432. \u0423\u0447\u0438\u0442\u0435\u0441\u044c \u043b\u0435\u0433\u043a\u043e, \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e! \ud83c\udf10\ud83d\udd8b\ufe0f\u2728<\/p>","protected":false},"author":1,"featured_media":49198,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ai_generated_summary":"","iawp_total_views":39,"jnews-multi-image_gallery":[],"jnews_single_post":[],"jnews_primary_category":[],"jnews_social_meta":[],"jnews_review":[],"enable_review":"","type":"","name":"","summary":"","brand":"","sku":"","good":[],"bad":[],"score_override":"","override_value":"","rating":[],"price":[],"jnews_override_counter":[],"footnotes":""},"categories":[1435],"tags":[1445,1558],"class_list":["post-32655","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales","tag-evergreencontent","tag-techtips"],"_links":{"self":[{"href":"https:\/\/mastertrend.info\/ru\/wp-json\/wp\/v2\/posts\/32655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mastertrend.info\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mastertrend.info\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/ru\/wp-json\/wp\/v2\/comments?post=32655"}],"version-history":[{"count":0,"href":"https:\/\/mastertrend.info\/ru\/wp-json\/wp\/v2\/posts\/32655\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/ru\/wp-json\/wp\/v2\/media\/49198"}],"wp:attachment":[{"href":"https:\/\/mastertrend.info\/ru\/wp-json\/wp\/v2\/media?parent=32655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mastertrend.info\/ru\/wp-json\/wp\/v2\/categories?post=32655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mastertrend.info\/ru\/wp-json\/wp\/v2\/tags?post=32655"}],"curies":[{"name":"WP","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}