From 131e8bd6a2e1ecfb8e2fe4961865e9d04c3b0a0b Mon Sep 17 00:00:00 2001 From: Ortem08 <72299038+Ortem08@users.noreply.github.com> Date: Tue, 26 Mar 2024 18:05:56 +0500 Subject: [PATCH 1/6] =?UTF-8?q?Index=20=D0=BD=D0=B0=D0=BA=D0=B8=D0=B4?= =?UTF-8?q?=D0=B0=D0=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 5e60e40..5d79f4c 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,24 @@ - +

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

+ +

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

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

+ +

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

+

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

+ +

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

+

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

+ + Лексическое окружение фото + +

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

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

+ + Цепочка областей видимости фото + +

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

\ No newline at end of file From bd9a1692db0c5691b837a1ba02c5b80823acab54 Mon Sep 17 00:00:00 2001 From: VladimirLezhnin <115662980+VladimirLezhnin@users.noreply.github.com> Date: Tue, 26 Mar 2024 18:17:26 +0500 Subject: [PATCH 2/6] some u know css shit &&& --- index.html | 4 ++-- styles.css | 31 +++++++++++++++++++++++++++++++ 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 5d79f4c..0e13ed2 100644 --- a/index.html +++ b/index.html @@ -19,11 +19,11 @@

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

Лексическое окружение фото -

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

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

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

Цепочка областей видимости фото -

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

+

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

\ No newline at end of file diff --git a/styles.css b/styles.css index 1cbd2e0..2fc23a7 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,35 @@ /* Тут пиши основные стили */ +h1 { + font-family:LucidaGrande-Bold; + font-size:42px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:44px; +} + +p { + font-family:Georgia; + font-size:21px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:33px; +} + +h2 { + font-family:LucidaGrande-Bold; + font-size:34px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:39px; +} + +code { + background-color: #eee; + border-radius: 3px; + font-family: courier, monospace; + padding: 0 3px; + } + @media (max-width: 800px) { From 10ce2f6e135082c914cb7806e86fb308cf315c19 Mon Sep 17 00:00:00 2001 From: Ortem08 <72299038+Ortem08@users.noreply.github.com> Date: Tue, 26 Mar 2024 18:32:57 +0500 Subject: [PATCH 3/6] =?UTF-8?q?css=20=D0=BF=D0=BE=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=B8=D0=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 4 ++-- styles.css | 35 +++++++++++++++++++++++++++++------ 2 files changed, 31 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 0e13ed2..bb2d168 100644 --- a/index.html +++ b/index.html @@ -17,12 +17,12 @@

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

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

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

- Лексическое окружение фото + Лексическое окружение фото

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

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

- Цепочка областей видимости фото + Цепочка областей видимости фото

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

diff --git a/styles.css b/styles.css index 2fc23a7..ae79c4f 100644 --- a/styles.css +++ b/styles.css @@ -1,26 +1,49 @@ /* Тут пиши основные стили */ h1 { font-family:LucidaGrande-Bold; + width: 700px; font-size:42px; color:rgba(0,0,0,0.84); text-align:left; line-height:44px; + margin: auto; +} + +h2 { + width: 700px; + font-family:LucidaGrande-Bold; + font-size:34px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:39px; + margin: auto; } p { font-family:Georgia; + width: 700px; font-size:21px; color:rgba(0,0,0,0.84); text-align:left; line-height:33px; + margin: 25px auto; } -h2 { - font-family:LucidaGrande-Bold; - font-size:34px; - color:rgba(0,0,0,0.84); - text-align:left; - line-height:39px; + +.img1 { + width: 700px; + height: 727px; + display: block; + margin-left: auto; + margin-right: auto; +} + +.img2 { + width: 700px; + height: 923px; + display: block; + margin-left: auto; + margin-right: auto; } code { From d7c7dbff7d9bbc50d491f2643b1d9a0ff2bb3c75 Mon Sep 17 00:00:00 2001 From: VladimirLezhnin <115662980+VladimirLezhnin@users.noreply.github.com> Date: Tue, 26 Mar 2024 19:24:13 +0500 Subject: [PATCH 4/6] shapka desktop --- index.html | 13 +++++++++++++ styles.css | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 60 insertions(+) diff --git a/index.html b/index.html index bb2d168..3043088 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,20 @@ Практика верстки + + +

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

Замыкания — это одна из фундаментальных концепций JavaScript, вызывающая сложности у многих новичков, знать и понимать которую должен каждый JS-программист. Хорошо разобравшись с замыканиями, вы сможете писать более качественный, эффективный и чистый код. А это, в свою очередь, будет способствовать вашему профессиональному росту. diff --git a/styles.css b/styles.css index ae79c4f..73d9055 100644 --- a/styles.css +++ b/styles.css @@ -19,6 +19,53 @@ h2 { margin: auto; } +.blogButton { + color: red; +} + +.Logo { + margin-left: 38px; + width: 97px; + height: 64px; + margin-top: 10px; +} + +.firstButton { + margin-left: 38px; +} + +ul li:hover { + text-decoration: underline; + cursor: pointer; +} + + +ul { + list-style-type: none; + padding: 10px; + background-color: lightgrey; + height: 60px; + text-align: center; + width: 100%; + border-top: solid #333333; + border-bottom: solid #333333; + display: flex; + flex-direction: row; + justify-content: flex-start; + gap: 30px; +} + + +li { + font-family:LucidaGrande; + font-size:24px; + color:#333333; + text-align:left; + line-height:36px; + margin-top: auto; + margin-bottom: auto; +} + p { font-family:Georgia; width: 700px; From c100b5576670b577c77a5f6e5e06c062cb5ab483 Mon Sep 17 00:00:00 2001 From: Ortem08 <72299038+Ortem08@users.noreply.github.com> Date: Tue, 26 Mar 2024 19:24:53 +0500 Subject: [PATCH 5/6] css adaptive --- styles.css | 72 ++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 59 insertions(+), 13 deletions(-) diff --git a/styles.css b/styles.css index 73d9055..a3c6410 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,5 @@ -/* Тут пиши основные стили */ h1 { - font-family:LucidaGrande-Bold; + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; width: 700px; font-size:42px; color:rgba(0,0,0,0.84); @@ -10,13 +9,13 @@ h1 { } h2 { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; width: 700px; - font-family:LucidaGrande-Bold; font-size:34px; color:rgba(0,0,0,0.84); text-align:left; line-height:39px; - margin: auto; + margin: 55px auto 10px auto; } .blogButton { @@ -67,7 +66,7 @@ li { } p { - font-family:Georgia; + font-family: Georgia, Cambria, "Times New Roman", Times, serif; width: 700px; font-size:21px; color:rgba(0,0,0,0.84); @@ -81,16 +80,14 @@ p { width: 700px; height: 727px; display: block; - margin-left: auto; - margin-right: auto; + margin: 43px auto 37px auto; } .img2 { width: 700px; height: 923px; display: block; - margin-left: auto; - margin-right: auto; + margin: 43px auto 37px auto; } code { @@ -98,12 +95,61 @@ code { border-radius: 3px; font-family: courier, monospace; padding: 0 3px; - } +} @media (max-width: 800px) { -/* Тут пиши стили для мобилки. - Стили применятся только когда страничка будет ≤800px шириной - */ + h1 { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + width: 520px; + font-size:26px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:28px; + margin: 20px auto 20px auto; + } + + h2 { + 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; + width: 520px; + margin: 25px auto 6px auto; + } + + p { + 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; + width: 520px; + margin: auto; + } + + + .img1 { + width: 100%; + height: 100%; + display: block; + margin: 25px auto 25px auto; + } + + .img2 { + width: 100%; + height: 100%; + display: block; + margin: 25px auto 25px auto; + } + + code { + background-color: #eee; + border-radius: 3px; + font-family: courier, monospace; + padding: 0 3px; + } + } \ No newline at end of file From 2681b8a503f55e2e79a6c3def617b125782a6859 Mon Sep 17 00:00:00 2001 From: Ortem08 <72299038+Ortem08@users.noreply.github.com> Date: Tue, 26 Mar 2024 19:36:12 +0500 Subject: [PATCH 6/6] css adaptive full --- styles.css | 51 +++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 49 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index a3c6410..f3a96d8 100644 --- a/styles.css +++ b/styles.css @@ -56,7 +56,7 @@ ul { li { - font-family:LucidaGrande; + font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size:24px; color:#333333; text-align:left; @@ -130,7 +130,6 @@ code { margin: auto; } - .img1 { width: 100%; height: 100%; @@ -152,4 +151,52 @@ code { padding: 0 3px; } + .blogButton { + color: red; + } + + .Logo { + margin-left: 20px; + width: 97px; + height: 64px; + margin-top: 10px; + } + + .firstButton { + margin-left: 20px; + } + + ul li:hover { + text-decoration: underline; + cursor: pointer; + } + + + ul { + list-style-type: none; + padding: 10px; + margin: 0; + background-color: lightgrey; + height: 210px; + text-align: center; + width: 100%; + border-top: solid #333333; + border-bottom: solid #333333; + display: flex; + flex-direction: column; + justify-content: flex-start; + gap: 0 + } + + + li { + font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-size:20px; + color:#333333; + text-align:left; + line-height:25px; + margin-left: 20px; + } + + } \ No newline at end of file