From 9f013cfb7925770e5d1599c36dc4f16a9a345bfb Mon Sep 17 00:00:00 2001 From: Kol1n13 <60143734+Kol1n13@users.noreply.github.com> Date: Tue, 26 Mar 2024 18:58:21 +0500 Subject: [PATCH 1/3] =?UTF-8?q?=D0=92=D0=B5=D1=80=D1=81=D1=82=D0=BA=D0=B0?= =?UTF-8?q?=20=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BD=D0=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 17 ++++++++++++++++- styles.css | 44 +++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 59 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 5e60e40..97e194a 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,21 @@ - +
+

Замыкания в 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..4e45280 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,46 @@ -/* Тут пиши основные стили */ +.all{ + margin-left: 360px; + width: 700px; +} + +.h1{ + font-family:LucidaGrande-Bold; + color:rgba(0,0,0,0.84); + text-align:left; +} + +p{ + font-family:Georgia; + font-size:21px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:33px; + margin-bottom: 55px; +} + +.zmic_head { + font-size:42px; + line-height:44px; + height: 88px; +} + +.grey_t{ + font-family: "Courier New", monospace; + font-size:24px; + color:#333333; + text-align:left; + line-height:36px; + background-color:#f1f1f1; + border-radius: 1px; +} + + +.zmic2{ + font-size:34px; + line-height:39px; + height: 39px; + margin-bottom: 10px; +} @media (max-width: 800px) { From d499ee394b23d7ac35fe128f692ae5085d8cff25 Mon Sep 17 00:00:00 2001 From: bober19 <115493537+Manykeys@users.noreply.github.com> Date: Tue, 26 Mar 2024 18:59:51 +0500 Subject: [PATCH 2/3] header --- .idea/.gitignore | 5 +++++ .idea/article-markup.iml | 12 ++++++++++++ .idea/modules.xml | 8 ++++++++ .idea/vcs.xml | 6 ++++++ index.html | 13 ++++++++++++- styles.css | 36 ++++++++++++++++++++++++++++++------ 6 files changed, 73 insertions(+), 7 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/article-markup.iml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/article-markup.iml b/.idea/article-markup.iml new file mode 100644 index 0000000..24643cc --- /dev/null +++ b/.idea/article-markup.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..8563461 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 5e60e40..ca0b1f1 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,22 @@ + + Практика верстки - + + \ No newline at end of file diff --git a/styles.css b/styles.css index 1cbd2e0..444e016 100644 --- a/styles.css +++ b/styles.css @@ -1,8 +1,32 @@ -/* Тут пиши основные стили */ -@media (max-width: 800px) { -/* Тут пиши стили для мобилки. - Стили применятся только когда страничка будет ≤800px шириной - */ -} \ No newline at end of file +nav.navigationBar { + font-family:LucidaGrande; + font-size:24px; + color:#333333; + text-align:left; + line-height:36px; + background-color:#f1f1f1; +} + +nav.navigationBar li { + display: inline; + height: 36px; + padding: 30px; + font-size: 24px; + color:#333333; + text-align:left; + line-height:36px; +} + +nav.navigationBar li:focus { + color:red; +} + +nav.navigationBar li:hover{ + text-decoration: underline; +} + +.adaptive-margin-left { + margin-left: 3%; +} From bd509a3de2db40ec972a85cd4007f52a544b1898 Mon Sep 17 00:00:00 2001 From: Kol1n13 <60143734+Kol1n13@users.noreply.github.com> Date: Tue, 26 Mar 2024 19:17:47 +0500 Subject: [PATCH 3/3] Mobile --- styles.css | 79 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) diff --git a/styles.css b/styles.css index 33c2831..0bb1800 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,82 @@ +@media (min-width: 800px){ + .all{ + margin-left: 20px; + width: 520px; + } + + .h1{ + font-family:LucidaGrande-Bold; + color:rgba(0,0,0,0.84); + text-align:left; + } + + p{ + font-family:Georgia; + font-size:18px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:22px; + margin-bottom: 25px; + } + + .zmic_head { + font-size:26px; + line-height:28px; + height: 56px; + } + + .grey_t{ + font-family: "Courier New", monospace; + font-size:19px; + color:#333333; + text-align:left; + line-height:24px; + background-color:#f1f1f1; + border-radius: 1px; + } + + + .zmic2{ + font-size:22px; + line-height:39px; + height: 39px; + margin-bottom: 10px; + } + + + nav.navigationBar { + font-family:LucidaGrande; + font-size:24px; + color:#333333; + text-align:left; + line-height:36px; + background-color:#f1f1f1; + } + + nav.navigationBar li { + display: inline; + height: 36px; + padding: 30px; + font-size: 24px; + color:#333333; + text-align:left; + line-height:36px; + } + + nav.navigationBar li:focus { + color:red; + } + + nav.navigationBar li:hover{ + text-decoration: underline; + } + + .adaptive-margin-left { + margin-left: 3%; + } + +} + .all{ margin-left: 360px; width: 700px;