From 11c877aa55ae10aacb96a7d9d296c3be3240c38d Mon Sep 17 00:00:00 2001 From: factor-feerist Date: Tue, 26 Mar 2024 16:18:53 +0300 Subject: [PATCH 1/5] first steps in verstka --- index.html | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 5e60e40..a82d8ac 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,29 @@ - +
+

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

+

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

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

+

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

+

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

+

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

+

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

+ +

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

+ +

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

+
\ No newline at end of file From 1611fa81c82e5abb9ed06ff8745d4b808a68c8e4 Mon Sep 17 00:00:00 2001 From: Alexey_Dzhevello Date: Tue, 26 Mar 2024 18:48:26 +0500 Subject: [PATCH 2/5] second task made --- index.html | 4 ++-- styles.css | 45 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 47 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index a82d8ac..84ddd9d 100644 --- a/index.html +++ b/index.html @@ -20,12 +20,12 @@

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

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

- +

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

- +

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

diff --git a/styles.css b/styles.css index 1cbd2e0..f3719ce 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,50 @@ /* Тут пиши основные стили */ +.page { + margin: 55px 364px 94px 360px; +} + +.page h1 { + color:rgba(0,0,0,0.84); + text-align:left; + line-height:44px; + font-size: 42px; + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + margin-top: 55px; + margin-bottom: 10px; +} + +.page h2 { + font-size: 34px; + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:39px; + margin-top: 55px; + margin-bottom: 10px; +} + +.page code { + background-color: #eee; + border-radius: 3px; + padding: 0 3px; + font-family: "Courier New", monospace; +} + +.page p { + font-size: 21px; + font-family: Georgia, Cambria, "Times New Roman", Times, serif; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:33px; + margin-top: 10px; + margin-bottom: 43px; +} + +/* h2 { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; +} */ + @media (max-width: 800px) { /* Тут пиши стили для мобилки. From b88cd1e2f2b7e52fa707018c63f9c95ce7a54eb1 Mon Sep 17 00:00:00 2001 From: factor-feerist Date: Tue, 26 Mar 2024 17:34:01 +0300 Subject: [PATCH 3/5] 3rd task done --- index.html | 14 ++++++++++++++ styles.css | 35 ++++++++++++++++++++++++++++++++--- 2 files changed, 46 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 84ddd9d..eedf9a4 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,20 @@ +
+ +
+ +
+

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

diff --git a/styles.css b/styles.css index f3719ce..5844905 100644 --- a/styles.css +++ b/styles.css @@ -41,9 +41,38 @@ margin-bottom: 43px; } -/* h2 { - font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; -} */ +.shapka .menu ul { + list-style: none; + background-color: rgb(250, 249, 248); + border-top-style: solid; + border-top-color: rgb(151, 151, 151); + border-bottom-style: solid; + border-bottom-color: rgb(151, 151, 151); + margin-right: 0px; + margin-left: 0px; + display: flex; + justify-content: flex-start; + flex-direction: row; + gap: 30px; +} + +.shapka .menu ul li { + font-family:LucidaGrande; + font-size:24px; + color:#333333; + text-align:left; + line-height:36px; + margin-top: 20px; + margin-bottom: 20px; +} + +.shapka .menu a:hover { + text-decoration: underline; +} + +#blog{ + color: red; +} @media (max-width: 800px) { From a6aa81907e2b78f2e4a45a92359906bddcf2993c Mon Sep 17 00:00:00 2001 From: Alexey_Dzhevello Date: Tue, 26 Mar 2024 19:37:22 +0500 Subject: [PATCH 4/5] 4th task --- styles.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/styles.css b/styles.css index 5844905..9b86466 100644 --- a/styles.css +++ b/styles.css @@ -79,4 +79,9 @@ /* Тут пиши стили для мобилки. Стили применятся только когда страничка будет ≤800px шириной */ + + .page { + margin: 55px 36px 94px 36px; + } + } \ No newline at end of file From 0c13a62ffddf2a64faa113857fe9e42b7ec70d55 Mon Sep 17 00:00:00 2001 From: factor-feerist Date: Tue, 26 Mar 2024 17:39:12 +0300 Subject: [PATCH 5/5] final adjustments --- styles.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/styles.css b/styles.css index 9b86466..68bb2a5 100644 --- a/styles.css +++ b/styles.css @@ -84,4 +84,8 @@ margin: 55px 36px 94px 36px; } + img { + scale: 0.75; + } + } \ No newline at end of file