diff --git a/images/artboard.png b/images/artboard.png new file mode 100644 index 0000000..fe4b36b Binary files /dev/null and b/images/artboard.png differ diff --git a/images/logo@0.5x.png b/images/logo@0.5x.png new file mode 100644 index 0000000..2039697 Binary files /dev/null and b/images/logo@0.5x.png differ diff --git a/images/logo@1x.png b/images/logo@1x.png new file mode 100644 index 0000000..0d89cf2 Binary files /dev/null and b/images/logo@1x.png differ diff --git a/images/logo@2x.png b/images/logo@2x.png new file mode 100644 index 0000000..7d96bf3 Binary files /dev/null and b/images/logo@2x.png differ diff --git a/images/logo@3x.png b/images/logo@3x.png new file mode 100644 index 0000000..ca53a22 Binary files /dev/null and b/images/logo@3x.png differ diff --git a/images/snippet1@0.5x.png b/images/snippet1@0.5x.png new file mode 100644 index 0000000..4387453 Binary files /dev/null and b/images/snippet1@0.5x.png differ diff --git a/images/snippet1@1x.png b/images/snippet1@1x.png new file mode 100644 index 0000000..a2aec87 Binary files /dev/null and b/images/snippet1@1x.png differ diff --git a/images/snippet1@2x.png b/images/snippet1@2x.png new file mode 100644 index 0000000..53049d4 Binary files /dev/null and b/images/snippet1@2x.png differ diff --git a/images/snippet1@3x.png b/images/snippet1@3x.png new file mode 100644 index 0000000..f01b092 Binary files /dev/null and b/images/snippet1@3x.png differ diff --git a/images/snippet2@0.5x.png b/images/snippet2@0.5x.png new file mode 100644 index 0000000..1702e28 Binary files /dev/null and b/images/snippet2@0.5x.png differ diff --git a/images/snippet2@1x.png b/images/snippet2@1x.png new file mode 100644 index 0000000..e9176f6 Binary files /dev/null and b/images/snippet2@1x.png differ diff --git a/images/snippet2@2x.png b/images/snippet2@2x.png new file mode 100644 index 0000000..bf365e2 Binary files /dev/null and b/images/snippet2@2x.png differ diff --git a/images/snippet2@3x.png b/images/snippet2@3x.png new file mode 100644 index 0000000..23c0c07 Binary files /dev/null and b/images/snippet2@3x.png differ diff --git a/index.html b/index.html index 5e60e40..8d87011 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,34 @@ Практика верстки + - + + +
+

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

+

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

+ +

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

+

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

+ +

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

+

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

+ Code snippet +

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

+ Code snippet +

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

+
\ No newline at end of file diff --git a/styles.css b/styles.css index 1cbd2e0..c31171b 100644 --- a/styles.css +++ b/styles.css @@ -1,8 +1,136 @@ /* Тут пиши основные стили */ +.page-content { + width: 700px; + margin: auto; +} + +body { + margin: 0; +} + +.logo { + margin: 10px 38px; +} + +nav { + background-color: #faf9f8; + padding: 24px 38px; + margin: 0; + border-bottom: 1px solid #c2c2c2; + border-top: 1px solid #c2c2c2; +} + +nav li { + list-style: none; + display: inline; + cursor: grab; +} + +nav ul { + margin: 0; + padding: 0; +} + +a { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size:24px; + color:#333333; + text-align:left; + line-height:36px; + margin-right: 30px; + cursor: grab; + text-decoration: none; +} + +a:visited { + color: #d0021b; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +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; +} +#Logo{ + align-content: start; + margin-top: 10px; + margin-left: 38px; + margin-bottom: 10px; +} + +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:39px; +} + +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; +} + +code { + font-family: "Courier New", monospace; + background-color: #f2f2f2; +} + + @media (max-width: 800px) { -/* Тут пиши стили для мобилки. - Стили применятся только когда страничка будет ≤800px шириной - */ + .page-content { + margin: auto 20px; + width: auto; + } + + body { + width: 100%; + } + + img { + width: 100%; + } + + .logo { + width: 101px; + height: 64px; + margin: 10px 20px; + } + + nav { + padding: 20px 20px; + } + + nav li { + display: block; + margin: 0 0 10px 0; + } + + a { + font-size: 20px; + } + + h1 { + font-size: 26px; + } + + h2 { + font-size: 22px; + } + + p { + font-size: 18px; + } } \ No newline at end of file