From 185e2aa77f2fd8396f3c1c11f05610ab9d50bc84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9?= <145160988+lyubdim@users.noreply.github.com> Date: Tue, 1 Apr 2025 18:24:41 +0500 Subject: [PATCH 1/4] task2 --- index.html | 41 +++++++++++++++++++++++++++++++++++++++-- styles.css | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 74 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 5e60e40..90121cd 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,48 @@ - + Практика верстки - +
+

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

+ +

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

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

+ +

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

+ +

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

+ +

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

+ +

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

+ + прмиер кода + +

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

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

+ + пример кода 2 + +

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

+
\ No newline at end of file diff --git a/styles.css b/styles.css index 1cbd2e0..8b657c1 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,39 @@ /* Тут пиши основные стили */ +h1, h2 { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size: 42px; + line-height: 44px; + margin: 55px 0 10px; +} + +h2 { + font-size: 34px; + line-height: 39px; +} + +p { + font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 21px; + line-height: 33px; + margin: 0; +} + +img { + width: 100%; + margin: 43px 0 37px; +} + +code { + font-family: "Courier New", monospace; + background-color: #f4f4f4; + padding: 2px; +} + +.block { + width: 700px; + margin: 0 auto; + padding-bottom: 95px; +} @media (max-width: 800px) { From 9cdf6a2fe1d8295b21ecd4c8dad2939cfb2194ac Mon Sep 17 00:00:00 2001 From: Bu16a <147602417+Bu16a@users.noreply.github.com> Date: Tue, 1 Apr 2025 18:49:11 +0500 Subject: [PATCH 2/4] 3_1 --- index.html | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 90121cd..1a3e871 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,24 @@ - + Практика верстки + + +

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

@@ -45,4 +59,4 @@

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

- \ No newline at end of file + From c4ac66192474ec723cb066216d7f96f630e1d240 Mon Sep 17 00:00:00 2001 From: Bu16a <147602417+Bu16a@users.noreply.github.com> Date: Tue, 1 Apr 2025 18:49:43 +0500 Subject: [PATCH 3/4] 3_2 --- styles.css | 35 ++++++++++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/styles.css b/styles.css index 8b657c1..ab47e1e 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,37 @@ /* Тут пиши основные стили */ + +nav img{ + width: 97px; + margin: 10px auto 10px 38px; +} + +menu{ + padding: 0; + margin: 0; + background-color: #faf9f8; + border-bottom: 1px #000000 solid; + border-top: 1px #000000 solid; +} +menu ul{ + padding: 0px; + margin-left: 8px; + list-style: none; +} +menu li{ + cursor: url("responsive-design/2744EFD6-B878-4DCB-B0D5-526F1B233733/9E1721B2-E123-44D1-BBA7-88E713A6A184@0.5x.png"), auto; + font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size:24px; + color:#333333; + text-align:left; + line-height:36px; + margin-left: 30px; + display: inline; +} + +.red{ + color:#d0021b; +} + h1, h2 { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-size: 42px; @@ -40,4 +73,4 @@ code { /* Тут пиши стили для мобилки. Стили применятся только когда страничка будет ≤800px шириной */ -} \ No newline at end of file +} From 00dc4f219f2bd8c3440f074163dc2d6cb7e82f35 Mon Sep 17 00:00:00 2001 From: Bu16a <147602417+Bu16a@users.noreply.github.com> Date: Tue, 1 Apr 2025 19:40:54 +0500 Subject: [PATCH 4/4] Update styles.css --- styles.css | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 53 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index ab47e1e..ded8e7e 100644 --- a/styles.css +++ b/styles.css @@ -7,7 +7,8 @@ nav img{ menu{ padding: 0; - margin: 0; + margin-right: -8px; + margin-left: -8px; background-color: #faf9f8; border-bottom: 1px #000000 solid; border-top: 1px #000000 solid; @@ -18,7 +19,8 @@ menu ul{ list-style: none; } menu li{ - cursor: url("responsive-design/2744EFD6-B878-4DCB-B0D5-526F1B233733/9E1721B2-E123-44D1-BBA7-88E713A6A184@0.5x.png"), auto; + /* cursor: url("responsive-design/2744EFD6-B878-4DCB-B0D5-526F1B233733/9E1721B2-E123-44D1-BBA7-88E713A6A184@0.5x.png"), auto; */ + cursor: pointer; font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-size:24px; color:#333333; @@ -27,6 +29,9 @@ menu li{ margin-left: 30px; display: inline; } +menu li:hover{ + text-decoration:underline; +} .red{ color:#d0021b; @@ -73,4 +78,50 @@ code { /* Тут пиши стили для мобилки. Стили применятся только когда страничка будет ≤800px шириной */ + .block { + width: 100%; + margin: 0 auto; + padding-bottom: 95px; + } + + menu li{ + line-height:40px; + font-size:30px; + margin-left: 20px; + margin-top: 10px; + display: list-item; + } + menu ul{ + margin: 0 auto 10px 0; + } + nav img{ + height: 64px; + width: 101px; + margin: 10px auto 10px 20px; + } + main h1{ + font-size: 26px; + line-height:28px; + margin-bottom: 20px; + } + main h2{ + margin-top: 25px; + margin-bottom: 6px; + font-size: 22px; + line-height:39px; + } + main p{ + font-size: 18px; + line-height:22px; + } + main{ + width: 520px; + } + img{ + margin-top:25px; + margin-bottom: 25px; + } + .code{ + font-size: 18px; + } }