diff --git a/848B0BFD-C857-4F1E-93BF-3822E0A81A7E@3x.png b/848B0BFD-C857-4F1E-93BF-3822E0A81A7E@3x.png new file mode 100644 index 0000000..23c0c07 Binary files /dev/null and b/848B0BFD-C857-4F1E-93BF-3822E0A81A7E@3x.png differ diff --git a/CA501510-E978-4377-9076-8F392B899C1B@3x.png b/CA501510-E978-4377-9076-8F392B899C1B@3x.png new file mode 100644 index 0000000..f01b092 Binary files /dev/null and b/CA501510-E978-4377-9076-8F392B899C1B@3x.png differ diff --git a/index.html b/index.html index 5e60e40..263f43a 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,90 @@ - + - - + + Практика верстки - - - - - - \ No newline at end of file + + + +
+ +
+ +
+ + +
+ +
+ +
+
+
+ +
+

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

+

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

+

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

+

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

+

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

+

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

+

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

+

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

+

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

+
+ + diff --git a/logo.png b/logo.png new file mode 100644 index 0000000..35b0831 Binary files /dev/null and b/logo.png differ diff --git a/pointer.png b/pointer.png new file mode 100644 index 0000000..fce753f Binary files /dev/null and b/pointer.png differ diff --git a/responsive-design/E8E9A56B-53B7-494E-BE52-747EE607EC62/1774967951275-019d4455-2a8a-70f8-96b9-101d1c91c792.png b/responsive-design/E8E9A56B-53B7-494E-BE52-747EE607EC62/1774967951275-019d4455-2a8a-70f8-96b9-101d1c91c792.png new file mode 100644 index 0000000..35b0831 Binary files /dev/null and b/responsive-design/E8E9A56B-53B7-494E-BE52-747EE607EC62/1774967951275-019d4455-2a8a-70f8-96b9-101d1c91c792.png differ diff --git a/responsive-design/E8E9A56B-53B7-494E-BE52-747EE607EC62/logo.png b/responsive-design/E8E9A56B-53B7-494E-BE52-747EE607EC62/logo.png new file mode 100644 index 0000000..35b0831 Binary files /dev/null and b/responsive-design/E8E9A56B-53B7-494E-BE52-747EE607EC62/logo.png differ diff --git a/styles.css b/styles.css index 1cbd2e0..e1cebcb 100644 --- a/styles.css +++ b/styles.css @@ -1,8 +1,161 @@ -/* Тут пиши основные стили */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + font-family: Georgia, Cambria, "Times New Roman", Times, serif; +} + +header { + background-color: transparent; +} + +.header-container { + width: 700px; + margin: auto; +} + +.logo { + width: 97px; + height: 64px; + display: block; + margin: 30px 0; +} + +.nav-bg { + background-color: #f5f5f5; + width: 100%; +} + +nav ul { + list-style: none; + display: flex; + gap: 30px; + padding: 15px 0; +} + +nav ul li a { + font-family: + "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, + sans-serif; + font-size: 24px; + color: #333333; + line-height: 36px; + text-decoration: none; +} + +nav ul li a:hover { + text-decoration: underline; + cursor: + url("pointer.png") 0 0, + pointer; +} + +nav ul li a.active { + color: #ff0000; + text-decoration: none; +} + +.has-pointer { + position: relative; +} + +.hovered { + text-decoration: underline; +} + +.pointer { + position: absolute; + top: 22px; + left: 64px; + width: 21px; + height: 22px; + z-index: 10; + pointer-events: none; + + background: #ffffff; + border: 1px solid #000000; + box-shadow: 0 1px 2px 0 #000000; +} + +article { + width: 700px; + margin: auto; + padding-top: 40px; +} + +h1 { + font-family: + "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, + sans-serif; + font-size: 42px; + line-height: 1.05; + margin-bottom: 20px; + margin-top: 55px; +} + +p { + font-size: 21px; + font-family: Georgia, Cambria, "Times New Roman", Times, serif; + line-height: 1.5; + margin-top: 20px; + margin-bottom: 15px; +} + +code { + font-family: "Courier New", monospace; + background-color: #f0f0f0; + padding: 2px 6px; + border-radius: 4px; +} @media (max-width: 800px) { -/* Тут пиши стили для мобилки. - Стили применятся только когда страничка будет ≤800px шириной - */ -} \ No newline at end of file + .header-container { + width: 100%; + padding-left: 20px; + padding-right: 20px; + } + + article img { + max-width: 100%; + height: auto; + } + + nav { + width: 100%; + } + + nav ul { + flex-direction: column; + padding: 20px; + } + + h1 { + font-size: 26px; + margin: 20px 0px; + line-height: 28px; + } + + h2 { + font-size: 22px; + margin: 6px 0px; + line-height: 39px; + } + + p { + font-size: 18px; + margin: 6px 0px; + line-height: 22px; + } + + section, + section img { + margin: 25px 20px; + } + + .image-last { + display: none; + } +}