{"id":921,"date":"2025-09-30T14:41:31","date_gmt":"2025-09-30T11:41:31","guid":{"rendered":"https:\/\/khaledshs.com\/?p=921"},"modified":"2025-09-30T14:43:35","modified_gmt":"2025-09-30T11:43:35","slug":"%d9%83%d9%8a%d9%81%d9%8a%d8%a9-%d8%a5%d8%b6%d8%a7%d9%81%d8%a9-javascript-%d8%a5%d9%84%d9%89-html-%d8%af%d9%84%d9%8a%d9%84-%d8%a7%d9%84%d9%85%d8%a8%d8%aa%d8%af%d8%a6%d9%8a%d9%86","status":"publish","type":"post","link":"https:\/\/khaledshs.com\/ar\/%d8%a7%d9%84%d8%af%d8%b1%d9%88%d8%b3-%d8%a7%d9%84%d8%aa%d8%b9%d9%84%d9%8a%d9%85%d9%8a%d8%a9\/%d9%83%d9%8a%d9%81%d9%8a%d8%a9-%d8%a5%d8%b6%d8%a7%d9%81%d8%a9-javascript-%d8%a5%d9%84%d9%89-html-%d8%af%d9%84%d9%8a%d9%84-%d8%a7%d9%84%d9%85%d8%a8%d8%aa%d8%af%d8%a6%d9%8a%d9%86\/","title":{"rendered":"\u0643\u064a\u0641\u064a\u0629 \u0625\u0636\u0627\u0641\u0629 JavaScript \u0625\u0644\u0649 HTML: \u062f\u0644\u064a\u0644 \u0627\u0644\u0645\u0628\u062a\u062f\u0626\u064a\u0646"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"720\" height=\"480\" src=\"https:\/\/khaledshs.com\/wp-content\/uploads\/2025\/09\/Add-JavaScript-to-HTML-Small.png\" alt=\"\" class=\"wp-image-918\" srcset=\"https:\/\/khaledshs.com\/wp-content\/uploads\/2025\/09\/Add-JavaScript-to-HTML-Small.png 720w, https:\/\/khaledshs.com\/wp-content\/uploads\/2025\/09\/Add-JavaScript-to-HTML-Small-300x200.png 300w, https:\/\/khaledshs.com\/wp-content\/uploads\/2025\/09\/Add-JavaScript-to-HTML-Small-320x213.png 320w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/figure>\n\n<h3 class=\"wp-block-heading\">\u0645\u0642\u062f\u0645\u0629<\/h3>\n\n<p class=\"wp-block-paragraph\">\u0625\u0630\u0627 \u0643\u0646\u062a \u062a\u0628\u062f\u0623 \u0644\u062a\u0648\u0643 \u0641\u064a \u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0648\u064a\u0628\u060c \u0641\u0623\u0648\u0644 \u0645\u0627 \u062a\u062d\u062a\u0627\u062c \u0645\u0639\u0631\u0641\u062a\u0647 \u0647\u0648 <strong>\u0643\u064a\u0641\u064a\u0629 \u0625\u0636\u0627\u0641\u0629 JavaScript \u0625\u0644\u0649 HTML<\/strong>. \u062a\u0636\u064a\u0641 JavaScript \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0644\u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628\u2014\u062a\u0645\u0643\u0651\u0646\u0643 \u0645\u0646 \u0627\u0644\u062a\u0639\u0627\u0645\u0644 \u0645\u0639 \u0646\u0642\u0631\u0627\u062a \u0627\u0644\u0623\u0632\u0631\u0627\u0631\u060c \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0635\u062d\u0629 \u0627\u0644\u0646\u0645\u0627\u0630\u062c\u060c \u0623\u0648 \u0635\u0646\u0639 \u0633\u0645\u0627\u062a \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0629 \u0645\u062b\u0644 \u0627\u0644\u0648\u0636\u0639 \u0627\u0644\u062f\u0627\u0643\u0646. \u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u062f\u0644\u064a\u0644\u060c \u0633\u0646\u0633\u062a\u0639\u0631\u0636 \u0623\u0643\u062b\u0631 \u062b\u0644\u0627\u062b \u0637\u0631\u0642 \u0634\u064a\u0648\u0639\u064b\u0627 \u0644\u0625\u0636\u0627\u0641\u0629 JavaScript \u0625\u0644\u0649 HTML:  <\/p>\n\n<ol class=\"wp-block-list\">\n<li>\u0645\u0636\u0645\u0646 \u0641\u064a \u0627\u0644\u0640 <code>&lt;head&gt;<\/code><\/li>\n\n\n\n<li>\u0645\u0636\u0645\u0646 \u0641\u064a \u0627\u0644\u0640 <code>&lt;body&gt;<\/code><\/li>\n\n\n\n<li>\u0643\u0645\u0644\u0641 <code>.js<\/code> \u062e\u0627\u0631\u062c\u064a<\/li>\n<\/ol>\n\n<p class=\"wp-block-paragraph\">\u0633\u0646\u0646\u0627\u0642\u0634 \u0623\u064a\u0636\u064b\u0627 \u0627\u0644\u0623\u062f\u0627\u0621 \u0648\u0623\u0641\u0636\u0644 \u0627\u0644\u0645\u0645\u0627\u0631\u0633\u0627\u062a \u0648\u0623\u0645\u062b\u0644\u0629 \u0645\u062b\u0644 \u062a\u0628\u062f\u064a\u0644 \u0627\u0644\u0648\u0636\u0639 \u0627\u0644\u062f\u0627\u0643\u0646 \u0648\u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0635\u062d\u0629 \u0627\u0644\u0646\u0645\u0648\u0630\u062c.<\/p>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h3 class=\"wp-block-heading\">\u0623\u0647\u0645 \u0627\u0644\u0646\u0642\u0627\u0637: \u0643\u064a\u0641\u064a\u0629 \u0625\u0636\u0627\u0641\u0629 JavaScript \u0625\u0644\u0649 HTML<\/h3>\n\n<ul class=\"wp-block-list\">\n<li><strong>\u0623\u0641\u0636\u0644 \u0645\u0645\u0627\u0631\u0633\u0629<\/strong> \u0647\u064a \u0627\u0633\u062a\u062e\u062f\u0627\u0645 <strong>\u0645\u0644\u0641 <code>.js<\/code> \u062e\u0627\u0631\u062c\u064a<\/strong> \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0643\u0648\u062f \u0646\u0638\u064a\u0641 \u0648\u062a\u062e\u0632\u064a\u0646 \u0645\u0624\u0642\u062a \u0648\u0625\u0639\u0627\u062f\u0629 \u0627\u0633\u062a\u062e\u062f\u0627\u0645.<\/li>\n\n\n\n<li>\u062a\u062c\u0646\u0628 \u0648\u0636\u0639 \u0646\u0635\u0648\u0635 \u0628\u0631\u0645\u062c\u064a\u0629 \u0643\u0628\u064a\u0631\u0629 \u0641\u064a \u0627\u0644\u0640 <code>&lt;head&gt;<\/code> \u0644\u0623\u0646\u0647\u0627 \u062a\u0639\u064a\u0642 \u0627\u0644\u0639\u0631\u0636.<\/li>\n\n\n\n<li>\u0627\u0633\u062a\u062e\u062f\u0645 <code>defer<\/code> (\u0623\u0648 <code>async<\/code> \u0625\u0630\u0627 \u0644\u0645 \u064a\u0643\u0646 \u0627\u0644\u062a\u0631\u062a\u064a\u0628 \u0645\u0647\u0645\u064b\u0627) \u0644\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0646\u0635\u0648\u0635 \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0629 \u0628\u0643\u0641\u0627\u0621\u0629.<\/li>\n\n\n\n<li>\u0642\u0645 \u0628\u062a\u0635\u062d\u064a\u062d \u0627\u0644\u0623\u062e\u0637\u0627\u0621 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0648\u062d\u062f\u0629 \u062a\u062d\u0643\u0645 \u0627\u0644\u0645\u0637\u0648\u0631 \u0641\u064a \u0645\u062a\u0635\u0641\u062d\u0643 (F12).<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">\u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u062f\u0631\u0648\u0633 \u0645\u062a\u0642\u062f\u0645\u0629\u060c \u0631\u0627\u062c\u0639 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\" target=\"_blank\" rel=\"noopener\" title=\"\">\u0648\u062b\u0627\u0626\u0642 MDN Web \u062d\u0648\u0644 JavaScript<\/a>.<\/p>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h3 class=\"wp-block-heading\">\u0627\u0644\u0637\u0631\u064a\u0642\u0629 1: \u0625\u0636\u0627\u0641\u0629 JavaScript \u0625\u0644\u0649 HTML \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0633\u0643\u0631\u0628\u062a \u0645\u0636\u0645\u0646 \u062f\u0627\u062e\u0644  <code>&lt;head&gt;<\/code><\/h3>\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"\/><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"\/><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"\/><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n  &lt;title&gt;\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0635\u0641\u062d\u0629&lt;\/title&gt;\n\n  &lt;script&gt;\n let d = new Date();\n alert(\"\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u064a\u0648\u0645 \u0647\u0648 \" + d);\n  &lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;!-- \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0635\u0641\u062d\u0629 --&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;!DOCTYPE<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">html<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;html<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">lang<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">en<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">charset<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">UTF-8<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">name<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">viewport<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">content<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">width=device-width, initial-scale=1<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;title&gt;<\/span><span style=\"color: #D8DEE9FF\">Page Title<\/span><span style=\"color: #81A1C1\">&lt;\/title&gt;<\/span><\/span>\n<span class=\"line\"\/>\n<span class=\"line\"><span style=\"color: #ECEFF4\">  <\/span><span style=\"color: #81A1C1\">&lt;script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">let<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">d<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">new<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">Date<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">alert<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">Today's date is <\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">d<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;\/script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #616E88\">&lt;!-- page content --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/html&gt;<\/span><\/span>\n<span class=\"line\"\/><\/code><\/pre><\/div>\n\n<p class=\"wp-block-paragraph\"><g id=\"gid_0\">\u0627\u0644\u0645\u0632\u0627\u064a\u0627:<\/g> \u064a\u0639\u0645\u0644 \u0645\u0628\u0643\u0631\u064b\u0627.<br\/><g id=\"gid_1\">\u0627\u0644\u0639\u064a\u0648\u0628:<\/g> \u064a\u0639\u064a\u0642 \u0627\u0644\u0639\u0631\u0636 \u0648\u0642\u062f \u064a\u0641\u0634\u0644 \u0625\u0630\u0627 \u062d\u0627\u0648\u0644 \u0627\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u0649 \u0639\u0646\u0627\u0635\u0631 \u0644\u0645 \u064a\u062a\u0645 \u062a\u062d\u0645\u064a\u0644\u0647\u0627 \u0628\u0639\u062f.<\/p>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h3 class=\"wp-block-heading\">\u0627\u0644\u0637\u0631\u064a\u0642\u0629 2: \u0625\u0636\u0627\u0641\u0629 JavaScript \u0625\u0644\u0649 HTML \u0628\u0633\u0643\u0631\u0628\u062a \u0645\u0636\u0645\u0646 \u062f\u0627\u062e\u0644  <code>&lt;body&gt;<\/code><\/h3>\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"\/><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"\/><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"\/><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;!DOCTYPE html\n&lt;html lang=\"en\"\n&lt;head\n  &lt;meta charset=\"UTF-8\"\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\n  &lt;title\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0635\u0641\u062d\u0629&lt;\/title\n&lt;\/head\n&lt;body\n  &lt;!-- \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0635\u0641\u062d\u0629 --\n\n  &lt;script\n  let d = new Date();\n  document.body.innerHTML = \"<h1>\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u064a\u0648\u0645 \u0647\u0648 \" + d + \"<\/h1>\";\n  &lt;\/script\n&lt;\/body\n&lt;\/html\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;!DOCTYPE<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">html<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;html<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">lang<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">en<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">charset<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">UTF-8<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">name<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">viewport<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">content<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">width=device-width, initial-scale=1<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;title&gt;<\/span><span style=\"color: #D8DEE9FF\">Page Title<\/span><span style=\"color: #81A1C1\">&lt;\/title&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #616E88\">&lt;!-- page content --&gt;<\/span><\/span>\n<span class=\"line\"\/>\n<span class=\"line\"><span style=\"color: #ECEFF4\">  <\/span><span style=\"color: #81A1C1\">&lt;script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">let<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">d<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">new<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">Date<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">body<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">innerHTML<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">&lt;h1&gt;Today's date is <\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">d<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">&lt;\/h1&gt;<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;\/script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/html&gt;<\/span><\/span>\n<span class=\"line\"\/><\/code><\/pre><\/div>\n\n<p class=\"wp-block-paragraph\">\u0623\u0641\u0636\u0644 \u0644\u0623\u0646 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u064a\u062a\u0645 \u062a\u062d\u0645\u064a\u0644\u0647 \u0623\u0648\u0644\u0627\u064b\u060c \u0648\u0644\u0643\u0646\u0647 \u0644\u0627 \u064a\u0632\u0627\u0644 \u063a\u064a\u0631 \u0645\u0646\u0627\u0633\u0628 \u0644\u0644\u062a\u062e\u0632\u064a\u0646 \u0627\u0644\u0645\u0624\u0642\u062a.<\/p>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h3 class=\"wp-block-heading\">\u0627\u0644\u0637\u0631\u064a\u0642\u0629 3: \u0625\u0636\u0627\u0641\u0629 JavaScript \u0625\u0644\u0649 HTML \u0639\u0628\u0631 \u0645\u0644\u0641 \u062e\u0627\u0631\u062c\u064a (\u0645\u0648\u0635\u0649 \u0628\u0647\u0627)<\/h3>\n\n<p class=\"wp-block-paragraph\"><strong>\u0647\u064a\u0643\u0644 \u0627\u0644\u0645\u0634\u0631\u0648\u0639:<\/strong><\/p>\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"\/><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"\/><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"\/><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>project\/\n\u251c\u2500\u2500 css\/\n\u2502 \u2514\u2500\u2500 style.css\n\u251c\u2500\u2500 js\/\n\u2502 \u2514\u2500\u2500 script.js\n\u2514\u2500\u2500 index.html\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #d8dee9ff\">project\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #d8dee9ff\">\u251c\u2500\u2500 css\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #d8dee9ff\">\u2502   \u2514\u2500\u2500 style.css<\/span><\/span>\n<span class=\"line\"><span style=\"color: #d8dee9ff\">\u251c\u2500\u2500 js\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #d8dee9ff\">\u2502   \u2514\u2500\u2500 script.js<\/span><\/span>\n<span class=\"line\"><span style=\"color: #d8dee9ff\">\u2514\u2500\u2500 index.html<\/span><\/span>\n<span class=\"line\"><span style=\"color: #d8dee9ff\"\/><\/span><\/code><\/pre><\/div>\n\n<p class=\"wp-block-paragraph\"><strong>script.js<\/strong><\/p>\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"\/><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"\/><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"\/><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>let d = new Date();\ndocument.body.innerHTML = \"h1\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u064a\u0648\u0645 \u0647\u0648 \" + d + \"\/h1\";\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">let<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">d<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">new<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">Date<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">body<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">innerHTML<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">&lt;h1&gt;Today's date is <\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">d<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">&lt;\/h1&gt;<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"\/><\/code><\/pre><\/div>\n\n<p class=\"wp-block-paragraph\"><strong>style.css<\/strong><\/p>\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"\/><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"\/><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"\/><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>body {\n background-color: #0080ff;\n}\nh1 {\n color: #fff;\n font-family: Arial, Helvetica, sans-serif;\n}\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">body<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">background-color<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">#<\/span><span style=\"color: #B48EAD\">0080ff<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">h1<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">#<\/span><span style=\"color: #B48EAD\">fff<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">font-family<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">Arial<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #81A1C1\">Helvetica<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #81A1C1\">sans-serif;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"\/><\/code><\/pre><\/div>\n\n<p class=\"wp-block-paragraph\"><strong>index.html<\/strong><\/p>\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"\/><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"\/><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"\/><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;!DOCTYPE html\n&lt;html lang=\"en\"\n&lt;head\n  &lt;meta charset=\"UTF-8\"\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\n  &lt;title\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0635\u0641\u062d\u0629&lt;\/title\n  &lt;link rel=\"stylesheet\" href=\"css\/style.css\"\n&lt;\/head\n&lt;body\n  &lt;script src=\"js\/script.js\" defer&lt;\/script\n&lt;\/body\n&lt;\/html\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;!DOCTYPE<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">html<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;html<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">lang<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">en<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">charset<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">UTF-8<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">name<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">viewport<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">content<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">width=device-width, initial-scale=1<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;title&gt;<\/span><span style=\"color: #D8DEE9FF\">Page Title<\/span><span style=\"color: #81A1C1\">&lt;\/title&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">&lt;link<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">rel<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">stylesheet<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">href<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">css\/style.css<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">  <\/span><span style=\"color: #81A1C1\">&lt;script<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">src<\/span><span style=\"color: #ECEFF4\">=<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">js\/script.js<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">defer<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/html&gt;<\/span><\/span>\n<span class=\"line\"\/><\/code><\/pre><\/div>\n\n<p class=\"wp-block-paragraph\">\u0627\u0644\u0646\u0635\u0648\u0635 \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0629 \u0627\u0644\u062e\u0627\u0631\u062c\u064a\u0629 \u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u0635\u064a\u0627\u0646\u0629 \u0648\u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0648\u064a\u062a\u0645 \u062a\u062e\u0632\u064a\u0646\u0647\u0627 \u0645\u0624\u0642\u062a\u064b\u0627 \u0628\u0648\u0627\u0633\u0637\u0629 \u0627\u0644\u0645\u062a\u0635\u0641\u062d. \u062a\u0639\u0631\u0641 \u0639\u0644\u0649 \u0627\u0644\u0645\u0632\u064a\u062f \u062d\u0648\u0644 \u0641\u0648\u0627\u0626\u062f \u0627\u0644\u0623\u062f\u0627\u0621 \u0641\u064a <a href=\"https:\/\/developers.google.com\/solutions\/content-driven\/frontend\/performance\" target=\"_blank\" rel=\"noopener\" title=\"\">\u0645\u0642\u0627\u0644 \u0645\u0637\u0648\u0631\u064a Google<\/a> \u0647\u0630\u0627. <\/p>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h3 class=\"wp-block-heading\">\u0623\u0645\u062b\u0644\u0629 \u0645\u0646 \u0627\u0644\u0639\u0627\u0644\u0645 \u0627\u0644\u062d\u0642\u064a\u0642\u064a<\/h3>\n\n<h4 class=\"wp-block-heading\">\u062a\u0628\u062f\u064a\u0644 \u0627\u0644\u0648\u0636\u0639 \u0627\u0644\u062f\u0627\u0643\u0646<\/h4>\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"\/><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"\/><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"\/><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>const toggleButton = document.getElementById('theme-toggle');\ntoggleButton.addEventListener('click', function() {\n document.body.classList.toggle('dark-mode');\n});\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">toggleButton<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">getElementById<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #A3BE8C\">theme-toggle<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">toggleButton<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #A3BE8C\">click<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">body<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">classList<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">toggle<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #A3BE8C\">dark-mode<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"\/><\/code><\/pre><\/div>\n\n<p class=\"wp-block-paragraph\">\u0645\u0639 \u0632\u0631 \u0641\u064a HTML:<\/p>\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"\/><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"\/><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"\/><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;button id=\"theme-toggle\"\u062a\u0628\u062f\u064a\u0644 \u0627\u0644\u0648\u0636\u0639 \u0627\u0644\u062f\u0627\u0643\u0646&lt;\/button\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;button<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">id<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #A3BE8C\">theme-toggle<\/span><span style=\"color: #ECEFF4\">\"<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">Toggle Dark Mode<\/span><span style=\"color: #81A1C1\">&lt;\/button&gt;<\/span><\/span>\n<span class=\"line\"\/><\/code><\/pre><\/div>\n\n<p class=\"wp-block-paragraph\">\u0648\u0642\u0627\u0639\u062f\u0629 CSS:<\/p>\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"\/><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"\/><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"\/><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.dark-mode {\n background-color: #222;\n color: #eee;\n}\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #8FBCBB\">dark-mode<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">background-color<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">#<\/span><span style=\"color: #B48EAD\">222<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">#<\/span><span style=\"color: #B48EAD\">eee<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"\/><\/code><\/pre><\/div>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h4 class=\"wp-block-heading\">\u0627\u0644\u062a\u062d\u0642\u0642 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0645\u0646 \u0635\u062d\u0629 \u0627\u0644\u0646\u0645\u0648\u0630\u062c<\/h4>\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"\/><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"\/><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"\/><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>const contactForm = document.getElementById('contact-form');\nconst emailInput = document.getElementById('email');\nconst errorMessage = document.getElementById('error-message');\n\ncontactForm.addEventListener('submit', function(event) {\n if (!emailInput.value.includes('@')) {\n event.preventDefault();\n errorMessage.textContent = '\u0627\u0644\u0631\u062c\u0627\u0621 \u0625\u062f\u062e\u0627\u0644 \u0639\u0646\u0648\u0627\u0646 \u0628\u0631\u064a\u062f \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0635\u0627\u0644\u062d.';\n } else {\n errorMessage.textContent = '';\n }\n});\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">contactForm<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">getElementById<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #A3BE8C\">contact-form<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">emailInput<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">getElementById<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #A3BE8C\">email<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">errorMessage<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">getElementById<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #A3BE8C\">error-message<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"\/>\n<span class=\"line\"><span style=\"color: #D8DEE9\">contactForm<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addEventListener<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #A3BE8C\">submit<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">event<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #81A1C1\">!<\/span><span style=\"color: #D8DEE9\">emailInput<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">value<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">includes<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #A3BE8C\">@<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #D8DEE9FF\">)) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">event<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">preventDefault<\/span><span style=\"color: #D8DEE9FF\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">errorMessage<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">textContent<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #A3BE8C\">Please enter a valid email address.<\/span><span style=\"color: #ECEFF4\">'<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">else<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">errorMessage<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">textContent<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">''<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"\/><\/code><\/pre><\/div>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h3 class=\"wp-block-heading\">\u0623\u0641\u0636\u0644 \u0627\u0644\u0645\u0645\u0627\u0631\u0633\u0627\u062a<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>\u0641\u0636\u0644 <strong>\u0645\u0644\u0641\u0627\u062a <code>.js<\/code> \u062e\u0627\u0631\u062c\u064a\u0629<\/strong> \u0645\u0639 <code>defer<\/code>.<\/li>\n\n\n\n<li>\u0636\u0639 \u0627\u0644\u0646\u0635\u0648\u0635 \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0629 \u0628\u0627\u0644\u0642\u0631\u0628 \u0645\u0646 \u0646\u0647\u0627\u064a\u0629 \u0627\u0644\u0640 <code>&lt;body&gt;<\/code>.<\/li>\n\n\n\n<li>\u0627\u0643\u062a\u0628 \u0648\u0638\u0627\u0626\u0641 \u0648\u0627\u0636\u062d\u0629 \u0648\u0642\u0627\u0628\u0644\u0629 \u0644\u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645.<\/li>\n\n\n\n<li>\u0627\u0633\u062a\u062e\u062f\u0645 <code>console.log()<\/code> \u0644\u062a\u0635\u062d\u064a\u062d \u0627\u0644\u0623\u062e\u0637\u0627\u0621.<\/li>\n\n\n\n<li>\u0627\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0623\u062f\u0648\u0627\u062a \u0627\u0644\u0645\u0637\u0648\u0631 \u0641\u064a \u0627\u0644\u0645\u062a\u0635\u0641\u062d \u0644\u0627\u0633\u062a\u0643\u0634\u0627\u0641 \u0627\u0644\u0623\u062e\u0637\u0627\u0621 \u0648\u0625\u0635\u0644\u0627\u062d\u0647\u0627.<\/li>\n<\/ul>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h3 class=\"wp-block-heading\">\u0627\u0644\u062e\u0627\u062a\u0645\u0629<\/h3>\n\n<p class=\"wp-block-paragraph\">\u0625\u0636\u0627\u0641\u0629 JavaScript \u0625\u0644\u0649 HTML \u0623\u0645\u0631 \u0628\u0633\u064a\u0637 \u0628\u0645\u062c\u0631\u062f \u0645\u0639\u0631\u0641\u0629 \u0627\u0644\u062e\u064a\u0627\u0631\u0627\u062a. \u064a\u0639\u0645\u0644 \u0627\u0644\u062a\u0636\u0645\u064a\u0646 \u0644\u0644\u0639\u0631\u0648\u0636 \u0627\u0644\u062a\u0648\u0636\u064a\u062d\u064a\u0629 \u0627\u0644\u0635\u063a\u064a\u0631\u0629\u060c \u0648\u0644\u0643\u0646 \u0644\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629\u060c \u0627\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0645\u0644\u0641\u0627\u062a \u0627\u0644\u062e\u0627\u0631\u062c\u064a\u0629. \u0642\u0645 \u0628\u062f\u0645\u062c \u0647\u0630\u0627 \u0645\u0639 <code>defer<\/code> \u0648\u0633\u064a\u0643\u0648\u0646 \u0644\u062f\u064a\u0643 \u0645\u0648\u0627\u0642\u0639 \u0648\u064a\u0628 \u0633\u0631\u064a\u0639\u0629 \u0648\u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u0635\u064a\u0627\u0646\u0629 \u0648\u062a\u0641\u0627\u0639\u0644\u064a\u0629.  <\/p>\n\n<p class=\"wp-block-paragraph\">\u0627\u0633\u062a\u0643\u0634\u0641 \u0627\u0644\u0645\u0632\u064a\u062f \u0645\u0646 \u0631\u0624\u0649 \u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0639\u0644\u0649 <a href=\"https:\/\/khaledshs.com\/ar\/%d8%a7%d9%84%d9%85%d8%af%d9%88%d9%86%d8%a9\/\" target=\"_blank\" rel=\"noopener\" title=\"\">https:\/\/khaledshs.com\/blog\/<\/a>.<\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0642\u062f\u0645\u0629 \u0625\u0630\u0627 \u0643\u0646\u062a \u062a\u0628\u062f\u0623 \u0644\u062a\u0648\u0643 \u0641\u064a \u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0648\u064a\u0628\u060c \u0641\u0623\u0648\u0644 \u0645\u0627 \u062a\u062d\u062a\u0627\u062c \u0645\u0639\u0631\u0641\u062a\u0647 \u0647\u0648 \u0643\u064a\u0641\u064a\u0629 \u0625\u0636\u0627\u0641\u0629 JavaScript \u0625\u0644\u0649 HTML. \u062a\u0636\u064a\u0641 JavaScript \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0644\u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628\u2014\u062a\u0645\u0643\u0651\u0646\u0643 \u0645\u0646 \u0627\u0644\u062a\u0639\u0627\u0645\u0644&#8230;<\/p>\n","protected":false},"author":1,"featured_media":920,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[35],"tags":[41,37],"class_list":["post-921","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-35","tag-html","tag-37"],"acf":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/khaledshs.com\/wp-content\/uploads\/2025\/09\/Add-JavaScript-to-HTML-Small.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/posts\/921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/comments?post=921"}],"version-history":[{"count":2,"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/posts\/921\/revisions"}],"predecessor-version":[{"id":924,"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/posts\/921\/revisions\/924"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/media?parent=921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/categories?post=921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/tags?post=921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}