From 06dfc7f6762fa9b25f4966961fc055eca9e6369c Mon Sep 17 00:00:00 2001 From: belozerov-yaroslav Date: Tue, 1 Apr 2025 18:00:06 +0500 Subject: [PATCH 1/9] init --- index.html | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 5e60e40..900f590 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,23 @@ - +
+

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

+

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

+

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

+
+
+

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

+

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

+
+
+

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

+

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

+ +

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

+

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

+ +

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

+
\ No newline at end of file From a217e6521b7d5c3a63315dd092200efdc822e17a Mon Sep 17 00:00:00 2001 From: ILYA Date: Tue, 1 Apr 2025 18:05:39 +0500 Subject: [PATCH 2/9] =?UTF-8?q?=D1=86=D0=B5=D0=BD=D1=82=D1=80=D0=B8=D1=80?= =?UTF-8?q?=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20=D1=82=D0=B5=D0=BA=D1=81?= =?UTF-8?q?=D1=82=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/styles.css b/styles.css index 1cbd2e0..672403f 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,9 @@ /* Тут пиши основные стили */ - +article { + margin: auto; + text-align: left; + width: 700px; +} @media (max-width: 800px) { /* Тут пиши стили для мобилки. From ef04d5e103806ac5a9b9ae1c3dfd8afadcb8277e Mon Sep 17 00:00:00 2001 From: belozerov-yaroslav Date: Tue, 1 Apr 2025 18:08:11 +0500 Subject: [PATCH 3/9] pupupu --- styles.css | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/styles.css b/styles.css index 672403f..6be5d8d 100644 --- a/styles.css +++ b/styles.css @@ -4,6 +4,27 @@ article { text-align: left; width: 700px; } +article > p { + font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-size:21px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:33px; +} + +article > h1 { + 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; +} + +article > p > code { + font-family: "Courier New", monospace; + background-color: gray; +} + @media (max-width: 800px) { /* Тут пиши стили для мобилки. From 3afe4ec7beb577ebfee4d8217b0753953de40d4a Mon Sep 17 00:00:00 2001 From: ILYA Date: Tue, 1 Apr 2025 18:14:35 +0500 Subject: [PATCH 4/9] 123 --- styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/styles.css b/styles.css index 6be5d8d..d158561 100644 --- a/styles.css +++ b/styles.css @@ -3,6 +3,7 @@ article { margin: auto; text-align: left; width: 700px; + margin-bottom: 25px; } article > p { font-family: Georgia, Cambria, "Times New Roman", Times, serif; From 62e8079304d88ff17ab0238cae2a980b8093af5c Mon Sep 17 00:00:00 2001 From: belozerov-yaroslav Date: Tue, 1 Apr 2025 18:16:13 +0500 Subject: [PATCH 5/9] smth --- styles.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/styles.css b/styles.css index d158561..ea602da 100644 --- a/styles.css +++ b/styles.css @@ -11,6 +11,8 @@ article > p { color:rgba(0,0,0,0.84); text-align:left; line-height:33px; + margin-top: 0; + margin-bottom: 30px; } article > h1 { @@ -19,6 +21,7 @@ article > h1 { color:rgba(0,0,0,0.84); text-align:left; line-height:44px; + margin-bottom: 10px; } article > p > code { From ff8ee84f065af8e7bd82a81abb94c8b03136a23a Mon Sep 17 00:00:00 2001 From: belozerov-yaroslav Date: Tue, 1 Apr 2025 18:21:57 +0500 Subject: [PATCH 6/9] 3 prototype --- index.html | 10 ++++++++++ styles.css | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 900f590..33976b3 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,16 @@ + +

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

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

diff --git a/styles.css b/styles.css index ea602da..ac97e74 100644 --- a/styles.css +++ b/styles.css @@ -3,7 +3,7 @@ article { margin: auto; text-align: left; width: 700px; - margin-bottom: 25px; + margin-bottom: 55px; } article > p { font-family: Georgia, Cambria, "Times New Roman", Times, serif; From cf63699eb81cee1f48580c80695926104754c63b Mon Sep 17 00:00:00 2001 From: ILYA Date: Tue, 1 Apr 2025 18:32:21 +0500 Subject: [PATCH 7/9] 43fef --- styles.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/styles.css b/styles.css index ac97e74..3e64db3 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,18 @@ /* Тут пиши основные стили */ +nav > ul > li{ + background-color: #d2d0d0; + list-style: none inside; + display: inline; + font-family:LucidaGrande; + font-size:24px; + color:#333333; + text-align:left; + line-height:36px; + margin-right: 30px; +} +nav > ul{ + background-color: #d2d0d0; +} article { margin: auto; text-align: left; From de2c2e2a451c10e94b0761924ff4110ebd6f88a2 Mon Sep 17 00:00:00 2001 From: belozerov-yaroslav Date: Tue, 1 Apr 2025 18:39:13 +0500 Subject: [PATCH 8/9] pc ready --- index.html | 4 ++-- styles.css | 25 ++++++++++++++++++++++--- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 33976b3..a76a5ae 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,13 @@ - diff --git a/styles.css b/styles.css index 3e64db3..9155e6d 100644 --- a/styles.css +++ b/styles.css @@ -1,9 +1,11 @@ /* Тут пиши основные стили */ +body { + margin: 0; +} nav > ul > li{ - background-color: #d2d0d0; list-style: none inside; display: inline; - font-family:LucidaGrande; + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-size:24px; color:#333333; text-align:left; @@ -11,7 +13,11 @@ nav > ul > li{ margin-right: 30px; } nav > ul{ - background-color: #d2d0d0; + background-color: #FAF9F8; + padding: 20px 38px; + border: solid; + border-width: 1px; + width: 100%; } article { margin: auto; @@ -43,6 +49,19 @@ article > p > code { background-color: gray; } +nav > img { + margin: 10px 38px; +} + +a:hover { + text-decoration-line: underline; + cursor: url("responsive-design/E8E9A56B-53B7-494E-BE52-747EE607EC62/5301AFFB-CEE8-43FC-8F06-FB9785DF6E4A@1x.png"), auto; +} + +.red-link { + color: red; +} + @media (max-width: 800px) { /* Тут пиши стили для мобилки. From 0e08f62688b2d6b02248a6d79e662dcd38d99039 Mon Sep 17 00:00:00 2001 From: belozerov-yaroslav Date: Tue, 1 Apr 2025 19:05:55 +0500 Subject: [PATCH 9/9] done --- index.html | 9 +++++---- styles.css | 46 +++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 46 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index a76a5ae..4ee527c 100644 --- a/index.html +++ b/index.html @@ -4,16 +4,17 @@ Практика верстки +
diff --git a/styles.css b/styles.css index 9155e6d..9bd0fdf 100644 --- a/styles.css +++ b/styles.css @@ -16,6 +16,7 @@ nav > ul{ background-color: #FAF9F8; padding: 20px 38px; border: solid; + border-left: none; border-width: 1px; width: 100%; } @@ -46,25 +47,60 @@ article > h1 { article > p > code { font-family: "Courier New", monospace; - background-color: gray; + background-color: #F2F2F2; } nav > img { margin: 10px 38px; } +a { + color: black; + text-decoration-line: none; +} + a:hover { text-decoration-line: underline; cursor: url("responsive-design/E8E9A56B-53B7-494E-BE52-747EE607EC62/5301AFFB-CEE8-43FC-8F06-FB9785DF6E4A@1x.png"), auto; } -.red-link { +a:visited { color: red; } @media (max-width: 800px) { -/* Тут пиши стили для мобилки. - Стили применятся только когда страничка будет ≤800px шириной - */ + + nav > img { + margin: 10px 20px; + } + + nav > ul > li{ + list-style: none inside; + display: block; + font-size: 20px; + } + nav > ul { + padding: 15px 20px; + margin-top: 0; + } + article > h1 { + font-size: 26px; + line-height: 120%; + margin-bottom: 20px; + margin-top: 0; + } + article { + width: 520px; + margin-bottom: 0; + } + article > p { + line-height: 120%; + font-size: 18px; + margin-bottom: ; + } + + article > img { + width: 520px; + } } \ No newline at end of file