diff --git a/index.html b/index.html index 5e60e40..900ebb9 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,76 @@ + + Практика верстки - - + + + +
+ +
+
+

+ Замыкания в 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..c33427e 100644 --- a/styles.css +++ b/styles.css @@ -1,8 +1,140 @@ -/* Тут пиши основные стили */ +h1 { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size: 42px; + color: rgba(0, 0, 0, 0.84); + text-align: left; + line-height: 44px; +} + +h2 { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size: 34px; + color: rgba(0, 0, 0, 0.84); + text-align: left; + line-height: 44px; +} + +img { + width: 100%; +} + +code { + background-color: #f2f2f2; + font-family: "Courier New", monospace; +} + +#img1 { + width: 7%; + height: 5%; + margin: 16px 16px 16px 16px; +} + +.header { + 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-top: 1px solid black; + border-bottom: 1px solid black; + margin: 0; + width: 100%; +} + +ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + background-color: #f2f2f2; +} + +li { + float: left; + margin: 0; +} + +li a { + display: block; + color: black; + text-align: center; + margin: 0; + padding: 16px; +} + +li a:hover { + margin: 0; +} + +#block1 { + margin: 55px 25%; + 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; +} + +#pointer { + position: absolute; + padding-top: 22px; + padding-left: 50px; + z-index: 2; +} @media (max-width: 800px) { -/* Тут пиши стили для мобилки. - Стили применятся только когда страничка будет ≤800px шириной - */ + /* Тут пиши стили для мобилки. + Стили применятся только когда страничка будет ≤800px шириной + */ + #img1 { + width: 20%; + margin: 16px 16px 16px 16px; + padding-top: 15px; + } + + li { + float: none; + margin-left: 20px; + } + + li a { + display: block; + color: black; + text-align: left; + margin: 16px 0; + padding: 0px; + } + + #block1 { + margin: 20px; + } + + .header { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size: 20px; + color: #333333; + text-align: left; + line-height: 18px; + border-top: 1px solid black; + border-bottom: 1px solid black; + margin: 0; + width: 100%; + } + + h1 { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size: 26px; + color: rgba(0, 0, 0, 0.84); + text-align: left; + line-height: 44px; + } + + h2 { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size: 18px; + color: rgba(0, 0, 0, 0.84); + text-align: left; + line-height: 44px; + } } \ No newline at end of file