From f8f714e6dbe7fd952ba022e40e877a31065b63ce Mon Sep 17 00:00:00 2001 From: PurpleCat404 Date: Tue, 1 Apr 2025 16:43:08 +0500 Subject: [PATCH 1/2] =?UTF-8?q?=D0=A1=D0=B2=D0=B5=D1=80=D1=81=D1=82=D0=B0?= =?UTF-8?q?=D0=BB=20=D0=BF=D1=83=D0=BD=D0=BA=D1=82=202?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .idea/.gitignore | 8 + .idea/article-markup.iml | 12 ++ .idea/inspectionProfiles/Project_Default.xml | 153 +++++++++++++++++++ .idea/modules.xml | 8 + .idea/vcs.xml | 6 + index.html | 16 +- styles.css | 26 ++++ 7 files changed, 228 insertions(+), 1 deletion(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/article-markup.iml create mode 100644 .idea/inspectionProfiles/Project_Default.xml 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..13566b8 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml 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/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..9fe7945 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,153 @@ + + + + \ 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..6869fb8 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,20 @@ - +
+

Замыкания в 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..ef9d597 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,31 @@ /* Тут пиши основные стили */ +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; +} + +h1 { + font-size:42px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:44px; +} + +h2 { + font-size:34px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:39px; +} + +h1, h2 { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif +} + @media (max-width: 800px) { /* Тут пиши стили для мобилки. From 544a2fdccba2bdb4264eda7bf9f4854065634e9d Mon Sep 17 00:00:00 2001 From: PurpleCat404 Date: Tue, 1 Apr 2025 17:40:52 +0500 Subject: [PATCH 2/2] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B8=D0=B2=D0=B0=D0=BD?= =?UTF-8?q?=D0=B8=D0=B5=20=D0=BF=D1=83=D0=BD=D0=BA=D1=82=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 46 +++++++++------ styles.css | 169 +++++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 179 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index 6869fb8..1ffb4db 100644 --- a/index.html +++ b/index.html @@ -5,21 +5,31 @@ Практика верстки - -
-

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

-

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

-

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

-

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

-

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

-

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

- Код, связанный с лексическим окружением -

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

- Код с цепочкой областей -

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

-
- - \ No newline at end of file + + Логотип + +
+

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

+

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

+

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

+

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

+

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

+

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

+ Код, связанный с лексическим окружением +

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

+ Код с цепочкой областей +

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

+
+ + diff --git a/styles.css b/styles.css index ef9d597..cc49f62 100644 --- a/styles.css +++ b/styles.css @@ -1,34 +1,167 @@ -/* Тут пиши основные стили */ +body { + margin: 0; + padding: 0; + justify-content: center; +} + +.content { + max-width: 800px; + margin: 0 auto; +} 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; + font-size: 21px; + line-height: 33px; +} + +p + h2 { + margin-top: 55px; } h1 { - font-size:42px; - color:rgba(0,0,0,0.84); - text-align:left; - line-height:44px; + font-size: 42px; + line-height: 44px; } h2 { - font-size:34px; - color:rgba(0,0,0,0.84); - text-align:left; - line-height:39px; + font-size: 34px; + line-height: 39px; } h1, h2 { - font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; +} + +img { + width: 100%; + height: auto; + margin: 20px 0; +} + +.im { + width: 97px; + height: 64px; + padding: 0 37px; +} + +.blog{ + color: red; +} + +nav{ + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size:24px; + color:#333333; + text-align:left; + line-height:36px; + border: 1px solid black +} + +nav li a:hover { + text-decoration: underline; + cursor: url('responsive-design/2744EFD6-B878-4DCB-B0D5-526F1B233733/9E1721B2-E123-44D1-BBA7-88E713A6A184@1x.png'), auto; +} + +nav li a { + text-decoration: none; } +nav li{ + list-style: none; + padding: 0 30px; +} + +nav ul{ + display: flex; +} +code{ + font-family: "Courier New", monospace; + background-color: lightgray +} + +/* Стили для мобилки */ @media (max-width: 800px) { -/* Тут пиши стили для мобилки. - Стили применятся только когда страничка будет ≤800px шириной - */ -} \ No newline at end of file + body { + padding: 0 10px; + } + + .content { + padding: 20px 0; + } + + h1 { + font-size: 30px; + line-height: 36px; + } + + h2 { + font-size: 24px; + line-height: 30px; + } + + p { + font-size: 18px; + line-height: 28px; + } + + nav { + font-size: 20px; + text-align: center; + border: none; + } + + nav ul { + flex-direction: column; + align-items: center; + padding: 0; + } + + nav li { + padding: 10px 0; + } + + .im { + width: 70px; + height: auto; + padding: 0; + } + + img { + margin: 10px 0; + } + + nav { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size: 24px; + color: #333333; + text-align: left; + line-height: 36px; + border: 1px solid black; + padding: 10px; + } + + nav ul { + display: flex; + flex-direction: column; /* вертикально */ + padding: 0; + margin: 0; + } + + nav li { + list-style: none; + padding: 8px 0; + text-align: left; + } + + nav li a { + text-decoration: none; + color: inherit; + } + + nav li a:hover { + text-decoration: underline; + } + +}