{"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":"%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d8%aa%d8%b7%d8%a8%d9%8a%d9%82-%d8%a7%d9%84%d9%88%d9%8a%d8%a8-%d8%a7%d9%84%d8%a3%d9%88%d9%84-%d8%a7%d9%84%d8%ae%d8%a7%d8%b5-%d8%a8%d9%83","status":"publish","type":"post","link":"https:\/\/mastertrend.info\/ar\/crea-tu-primera-app-web\/","title":{"rendered":"\u0623\u0646\u0634\u0626 \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u0623\u0648\u0644 \u0627\u0644\u062e\u0627\u0635 \u0628\u0643 \u0648\u0623\u062a\u0642\u0646 \u0627\u0644\u0628\u0631\u0645\u062c\u0629 \u062f\u0648\u0646 \u0636\u063a\u0648\u0637 \ud83d\ude80\ud83d\udcbb"},"content":{"rendered":"<h2 class=\"table-content-link\">\u0623\u0646\u0634\u0626 \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u0623\u0648\u0644 \u0627\u0644\u062e\u0627\u0635 \u0628\u0643: \u0645\u0644\u0627\u062d\u0638\u0627\u062a + \u0639\u062f\u0627\u062f \u0633\u0647\u0644 \u0648\u0633\u0631\u064a\u0639 \ud83d\udcdd\u26a1<\/h2>\n<p>\u0642\u062f \u064a\u0628\u062f\u0648 \u0627\u0644\u0628\u062f\u0621 \u0641\u064a \u0627\u0644\u0628\u0631\u0645\u062c\u0629 \u0623\u0645\u0631\u064b\u0627 \u0645\u0631\u0647\u0642\u064b\u0627\u060c \u0645\u0639 \u0648\u062c\u0648\u062f \u0627\u0644\u0639\u062f\u064a\u062f \u0645\u0646 \u0627\u0644\u0644\u063a\u0627\u062a \u0648\u0627\u0644\u0623\u0637\u0631 \u0648\u0627\u0644\u0645\u0646\u0647\u062c\u064a\u0627\u062a \u0627\u0644\u062a\u064a \u064a\u062c\u0628 \u0645\u0631\u0627\u0639\u0627\u062a\u0647\u0627. \u0641\u064a \u0628\u0639\u0636 \u0627\u0644\u0623\u062d\u064a\u0627\u0646 \u0642\u062f \u064a\u0628\u062f\u0648 \u0645\u0646 \u0627\u0644\u0623\u0633\u0647\u0644 \u062a\u0641\u0648\u064a\u0636 \u0643\u0644 \u0634\u064a\u0621 \u0625\u0644\u0649 \u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a. \u0644\u0627 \u062a\u0642\u0644\u0642! \u064a\u0645\u0643\u0646 \u0623\u0646 \u062a\u0643\u0648\u0646 \u0628\u0631\u0645\u062c\u0629 \u0627\u0644\u0648\u064a\u0628 \u0628\u0633\u064a\u0637\u0629 \u0648\u0645\u0645\u062a\u0639\u0629\u060c \u0648\u0627\u0644\u0623\u0641\u0636\u0644 \u0645\u0646 \u0630\u0644\u0643 \u0643\u0644\u0647\u060c \u0645\u062c\u0627\u0646\u064a\u0629 \u062a\u0645\u0627\u0645\u064b\u0627! \ud83c\udf10\u2728<\/p>\n<h2 id=\"what-you-rsquo-ll-build\">\u0645\u0627 \u0627\u0644\u0630\u064a \u0633\u062a\u0628\u0646\u064a\u0647<\/h2>\n<p>\u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u062a\u0628\u0627\u0639 \u0647\u0630\u0627 \u0627\u0644\u0628\u0631\u0646\u0627\u0645\u062c \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u060c \u0633\u062a\u062a\u0645\u0643\u0646 \u0645\u0646 \u0625\u0646\u0634\u0627\u0621 \u062a\u0637\u0628\u064a\u0642 \u0648\u064a\u0628 \u0628\u0633\u064a\u0637 \u0644\u062a\u062e\u0632\u064a\u0646 \u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0646\u0635\u064a\u0629 \u0648\u062d\u0633\u0627\u0628 \u0627\u0644\u0623\u062d\u0631\u0641 \u0648\u0627\u0644\u0643\u0644\u0645\u0627\u062a.<\/p>\n<p>\u0633\u064a\u062d\u062a\u0641\u0638 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0628\u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a\u060c \u0648\u0628\u0627\u0644\u062a\u0627\u0644\u064a \u0633\u064a\u062a\u0630\u0643\u0631 \u0627\u0644\u0646\u0635 \u0639\u0646\u062f \u0625\u0639\u0627\u062f\u0629 \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629 \u0623\u0648 \u0625\u0639\u0627\u062f\u0629 \u0641\u062a\u062d\u0647\u0627. \u0647\u0630\u0627 \u064a\u0639\u0646\u064a \u0623\u0646\u0647 \u0633\u064a\u0643\u0648\u0646 \u0644\u062f\u064a\u0643 \u0637\u0631\u064a\u0642\u0629 \u0645\u0644\u0627\u0626\u0645\u0629 \u0644\u062d\u0641\u0638 \u0623\u064a \u0646\u0635 \u062a\u0631\u064a\u062f \u0627\u0644\u0631\u062c\u0648\u0639 \u0625\u0644\u064a\u0647 \u0644\u0627\u062d\u0642\u064b\u0627\u060c \u0645\u062b\u0644 \u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646 \u0648\u0639\u0646\u0627\u0648\u064a\u0646 URL \u0648\u0645\u0627 \u0625\u0644\u0649 \u0630\u0644\u0643. \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=\"\u0645\u062b\u0627\u0644 \u0644\u062a\u0637\u0628\u064a\u0642 \u0648\u064a\u0628 \u0628\u0633\u064a\u0637 \u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0627\u0644\u0646\u0635 \u064a\u0639\u0631\u0636 \u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a\u060c \u0628\u0645\u0627 \u0641\u064a \u0630\u0644\u0643 \u0625\u062f\u062e\u0627\u0644 \u0627\u0644\u062a\u0642\u0648\u064a\u0645 \u0648\u0642\u0627\u0626\u0645\u0629 \u0639\u0646\u0627\u0648\u064a\u0646 URL.\" width=\"960\" height=\"569\" title=\"\"> <\/picture><\/figure>\n<p>\u0648\u064a\u0642\u0648\u0645 \u0623\u064a\u0636\u064b\u0627 \u0628\u062d\u0633\u0627\u0628 \u0627\u0644\u0623\u062d\u0631\u0641 \u0648\u0627\u0644\u0643\u0644\u0645\u0627\u062a\u060c \u0648\u0647\u0648 \u0645\u0627 \u064a\u0639\u062f \u0645\u0642\u062f\u0645\u0629 \u062c\u064a\u062f\u0629 \u0644\u0644\u062a\u0639\u0627\u0645\u0644 \u0645\u0639 \u0627\u0644\u0646\u0635\u0648\u0635 (\u0627\u0644\u0633\u0644\u0627\u0633\u0644). \u0628\u0627\u0644\u0637\u0628\u0639\u060c \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0628\u0633\u064a\u0637 \u062c\u062f\u064b\u0627: \u0647\u0630\u0627 \u0647\u0648 \u0627\u0644\u0647\u062f\u0641! \u0648\u0644\u0643\u0646 \u0645\u0639 \u0647\u0630\u0627 \u0627\u0644\u0628\u0631\u0646\u0627\u0645\u062c \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u060c \u0633\u0648\u0641 \u062a\u062a\u0639\u0644\u0645 \u0623\u0633\u0627\u0633\u064a\u0627\u062a \u062a\u0637\u0648\u064a\u0631 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u0648\u064a\u0628\u060c \u0648\u0628\u0639\u062f \u0630\u0644\u0643 \u0633\u064a\u0643\u0648\u0646 \u0627\u0644\u0639\u0627\u0644\u0645 \u0628\u064a\u0646 \u064a\u062f\u064a\u0643. \ud83e\uddaa\ud83d\udcbb<\/p>\n<h2 id=\"how-you-rsquo-ll-build-it\">\u0643\u064a\u0641 \u0633\u062a\u0642\u0648\u0645 \u0628\u0628\u0646\u0627\u0626\u0647\u061f<\/h2>\n<p>\u0639\u0644\u0649 \u0627\u0644\u0631\u063a\u0645 \u0645\u0646 \u0623\u0646 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0645\u062a\u0646\u0648\u0639\u0629 \u0644\u0644\u063a\u0627\u064a\u0629\u060c \u0625\u0644\u0627 \u0623\u0646\u0647\u0627 \u062a\u062a\u0636\u0645\u0646 \u0639\u0627\u062f\u0629\u064b \u062b\u0644\u0627\u062b \u062a\u0642\u0646\u064a\u0627\u062a \u0631\u0626\u064a\u0633\u064a\u0629: HTML \u0648CSS \u0648JavaScript. \u0645\u0646 \u0627\u0644\u0636\u0631\u0648\u0631\u064a \u0623\u0646 \u062a\u0641\u0647\u0645 \u0623\u062f\u0648\u0627\u0631\u0647\u0645 \u0642\u0628\u0644 \u0623\u0646 \u062a\u0628\u062f\u0623. \ud83d\udcda<\/p>\n<ul>\n<li>HTML: \u0644\u063a\u0629 \u062a\u0631\u0645\u064a\u0632 \u0627\u0644\u0646\u0635 \u0627\u0644\u062a\u0634\u0639\u0628\u064a \u062a\u0633\u0645\u062d \u0644\u0643 \u0628\u062a\u062d\u062f\u064a\u062f \u0628\u0646\u064a\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062e\u0627\u0635 \u0628\u0643. \u0628\u0648\u0627\u0633\u0637\u062a\u0647 \u064a\u0645\u0643\u0646\u0643 \u0648\u0636\u0639 \u0639\u0644\u0627\u0645\u0629 \u0639\u0644\u0649 \u0627\u0644\u0646\u0635 \u062d\u0633\u0628 \u0645\u0639\u0646\u0627\u0647\u060c \u0648\u0627\u0644\u0625\u0634\u0627\u0631\u0629 \u0625\u0644\u0649 \u0645\u0627 \u0625\u0630\u0627 \u0643\u0627\u0646 \u0641\u0642\u0631\u0629\u060c \u0623\u0648 \u0639\u0646\u0648\u0627\u0646\u060c \u0623\u0648 \u0639\u0646\u0635\u0631 \u0641\u064a \u0642\u0627\u0626\u0645\u0629\u060c \u0639\u0644\u0649 \u0633\u0628\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644.<\/li>\n<li>CSS: \u062a\u062a\u064a\u062d \u0644\u0643 \u0623\u0648\u0631\u0627\u0642 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0645\u062a\u062a\u0627\u0644\u064a\u0629 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062e\u0627\u0635 \u0628\u0643. \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0647\u0630\u0647 \u0627\u0644\u0644\u063a\u0629\u060c \u064a\u0645\u0643\u0646\u0643 \u062a\u0644\u0648\u064a\u0646 \u0641\u0642\u0631\u0629 \u0628\u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u062e\u0636\u0631\u060c \u0623\u0648 \u062c\u0639\u0644 \u062c\u0645\u064a\u0639 \u0627\u0644\u0631\u0648\u0627\u0628\u0637 \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0643 \u0645\u0643\u062a\u0648\u0628\u0629 \u0628\u062e\u0637 \u063a\u0627\u0645\u0642\u060c \u0623\u0648 \u0648\u0636\u0639 \u0634\u0631\u064a\u0637 \u062c\u0627\u0646\u0628\u064a \u0628\u062c\u0648\u0627\u0631 \u0645\u0642\u0627\u0644\u062a\u0643 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629. \ud83c\udfa8<\/li>\n<li>JavaScript: \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0644\u063a\u0629 \u0627\u0644\u0628\u0631\u0645\u062c\u0629 \u0647\u0630\u0647\u060c \u064a\u0645\u0643\u0646\u0643 \u0625\u0636\u0627\u0641\u0629 \u0648\u0638\u0627\u0626\u0641 \u0625\u0644\u0649 \u0645\u0648\u0642\u0639 \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u062e\u0627\u0635 \u0628\u0643. \u064a\u0645\u0643\u0646\u0643 \u0623\u0646 \u062a\u062c\u0639\u0644 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 \u062a\u0638\u0647\u0631 \u0623\u0648 \u062a\u062e\u0641\u064a \u0623\u062c\u0632\u0627\u0621 \u0645\u0646 \u0645\u0633\u062a\u0646\u062f\u0643 \u0639\u0646\u062f \u0627\u0644\u0646\u0642\u0631 \u0639\u0644\u064a\u0647\u0627\u060c \u0623\u0648 \u062a\u0646\u0641\u064a\u0630 \u0645\u0639\u0627\u0644\u062c \u0646\u0635\u0648\u0635 \u0643\u0627\u0645\u0644 \u0623\u0648 \u0644\u0639\u0628\u0629 \u0641\u064a\u062f\u064a\u0648. \ud83c\udfae<\/li>\n<\/ul>\n<p>\u0647\u0648 <a href=\"https:\/\/web.dev\" target=\"_blank\" rel=\"noopener noreferrer\">\u0645\u0648\u0642\u0639 \u0627\u0644\u0648\u064a\u0628.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=\"\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0644\u0645\u0648\u0642\u0639 web.dev \u0645\u0639 \u0645\u0648\u0627\u0631\u062f \u0627\u0644\u062a\u0639\u0644\u0645 \u0644\u0640 HTML \u0648 CSS \u0648 JavaScript.\" width=\"1388\" height=\"734\" title=\"\"> <\/picture><\/figure>\n<h2 id=\"the-app-structure\">\u0647\u064a\u0643\u0644 \u0627\u0644\u062a\u0637\u0628\u064a\u0642<\/h2>\n<p>\u0633\u064a\u062a\u0643\u0648\u0646 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0630\u064a \u0633\u062a\u0642\u0648\u0645 \u0628\u0628\u0646\u0627\u0626\u0647 \u0645\u0646 \u062b\u0644\u0627\u062b\u0629 \u0645\u0644\u0641\u0627\u062a \u0628\u0633\u064a\u0637\u0629: index.html\u060c \u0648styles.css\u060c \u0648script.js. \ud83d\uddc2\ufe0f<\/p>\n<p>\u0644\u0627 \u062a\u0648\u062c\u062f \u0645\u062a\u0637\u0644\u0628\u0627\u062a \u062e\u0627\u0635\u0629 \u0644\u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u062a\u0637\u0628\u064a\u0642\u060c \u0643\u0644 \u0645\u0627 \u062a\u062d\u062a\u0627\u062c\u0647 \u0647\u0648 \u0645\u062a\u0635\u0641\u062d \u0648\u064a\u0628. \u0644\u0627 \u062a\u0648\u062c\u062f \u0648\u0638\u064a\u0641\u0629 \u062e\u0644\u0641\u064a\u0629\u060c \u0644\u0630\u0627 \u0644\u0627 \u062a\u062d\u062a\u0627\u062c \u0625\u0644\u0649 \u0644\u063a\u0629 \u0628\u0631\u0645\u062c\u0629 \u0645\u062b\u0644 PHP \u0623\u0648 \u062e\u0627\u062f\u0645 \u0648\u064a\u0628 \u0645\u062d\u0644\u064a. \u0628\u0645\u062c\u0631\u062f \u0627\u0644\u0627\u0646\u062a\u0647\u0627\u0621\u060c \u064a\u0645\u0643\u0646\u0643 \u0641\u062a\u062d <a title=\"\u0643\u064a\u0641\u064a\u0629 \u0625\u0639\u062f\u0627\u062f \u062e\u0627\u062f\u0645 \u0648\u064a\u0628 \u0645\u062d\u0644\u064a \u064a\u0639\u0645\u0644 \u0628\u0646\u0638\u0627\u0645 Linux \u0639\u0644\u0649 \u0646\u0638\u0627\u0645 \u0627\u0644\u062a\u0634\u063a\u064a\u0644 Windows 11\" href=\"https:\/\/mastertrend.info\/ar\/%d8%ae%d8%a7%d8%af%d9%85-%d8%a7%d9%84%d9%88%d9%8a%d8%a8-%d8%a7%d9%84%d9%85%d8%ad%d9%84%d9%8a-%d9%84%d9%8a%d9%86%d9%83%d8%b3\/\" target=\"_blank\" rel=\"noopener\" data-wpil-monitor-id=\"5749\">\u0645\u0644\u0641 index.html \u0645\u0628\u0627\u0634\u0631\u0629 \u0641\u064a \u0645\u062a\u0635\u0641\u062d\u0643<\/a> \u0648\u0633\u0648\u0641 \u064a\u0635\u0628\u062d \u0643\u0644 \u0634\u064a\u0621 \u0639\u0644\u0649 \u0645\u0627 \u064a\u0631\u0627\u0645. \ud83d\ude0a<\/p>\n<p>\u0645\u0646 \u0627\u0644\u0645\u0647\u0645 \u0645\u0644\u0627\u062d\u0638\u0629 \u0623\u0646 \u0647\u0630\u0627 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u064a\u062d\u0641\u0638 \u0627\u0644\u0646\u0635 \u0627\u0644\u062e\u0627\u0635 \u0628\u0643 \u062f\u0648\u0646 \u0643\u062a\u0627\u0628\u062a\u0647 \u0641\u064a \u0645\u0644\u0641 \u0645\u062d\u062f\u062f \u0639\u0644\u0649 \u0627\u0644\u0642\u0631\u0635\u060c \u062d\u064a\u062b \u0644\u0627 \u064a\u0645\u0643\u0646 \u0644\u0640 JavaScript \u0627\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u0649 \u0646\u0638\u0627\u0645 \u0627\u0644\u0645\u0644\u0641\u0627\u062a. \u064a\u0633\u062a\u062e\u062f\u0645 Web Storage API\u060c \u0648\u0647\u0648 \u0628\u062f\u064a\u0644 \u0642\u0648\u064a \u0644\u0645\u0644\u0641\u0627\u062a \u062a\u0639\u0631\u064a\u0641 \u0627\u0644\u0627\u0631\u062a\u0628\u0627\u0637. \ud83c\udf6a\ud83d\udcbe<\/p>\n<h2 id=\"how-to-build-the-note-taker\">\u0643\u064a\u0641\u064a\u0629 \u0628\u0646\u0627\u0621 \u0645\u0633\u062c\u0644 \u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a<\/h2>\n<p>\u0642\u0645 \u0628\u0625\u0646\u0634\u0627\u0621 \u0627\u0644\u0645\u0644\u0641\u0627\u062a \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0627\u0644\u062a\u0627\u0644\u064a\u0629 \u0641\u064a \u0646\u0641\u0633 \u0627\u0644\u062f\u0644\u064a\u0644 \u062b\u0645 \u0627\u0641\u062a\u062d index.html \u0641\u064a \u0645\u062a\u0635\u0641\u062d \u0627\u0644\u0648\u064a\u0628. \u0628\u062f\u0644\u0627 \u0645\u0646 \u0630\u0644\u0643\u060c \u064a\u0645\u0643\u0646\u0643 \u062a\u0646\u0632\u064a\u0644 \u0627\u0644\u0645\u0644\u0641\u0627\u062a \u0645\u0646 <a href=\"https:\/\/github.com\/bobbykjack\/text\" target=\"_blank\" rel=\"noopener\">\u0645\u0633\u062a\u0648\u062f\u0639 GitHub \u0647\u0630\u0627<\/a>. \ud83d\udce5<\/p>\n<h3 id=\"building-the-structure-with-html\">\u0628\u0646\u0627\u0621 \u0627\u0644\u0647\u064a\u0643\u0644 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 HTML<\/h3>\n<p>\u064a\u0642\u0648\u0645 \u0645\u0644\u0641 index.html \u0628\u062a\u062d\u062f\u064a\u062f \u0628\u0646\u064a\u0629 \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u062e\u0627\u0635 \u0628\u0643 \u0641\u064a HTML. \u0642\u0645 \u0628\u062a\u0636\u0645\u064a\u0646 \u0627\u0644\u0645\u0631\u0627\u062c\u0639 \u0625\u0644\u0649 \u0627\u0644\u0645\u0644\u0641\u064a\u0646 \u0627\u0644\u0622\u062e\u0631\u064a\u0646 \u062d\u062a\u0649 \u064a\u062a\u0645\u0643\u0646 \u0627\u0644\u0645\u062a\u0635\u0641\u062d \u0645\u0646 \u062f\u0645\u062c\u0647\u0645\u0627 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u0645\u0646\u062a\u062c \u0627\u0644\u0646\u0647\u0627\u0626\u064a.<\/p>\n<p>\u0643\u0645\u0627 \u0647\u0648 \u0627\u0644\u062d\u0627\u0644 \u0645\u0639 \u062c\u0645\u064a\u0639 \u0645\u0633\u062a\u0646\u062f\u0627\u062a HTML\u060c \u064a\u062a\u0636\u0645\u0646 \u0627\u0644\u0647\u064a\u0643\u0644 \u0627\u0644\u0639\u0644\u0648\u064a \u0642\u0633\u0645\u064b\u0627 \u0631\u0626\u064a\u0633\u064a\u064b\u0627 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0648\u0635\u0641\u064a\u0629 \u0648\u0642\u0633\u0645\u064b\u0627 \u0646\u0635\u064a\u064b\u0627 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0641\u0639\u0644\u064a \u0627\u0644\u0630\u064a \u0633\u064a\u0638\u0647\u0631 \u0639\u0644\u0649 \u0627\u0644\u0635\u0641\u062d\u0629:<\/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\">\u0631\u0623\u0633<\/span>&gt;<\/span>\r\n    ...\r\n<span class=\"hljs-tag\"><span class=\"hljs-name\">\u0631\u0623\u0633<\/span>&gt;<\/span><\/code><\/pre>\n<p><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\u062c\u0633\u0645<\/span>&gt;<\/span><br \/>\n&#8230;<br \/>\n<span class=\"hljs-tag\"><span class=\"hljs-name\">\u062c\u0633\u0645<\/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>\u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0648\u0635\u0641\u064a\u0629 \u0627\u0644\u0645\u0648\u062c\u0648\u062f\u0629 \u0641\u064a \u0627\u0644\u0631\u0623\u0633 \u0645\u062e\u062a\u0635\u0631\u0629 \u0644\u0644\u063a\u0627\u064a\u0629\u060c \u062d\u064a\u062b \u062a\u062d\u062a\u0648\u064a \u0641\u0642\u0637 \u0639\u0644\u0649 \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0635\u0641\u062d\u0629 (\u0627\u0644\u0630\u064a \u064a\u0638\u0647\u0631 \u0641\u064a \u0634\u0631\u064a\u0637 \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0645\u062a\u0635\u0641\u062d \u0627\u0644\u062e\u0627\u0635 \u0628\u0643) \u0648\u0645\u0631\u062c\u0639 \u0625\u0644\u0649 \u0645\u0644\u0641 styles.css:<\/p>\n<pre><code class=\"hljs html\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\u0639\u0646\u0648\u0627\u0646<\/span>&gt;<\/span>\u0646\u0635<span class=\"hljs-tag\"><span class=\"hljs-name\">\u0639\u0646\u0648\u0627\u0646<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\u0648\u0635\u0644\u0629<\/span> <span class=\"hljs-attr\">\u0639\u0644\u0627\u0642\u0629<\/span>=<span class=\"hljs-string\">&quot;\u0648\u0631\u0642\u0629 \u0627\u0644\u0623\u0646\u0645\u0627\u0637&quot;<\/span> <span class=\"hljs-attr\">\u0647\u0631\u064a\u0641<\/span>=<span class=\"hljs-string\">&quot;styles.css&quot;<\/span> \/&gt;<\/span>\r\n<\/code><\/pre>\n<p>\u0627\u0644\u062c\u0633\u0645 \u0623\u0643\u062b\u0631 \u062a\u0639\u0642\u064a\u062f\u064b\u0627\u060c \u0648\u0644\u0643\u0646 \u0647\u0646\u0627\u0643 \u0623\u062c\u0632\u0627\u0621 \u0642\u0644\u064a\u0644\u0629 \u0645\u0647\u0645\u0629 \u0641\u0642\u0637:<\/p>\n<pre><code class=\"hljs html\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\u0642\u0633\u0645<\/span> <span class=\"hljs-attr\">\u0628\u0637\u0627\u0642\u0629 \u062a\u0639\u0631\u064a\u0641<\/span>=<span class=\"hljs-string\">&quot;\u0639\u062f\u0627\u062f&quot;<\/span>&gt;<\/span>\r\n        \u0643\u0644\u0645\u0627\u062a: <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\u0641\u062a\u0631\u0629<\/span> <span class=\"hljs-attr\">\u0628\u0637\u0627\u0642\u0629 \u062a\u0639\u0631\u064a\u0641<\/span>=<span class=\"hljs-string\">&quot;\u0643\u0644\u0645\u0627\u062a&quot;<\/span>&gt;<\/span>0<span class=\"hljs-tag\"><span class=\"hljs-name\">\u0641\u062a\u0631\u0629<\/span>&gt;<\/span>\r\n        \/ \u0627\u0644\u0634\u062e\u0635\u064a\u0627\u062a: <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\u0641\u062a\u0631\u0629<\/span> <span class=\"hljs-attr\">\u0628\u0637\u0627\u0642\u0629 \u062a\u0639\u0631\u064a\u0641<\/span>=<span class=\"hljs-string\">&quot;\u0623\u062d\u0631\u0641&quot;<\/span>&gt;<\/span>0<span class=\"hljs-tag\"><span class=\"hljs-name\">\u0641\u062a\u0631\u0629<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\"><span class=\"hljs-name\">\u0642\u0633\u0645<\/span>&gt;<\/span><\/code><\/pre>\n<p><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0646\u0635<\/span> <span class=\"hljs-attr\">\u0628\u0637\u0627\u0642\u0629 \u062a\u0639\u0631\u064a\u0641<\/span>=<span class=\"hljs-string\">&quot;\u0646\u0635&quot;<\/span> <span class=\"hljs-attr\">\u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a<\/span>=<span class=\"hljs-string\">\u00ab1\u00bb<\/span>&gt;<\/span><span class=\"hljs-tag\"><span class=\"hljs-name\">\u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0646\u0635<\/span>&gt;<\/span><\/p>\n<pre><code class=\"hljs html\"><\/code><\/pre>\n<p><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">\u0646\u0635<\/span> <span class=\"hljs-attr\">\u0627\u0644\u0645\u0635\u062f\u0631<\/span>=<span class=\"hljs-string\">\u00abscript.js\u00bb<\/span>&gt;<\/span><span class=\"hljs-tag\"><span class=\"hljs-name\">\u0646\u0635<\/span>&gt;<\/span><\/p>\n<pre><code class=\"hljs html\"><\/code><\/pre>\n<pre><code class=\"hljs html\"><\/code><\/pre>\n<p>\u064a\u062d\u062a\u0648\u064a \u0639\u0646\u0635\u0631 div \u0639\u0644\u0649 \u0639\u062f\u062f \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0648\u0627\u0644\u0623\u062d\u0631\u0641 \u0641\u064a \u0627\u0644\u062a\u0637\u0628\u064a\u0642. \u0633\u064a\u062a\u0645 \u0648\u0636\u0639\u0647 \u0641\u064a \u0627\u0644\u062c\u0632\u0621 \u0627\u0644\u0639\u0644\u0648\u064a \u0645\u0646 \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0648\u064a\u0628 \u0648\u0633\u064a\u062a\u0645 \u062a\u062d\u062f\u064a\u062b\u0647 \u0641\u064a \u0643\u0644 \u0645\u0631\u0629 \u064a\u062a\u063a\u064a\u0631 \u0641\u064a\u0647\u0627 \u0627\u0644\u0646\u0635.<\/p>\n<p>\u0644\u0627\u062d\u0638 \u0633\u0645\u0627\u062a \u0627\u0644\u0645\u0639\u0631\u0641\u060c \u0648\u0627\u0644\u062a\u064a \u062a\u0639\u062a\u0628\u0631 \u062d\u064a\u0648\u064a\u0629 \u0644\u0644\u0639\u0645\u0644\u064a\u0629. \u064a\u062c\u0628 \u0623\u0646 \u062a\u0643\u0648\u0646 \u0642\u064a\u0645\u0629 \u0627\u0644\u0645\u0639\u0631\u0641 \u0641\u0631\u064a\u062f\u0629\u060c \u062d\u062a\u0649 \u064a\u062a\u0645\u0643\u0646 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0645\u0646 \u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0647\u0627 \u0644\u062a\u062d\u062f\u064a\u062f \u0639\u0646\u0635\u0631 \u0645\u0639\u064a\u0646. \u064a\u0645\u0643\u0646 \u0623\u0646 \u064a\u0633\u0627\u0639\u062f\u0646\u0627 \u0627\u0644\u0642\u064a\u0627\u0645 \u0628\u0630\u0644\u0643 \u0641\u064a \u062a\u0635\u0645\u064a\u0645 \u0647\u0630\u0647 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0648\u0627\u0633\u062a\u0647\u062f\u0627\u0641\u0647\u0627 \u0623\u064a\u0636\u064b\u0627 \u0639\u0646\u062f \u0625\u0636\u0627\u0641\u0629 \u0648\u0638\u0627\u0626\u0641.<\/p>\n<p>\u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0646\u0635 \u0639\u0628\u0627\u0631\u0629 \u0639\u0646 \u0639\u0646\u0635\u0631 \u0646\u0645\u0648\u0630\u062c \u0645\u062f\u0645\u062c \u064a\u0633\u0645\u062d \u0644\u0643 \u0628\u0643\u062a\u0627\u0628\u0629 \u0646\u0635 \u0628\u0633\u064a\u0637 \u0641\u064a \u0627\u0644\u0645\u062a\u0635\u0641\u062d. \u0628\u0641\u0636\u0644 \u062e\u0627\u0635\u064a\u0629 \u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a\u060c \u0633\u062a\u0643\u0648\u0646 \u062c\u0627\u0647\u0632\u064b\u0627 \u0644\u0644\u0643\u062a\u0627\u0628\u0629 \u0628\u0645\u062c\u0631\u062f \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629. \u0648\u0623\u062e\u064a\u0631\u064b\u0627\u060c \u062a\u0634\u064a\u0631 \u0627\u0644\u0635\u0641\u062d\u0629 \u0625\u0644\u0649 \u0645\u0644\u0641 javascript\u060c script.js.<\/p>\n<p>\u0641\u064a \u0647\u0630\u0647 \u0627\u0644\u0645\u0631\u062d\u0644\u0629\u060c \u064a\u0645\u0643\u0646\u0643 \u0641\u062a\u062d \u0645\u0644\u0641 index.html \u0641\u064a \u0627\u0644\u0645\u062a\u0635\u0641\u062d. \u0644\u0646 \u064a\u0624\u062f\u064a \u0630\u0644\u0643 \u0625\u0644\u0649 \u0623\u064a \u0634\u064a\u0621 \u0641\u064a \u0627\u0644\u0648\u0642\u062a \u0627\u0644\u062d\u0627\u0644\u064a\u060c \u0648\u0644\u0646 \u064a\u0628\u062f\u0648 \u062c\u064a\u062f\u064b\u0627 \u062d\u062a\u0649\u060c \u0648\u0644\u0643\u0646 \u0645\u0646 \u0627\u0644\u0645\u0641\u064a\u062f \u0627\u062e\u062a\u0628\u0627\u0631 \u062a\u0637\u0628\u064a\u0642\u0643 \u0641\u064a \u0643\u0644 \u0645\u0631\u062d\u0644\u0629 \u0644\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u0623\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0627\u062a \u062a\u0639\u0645\u0644 \u0643\u0645\u0627 \u062a\u062a\u0648\u0642\u0639.<\/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=\"\u0639\u0631\u0636 \u0644\u062a\u0637\u0628\u064a\u0642 \u062a\u062f\u0648\u064a\u0646 \u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0639\u0644\u0649 \u0627\u0644\u0648\u064a\u0628 \u0645\u0639 \u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0645\u062a\u0635\u0641\u062d \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629\u060c \u0645\u0639 \u0639\u0631\u0636 \u0643\u0644 \u0634\u064a\u0621 \u0645\u062c\u0645\u0639\u064b\u0627 \u0641\u064a \u0627\u0644\u0632\u0627\u0648\u064a\u0629 \u0627\u0644\u064a\u0633\u0631\u0649 \u0627\u0644\u0639\u0644\u064a\u0627.\" width=\"960\" height=\"569\" title=\"\"> <\/picture><\/figure>\n<h3 id=\"making-things-look-good-with-css\">\u062c\u0639\u0644\u0647\u0627 \u062a\u0628\u062f\u0648 \u062c\u064a\u062f\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS<\/h3>\n<p>\u064a\u062a\u064a\u062d \u0644\u0643 CSS \u062a\u0635\u0645\u064a\u0645 \u0623\u062c\u0632\u0627\u0621 \u0645\u0646 \u0635\u0641\u062d\u062a\u0643 \u0639\u0644\u0649 \u0627\u0644\u0648\u064a\u0628 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u0633\u062a\u0647\u062f\u0627\u0641 \u062a\u0644\u0643 \u0627\u0644\u0623\u062c\u0632\u0627\u0621 \u0648\u062a\u062d\u062f\u064a\u062f \u0642\u064a\u0645 \u0644\u0644\u062e\u0635\u0627\u0626\u0635 \u0645\u062b\u0644 \u062d\u062c\u0645 \u0627\u0644\u062e\u0637 \u0648\u0644\u0648\u0646 \u0627\u0644\u062e\u0644\u0641\u064a\u0629. \u0644\u0627 \u064a\u062d\u062a\u0627\u062c \u0647\u0630\u0627 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0646\u0645\u0648\u0630\u062c\u064a \u0625\u0644\u0649 \u062a\u0635\u0645\u064a\u0645 \u0645\u0639\u0642\u062f \u0644\u0644\u063a\u0627\u064a\u0629 \u0644\u0623\u0646 \u0648\u0627\u062c\u0647\u062a\u0647 \u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0644\u063a\u0627\u064a\u0629. \u0648\u0645\u0639 \u0630\u0644\u0643\u060c \u064a\u0645\u0643\u0646\u0646\u0627 \u0623\u0646 \u0646\u0632\u064a\u0644 \u0627\u0644\u062d\u0648\u0627\u0641 \u0627\u0644\u062e\u0634\u0646\u0629 \u0628\u0644\u0645\u0633\u0629 \u0645\u0646 \u0627\u0644\u0623\u0646\u0627\u0642\u0629. \ud83c\udfa8\u2728<\/p>\n<p>\u0623\u0648\u0644\u0627\u064b\u060c \u0642\u0645 \u0628\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u062c\u0633\u0645 \u0644\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0639\u0627\u0645:<\/p>\n<pre><code class=\"hljs css\"><span class=\"hljs-selector-tag\">\u062c\u0633\u0645<\/span> {\r\n    <span class=\"hljs-selector-tag\">\u0647\u0627\u0645\u0650\u0634<\/span>: 0;\r\n    <span class=\"hljs-selector-tag\">\u062d\u0634\u0648\u0629<\/span>: 0;\r\n    <span class=\"hljs-selector-tag\">\u0639\u0631\u0636<\/span>: <span class=\"hljs-selector-tag\">\u0634\u0628\u0643\u0629<\/span>;\r\n    <span class=\"hljs-selector-tag\">\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 \u0644\u0644\u0627\u0631\u062a\u0641\u0627\u0639<\/span>: 100<span class=\"hljs-selector-tag\">\u0641\u064a \u0627\u062a\u0634<\/span>;\r\n    <span class=\"hljs-selector-tag\">\u0635\u0641\u0648\u0641 \u0642\u0627\u0644\u0628 \u0627\u0644\u0634\u0628\u0643\u0629<\/span>: <span class=\"hljs-selector-tag\">\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 \u0644\u0644\u0645\u062d\u062a\u0648\u0649<\/span> 1<span class=\"hljs-selector-tag\">\u0627\u0644\u0641\u0631\u0646\u0633\u064a\u0629<\/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>\u064a\u062a\u0645\u062a\u0639 \u0627\u0644\u0635\u0641 \u0627\u0644\u0645\u0636\u0627\u062f \u0628\u0623\u0633\u0644\u0648\u0628 \u0623\u0633\u0627\u0633\u064a \u0644\u062a\u0645\u064a\u064a\u0632\u0647 \u0639\u0646 \u0628\u0642\u064a\u0629 \u0627\u0644\u0646\u0635\u060c \u0648\u0630\u0644\u0643 \u0628\u0634\u0643\u0644 \u0623\u0633\u0627\u0633\u064a \u0645\u0646 \u062e\u0644\u0627\u0644 \u062e\u0644\u0641\u064a\u062a\u0647:<\/p>\n<pre><code class=\"hljs css\"><span class=\"hljs-selector-id\">#counter<\/span> {\r\n    <span class=\"hljs-selector-tag\">\u0639\u0627\u0626\u0644\u0629 \u0627\u0644\u062e\u0637\u0648\u0637<\/span>: <span class=\"hljs-selector-tag\">\u0628\u062f\u0648\u0646 \u062a\u0634\u0639\u0628\u0627\u062a<\/span>;\r\n    <span class=\"hljs-selector-tag\">\u0644\u0648\u0646 \u0627\u0644\u062e\u0644\u0641\u064a\u0629<\/span>: <span class=\"hljs-selector-id\">#f7f7f7<\/span>;\r\n    <span class=\"hljs-selector-tag\">\u0645\u062d\u0627\u0630\u0627\u0629 \u0627\u0644\u0646\u0635<\/span>: <span class=\"hljs-selector-tag\">\u0645\u0631\u0643\u0632<\/span>;\r\n    <span class=\"hljs-selector-tag\">\u0639\u0631\u0636<\/span>: 100%;\r\n    <span class=\"hljs-selector-tag\">\u062d\u0634\u0648\u0629<\/span>: 0<span class=\"hljs-selector-class\">.5 \u0625\u0645<\/span> 0;\r\n}\r\n<\/code><\/pre>\n<p>\u0648\u0623\u062e\u064a\u0631\u064b\u0627\u060c \u062a\u0645 \u062a\u0635\u0645\u064a\u0645 \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0646\u0635 \u0644\u0639\u0631\u0636 \u0646\u0635 \u0648\u0627\u0636\u062d \u0645\u0639 \u0648\u062c\u0648\u062f \u0645\u0633\u0627\u062d\u0629 \u0643\u0627\u0641\u064a\u0629 \u0644\u0644\u062a\u0646\u0641\u0633. \u0627\u0644\u062e\u0637 \u0627\u0644\u0630\u064a \u064a\u0641\u0635\u0644 \u0628\u064a\u0646 \u0627\u0644\u0623\u0631\u0642\u0627\u0645 \u0648\u0627\u0644\u0646\u0635 \u0647\u0648 \u0641\u064a \u0627\u0644\u0648\u0627\u0642\u0639 \u0627\u0644\u062d\u062f \u0627\u0644\u0639\u0644\u0648\u064a \u0644\u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0646\u0635 \u0647\u0630\u0647.<\/p>\n<pre><code class=\"hljs css\"><span class=\"hljs-selector-tag\">\u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0646\u0635<\/span> {\r\n    <span class=\"hljs-selector-tag\">\u0639\u0631\u0636<\/span>: 100%;\r\n    <span class=\"hljs-selector-tag\">\u0627\u0631\u062a\u0641\u0627\u0639<\/span>: 100%;\r\n    <span class=\"hljs-selector-tag\">\u062d\u062c\u0645 \u0627\u0644\u062e\u0637<\/span>: 16<span class=\"hljs-selector-tag\">\u0646\u0642\u0637\u0629<\/span>;\r\n    <span class=\"hljs-selector-tag\">\u062d\u0634\u0648\u0629<\/span>: 1<span class=\"hljs-selector-tag\">\u0641\u064a<\/span>;\r\n    <span class=\"hljs-selector-tag\">\u062a\u062d\u062f\u064a\u062f \u062d\u062c\u0645 \u0627\u0644\u0635\u0646\u062f\u0648\u0642<\/span>: <span class=\"hljs-selector-tag\">\u0635\u0646\u062f\u0648\u0642 \u0627\u0644\u062d\u062f\u0648\u062f<\/span>;\r\n    <span class=\"hljs-selector-tag\">\u0645\u062e\u0637\u0637 \u062a\u0641\u0635\u064a\u0644\u064a<\/span>: 0;\r\n    <span class=\"hljs-selector-tag\">\u062d\u062f\u0648\u062f<\/span>: <span class=\"hljs-selector-tag\">\u0644\u0627 \u0623\u062d\u062f<\/span>;\r\n    <span class=\"hljs-selector-tag\">\u0623\u0639\u0644\u0649 \u0627\u0644\u062d\u062f\u0648\u062f<\/span>: 1<span class=\"hljs-selector-tag\">\u0628\u0643\u0633\u0644<\/span> <span class=\"hljs-selector-tag\">\u0635\u0644\u0628<\/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=\"\u064a\u0639\u0631\u0636 \u062a\u0637\u0628\u064a\u0642 \u062a\u062f\u0648\u064a\u0646 \u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0630\u0648 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0645\u062e\u0635\u0635\u0629 \u0634\u0631\u064a\u0637 \u0627\u0644\u0625\u062d\u0635\u0627\u0621 \u0641\u064a \u0627\u0644\u0623\u0639\u0644\u0649 \u0645\u0639 \u0645\u0646\u0637\u0642\u0629 \u0646\u0635 \u0628\u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0643\u0627\u0645\u0644 \u0641\u064a \u0627\u0644\u0623\u0633\u0641\u0644.\" width=\"960\" height=\"569\" title=\"\"> <\/picture><\/figure>\n<h3 id=\"adding-functionality-with-javascript\">\u0625\u0636\u0627\u0641\u0629 \u0648\u0638\u0627\u0626\u0641 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 JavaScript<\/h3>\n<p>\u0645\u0639 \u0648\u062c\u0648\u062f \u0627\u0644\u0647\u064a\u0643\u0644 \u0648\u0627\u0644\u0623\u0633\u0644\u0648\u0628 \u0641\u064a \u0645\u0643\u0627\u0646\u0647\u0645\u0627\u060c \u0641\u0623\u0646\u062a \u062c\u0627\u0647\u0632 \u0644\u0625\u0636\u0627\u0641\u0629 \u0648\u0638\u064a\u0641\u0629: \u0627\u0644\u0643\u0648\u062f \u0627\u0644\u0630\u064a \u064a\u062c\u0639\u0644 \u0647\u0630\u0627 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0628\u0633\u064a\u0637 \u064a\u0642\u0648\u0645 \u0628\u0634\u064a\u0621 \u0645\u0627 \u0628\u0627\u0644\u0641\u0639\u0644. \ud83d\udee0\ufe0f<\/p>\n<p>\u0642\u0628\u0644 \u0623\u0646 \u062a\u0628\u062f\u0623 \u0641\u064a \u0643\u062a\u0627\u0628\u0629 \u062d\u062a\u0649 \u0623\u0628\u0633\u0637 \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u0627\u062a \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0629\u060c \u0641\u0645\u0646 \u0627\u0644\u062c\u064a\u062f \u0623\u0646 \u062a\u0641\u0647\u0645 \u0645\u0627 \u062a\u0631\u064a\u062f \u0623\u0646 \u062a\u0641\u0639\u0644\u0647. \u0641\u064a \u0647\u0630\u0647 \u0627\u0644\u062d\u0627\u0644\u0629\u060c \u0647\u0646\u0627\u0643 \u0641\u0642\u0637 \u0632\u0648\u062c \u0645\u0646 \u0627\u0644\u0645\u062a\u0637\u0644\u0628\u0627\u062a \u0627\u0644\u0639\u0627\u0645\u0629:<\/p>\n<ul>\n<li>\u0627\u062d\u0641\u0638 \u0627\u0644\u0646\u0635 \u0627\u0644\u0645\u062f\u062e\u0644 \u0648\u0623\u0639\u062f \u062a\u062d\u0645\u064a\u0644\u0647 \u0639\u0646\u062f\u0645\u0627 \u064a\u0643\u0648\u0646 \u0630\u0644\u0643 \u0636\u0631\u0648\u0631\u064a\u064b\u0627.<\/li>\n<li>\u0642\u0645 \u0628\u062a\u062d\u062f\u064a\u062b \u0639\u062f\u062f \u0627\u0644\u0623\u062d\u0631\u0641 \u0648\u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0644\u062a\u0648\u0641\u064a\u0631 \u0625\u062d\u0635\u0627\u0626\u064a\u0627\u062a \u0641\u064a \u0627\u0644\u0648\u0642\u062a \u0627\u0644\u0641\u0639\u0644\u064a. \ud83d\udcca<\/li>\n<\/ul>\n<p>\u064a\u062a\u0636\u0645\u0646 \u0643\u0644\u0627 \u0627\u0644\u0645\u062a\u0637\u0644\u0628\u064a\u0646 \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0645\u0648\u062c\u0648\u062f\u0629 \u0641\u064a \u0627\u0644\u0645\u0633\u062a\u0646\u062f. \u0644\u0630\u0644\u0643 \u064a\u0628\u062f\u0623 \u0627\u0644\u0628\u0631\u0646\u0627\u0645\u062c \u0627\u0644\u0646\u0635\u064a \u0628\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0645\u0631\u0627\u062c\u0639 \u0644\u0647\u0630\u0647 \u0627\u0644\u0639\u0642\u062f \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0637\u0631\u064a\u0642\u0629 getElementById:<\/p>\n<pre><code class=\"hljs js\"><span class=\"hljs-keyword\">\u062b\u0627\u0628\u062a<\/span> \u0643\u0644\u0645\u0627\u062a = <span class=\"hljs-built_in\">\u0648\u062b\u064a\u0642\u0629<\/span>.\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u0639\u0646\u0635\u0631 \u062d\u0633\u0628 \u0627\u0644\u0645\u0639\u0631\u0641(<span class=\"hljs-string\">&quot;\u0643\u0644\u0645\u0627\u062a&quot;<\/span>);\r\n<span class=\"hljs-keyword\">\u062b\u0627\u0628\u062a<\/span> \u0627\u0644\u0623\u062d\u0631\u0641 = <span class=\"hljs-built_in\">\u0648\u062b\u064a\u0642\u0629<\/span>.\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u0639\u0646\u0635\u0631 \u062d\u0633\u0628 \u0627\u0644\u0645\u0639\u0631\u0641(<span class=\"hljs-string\">&quot;\u0623\u062d\u0631\u0641&quot;<\/span>);\r\n<span class=\"hljs-keyword\">\u062b\u0627\u0628\u062a<\/span> \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0646\u0635 = <span class=\"hljs-built_in\">\u0648\u062b\u064a\u0642\u0629<\/span>.\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u0639\u0646\u0635\u0631 \u062d\u0633\u0628 \u0627\u0644\u0645\u0639\u0631\u0641(<span class=\"hljs-string\">&quot;\u0646\u0635&quot;<\/span>);\r\n<\/code><\/pre>\n<p>\u0644\u0627\u062d\u0638 \u0623\u0646 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0648\u0627\u0644\u0623\u062d\u0631\u0641 \u0648\u0627\u0644\u0646\u0635\u0648\u0635 \u0647\u064a \u0645\u0639\u0631\u0641\u0627\u062a \u0644\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0647\u0627 \u0641\u064a \u0627\u0644\u0645\u0633\u062a\u0646\u062f\u060c \u0648\u064a\u062a\u0645 \u062a\u0639\u064a\u064a\u0646\u0647\u0627 \u0641\u064a \u0645\u0644\u0641 HTML \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0633\u0645\u0629 id.<\/p>\n<p>\u0628\u0639\u062f \u0630\u0644\u0643\u060c \u0646\u062d\u062a\u0627\u062c \u0625\u0644\u0649 \u0623\u0646 \u064a\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0639\u0646\u062f \u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0646\u0635:<\/p>\n<pre><code class=\"hljs js\">textarea.addEventListener(<span class=\"hljs-string\">&quot;\u0645\u062f\u062e\u0644&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">\u0648\u0638\u064a\u0641\u0629<\/span>(<span class=\"hljs-params\">\u0625\u064a\u0641<\/span>) <\/span>{ localStorage.setItem(<span class=\"hljs-string\">&quot;\u0646\u0635&quot;<\/span>\u060c ev.target.value); \u062a\u062d\u062f\u064a\u062b_\u0627\u0644\u0639\u062f\u062f(ev.target.value); });\r\n<\/code><\/pre>\n<p>\u0645\u0633\u062a\u0645\u0639 \u0627\u0644\u062d\u062f\u062b \u0647\u0648 \u0639\u0628\u0627\u0631\u0629 \u0639\u0646 \u0648\u0638\u064a\u0641\u0629 \u064a\u0642\u0648\u0645 JavaScript \u0628\u062a\u0646\u0641\u064a\u0630\u0647\u0627 \u062a\u0644\u0642\u0627\u0626\u064a\u064b\u0627 \u0639\u0646\u062f \u062d\u062f\u0648\u062b \u062d\u062f\u062b \u0645\u0639\u064a\u0646. \u0641\u064a \u0647\u0630\u0647 \u0627\u0644\u062d\u0627\u0644\u0629\u060c \u0646\u0642\u0648\u0645 \u0628\u0631\u0628\u0637 \u0645\u0633\u062a\u0645\u0639 \u0628\u0639\u0642\u062f\u0629 \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0646\u0635\u060c \u0648\u0627\u0644\u0630\u064a \u064a\u062a\u0645 \u062a\u0646\u0641\u064a\u0630\u0647 \u0639\u0646\u062f \u062d\u062f\u0648\u062b \u062d\u062f\u062b &quot;\u0627\u0644\u0625\u062f\u062e\u0627\u0644&quot;. \u0648\u0647\u0630\u0627 \u0647\u0648\u060c \u0639\u0646\u062f\u0645\u0627 \u064a\u062a\u0641\u0627\u0639\u0644 \u0634\u062e\u0635 \u0645\u0627 \u0645\u0639 \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0646\u0635.<\/p>\n<p>\u0628\u0639\u062f \u0630\u0644\u0643\u060c \u0646\u0633\u062a\u062e\u062f\u0645 \u0648\u0627\u062c\u0647\u0629 \u0628\u0631\u0645\u062c\u0629 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u062a\u062e\u0632\u064a\u0646 \u0627\u0644\u0648\u064a\u0628 \u0644\u062d\u0641\u0638 \u0627\u0644\u0645\u062d\u062a\u0648\u064a\u0627\u062a \u0627\u0644\u062d\u0627\u0644\u064a\u0629 \u0644\u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0646\u0635\u060c \u0648\u0627\u0644\u062a\u064a \u062a\u0623\u062a\u064a \u0645\u0646 ev.target.value. \u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u0647\u064a\u0643\u0644\u060c ev \u0647\u0648 \u0643\u0627\u0626\u0646 \u064a\u0645\u062b\u0644 \u0627\u0644\u062d\u062f\u062b \u0627\u0644\u0630\u064a \u0623\u062f\u0649 \u0625\u0644\u0649 \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0645\u0633\u062a\u0645\u0639\u060c \u0648ev.target \u0647\u064a \u0627\u0644\u0639\u0642\u062f\u0629 \u0627\u0644\u062a\u064a \u062a\u0644\u0642\u062a \u0627\u0644\u062d\u062f\u062b\u060c \u0648ev.target.value \u0647\u0648 \u0646\u0635 \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0646\u0635 \u0647\u0630\u0647.<\/p>\n<p>\u062a\u0623\u062e\u0630 \u0637\u0631\u064a\u0642\u0629 setItem \u0645\u0639\u0627\u0645\u0650\u0644\u064e\u064a\u0646: \u0627\u0633\u0645 \u0627\u0644\u0645\u0641\u062a\u0627\u062d \u0644\u0631\u0628\u0637\u0647 \u0628\u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0648\u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0641\u0639\u0644\u064a\u0629 \u0644\u062a\u062e\u0632\u064a\u0646\u0647\u0627.<\/p>\n<p>\u0628\u0639\u062f \u0630\u0644\u0643\u060c \u0646\u0633\u062a\u062f\u0639\u064a update_counts()\u060c \u0648\u0646\u0645\u0631\u0631 \u0646\u0641\u0633 \u0627\u0644\u0646\u0635. \u0633\u0648\u0641 \u0646\u0634\u0631\u062d \u0647\u0630\u0647 \u0627\u0644\u0645\u064a\u0632\u0629 \u0628\u0639\u062f \u0642\u0644\u064a\u0644.<\/p>\n<p>\u0627\u0644\u0622\u0646 \u0628\u0639\u062f \u0623\u0646 \u0642\u0645\u0646\u0627 \u0628\u062d\u0641\u0638 \u0627\u0644\u0646\u0635\u060c \u0633\u062a\u0631\u063a\u0628 \u0641\u064a \u062a\u062d\u0645\u064a\u0644\u0647 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649 \u0639\u0646\u062f \u0641\u062a\u062d \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0623\u0648 \u0625\u0639\u0627\u062f\u0629 \u062a\u062d\u0645\u064a\u0644\u0647. \u064a\u0645\u0643\u0646\u0646\u0627 \u0627\u0644\u0627\u0647\u062a\u0645\u0627\u0645 \u0628\u0630\u0644\u0643 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u0633\u062a\u0645\u0639 \u0622\u062e\u0631:<\/p>\n<pre><code class=\"hljs js\"><span class=\"hljs-built_in\">\u0646\u0627\u0641\u0630\u0629<\/span>.addEventListener(<span class=\"hljs-string\">&quot;\u062d\u0645\u0648\u0644\u0629&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">\u0648\u0638\u064a\u0641\u0629<\/span>(<span class=\"hljs-params\">\u0625\u064a\u0641<\/span>) <\/span>{\r\n    <span class=\"hljs-keyword\">\u0641\u0627\u0631<\/span> \u0627\u0644\u0646\u0635 = localStorage.getItem(<span class=\"hljs-string\">&quot;\u0646\u0635&quot;<\/span>); textarea.value = \u0646\u0635\u061b \u062a\u062d\u062f\u064a\u062b_\u0627\u0644\u0639\u062f\u062f(\u0627\u0644\u0646\u0635); });\r\n<\/code><\/pre>\n<p>\u064a\u062a\u0648\u0644\u0649 \u0647\u0630\u0627 \u0627\u0644\u0645\u0633\u062a\u0645\u0639 \u0645\u0639\u0627\u0644\u062c\u0629 \u062d\u062f\u062b \u0627\u0644\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0630\u064a \u064a\u062d\u062f\u062b \u0639\u0644\u0649 \u0643\u0627\u0626\u0646 \u0627\u0644\u0646\u0627\u0641\u0630\u0629\u060c \u0648\u0647\u0648 \u062a\u0645\u062b\u064a\u0644 \u0639\u0644\u0649 \u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u0623\u0639\u0644\u0649 \u0644\u0646\u0627\u0641\u0630\u0629 \u0627\u0644\u0645\u062a\u0635\u0641\u062d. \u0639\u0646\u062f \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0646\u0627\u0641\u0630\u0629\u060c \u062a\u0642\u0648\u0645 \u0627\u0633\u062a\u062f\u0639\u0627\u0621 getItem() \u0628\u0625\u0631\u062c\u0627\u0639 \u0642\u064a\u0645\u0629 \u0627\u0644\u0646\u0635 \u0627\u0644\u0645\u062e\u0632\u0646\u0629 \u0645\u0646 \u0627\u0644\u062a\u062e\u0632\u064a\u0646 \u0627\u0644\u0645\u062d\u0644\u064a. \u064a\u0642\u0648\u0645 \u0647\u0630\u0627 \u0627\u0644\u0643\u0648\u062f \u0628\u0639\u062f \u0630\u0644\u0643 \u0628\u062a\u0639\u064a\u064a\u0646 \u0642\u064a\u0645\u0629 \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0646\u0635 \u0625\u0644\u0649 \u0627\u0644\u0646\u0635 \u0627\u0644\u0645\u062d\u0645\u0644\u060c \u0648\u0645\u062b\u0644 \u0627\u0644\u0645\u0633\u062a\u0645\u0639 \u0623\u0639\u0644\u0627\u0647\u060c \u064a\u0633\u062a\u062f\u0639\u064a update_counts() \u0645\u0639 \u0647\u0630\u0627 \u0627\u0644\u0646\u0635.<\/p>\n<p>\u064a\u062a\u0645 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0645\u062a\u0628\u0642\u064a \u0641\u064a \u062f\u0627\u0644\u0629 update_counts() \u0648\u0627\u0644\u062a\u064a \u062a\u0628\u062f\u0648 \u0628\u0647\u0630\u0627 \u0627\u0644\u0634\u0643\u0644:<\/p>\n<pre><code class=\"hljs js\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">\u0648\u0638\u064a\u0641\u0629<\/span>\u00a0<span class=\"hljs-title\">\u0639\u062f\u062f \u0627\u0644\u062a\u062d\u062f\u064a\u062b\u0627\u062a<\/span>(<span class=\"hljs-params\">\u0646\u0635<\/span>) <\/span>{chars.innerHTML = text.length\u061b \u0627\u0644\u0643\u0644\u0645\u0627\u062a.innerHTML = text.split(<span class=\"hljs-string\">' '<\/span>).\u0637\u0648\u0644\u061b }\r\n<\/code><\/pre>\n<p>\u0639\u0644\u0649 \u0639\u0643\u0633 \u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0646\u0635\u060c \u0644\u0627 \u064a\u062d\u062a\u0648\u064a \u0627\u0644\u0646\u0635 \u0627\u0644\u0639\u0627\u062f\u064a \u0639\u0644\u0649 \u062e\u0627\u0635\u064a\u0629 \u0642\u064a\u0645\u0629\u060c \u0644\u0630\u0627 \u0642\u0645\u0646\u0627 \u0628\u062a\u0639\u064a\u064a\u0646 \u062e\u0627\u0635\u064a\u0629 innerHTML \u0628\u062f\u0644\u0627\u064b \u0645\u0646 \u0630\u0644\u0643. \u0625\u0646 \u062e\u0627\u0635\u064a\u0629 \u0637\u0648\u0644 \u0627\u0644\u0633\u0644\u0633\u0644\u0629 \u0647\u064a \u062e\u0627\u0635\u064a\u0629 \u0628\u0633\u064a\u0637\u0629 \u0644\u0644\u0642\u0631\u0627\u0621\u0629 \u0641\u0642\u0637 \u0648\u0627\u0644\u062a\u064a \u062a\u0639\u0637\u064a\u0646\u0627 \u0639\u062f\u062f \u0627\u0644\u0623\u062d\u0631\u0641.<\/p>\n<p>\u064a\u0642\u0648\u0645 text.split(&#039; &#039;) \u0628\u062a\u0642\u0633\u064a\u0645 \u0627\u0644\u0633\u0644\u0633\u0644\u0629 \u0639\u0646\u062f \u0623\u062d\u0631\u0641 \u0627\u0644\u0645\u0633\u0627\u0641\u0629\u060c \u0645\u0645\u0627 \u064a\u0624\u062f\u064a \u0625\u0644\u0649 \u0625\u0631\u062c\u0627\u0639 \u0627\u0644\u0646\u062a\u064a\u062c\u0629 \u0643\u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u0646 \u0627\u0644\u0633\u0644\u0627\u0633\u0644. \u0645\u062b\u0644 \u0627\u0644\u0633\u0644\u0627\u0633\u0644\u060c \u062a\u062d\u062a\u0648\u064a \u0627\u0644\u0645\u0635\u0641\u0648\u0641\u0627\u062a \u0639\u0644\u0649 \u062e\u0627\u0635\u064a\u0629 \u0637\u0648\u0644 \u062a\u0639\u0637\u064a\u0646\u0627 \u0639\u062f\u062f \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0641\u064a \u0627\u0644\u0645\u0635\u0641\u0648\u0641\u0629.<\/p>\n<p>\u0648\u0645\u0639 \u0630\u0644\u0643\u060c \u0625\u0630\u0627 \u0642\u0645\u062a \u0628\u0627\u062e\u062a\u0628\u0627\u0631 \u0647\u0630\u0627 \u0627\u0644\u0643\u0648\u062f\u060c \u0641\u0642\u062f \u062a\u0644\u0627\u062d\u0638 \u0648\u062c\u0648\u062f \u0628\u0639\u0636 \u0627\u0644\u0623\u062e\u0637\u0627\u0621:<\/p>\n<ol>\n<li>\u0644\u0646 \u064a\u062a\u0645 \u062d\u0633\u0627\u0628 \u0627\u0644\u0643\u0644\u0645\u0629 \u0628\u0645\u0641\u0631\u062f\u0647\u0627 \u0639\u0644\u0649 \u0627\u0644\u0633\u0637\u0631 \u0628\u0634\u0643\u0644 \u0635\u062d\u064a\u062d\u060c \u062d\u064a\u062b \u0644\u0627 \u062a\u0648\u062c\u062f \u0645\u0633\u0627\u0641\u0629 \u062d\u0648\u0644\u0647\u0627.<\/li>\n<li>\u0641\u064a \u062d\u0627\u0644\u0629 \u0639\u062f\u0645 \u0648\u062c\u0648\u062f \u0623\u064a \u0646\u0635 \u0639\u0644\u0649 \u0627\u0644\u0625\u0637\u0644\u0627\u0642\u060c \u0633\u064a\u062a\u0645 \u0627\u0644\u0625\u0628\u0644\u0627\u063a \u0639\u0646 \u0643\u0644\u0645\u0629 \u0648\u0627\u062d\u062f\u0629 \u0641\u0642\u0637 \u0628\u0633\u0628\u0628 \u0637\u0631\u064a\u0642\u0629 \u0639\u0645\u0644 \u0627\u0644\u062a\u0642\u0633\u064a\u0645.<\/li>\n<\/ol>\n<p>\u0644\u062d\u0644 \u0627\u0644\u0645\u0634\u0643\u0644\u0629 \u0627\u0644\u0623\u0648\u0644\u0649\u060c \u064a\u0645\u0643\u0646\u0643 \u0627\u0644\u062a\u0642\u0633\u064a\u0645 \u0639\u0644\u0649 \u062a\u0639\u0628\u064a\u0631 \u0639\u0627\u062f\u064a (\\s \u064a\u0639\u0646\u064a &quot;\u062d\u0631\u0641 \u0641\u0627\u0631\u063a&quot;) \u0628\u062f\u0644\u0627\u064b \u0645\u0646 \u0627\u0644\u0645\u0633\u0627\u0641\u0629. \u0644\u062d\u0644 \u0627\u0644\u0645\u0634\u0643\u0644\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629\u060c \u0642\u0645 \u0628\u062a\u0635\u0641\u064a\u0629 \u0627\u0644\u0633\u0644\u0627\u0633\u0644 \u0627\u0644\u0641\u0627\u0631\u063a\u0629 \u0645\u0646 \u0627\u0644\u0646\u062a\u064a\u062c\u0629:<\/p>\n<pre><code class=\"hljs js\">    \u0627\u0644\u0643\u0644\u0645\u0627\u062a.innerHTML = text.split(<span class=\"hljs-regexp\">\/\\\u0633\/<\/span>).\u0641\u0644\u062a\u0631(<span class=\"hljs-function\"><span class=\"hljs-keyword\">\u0648\u0638\u064a\u0641\u0629<\/span>(<span class=\"hljs-params\">\u0646<\/span>) <\/span>{ <span class=\"hljs-keyword\">\u064a\u0639\u0648\u062f<\/span> \u0646 != <span class=\"hljs-string\">''<\/span>\u061b }).\u0637\u0648\u0644\u061b\r\n<\/code><\/pre>\n<p>\u0625\u0630\u0627 \u0643\u0646\u062a \u0644\u0627 \u062a\u0641\u0647\u0645 \u0647\u0630\u0627 \u0627\u0644\u0633\u0637\u0631 \u0628\u0634\u0643\u0644 \u0643\u0627\u0645\u0644\u060c \u0641\u0631\u0627\u062c\u0639 \u0635\u0641\u062d\u0627\u062a MDN \u0644\u0645\u0639\u0631\u0641\u0629 \u0627\u0644\u0645\u0632\u064a\u062f. <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/split\" target=\"_blank\" rel=\"noopener noreferrer\">\u064a\u0646\u0642\u0633\u0645<\/a> \u0648 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/filter\" target=\"_blank\" rel=\"noopener noreferrer\">\u0641\u0644\u062a\u0631<\/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=\"\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0648\u064a\u0628 \u0645\u0639 \u0646\u0635 \u0646\u0645\u0648\u0630\u062c\u064a\u060c \u064a\u0638\u0647\u0631 \u0639\u062f\u062f \u0627\u0644\u0623\u062d\u0631\u0641 \u0648\u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0628\u062f\u0642\u0629.\" width=\"960\" height=\"569\" title=\"\"> <\/picture><\/figure>\n<hr \/>\n<p>\u0628\u0625\u0645\u0643\u0627\u0646\u0643 \u0625\u0646\u0634\u0627\u0621 \u0627\u0644\u0639\u062f\u064a\u062f \u0645\u0646 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u0645\u0641\u064a\u062f\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0639\u062f\u062f \u0642\u0644\u064a\u0644 \u0645\u0646 \u0627\u0644\u0645\u0644\u0641\u0627\u062a \u0641\u0642\u0637. \u064a\u0645\u0643\u0646\u0643 \u0623\u064a\u0636\u064b\u0627 \u062a\u0648\u0633\u064a\u0639 \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0627\u0644\u0628\u0633\u064a\u0637 \u0647\u0630\u0627 \u0644\u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0632\u064a\u062f \u0645\u0646 \u0627\u0644\u0648\u0638\u0627\u0626\u0641. \u0639\u0644\u0649 \u0633\u0628\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644\u060c \u064a\u0645\u0643\u0646\u0643 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/location\" target=\"_blank\" rel=\"noopener\" data-schema-attribute=\"mentions\">\u062e\u0627\u0635\u064a\u0629 window.location<\/a> \u0644\u0627\u0633\u062a\u0631\u062f\u0627\u062f \u0639\u0646\u0648\u0627\u0646 URL \u0627\u0644\u062d\u0627\u0644\u064a \u0648\u062f\u0639\u0645 \u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0627\u0644\u0645\u062a\u0639\u062f\u062f\u0629 \u0639\u0646 \u0637\u0631\u064a\u0642 \u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0630\u064a \u062a\u0645\u0631\u0631\u0647\u0627 \u0625\u0644\u0649 localStorage.setItem. \ud83d\uddd2\ufe0f\ud83c\udf0d<\/p>","protected":false},"excerpt":{"rendered":"<p>\u0642\u0645 \u0628\u0625\u0646\u0634\u0627\u0621 \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u0623\u0648\u0644 \u0627\u0644\u062e\u0627\u0635 \u0628\u0643 \u0648\u0627\u062d\u0641\u0638 \u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0639\u062f\u0627\u062f \u0627\u0644\u0643\u0644\u0645\u0627\u062a. \u062a\u0639\u0644\u0645 \u0628\u0633\u0647\u0648\u0644\u0629\u060c \u0628\u0633\u0631\u0639\u0629\u060c \u0648\u0645\u062c\u0627\u0646\u064b\u0627! \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\/ar\/wp-json\/wp\/v2\/posts\/32655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mastertrend.info\/ar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mastertrend.info\/ar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/ar\/wp-json\/wp\/v2\/comments?post=32655"}],"version-history":[{"count":0,"href":"https:\/\/mastertrend.info\/ar\/wp-json\/wp\/v2\/posts\/32655\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/ar\/wp-json\/wp\/v2\/media\/49198"}],"wp:attachment":[{"href":"https:\/\/mastertrend.info\/ar\/wp-json\/wp\/v2\/media?parent=32655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mastertrend.info\/ar\/wp-json\/wp\/v2\/categories?post=32655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mastertrend.info\/ar\/wp-json\/wp\/v2\/tags?post=32655"}],"curies":[{"name":"\u0648\u0648\u0631\u062f\u0628\u0631\u064a\u0633","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}