From 446eb751d4e98fbc22c7bcc773d0d83d4823fd68 Mon Sep 17 00:00:00 2001 From: SK0LX Date: Wed, 2 Apr 2025 19:18:13 +0500 Subject: [PATCH] Done --- .idea/.gitignore | 5 ++ .idea/article-markup.iml | 12 +++ .idea/encodings.xml | 4 + .idea/modules.xml | 8 ++ .idea/vcs.xml | 6 ++ index.html | 49 +++++++++++- styles.css | 168 ++++++++++++++++++++++++++++++++++++++- 7 files changed, 248 insertions(+), 4 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/article-markup.iml create mode 100644 .idea/encodings.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..897e722 --- /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/encodings.xml b/.idea/encodings.xml new file mode 100644 index 0000000..df87cf9 --- /dev/null +++ b/.idea/encodings.xml @@ -0,0 +1,4 @@ + + + + \ 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..622b1e5 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,53 @@ - +
+ + +
+
+

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

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

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

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

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

+
+ Понятие «лексическое окружение» или «статическое окружение» в JavaScript относится к возможности доступа к переменным, функциям и объектам на основе их физического расположения в исходном коде. Рассмотрим пример: +
+ left +
+ Здесь у функции inner() есть доступ к переменным, объявленным в её собственной области видимости, в области видимости функции outer() и в глобальной области видимости. Функция outer() имеет доступ к переменным, объявленным в её собственной области видимости и в глобальной области видимости. + Цепочка областей видимости вышеприведённого кода будет выглядеть так: +
+ left +
+ Обратите внимание на то, что функция inner() окружена лексическим окружением функции outer(), которая, в свою очередь, окружена глобальной областью видимости. Именно поэтому функция inner() может получить доступ к переменным, объявленным в функции outer() и в глобальной области видимости. +
+
\ No newline at end of file diff --git a/styles.css b/styles.css index 1cbd2e0..cf58f00 100644 --- a/styles.css +++ b/styles.css @@ -1,8 +1,170 @@ /* Тут пиши основные стили */ +h1{ + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + width: 700px; + height:88px; + position:static; + font-size:42px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:44px; +} +.text +{ + 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; +} + +h2{ + font-family:LucidaGrande-Bold, Geneva, Arial, sans-serif; + font-size:34px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:39px; +} + +code{ + font-family: "Courier New", monospace; + background-color: lightgray; +} +.IMG{ + display: block; +} +body { + margin: 0; + padding: 0; + font-family: Georgia, Cambria, "Times New Roman", Times, serif; +} + +.content { + max-width: 800px; + margin: 0 auto; +} + +li{ + text-decoration: none; + color: #333; + font-family: 'Arial', sans-serif; + font-size: 20px; + padding: 0.5rem 1rem; + transition: color 0.3s ease; +} + +li:hover{ + cursor: url('responsive-design/2744EFD6-B878-4DCB-B0D5-526F1B233733/9E1721B2-E123-44D1-BBA7-88E713A6A184@1x.png'), auto; + color: #2980b9; + text-decoration: underline; +} + +.active{ + color: red; +} +nav{ + display: flex; + gap: 2rem; + list-style: none; + max-width: 1200px; + margin: 0 auto; + justify-content: space-between; + align-items: center; + padding: 0 20px; +} +.logo{ + border-bottom: 1px double darkgray; +} + +.header{ + + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + padding: 1rem 0; + background-color: rgba(250,249,248,0.14); + border-bottom: 1px double darkgray; +} + +ul{ + display: flex; + gap: 2rem; + list-style: none; + margin: 0; + padding: 0; + justify-content: left; +} @media (max-width: 800px) { -/* Тут пиши стили для мобилки. - Стили применятся только когда страничка будет ≤800px шириной - */ + h1 { + width: 100%; + font-size: 32px; + line-height: 38px; + padding: 0 15px; + height: auto; + margin: 20px 0; + } + + .content { + padding: 0 15px; + } + + .header { + padding: 10px 0; + } + + nav { + flex-direction: column; + gap: 1rem; + padding: 0 15px; + } + + .logo { + border-bottom: none; + padding-bottom: 10px; + } + + ul { + flex-direction: column; + gap: 1rem; + width: 100%; + align-items: flex-start; + } + + li { + text-decoration: none; + color: #333; + font-family: 'Arial', sans-serif; + font-size: 20px; + padding: 0.5rem 1rem; + transition: color 0.3s ease; + } + + li:hover { + cursor: url('responsive-design/2744EFD6-B878-4DCB-B0D5-526F1B233733/9E1721B2-E123-44D1-BBA7-88E713A6A184@1x.png'), auto; + color: #2980b9; + text-decoration: underline; + } + + .text { + font-size: 18px; + line-height: 28px; + padding: 0 15px; + } + + h2 { + font-size: 26px; + line-height: 32px; + padding: 0 15px; + } + + code { + font-size: 14px; + word-wrap: break-word; + } + + .IMG { + max-width: 100%; + height: auto; + margin: 0 auto; + } } \ No newline at end of file