From 73f250e1902d0a36a962c866a2318e66e6857306 Mon Sep 17 00:00:00 2001 From: Elizaveta Vinogradova Date: Tue, 31 Mar 2026 20:03:40 +0500 Subject: [PATCH 1/8] sdaf --- index.html | 28 +++++++++++++++++++++++++++- styles.css | 15 +++++++++++++++ 2 files changed, 42 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 5e60e40..e9f09f8 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,32 @@ - +

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

+

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

+

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

+

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

+

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

+

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

+ +

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

+ +

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

\ No newline at end of file diff --git a/styles.css b/styles.css index 1cbd2e0..17ee1b3 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,21 @@ /* Тут пиши основные стили */ +.text_header{ + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + color: rgba(0,0,0,0.84); + text-align: left; +} +.text_block{ + font-family: Georgia, Cambria, "Times New Roman", Times, serif; + color:rgba(0,0,0,0.84); + text-align:left; +} + +.text_code{ + font-family: "Courier New", monospace; + display: inline-block; +} @media (max-width: 800px) { /* Тут пиши стили для мобилки. Стили применятся только когда страничка будет ≤800px шириной From 763f0803b7fcf5812d5fc76a48a452230d417bb1 Mon Sep 17 00:00:00 2001 From: Elizaveta Vinogradova Date: Tue, 31 Mar 2026 20:35:09 +0500 Subject: [PATCH 2/8] sadfdsa --- index.html | 13 +++++++------ styles.css | 15 ++++++++++++++- 2 files changed, 21 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index e9f09f8..2eb9356 100644 --- a/index.html +++ b/index.html @@ -10,19 +10,20 @@

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

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

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

-

+

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

-

+

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

-

+

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

-

+

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

пиздец @@ -31,7 +32,7 @@

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

пиздец1 -

+

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

\ No newline at end of file diff --git a/styles.css b/styles.css index 17ee1b3..ff92a0d 100644 --- a/styles.css +++ b/styles.css @@ -4,17 +4,30 @@ font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; color: rgba(0,0,0,0.84); text-align: left; + width: 700px; + padding-bottom: 10px; + padding-left: 360px; + padding-right: 363px; + padding-top: 55px; } .text_block{ font-family: Georgia, Cambria, "Times New Roman", Times, serif; color:rgba(0,0,0,0.84); text-align:left; + width: 700px; + padding-left: 362px; + padding-right: 361px; } .text_code{ font-family: "Courier New", monospace; - display: inline-block; + width: 700px; +} + +.big-break { + display: block; + margin-bottom: 20px; } @media (max-width: 800px) { /* Тут пиши стили для мобилки. From 38a0c9c35ce7e99d8774168ad7c1adf7a489d628 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A2=D0=B8=D0=BC=D1=83=D1=80=20=D0=A4=D0=B0=D0=B9=D0=B7?= =?UTF-8?q?=D1=83=D0=BB=D0=BB=D0=B8=D0=BD?= Date: Tue, 31 Mar 2026 20:35:47 +0500 Subject: [PATCH 3/8] 3 --- index.html | 11 +++++++++++ styles.css | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 57 insertions(+) diff --git a/index.html b/index.html index e9f09f8..ea7470a 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,19 @@ Практика верстки + + +
+ +

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

diff --git a/styles.css b/styles.css index 17ee1b3..fb126c1 100644 --- a/styles.css +++ b/styles.css @@ -5,7 +5,53 @@ color: rgba(0,0,0,0.84); text-align: left; } +.menu { + border-top: 2px solid #ccc; + border-bottom: 2px solid #ccc; + background: #faf9f8; + padding: 15px 0; + margin-top: 20px; +} + +.menu ul { + display: flex; + justify-content: flex-start; + gap: 30px; + list-style: none; + margin: 0; + padding: 0; + font-family: LucidaGrande, sans-serif; + font-size: 24px; + color: #d0021b; + text-align: left; + line-height: 36px; +} +.menu a { + color: black; + text-decoration: none; + font-size: 24px; +} +.menu .active { + color: red; + font-weight: bold; +} +.menu a:hover { + text-decoration: underline; +} +ul { + font-family:LucidaGrande; + font-size:24px; + color:#333333; + text-align:left; + line-height:36px; + display: flex; + gap: 30px; + list-style: none; +} +nav { + +} .text_block{ font-family: Georgia, Cambria, "Times New Roman", Times, serif; color:rgba(0,0,0,0.84); From 2d3aed6cdd38a56a71751e188687bd6e23e1d19f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A2=D0=B8=D0=BC=D1=83=D1=80=20=D0=A4=D0=B0=D0=B9=D0=B7?= =?UTF-8?q?=D1=83=D0=BB=D0=BB=D0=B8=D0=BD?= Date: Tue, 31 Mar 2026 20:39:08 +0500 Subject: [PATCH 4/8] done 3 + 2 --- styles.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/styles.css b/styles.css index bd4cfa8..d045bbf 100644 --- a/styles.css +++ b/styles.css @@ -14,7 +14,7 @@ border-top: 2px solid #ccc; border-bottom: 2px solid #ccc; background: #faf9f8; - padding: 15px 0; + padding: 5px 0; margin-top: 20px; } @@ -23,13 +23,13 @@ justify-content: flex-start; gap: 30px; list-style: none; - margin: 0; padding: 0; font-family: LucidaGrande, sans-serif; font-size: 24px; color: #d0021b; text-align: left; - line-height: 36px; + line-height: 30px; + margin-left: 20px; } .menu a { From 4b119361c4af869ad64721f9d4d5f1e05a3fd9ba Mon Sep 17 00:00:00 2001 From: Elizaveta Vinogradova Date: Tue, 31 Mar 2026 20:46:28 +0500 Subject: [PATCH 5/8] fix --- index.html | 11 +++++------ styles.css | 49 ++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 47 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 4f63016..0aa663d 100644 --- a/index.html +++ b/index.html @@ -24,17 +24,16 @@

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

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

-

+

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

-

+

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

-

+

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

-

+

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

пиздец @@ -43,7 +42,7 @@

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

пиздец1 -

+

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

\ No newline at end of file diff --git a/styles.css b/styles.css index d045bbf..cd923d1 100644 --- a/styles.css +++ b/styles.css @@ -71,12 +71,47 @@ nav { width: 700px; } -.big-break { - display: block; - margin-bottom: 20px; -} + @media (max-width: 800px) { -/* Тут пиши стили для мобилки. - Стили применятся только когда страничка будет ≤800px шириной - */ + + .text_header { + width: 100%; + padding: 20px 15px; + font-size: 22px; + } + + .text_block { + width: 100%; + padding: 15px; + font-size: 16px; + line-height: 1.5; + } + + .text_code { + width: 100%; + padding: 15px; + font-size: 16px; + line-height: 1.5; + } + + .menu ul { + flex-direction: column; + gap: 10px; + margin-left: 0; + padding: 10px; + } + + .menu a { + font-size: 18px; + } + + ul { + flex-direction: column; + gap: 10px; + font-size: 18px; + } + + .menu { + padding: 10px 0; + } } \ No newline at end of file From 3969d1c23b3e7ac12dba3779d523b029b0379b38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A2=D0=B8=D0=BC=D1=83=D1=80=20=D0=A4=D0=B0=D0=B9=D0=B7?= =?UTF-8?q?=D1=83=D0=BB=D0=BB=D0=B8=D0=BD?= Date: Tue, 31 Mar 2026 20:47:29 +0500 Subject: [PATCH 6/8] huy --- styles.css | 45 ++++++++++++++++++++++++++------------------- 1 file changed, 26 insertions(+), 19 deletions(-) diff --git a/styles.css b/styles.css index d045bbf..8f385ff 100644 --- a/styles.css +++ b/styles.css @@ -1,15 +1,4 @@ /* Тут пиши основные стили */ - -.text_header{ - font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; - color: rgba(0,0,0,0.84); - text-align: left; - width: 700px; - padding-bottom: 10px; - padding-left: 360px; - padding-right: 363px; - padding-top: 55px; -} .menu { border-top: 2px solid #ccc; border-bottom: 2px solid #ccc; @@ -54,21 +43,39 @@ ul { gap: 30px; list-style: none; } -nav { - +.text_header { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + color: rgba(0,0,0,0.84); + text-align: left; + width: 700px; + padding-left: 360px; + padding-right: 363px; + padding-top: 55px; + padding-bottom: 10px; + margin: 0; } -.text_block{ + +.text_block { font-family: Georgia, Cambria, "Times New Roman", Times, serif; - color:rgba(0,0,0,0.84); - text-align:left; + color: rgba(0,0,0,0.84); + text-align: left; width: 700px; padding-left: 362px; - padding-right: 361px; + padding-right: 362px; + margin: 0 0 55px 0; } -.text_code{ +.text_code { font-family: "Courier New", monospace; - width: 700px; + background-color: #f4f4f4; + padding: 2px 4px; + border-radius: 3px; +} + +img { + display: block; + margin-left: 362px; + max-width: 700px; } .big-break { From 8aeffc38ac643ac8ac9241ff08d2ac461b12a0a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A2=D0=B8=D0=BC=D1=83=D1=80=20=D0=A4=D0=B0=D0=B9=D0=B7?= =?UTF-8?q?=D1=83=D0=BB=D0=BB=D0=B8=D0=BD?= Date: Tue, 31 Mar 2026 20:52:02 +0500 Subject: [PATCH 7/8] done --- index.html | 2 +- styles.css | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 0aa663d..6978913 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - +
  • Обо мне
    • diff --git a/styles.css b/styles.css index 7d34cba..d0c3d10 100644 --- a/styles.css +++ b/styles.css @@ -73,9 +73,11 @@ ul { } img { - display: block; margin-left: 362px; - max-width: 700px; +} + +.html { + margin-left: 0px; } From 22dd1937d3bd069fa5ddcc0d5dc2b58228b21f95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A2=D0=B8=D0=BC=D1=83=D1=80=20=D0=A4=D0=B0=D0=B9=D0=B7?= =?UTF-8?q?=D1=83=D0=BB=D0=BB=D0=B8=D0=BD?= Date: Tue, 31 Mar 2026 20:53:38 +0500 Subject: [PATCH 8/8] bl --- styles.css | 1 - 1 file changed, 1 deletion(-) diff --git a/styles.css b/styles.css index d0c3d10..b423f50 100644 --- a/styles.css +++ b/styles.css @@ -50,7 +50,6 @@ ul { width: 700px; padding-left: 360px; padding-right: 363px; - padding-top: 55px; padding-bottom: 10px; margin: 0; }