From 775791618a6964e7665523ee88ca4f276ba37541 Mon Sep 17 00:00:00 2001 From: Robert Malikov Date: Tue, 1 Apr 2025 18:23:04 +0500 Subject: [PATCH 1/5] 2 --- index.html | 16 +++++++++++++++- styles.css | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 66 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 5e60e40..4549c52 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,20 @@ - +
+

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

+

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

+ Материал, перевод которого мы публикуем сегодня, посвящён рассказу о внутренних механизмах замыканий и о том, как они работают в 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..4ab1369 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,56 @@ /* Тут пиши основные стили */ +* { + box-sizing: content-box; + margin: 0; +} + +main { + width: 700px; + margin: 0px auto; + margin-bottom: 95px; +} + +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; + + margin-top: 55px; +} + +h2 { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size:34px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:39px; + + margin-top: 55px; + +} + +img { + margin-top: 43px; + margin-bottom: 37px; + width: 700px; +} + +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; + + margin-top: 10px; +} +span { + font-family: "Courier New", monospace; + background-color: #f2f2f2; +} @media (max-width: 800px) { /* Тут пиши стили для мобилки. From 01db0fc5e68b183af51b898c42a2861c61606358 Mon Sep 17 00:00:00 2001 From: Robert Malikov Date: Tue, 1 Apr 2025 19:10:38 +0500 Subject: [PATCH 2/5] 4.1 --- index.html | 9 +++++---- styles.css | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 4549c52..ce5bafd 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ + Практика верстки @@ -16,10 +17,10 @@

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

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

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

-

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

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

- -

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

+

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

+

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

+ +

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

\ No newline at end of file diff --git a/styles.css b/styles.css index 4ab1369..a865957 100644 --- a/styles.css +++ b/styles.css @@ -56,4 +56,36 @@ span { /* Тут пиши стили для мобилки. Стили применятся только когда страничка будет ≤800px шириной */ + main { + width: 100%; + margin: 0px 20px; + } + + h1 { + font-size:26px; + line-height:28px; + + margin-top: 20px; + margin-bottom: 20px; + } + h2 { + font-size:22px; + line-height:39px; + + margin-top: 25px; + } + p { + font-size:18px; + line-height:22px; + + margin-top: 6px; + margin-bottom: 6px; + } + img { + width: 100%; + margin: 25px auto; + } + .to-delete { + display: none; + } } \ No newline at end of file From f06b09ecd6b183c1367d2ed20202021d6a0d9818 Mon Sep 17 00:00:00 2001 From: S4ske Date: Tue, 1 Apr 2025 19:11:18 +0500 Subject: [PATCH 3/5] =?UTF-8?q?4.3=20=D0=B8=204.4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 13 ++++++++++- styles.css | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 73 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index ce5bafd..f02fce5 100644 --- a/index.html +++ b/index.html @@ -5,15 +5,26 @@ Практика верстки + +html/css +

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

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

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

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

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

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

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

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

diff --git a/styles.css b/styles.css index a865957..94af48f 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,42 @@ -/* Тут пиши основные стили */ +.header_point:hover { + text-decoration: underline; + cursor: pointer; +} + +.header_point:active { + color: red; +} + +.header_point { + color:#333333; + font-size:24px; + text-align:left; + line-height:36px; +} + +.header_point_wrapper { + display: inline; + margin: 20px 20px 20px 0; +} + +.header_list { + list-style: none; + background-color: #eeeeee; + border-top: 1px solid black; + border-bottom: 1px solid black; + padding: 20px 38px 20px 38px; + +} + +body { + margin: 0; +} + +.header_image { + height: 10%; + width: 10%; + margin: 10px 38px 10px 38px; +} * { box-sizing: content-box; @@ -53,9 +91,28 @@ span { } @media (max-width: 800px) { -/* Тут пиши стили для мобилки. - Стили применятся только когда страничка будет ≤800px шириной - */ + .header_point_wrapper { + display: table; + margin: 5px 20px 5px 0; + } + + main { + margin: 0 auto 95px; + } + + .header_list { + list-style: none; + background-color: #eeeeee; + border-top: 1px solid black; + border-bottom: 1px solid black; + padding: 10px 20px 10px 20px; + } + + .header_image { + height: 15%; + width: 15%; + margin: 10px 38px 10px 20px; + } main { width: 100%; margin: 0px 20px; From 2c94377b6fe6490939e57d4e5ec1a071b0ceec08 Mon Sep 17 00:00:00 2001 From: Robert Malikov Date: Tue, 1 Apr 2025 19:12:48 +0500 Subject: [PATCH 4/5] final fix --- styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles.css b/styles.css index 94af48f..31ce994 100644 --- a/styles.css +++ b/styles.css @@ -114,7 +114,7 @@ span { margin: 10px 38px 10px 20px; } main { - width: 100%; + width: calc(100% - 40px); margin: 0px 20px; } From 863fde4729c3118ed09aec932e3675884c0eb89c Mon Sep 17 00:00:00 2001 From: Robert Malikov Date: Tue, 1 Apr 2025 19:16:47 +0500 Subject: [PATCH 5/5] final final fix --- styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/styles.css b/styles.css index 31ce994..7e48ada 100644 --- a/styles.css +++ b/styles.css @@ -9,6 +9,7 @@ .header_point { color:#333333; + font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size:24px; text-align:left; line-height:36px;