From 15de0c5c10022317f42011fc82ba3f0622a333f0 Mon Sep 17 00:00:00 2001 From: Vera Novgorodtseva <142586101+vbolgarskay@users.noreply.github.com> Date: Tue, 1 Apr 2025 18:30:35 +0500 Subject: [PATCH 1/2] Update styles.css --- styles.css | 135 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 130 insertions(+), 5 deletions(-) diff --git a/styles.css b/styles.css index 1cbd2e0..8b78606 100644 --- a/styles.css +++ b/styles.css @@ -1,8 +1,133 @@ -/* Тут пиши основные стили */ +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, + Arial, sans-serif; +} +p, +article, +section { + font-family: Georgia, Cambria, 'Times New Roman', Times, serif; +} +code, +pre { + font-family: 'Courier New', monospace; + background-color: #f0f0f0; +} +h1 { + font-size: 42px; + line-height: 44px; + margin-bottom: 10px; +} +h2 { + font-size: 34px; + margin-bottom: 10px; + line-height:39px; +} + +p { + font-size: 21px; + line-height: 33px; + margin: 0; + margin-bottom: 55px; +} + +body { + background-color: #fff; +} + +li{ + list-style-type: none; +} + +a:hover{ + text-decoration: underline; +} + +.article-container { + width: 700px; + margin: 0 auto; +} +.article-image { + width: 100%; + height: auto; + display: block; + margin: 20px 0; +} +pre { + background-color: #f4f4f4; + padding: 10px; + overflow-x: auto; +} + +.page-header { + display: flex; + flex-direction: column; + align-items: center; + background-color: #f8f8f8; + padding: 20px 0; +} + +.logo-block img { + max-width: 200px; + height: auto; +} + +.header-line { + width: 90%; + border: 1px solid #ddd; +} + +.main-nav ul { + list-style: none; + display: flex; + padding: 0; + margin: 10px 0; +} + +.main-nav ul li { + margin: 0 15px; +} + +.main-nav ul li a { + text-decoration: none; + color: #333; + font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, + Arial, sans-serif; +} + +.main-nav ul li a:hover { + color: #007bff; +} + +.main-nav ul li.active a { + font-weight: bold; + color: #800000; +} @media (max-width: 800px) { -/* Тут пиши стили для мобилки. - Стили применятся только когда страничка будет ≤800px шириной - */ -} \ No newline at end of file + .page-header { + padding: 10px 0; + } + + .main-nav ul { + flex-direction: column; + align-items: center; + } + + .main-nav ul li { + margin: 10px 0; + } + + .logo-block img { + max-width: 150px; + } + + .article-container { + width: 90%; + } +} From 16283e27658fc34140e8ac72559c672071d159fb Mon Sep 17 00:00:00 2001 From: Vera Novgorodtseva <142586101+vbolgarskay@users.noreply.github.com> Date: Tue, 1 Apr 2025 18:30:56 +0500 Subject: [PATCH 2/2] Update index.html --- index.html | 99 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 91 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 5e60e40..8b41152 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,94 @@ - - + + Практика верстки - - - - - - \ No newline at end of file + + + +
+
+ HTML5 & CSS3 +
+
+ +
+
+
+

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

+

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

+

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

+

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

+

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

+

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

+ Пример замыкания 1 +

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

+ +

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

+ Пример замыкания 2 +

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

+ +
+ +