From 19f9f41b2b244524743160f52bb0d240f04c198f Mon Sep 17 00:00:00 2001 From: dabbl Date: Tue, 1 Apr 2025 18:13:20 +0500 Subject: [PATCH 1/5] add verstka --- index.html | 15 ++++++++++++++- styles.css | 33 ++++++++++++++++++++++++++++++++- 2 files changed, 46 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 5e60e40..944dbbc 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,19 @@ - +

Замыкания в 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..0af1e44 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,35 @@ -/* Тут пиши основные стили */ +h1 { + font-family:LucidaGrande-Bold; + font-size:42px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:44px; +} + +h2 { + font-family:LucidaGrande-Bold; + font-size:34px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:39px; +} +p { + font-family:Georgia; + font-size:21px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:33px; +} + +code { + font-family: "Courier New", monospace; + background: #ecefed; +} + +img { + margin-top: 43px; + margin-bottom: 37px; +} @media (max-width: 800px) { From c89820667ca3ae15431de48535653d7d92156207 Mon Sep 17 00:00:00 2001 From: dabbl Date: Tue, 1 Apr 2025 18:15:30 +0500 Subject: [PATCH 2/5] add test margin-left margin-right --- styles.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/styles.css b/styles.css index 0af1e44..eec40d3 100644 --- a/styles.css +++ b/styles.css @@ -4,6 +4,8 @@ h1 { color:rgba(0,0,0,0.84); text-align:left; line-height:44px; + margin-left: 362px; + margin-right: 361px; } h2 { @@ -12,6 +14,8 @@ h2 { color:rgba(0,0,0,0.84); text-align:left; line-height:39px; + margin-left: 362px; + margin-right: 361px; } p { font-family:Georgia; @@ -19,6 +23,8 @@ p { color:rgba(0,0,0,0.84); text-align:left; line-height:33px; + margin-left: 362px; + margin-right: 361px; } code { @@ -29,6 +35,8 @@ code { img { margin-top: 43px; margin-bottom: 37px; + margin-left: 362px; + margin-right: 361px; } From 59fc0c18d6cdffe1050ebd938e5881069281721e Mon Sep 17 00:00:00 2001 From: dabbl Date: Tue, 1 Apr 2025 18:46:27 +0500 Subject: [PATCH 3/5] adaptive --- index.html | 4 ++-- styles.css | 59 +++++++++++++++++++++++++++++++++++++++++------------- 2 files changed, 47 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 944dbbc..677011e 100644 --- a/index.html +++ b/index.html @@ -15,10 +15,10 @@

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

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

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

- +

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

- +

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

\ No newline at end of file diff --git a/styles.css b/styles.css index eec40d3..c95d965 100644 --- a/styles.css +++ b/styles.css @@ -4,8 +4,7 @@ h1 { color:rgba(0,0,0,0.84); text-align:left; line-height:44px; - margin-left: 362px; - margin-right: 361px; + margin: 55px 25.5% 10px 25.2%; } h2 { @@ -14,8 +13,7 @@ h2 { color:rgba(0,0,0,0.84); text-align:left; line-height:39px; - margin-left: 362px; - margin-right: 361px; + margin: 56px 25.5% 10px 25.2%; } p { font-family:Georgia; @@ -23,8 +21,8 @@ p { color:rgba(0,0,0,0.84); text-align:left; line-height:33px; - margin-left: 362px; - margin-right: 361px; + margin-left: 25.4%; + margin-right: 25.4%; } code { @@ -32,16 +30,49 @@ code { background: #ecefed; } -img { - margin-top: 43px; - margin-bottom: 37px; - margin-left: 362px; - margin-right: 361px; +.main-img { + margin: 43px 25.4% 37px 25.4%; } @media (max-width: 800px) { -/* Тут пиши стили для мобилки. - Стили применятся только когда страничка будет ≤800px шириной - */ + h1 { + font-family:LucidaGrande-Bold; + font-size:26px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:28px; + margin-top: 25px; + margin-bottom: 6px; + margin-left: 3.5%; + margin-right: 3.5%; + } + + h2 { + font-family:LucidaGrande-Bold; + font-size:22px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:39px; + margin-left: 3.5%; + margin-right: 3.5%; + } + p { + font-family:Georgia; + font-size:18px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:22px; + margin-left: 3.5%; + margin-right: 3.5%; + } + + code { + font-family: "Courier New", monospace; + background: #ecefed; + } + + .main-img { + margin: 25px 3.5%; + } } \ No newline at end of file From ce52af21e830350d827b3374fec2bb8460a4314e Mon Sep 17 00:00:00 2001 From: dabbl Date: Tue, 1 Apr 2025 18:51:01 +0500 Subject: [PATCH 4/5] fix adaptive --- styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/styles.css b/styles.css index c95d965..b3a9f97 100644 --- a/styles.css +++ b/styles.css @@ -74,5 +74,6 @@ code { .main-img { margin: 25px 3.5%; + width: 100%; } } \ No newline at end of file From c79ae84f1ed3887157d1dddbac53e5ded3fa9cc9 Mon Sep 17 00:00:00 2001 From: Maxim <78272312+Minetoff@users.noreply.github.com> Date: Tue, 1 Apr 2025 19:13:22 +0500 Subject: [PATCH 5/5] final --- index.html | 12 +++++++++ styles.css | 73 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 83 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 677011e..e80451b 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,18 @@ +
+ + +

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

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

diff --git a/styles.css b/styles.css index b3a9f97..0944761 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,7 @@ +html, body { + margin: 0; +} + h1 { font-family:LucidaGrande-Bold; font-size:42px; @@ -32,9 +36,57 @@ code { .main-img { margin: 43px 25.4% 37px 25.4%; + width: 50%; +} + + +nav { + background-color: #ecefed; +} + +header img { + margin: 10px 0 10px 38px; +} + +nav { + border: 1px black solid; + margin: 0 0 0 0; + border-left: none; + border-right: none; +} + +nav ul { + list-style: none; + +} + +nav ul li { + display: inline; + font-family: LucidaGrande, serif; + font-size: 24px; + color: #333333; + text-align: left; + line-height: 36px; + margin-right: 30px; + text-decoration: none; +} + +li a { + text-decoration: none; + color: black; +} + +li a:hover { + text-decoration: underline; +} + +a:visited { + color: red; } + + @media (max-width: 800px) { h1 { font-family:LucidaGrande-Bold; @@ -73,7 +125,24 @@ code { } .main-img { - margin: 25px 3.5%; - width: 100%; + margin: 25px 3.5% 25px 3.5%; + width: 92%; + + } + + header img { + margin: 10px 0 10px 38px; + } + + nav ul { + padding-left: 25px; + } + + nav ul li { + display: block; + font-size:20px; + text-align:left; + line-height:25px; + margin-bottom: 5px; } } \ No newline at end of file