From 61dbbb84407d8042c2d27e5a0d7fb417286d2c1d Mon Sep 17 00:00:00 2001 From: Ilona Kazantseva Date: Tue, 31 Mar 2026 20:26:04 +0500 Subject: [PATCH 1/4] =?UTF-8?q?=D0=BD=D0=B0=D0=B3=D0=BE=D0=B2=D0=BD=D0=BE?= =?UTF-8?q?=D0=BA=D0=BE=D0=B4=D0=B8=D0=BB=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .idea/.gitignore | 10 ++++++++ .idea/article-markup.iml | 8 +++++++ .idea/encodings.xml | 4 ++++ .idea/modules.xml | 8 +++++++ .idea/vcs.xml | 6 +++++ index.html | 50 ++++++++++++++++++++++++++++++++++++++- styles.css | 51 +++++++++++++++++++++++++++++++++++++--- 7 files changed, 133 insertions(+), 4 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/article-markup.iml create mode 100644 .idea/encodings.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..ab1f416 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,10 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Ignored default folder with query files +/queries/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/article-markup.iml b/.idea/article-markup.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/.idea/article-markup.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/encodings.xml b/.idea/encodings.xml new file mode 100644 index 0000000..df87cf9 --- /dev/null +++ b/.idea/encodings.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..8563461 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 5e60e40..7de1ce4 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,54 @@ - +
+

Замыкания в JavaScript для начинающих

+

Замыкания — это одна из фундаментальных концепций JavaScript, вызывающая сложности у многих + новичков, знать и + понимать которую должен каждый JS-программист. Хорошо разобравшись с замыканиями, вы сможете писать более + качественный, эффективный и чистый код. А это, в свою очередь, будет способствовать вашему профессиональному + росту.
+
+ Материал, перевод которого мы публикуем сегодня, посвящён рассказу о внутренних механизмах замыканий и о том, + как + они работают в JavaScript-программах. +

+

Что такое замыкание?

+

Замыкание — это функция, у которой есть доступ к области видимости, сформированной внешней + по отношению к ней + функции даже после того, как эта внешняя функция завершила работу. Это значит, что в замыкании могут храниться + переменные, объявленные во внешней функции и переданные ей аргументы. Прежде чем мы перейдём, собственно, к + замыканиям, разберёмся с понятием «лексическое окружение». +

+

Что такое лексическое окружение?

+

Понятие «лексическое окружение» или «статическое окружение» в JavaScript относится к + возможности доступа к + переменным, функциям и объектам на основе их физического расположения в исходном коде. Рассмотрим пример: +

+
+ image1 +
+

Здесь у функции inner() есть доступ к переменным, объявленным в её собственной + области + видимости, в области + видимости функции outer() и в глобальной области видимости. Функция outer() имеет + доступ к переменным, + объявленным в её собственной области видимости и в глобальной области видимости. +
+
+ Цепочка областей видимости вышеприведённого кода будет выглядеть так: +

+
+ image2 +
+

Обратите внимание на то, что функция inner()окружена лексическим окружением + функциb outer(), которая, в свою + очередь, окружена глобальной областью видимости. Именно поэтому функция inner() может получить + доступ к + переменным, объявленным в функции outer() и в глобальной области видимости. +

+
\ No newline at end of file diff --git a/styles.css b/styles.css index 1cbd2e0..8d5788a 100644 --- a/styles.css +++ b/styles.css @@ -1,8 +1,53 @@ + /* Тут пиши основные стили */ +.article { + width: 700px; + margin: 55px auto 0; +} +.article-title { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size:42px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:44px; + margin-bottom: 10px; +} + +.article-subheading { + font-family:LucidaGrande-Bold; + font-size:34px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:39px; + +} +img{ + display: block; + max-width: 100%; + height: auto; +} +.article-text { + font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 21px; + margin-bottom: 43px; + line-height: 33px; +} + +code { + font-family: "Courier New", monospace; + font-size: 21px; + background-color: #f2f2f2; + color: rgba(0, 0, 0, 0.84); + text-align: left; + line-height: 33px; +} +h1, h2, p { + margin: 0; +} @media (max-width: 800px) { -/* Тут пиши стили для мобилки. - Стили применятся только когда страничка будет ≤800px шириной - */ + /* Тут пиши стили для мобилки. + Стили применятся только когда страничка будет ≤800px шириной + */ } \ No newline at end of file From 9fecff62416e0358fde4b9eb1d839aae6d608d3f Mon Sep 17 00:00:00 2001 From: Ilona Kazantseva Date: Tue, 31 Mar 2026 20:29:17 +0500 Subject: [PATCH 2/4] =?UTF-8?q?=D0=BD=D0=B0=D0=B3=D0=BE=D0=B2=D0=BD=D0=BE?= =?UTF-8?q?=D0=BA=D0=BE=D0=B4=D0=B8=D0=BB=D0=B02?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 11 +++++------ styles.css | 28 +++++++++++++++++----------- 2 files changed, 22 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 7de1ce4..f6cc5a2 100644 --- a/index.html +++ b/index.html @@ -12,9 +12,9 @@

Замыкания в JavaScript для начинаю новичков, знать и понимать которую должен каждый JS-программист. Хорошо разобравшись с замыканиями, вы сможете писать более качественный, эффективный и чистый код. А это, в свою очередь, будет способствовать вашему профессиональному - росту.
-
- Материал, перевод которого мы публикуем сегодня, посвящён рассказу о внутренних механизмах замыканий и о том, + росту.

+

Материал, перевод которого мы публикуем сегодня, посвящён рассказу о внутренних механизмах + замыканий и о том, как они работают в JavaScript-программах.

@@ -40,9 +40,8 @@

Что такое лексическое окру видимости функции outer() и в глобальной области видимости. Функция outer() имеет доступ к переменным, объявленным в её собственной области видимости и в глобальной области видимости. -
-
- Цепочка областей видимости вышеприведённого кода будет выглядеть так: +

+

Цепочка областей видимости вышеприведённого кода будет выглядеть так:

Date: Tue, 31 Mar 2026 20:38:24 +0500 Subject: [PATCH 3/4] 3 --- index.html | 14 ++++++++++++++ styles.css | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 68 insertions(+) diff --git a/index.html b/index.html index f6cc5a2..434b23b 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,20 @@ +
+ + +

Замыкания в JavaScript для начинающих

Замыкания — это одна из фундаментальных концепций JavaScript, вызывающая сложности у многих diff --git a/styles.css b/styles.css index acb3f9b..51fe8d1 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,58 @@ /* Тут пиши основные стили */ +.site-header { + background-color: #f5f5f5; + padding: 38px 10px; +} + +.logo { + margin-bottom: 30px; +} + +.logo img { + width: 97px; + height: 64px; + display: block; +} + +.main-nav ul { + list-style: none; + display: flex; + gap: 30px; + margin: 0; + padding: 0; +} + +.main-nav li a { + font-size: 24px; + color: #333333; + line-height: 36px; + text-decoration: none; + position: relative; +} + +.main-nav li a:hover { + text-decoration: underline; +} + +.main-nav li.active a { + color: #d0021b; +} + +.main-nav li a:hover::after { + content: ''; + display: block; + position: absolute; + + width: 23px; + height: 24px; + + top: 50%; + left: 50%; + + background-image: url('https://i.pinimg.com/736x/81/38/98/813898f735d24e906e27de6352e300e6.jpg'); + background-size: 100% 100%; + pointer-events: none; +} .article { width: 700px; margin: 55px auto 0; From f156a990f663004625d2b20b057da1d276d5fb29 Mon Sep 17 00:00:00 2001 From: Ilona Kazantseva Date: Tue, 31 Mar 2026 20:40:30 +0500 Subject: [PATCH 4/4] =?UTF-8?q?=D0=BC=D0=BE=D0=B1=D0=B8=D0=BB=D0=BA=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles.css | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/styles.css b/styles.css index 51fe8d1..5e68eeb 100644 --- a/styles.css +++ b/styles.css @@ -107,7 +107,29 @@ h1, h2, p { } @media (max-width: 800px) { - /* Тут пиши стили для мобилки. - Стили применятся только когда страничка будет ≤800px шириной - */ + article{ + width: auto; + margin: 24px 16px 0; + } + + .article-title { + font-size: 32px; + line-height: 36px; + margin-bottom: 16px; + } + + .article-text { + font-size: 18px; + line-height: 28px; + margin-bottom: 28px; + } + + figure{ + margin: 24px 0; + } + + code{ + font-size: 18px; + line-height: 28px; + } } \ No newline at end of file