From 1fcb5033feed5ed2bf90e82d49ee432f156af2c3 Mon Sep 17 00:00:00 2001 From: Pirantel Date: Thu, 2 May 2024 20:10:16 +0500 Subject: [PATCH 1/4] 2 --- index.html | 25 ++++++++++++++++++++++++- styles.css | 45 ++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 68 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 5e60e40..946c51e 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 diff --git a/styles.css b/styles.css index 1cbd2e0..0a73258 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,47 @@ -/* Тут пиши основные стили */ +img{ + margin-left: 362px; + width: 700px; +} + +code{ + font-family: "Courier New", monospace; + background-color: #F2F2F2; +} + +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; + width: 700px; + margin-left: 362px; +} + +.header-main{ + box-sizing: border-box; + width: 700px; + height: 88px; + font-size:42px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:44px; + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + margin-top: 50px; + margin-left: 360px; + font-weight: 700; +} + +.header-secondary { + 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: 33px; + font-weight: 700; + margin-left: 360px; + margin-top: 55px; +} @media (max-width: 800px) { From de97be4fa65aae2e7453cdfe6a1401ce2c36a4a8 Mon Sep 17 00:00:00 2001 From: Pirantel Date: Thu, 2 May 2024 20:12:06 +0500 Subject: [PATCH 2/4] fixed header --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 946c51e..a92aa92 100644 --- a/index.html +++ b/index.html @@ -7,8 +7,8 @@
-
Замыкания в JavaScript для начинающих
+
Замыкания в JavaScript для начинающих

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

Материал, перевод которого мы публикуем сегодня, посвящён рассказу о внутренних механизмах замыканий и о том, как они работают в JavaScript-программах. From 003e29198eed4d2c328ebab7e2e15a45d24dab21 Mon Sep 17 00:00:00 2001 From: Pirantel Date: Thu, 2 May 2024 20:55:25 +0500 Subject: [PATCH 3/4] 3 --- index.html | 10 ++++++++++ styles.css | 44 ++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 50 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index a92aa92..71eb16f 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,16 @@

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

diff --git a/styles.css b/styles.css index 0a73258..5b1cc3b 100644 --- a/styles.css +++ b/styles.css @@ -1,14 +1,14 @@ -img{ +img { margin-left: 362px; width: 700px; } -code{ +code { font-family: "Courier New", monospace; background-color: #F2F2F2; } -p{ +p { font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size:21px; color:rgba(0,0,0,0.84); @@ -18,7 +18,7 @@ p{ margin-left: 362px; } -.header-main{ +.header-main { box-sizing: border-box; width: 700px; height: 88px; @@ -43,6 +43,42 @@ p{ margin-top: 55px; } +.logo { + width: 97px; + height: 64px; + margin: 10px 0 10px 38px; +} + +nav ul { + list-style-type: none; + padding-right: 38px; + margin: 0; + background-color: #faf9f8; + height: 80px; + border-top: 1px solid; + border-bottom: 1px solid; + line-height: 80px; +} + +nav ul li { + display: inline-block; + font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-size:24px; + color:#333333; + text-align:left; + line-height:36px; + margin-right: 30px; +} + +nav ul li:hover{ + text-decoration: underline; + cursor: url("/responsive-design/2744EFD6-B878-4DCB-B0D5-526F1B233733/9E1721B2-E123-44D1-BBA7-88E713A6A184@1x.png"), pointer; +} + +nav ul li:visited{ + color: red; +} + @media (max-width: 800px) { /* Тут пиши стили для мобилки. From ff46c67930a3fd5a0d9525926dc03cc555bdb2f9 Mon Sep 17 00:00:00 2001 From: Pirantel Date: Thu, 2 May 2024 21:34:53 +0500 Subject: [PATCH 4/4] 4 --- styles.css | 113 +++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 87 insertions(+), 26 deletions(-) diff --git a/styles.css b/styles.css index 5b1cc3b..46ca6a8 100644 --- a/styles.css +++ b/styles.css @@ -1,21 +1,21 @@ img { - margin-left: 362px; - width: 700px; + margin-left: 362px; + width: 700px; } code { - font-family: "Courier New", monospace; - background-color: #F2F2F2; + font-family: "Courier New", monospace; + background-color: #F2F2F2; } 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; - width: 700px; - margin-left: 362px; + 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; + width: 700px; + margin-left: 362px; } .header-main { @@ -27,20 +27,19 @@ p { text-align:left; line-height:44px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; - margin-top: 50px; - margin-left: 360px; - font-weight: 700; + margin: 50px 0 0 360px; + font-weight: 700; } .header-secondary { - 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: 33px; - font-weight: 700; - margin-left: 360px; - margin-top: 55px; + 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: 33px; + font-weight: 700; + margin-left: 360px; + margin-top: 55px; } .logo { @@ -72,7 +71,7 @@ nav ul li { nav ul li:hover{ text-decoration: underline; - cursor: url("/responsive-design/2744EFD6-B878-4DCB-B0D5-526F1B233733/9E1721B2-E123-44D1-BBA7-88E713A6A184@1x.png"), pointer; + cursor: url("responsive-design\\E8E9A56B-53B7-494E-BE52-747EE607EC62\\5301AFFB-CEE8-43FC-8F06-FB9785DF6E4A@1x.png"), pointer; } nav ul li:visited{ @@ -81,7 +80,69 @@ nav ul li:visited{ @media (max-width: 800px) { -/* Тут пиши стили для мобилки. - Стили применятся только когда страничка будет ≤800px шириной - */ + .header-main { + width: 520px; + height: 56px; + font-size:28px; + color:rgba(0,0,0,0.84); + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + margin: 20px 0 20px 20px; + line-height: 28px; + } + + .header-secondary { + width: 520px; + height: 39px; + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size: 26px; + color: rgba(0, 0, 0, 0.84); + margin: 25px 0 6px 20px; + line-height: 39px; + } + + p { + font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-size:18px; + color:rgba(0,0,0,0.84); + margin: 0 20px 0 20px; + line-height: 22px; + } + + img { + margin: 0 20px 0 20px; + width: 520px; + height: 540px; + } + + code { + font-family: "Courier New", monospace; + background-color: #F2F2F2; + } + + .logo { + width: 101px; + height: 64px; + margin: 10px 0 0 20px; + } + + nav ul { + list-style-type: none; + margin: 0; + padding: 0 0 0 20px; + background-color: #faf9f8; + height: 80px; + border-top: 1px solid; + border-bottom: 1px solid; + height: 203px; + } + + header nav ul li { + font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 20px; + color: #333333; + display: block; + margin: 10px 0 10px 0; + line-height: 25px; + width: auto; + } } \ No newline at end of file