From dda7746e879eb15ad741ad9528369130357933aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B8=D1=85=D0=B0=D0=B8=D0=BB=20=D0=92=D0=BB=D0=B0?= =?UTF-8?q?=D0=B4=D0=B8=D0=BC=D0=B8=D1=80=D0=BE=D0=B2?= Date: Tue, 1 Apr 2025 16:24:03 +0500 Subject: [PATCH 1/4] Add images --- index.html | 12 +++++++++++- styles.css | 33 +++++++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 5e60e40..1845ae0 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,16 @@ - + +
+ code +
+
+ code +
\ No newline at end of file diff --git a/styles.css b/styles.css index 1cbd2e0..0994326 100644 --- a/styles.css +++ b/styles.css @@ -5,4 +5,37 @@ /* Тут пиши стили для мобилки. Стили применятся только когда страничка будет ≤800px шириной */ +} + +.container1 { + display: flex; + justify-content: center; /* по горизонтали */ + align-items: center; /* по вертикали */ + margin: 43px auto 37px; /* центрирует сам блок по горизонтали страницы */ + width: 700px; + height: 727px; +} + +.container2 { + width: 700px; + height: 727px; + display: flex; + justify-content: center; /* по горизонтали */ + align-items: center; /* по вертикали */ + /* центрирует сам блок по горизонтали страницы */ + margin: 43px auto 37px; +} + +.container1 img { + width: 100%; + height: 100%; + object-fit: contain; /* или "cover", в зависимости от задачи */ + display: block; +} + +.container2 img { + width: 100%; + height: 100%; + object-fit: contain; /* или "cover", в зависимости от задачи */ + display: block; } \ No newline at end of file From a8748febf229a53dc70cf05e4ed8589c3b4b272f Mon Sep 17 00:00:00 2001 From: VladaKhazova Date: Tue, 1 Apr 2025 16:26:45 +0500 Subject: [PATCH 2/4] text --- index.html | 21 ++++++++++++++++++++- styles.css | 42 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 5e60e40..e6a9e08 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,25 @@ - +

Замыкания в 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..20e85de 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,46 @@ /* Тут пиши основные стили */ +body { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; + max-width: 1200px; + margin: 0 auto; +} + +.bl1 { + font-family: "LucidaGrande-Bold", sans-serif; + font-size: 42px; + color: rgba(0, 0, 0, 0.84); + text-align: left; + line-height: 44px; + margin: 48px 0 0 0; + width: 700px; + max-width: 100%; +} + +.bl2 { + font-family: Georgia, serif; + font-size: 21px; + color: rgba(0, 0, 0, 0.84); + text-align: left; + line-height: 33px; + margin: 50px 0 0 0; + width: 700px; + max-width: 100%; +} + +.bl3{ + font-family: "LucidaGrande-Bold", sans-serif; + font-size: 34px; + color: rgba(0, 0, 0, 0.84); + text-align: left; + line-height: 44px; + margin: 48px 0 0 0; + width: 700px; + max-width: 100%; +} @media (max-width: 800px) { From 21e04509ef1cd364a5b3bee1efe69f866bb58283 Mon Sep 17 00:00:00 2001 From: VladaKhazova Date: Tue, 1 Apr 2025 16:33:24 +0500 Subject: [PATCH 3/4] txt + img --- index.html | 25 +++++++------------------ 1 file changed, 7 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 83f4f10..dbcb1e7 100644 --- a/index.html +++ b/index.html @@ -19,34 +19,23 @@

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

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

-

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

-

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

-
code
+

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

code
+

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

-
- code -
-
- code -
\ No newline at end of file From d02580a9b9615914e2db21844f0989dc1ae9483d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B8=D1=85=D0=B0=D0=B8=D0=BB=20=D0=92=D0=BB=D0=B0?= =?UTF-8?q?=D0=B4=D0=B8=D0=BC=D0=B8=D1=80=D0=BE=D0=B2?= Date: Tue, 1 Apr 2025 23:00:56 +0500 Subject: [PATCH 4/4] Very very last --- index.html | 33 ++++++--- styles.css | 208 +++++++++++++++++++++++++++++++++++++---------------- 2 files changed, 171 insertions(+), 70 deletions(-) diff --git a/index.html b/index.html index dbcb1e7..f792c6a 100644 --- a/index.html +++ b/index.html @@ -1,41 +1,54 @@ - + Практика верстки +
+
+ Логотип + +
+
+ + +

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

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

-

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

+

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

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

-

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

+

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

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

- code + code

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

- code + code

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

- +
\ No newline at end of file diff --git a/styles.css b/styles.css index 7febbef..63c42db 100644 --- a/styles.css +++ b/styles.css @@ -1,83 +1,171 @@ -/* Тут пиши основные стили */ body { - font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; - display: flex; - flex-direction: column; - align-items: center; - padding: 20px; - max-width: 1200px; - margin: 0 auto; + margin: 0; + padding: 0; + justify-content: center; } -.bl1 { - font-family: "LucidaGrande-Bold", sans-serif; - font-size: 42px; - color: rgba(0, 0, 0, 0.84); - text-align: left; - line-height: 44px; - margin: 48px 0 0 0; - width: 700px; - max-width: 100%; +.content { + max-width: 800px; + margin: 0 auto; } -.bl2 { - font-family: Georgia, serif; +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; - margin: 50px 0 0 0; - width: 700px; - max-width: 100%; } -.bl3{ - font-family: "LucidaGrande-Bold", sans-serif; - font-size: 34px; - color: rgba(0, 0, 0, 0.84); - text-align: left; + + +p + h2 { + margin-top: 55px; +} + +h1 { + font-size: 42px; line-height: 44px; - margin: 48px 0 0 0; - width: 700px; - max-width: 100%; } +h2 { + font-size: 34px; + line-height: 39px; +} -@media (max-width: 800px) { -/* Тут пиши стили для мобилки. - Стили применятся только когда страничка будет ≤800px шириной - */ +h1, h2 { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; +} + +img { + width: 100%; + height: auto; + margin: 20px 0; +} + +.logo-img { + width: 97px; + height: 64px; + padding: 0 37px; } -.container1 { +.active{ + color: red; +} + +nav{ + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size:24px; + color:#333333; + background-color: #f2f2f2; + text-align:left; + line-height:36px; + border: 1px solid black; display: flex; - justify-content: center; /* по горизонтали */ - align-items: center; /* по вертикали */ - margin: 43px auto 37px; /* центрирует сам блок по горизонтали страницы */ - width: 700px; - height: 727px; + margin:0; } -.container2 { - width: 700px; - height: 727px; +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; - justify-content: center; /* по горизонтали */ - align-items: center; /* по вертикали */ - /* центрирует сам блок по горизонтали страницы */ - margin: 43px auto 37px; } -.container1 img { - width: 100%; - height: 100%; - object-fit: contain; /* или "cover", в зависимости от задачи */ - display: block; +code{ + font-family: "Courier New", monospace; + background-color: lightgray } -.container2 img { - width: 100%; - height: 100%; - object-fit: contain; /* или "cover", в зависимости от задачи */ - display: block; -} \ No newline at end of file +/* Стили для мобилки */ +@media (max-width: 800px) { + 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; + } +}