From 3bd3c7cfbdf4547c15bdcc4b83b9dcac7b5aeb83 Mon Sep 17 00:00:00 2001 From: AltyngulBiktasheva Date: Tue, 26 Mar 2024 18:04:26 +0500 Subject: [PATCH 01/20] add css styles --- styles.css | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index 1cbd2e0..a4b6a54 100644 --- a/styles.css +++ b/styles.css @@ -1,8 +1,22 @@ -/* Тут пиши основные стили */ +.articleTitle { + font-family:LucidaGrande-Bold; + font-size:42px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:44px; +} +.content { + font-family:Georgia; + font-size:21px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:33px; +} @media (max-width: 800px) { /* Тут пиши стили для мобилки. Стили применятся только когда страничка будет ≤800px шириной */ -} \ No newline at end of file +} + From 44d77272f6c5b22e8aa23e6e0bedd707029b9282 Mon Sep 17 00:00:00 2001 From: Vearsmon Date: Tue, 26 Mar 2024 18:05:41 +0500 Subject: [PATCH 02/20] Add html --- index.html | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 5e60e40..ba9c934 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,18 @@ - +

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

+ +

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

+ +

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

\ No newline at end of file From 31d14ab22f13b7f81ee414b2b537f3ae2d1538e4 Mon Sep 17 00:00:00 2001 From: Vearsmon Date: Tue, 26 Mar 2024 18:20:31 +0500 Subject: [PATCH 03/20] Update html --- index.html | 58 ++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 45 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index ba9c934..8f6c2ea 100644 --- a/index.html +++ b/index.html @@ -6,18 +6,50 @@ -

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

- -

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

- -

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

+
+

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ + + +

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

+ +

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

+
\ No newline at end of file From 1eaff58e713c1467bf23c8f0b08b47700501eaa9 Mon Sep 17 00:00:00 2001 From: AltyngulBiktasheva Date: Tue, 26 Mar 2024 18:21:40 +0500 Subject: [PATCH 04/20] change article and content ff --- styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index a4b6a54..44d370a 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,5 @@ .articleTitle { - font-family:LucidaGrande-Bold; + 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; @@ -7,7 +7,7 @@ } .content { - font-family:Georgia; + font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size:21px; color:rgba(0,0,0,0.84); text-align:left; From 6a14803b369b4ff1757f21d167ce767805a6f4d9 Mon Sep 17 00:00:00 2001 From: Dmitriy Smirnov Date: Tue, 26 Mar 2024 18:28:49 +0500 Subject: [PATCH 05/20] =?UTF-8?q?=D1=86=D0=B5=D0=BD=D1=82=D1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles.css | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/styles.css b/styles.css index a4b6a54..f2444b3 100644 --- a/styles.css +++ b/styles.css @@ -1,17 +1,25 @@ .articleTitle { - font-family:LucidaGrande-Bold; - font-size:42px; - color:rgba(0,0,0,0.84); - text-align:left; - line-height:44px; + font-family: LucidaGrande-Bold; + font-size: 42px; + color: rgba(0,0,0,0.84); + text-align: left; + line-height: 44px; + margin-bottom: 10px; } .content { - font-family:Georgia; - font-size:21px; - color:rgba(0,0,0,0.84); - text-align:left; - line-height:33px; + font-family: Georgia; + font-size: 21px; + color: rgba(0,0,0,0.84); + text-align: left; + line-height: 33px; + margin-bottom: 10px; + margin-left: 2px; +} + +.feed { + width: 700px; + margin: 0 auto; } @media (max-width: 800px) { From cd9abf39cb3830278d005e1db4ccf6ada5154968 Mon Sep 17 00:00:00 2001 From: Vearsmon Date: Tue, 26 Mar 2024 18:29:16 +0500 Subject: [PATCH 06/20] update html --- index.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/index.html b/index.html index 8f6c2ea..fad3d88 100644 --- a/index.html +++ b/index.html @@ -50,6 +50,12 @@

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

+ + + +

+ Обратите внимание на то, что функция inner() окружена лексическим окружением функции outer(), которая, в свою очередь, окружена глобальной областью видимости. Именно поэтому функция inner() может получить доступ к переменным, объявленным в функции outer() и в глобальной области видимости. + \ No newline at end of file From 4005ff07ca1118b914733a89379d9a5404f0fc46 Mon Sep 17 00:00:00 2001 From: Dmitriy Smirnov Date: Tue, 26 Mar 2024 18:39:07 +0500 Subject: [PATCH 07/20] add title --- styles.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/styles.css b/styles.css index 93649d2..a7fa3ae 100644 --- a/styles.css +++ b/styles.css @@ -7,6 +7,15 @@ margin-bottom: 10px; } +.title { + 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: 34px; + margin-bottom: 10px; +} + .content { font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; From f5ac5800f8f5c935f3c6495bd31a84a3d76a5633 Mon Sep 17 00:00:00 2001 From: Dmitriy Smirnov Date: Tue, 26 Mar 2024 18:39:18 +0500 Subject: [PATCH 08/20] titul --- styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles.css b/styles.css index a7fa3ae..bf97a6f 100644 --- a/styles.css +++ b/styles.css @@ -12,7 +12,7 @@ font-size: 34px; color: rgba(0,0,0,0.84); text-align: left; - line-height: 34px; + line-height: 39px; margin-bottom: 10px; } From 80504615f548c750c8c5387f05a2aa7ec6da959d Mon Sep 17 00:00:00 2001 From: Vearsmon Date: Tue, 26 Mar 2024 18:39:24 +0500 Subject: [PATCH 09/20] update html --- index.html | 30 ++++++++++++++++++++++-------- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index fad3d88..f8323f1 100644 --- a/index.html +++ b/index.html @@ -14,37 +14,48 @@

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

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

-

+

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

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

-

+

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

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

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

@@ -54,7 +65,10 @@

- Обратите внимание на то, что функция inner() окружена лексическим окружением функции outer(), которая, в свою очередь, окружена глобальной областью видимости. Именно поэтому функция inner() может получить доступ к переменным, объявленным в функции outer() и в глобальной области видимости. + Обратите внимание на то, что функция inner() окружена лексическим окружением функции + outer(), которая, в свою очередь, окружена глобальной областью видимости. + Именно поэтому функция inner() может получить доступ к переменным, объявленным + в функции outer() и в глобальной области видимости. From 5335c8d9deee690fcb0bb87b512ccc8affc4b0c3 Mon Sep 17 00:00:00 2001 From: AltyngulBiktasheva Date: Tue, 26 Mar 2024 18:41:01 +0500 Subject: [PATCH 10/20] add highlighted --- styles.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/styles.css b/styles.css index 93649d2..f2fa028 100644 --- a/styles.css +++ b/styles.css @@ -22,6 +22,15 @@ margin: 0 auto; } +.code { + border-left: 3px solid red; + background-color: #ffffe0; + padding-left: 10px; + margin: 5px 0; + box-shadow: 5px 5px 15px -5px #000000; +} + + @media (max-width: 800px) { /* Тут пиши стили для мобилки. Стили применятся только когда страничка будет ≤800px шириной From f41efabea8c074455a133236cca09fdf052cf399 Mon Sep 17 00:00:00 2001 From: AltyngulBiktasheva Date: Tue, 26 Mar 2024 18:47:11 +0500 Subject: [PATCH 11/20] the best highlighted adding --- styles.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/styles.css b/styles.css index e10fe30..89d6a5b 100644 --- a/styles.css +++ b/styles.css @@ -32,11 +32,10 @@ } .code { - border-left: 3px solid red; - background-color: #ffffe0; + font-family: "Courier New", monospace; + background-color: #f2f2f2; padding-left: 10px; margin: 5px 0; - box-shadow: 5px 5px 15px -5px #000000; } From ec5e27ae19b6c2708d7c5b04942f7d1fbad1f550 Mon Sep 17 00:00:00 2001 From: Dmitriy Smirnov Date: Tue, 26 Mar 2024 18:50:14 +0500 Subject: [PATCH 12/20] 123 --- styles.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/styles.css b/styles.css index 89d6a5b..e5b7c23 100644 --- a/styles.css +++ b/styles.css @@ -34,8 +34,7 @@ .code { font-family: "Courier New", monospace; background-color: #f2f2f2; - padding-left: 10px; - margin: 5px 0; + padding: 1px; } From 2466bff56e3e775106c5cf8455e8ba08277f8627 Mon Sep 17 00:00:00 2001 From: Vearsmon Date: Tue, 26 Mar 2024 18:54:40 +0500 Subject: [PATCH 13/20] Add header --- index.html | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/index.html b/index.html index f8323f1..b1c584d 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,16 @@ Практика верстки + +

From dd5262cc8908824d4f7f6f01f32251c74230dc1d Mon Sep 17 00:00:00 2001 From: Dmitriy Smirnov Date: Tue, 26 Mar 2024 19:02:42 +0500 Subject: [PATCH 14/20] add stype --- styles.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/styles.css b/styles.css index e5b7c23..2cba128 100644 --- a/styles.css +++ b/styles.css @@ -37,6 +37,25 @@ padding: 1px; } +nav { + background-color: #faf9f8; + border-style: solid; + border-color: black; + border-left: 1px; + border-right: 1px; +} + +ul { + list-style: none; + margin: 0; + padding: 4px; +} + +ul li { + display: inline; + margin-right: 5px; + padding: 3px; +} @media (max-width: 800px) { /* Тут пиши стили для мобилки. From 21b2cacdce763161ae799e58b82c3dbf66cbf055 Mon Sep 17 00:00:00 2001 From: Vearsmon Date: Tue, 26 Mar 2024 19:02:53 +0500 Subject: [PATCH 15/20] update header --- index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index b1c584d..d76496f 100644 --- a/index.html +++ b/index.html @@ -6,11 +6,11 @@ From b77e66075db877b12ea4cbb2ad83e0ea32fe23c0 Mon Sep 17 00:00:00 2001 From: Dmitriy Smirnov Date: Tue, 26 Mar 2024 19:09:24 +0500 Subject: [PATCH 16/20] site --- styles.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/styles.css b/styles.css index 2cba128..8f74b55 100644 --- a/styles.css +++ b/styles.css @@ -52,9 +52,25 @@ ul { } ul li { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; display: inline; margin-right: 5px; padding: 3px; + font-size: 21px; + color: rgba(0,0,0,0.84); +} + +a { + text-decoration: none; + color: black; +} + +a:hover { + text-decoration: underline; +} + +ul li .current { + color: #d0021b; } @media (max-width: 800px) { From 899577f8f7cb0ba6759f440df25dd4981683ff07 Mon Sep 17 00:00:00 2001 From: AltyngulBiktasheva Date: Tue, 26 Mar 2024 19:11:13 +0500 Subject: [PATCH 17/20] add mobile version --- styles.css | 37 ++++++++++++++++++++++++++++++++++--- 1 file changed, 34 insertions(+), 3 deletions(-) diff --git a/styles.css b/styles.css index 8f74b55..aecc457 100644 --- a/styles.css +++ b/styles.css @@ -74,8 +74,39 @@ ul li .current { } @media (max-width: 800px) { -/* Тут пиши стили для мобилки. - Стили применятся только когда страничка будет ≤800px шириной - */ + .articleTitle { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size:26px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:28px; + } + + .title { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size:22px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:39px; + } + + .content { + font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-size:18px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:22px; + } + + .feed { + width: 520px; + margin: 0 auto; + } + + .code { + font-family: "Courier New", monospace; + background-color: #f2f2f2; + padding: 1px; + } } From a208035a09c14d0a6f07599d1ddc7f87432cf0cf Mon Sep 17 00:00:00 2001 From: Vearsmon Date: Tue, 26 Mar 2024 19:19:27 +0500 Subject: [PATCH 18/20] update --- index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index d76496f..164278c 100644 --- a/index.html +++ b/index.html @@ -79,7 +79,9 @@ outer(), которая, в свою очередь, окружена глобальной областью видимости. Именно поэтому функция inner() может получить доступ к переменным, объявленным в функции outer() и в глобальной области видимости. - +

+
+
\ No newline at end of file From a4a66431ab1e81119de3540872bb6be4ff74d65d Mon Sep 17 00:00:00 2001 From: Dmitriy Smirnov Date: Tue, 26 Mar 2024 19:22:05 +0500 Subject: [PATCH 19/20] footer --- styles.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/styles.css b/styles.css index aecc457..fa48314 100644 --- a/styles.css +++ b/styles.css @@ -73,6 +73,10 @@ ul li .current { color: #d0021b; } +footer { + height: 95px; +} + @media (max-width: 800px) { .articleTitle { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; From 40132272a217be82f0d11c1f55fa2ce9cd809d9d Mon Sep 17 00:00:00 2001 From: AltyngulBiktasheva Date: Tue, 26 Mar 2024 19:35:25 +0500 Subject: [PATCH 20/20] full mobile version --- styles.css | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/styles.css b/styles.css index aecc457..398b0ac 100644 --- a/styles.css +++ b/styles.css @@ -108,5 +108,52 @@ ul li .current { background-color: #f2f2f2; padding: 1px; } + + nav { + background-color: #faf9f8; + border-style: solid; + border-color: #e7e7e7; + border-width: 0; + border-top-width: 1px; + border-bottom-width: 1px; + + } + + ul { + list-style: none; + padding: 0; + margin: 0; + } + + ul li { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size: 21px; + color: rgba(0,0,0,0.84); + border-bottom: 1px dashed #e7e7e7; + display: block; + border: none; + } + + ul li:last-child { + border-bottom: none; + } + + a { + text-decoration: none; + color: black; + display: block; + } + + a:hover { + text-decoration: underline; + background-color: #f2f2f2; + } + + ul li .current { + color: #d0021b; + font-weight: bold; + pointer-events: none; + } + }