diff --git a/index.html b/index.html index 5e60e40..6978913 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,45 @@ Практика верстки + - + + +

+ Замыкания в 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..b423f50 100644 --- a/styles.css +++ b/styles.css @@ -1,8 +1,125 @@ /* Тут пиши основные стили */ +.menu { + border-top: 2px solid #ccc; + border-bottom: 2px solid #ccc; + background: #faf9f8; + padding: 5px 0; + margin-top: 20px; +} + +.menu ul { + display: flex; + justify-content: flex-start; + gap: 30px; + list-style: none; + padding: 0; + font-family: LucidaGrande, sans-serif; + font-size: 24px; + color: #d0021b; + text-align: left; + line-height: 30px; + margin-left: 20px; +} + +.menu a { + color: black; + text-decoration: none; + font-size: 24px; +} +.menu .active { + color: red; + font-weight: bold; +} +.menu a:hover { + text-decoration: underline; +} +ul { + font-family:LucidaGrande; + font-size:24px; + color:#333333; + text-align:left; + line-height:36px; + display: flex; + gap: 30px; + list-style: none; +} +.text_header { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + color: rgba(0,0,0,0.84); + text-align: left; + width: 700px; + padding-left: 360px; + padding-right: 363px; + padding-bottom: 10px; + margin: 0; +} + +.text_block { + font-family: Georgia, Cambria, "Times New Roman", Times, serif; + color: rgba(0,0,0,0.84); + text-align: left; + width: 700px; + padding-left: 362px; + padding-right: 362px; + margin: 0 0 55px 0; +} + +.text_code { + font-family: "Courier New", monospace; + background-color: #f4f4f4; + padding: 2px 4px; + border-radius: 3px; +} + +img { + margin-left: 362px; +} + +.html { + margin-left: 0px; +} @media (max-width: 800px) { -/* Тут пиши стили для мобилки. - Стили применятся только когда страничка будет ≤800px шириной - */ + + .text_header { + width: 100%; + padding: 20px 15px; + font-size: 22px; + } + + .text_block { + width: 100%; + padding: 15px; + font-size: 16px; + line-height: 1.5; + } + + .text_code { + width: 100%; + padding: 15px; + font-size: 16px; + line-height: 1.5; + } + + .menu ul { + flex-direction: column; + gap: 10px; + margin-left: 0; + padding: 10px; + } + + .menu a { + font-size: 18px; + } + + ul { + flex-direction: column; + gap: 10px; + font-size: 18px; + } + + .menu { + padding: 10px 0; + } } \ No newline at end of file