From 5a0b6030d59e92d2a65ec4e23df8235d50e7a393 Mon Sep 17 00:00:00 2001 From: ITSigma Date: Tue, 26 Mar 2024 18:10:24 +0500 Subject: [PATCH 01/28] add blocks --- index.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.html b/index.html index 5e60e40..3d8f4a2 100644 --- a/index.html +++ b/index.html @@ -7,5 +7,10 @@ +
+
+
\ No newline at end of file From 73ac909ccfe7ed838871aa4119b9ec5601b95fe7 Mon Sep 17 00:00:00 2001 From: ITSigma Date: Tue, 26 Mar 2024 18:19:32 +0500 Subject: [PATCH 02/28] blocks margin --- index.html | 6 ++++++ styles.css | 5 ++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 3d8f4a2..317de37 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,12 @@
+
+
diff --git a/styles.css b/styles.css index 1cbd2e0..fd444e4 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,8 @@ /* Тут пиши основные стили */ - +.blocks{ + margin: 10px auto; + width: 700px; +} @media (max-width: 800px) { /* Тут пиши стили для мобилки. From 4cb9595b5e0c31bbe89c4430e27b9e40c75f2bce Mon Sep 17 00:00:00 2001 From: Evgeny Lapshin Date: Tue, 26 Mar 2024 18:20:25 +0500 Subject: [PATCH 03/28] first --- index.html | 38 ++++++++++++++++++++++++++++++-------- styles.css | 22 ++++++++++++++++++++++ 2 files changed, 52 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 5e60e40..25fc50e 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,33 @@ - - - Практика верстки - - - - - + + + Практика верстки + + + + +

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

+

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

+

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

+

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

+

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

+

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

+ code + + \ No newline at end of file diff --git a/styles.css b/styles.css index 1cbd2e0..e9ed5ab 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,27 @@ /* Тут пиши основные стили */ +h1 { + font-family:LucidaGrande-Bold; + font-size:42px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:44px; +} +h2 { + font-family:LucidaGrande-Bold; + font-size:34px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:39px; +} + +.paragraph { + font-family:Georgia; + font-size:21px; + color:rgba(0,0,0,0.84); + text-align:left; + line-height:33px; +} @media (max-width: 800px) { /* Тут пиши стили для мобилки. From af2a3957dc1a2e38c6579217e374bd7b87715da0 Mon Sep 17 00:00:00 2001 From: Evgeny Lapshin Date: Tue, 26 Mar 2024 18:38:36 +0500 Subject: [PATCH 04/28] add divs --- index.html | 69 +++++++++++++++++++++++++++++++++++++----------------- styles.css | 8 +++++-- 2 files changed, 53 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index 2dc3882..b25bc48 100644 --- a/index.html +++ b/index.html @@ -7,28 +7,53 @@ -

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

-

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

-

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

-

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

-

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

-

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

- code - +
+

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

+

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

+
+
+

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

+

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

+
+ +
+

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

+

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

+
+
+ code +
+
+

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

+
+
+ code +
+
+

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

+
diff --git a/styles.css b/styles.css index 41acd93..7f95ef2 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,8 @@ /* Тут пиши основные стили */ + +* { + margin: 10px auto; +} h1 { font-family:LucidaGrande-Bold; font-size:42px; @@ -22,8 +26,8 @@ h2 { text-align:left; line-height:33px; } -.blocks{ - margin: 10px auto; +.block { + margin: 55px auto; width: 700px; } From 729441b01a4e9f2b9acf3d0cf055a0f89fa76518 Mon Sep 17 00:00:00 2001 From: ITSigma Date: Tue, 26 Mar 2024 18:48:59 +0500 Subject: [PATCH 05/28] imgs margin --- index.html | 26 ++++++-------------------- styles.css | 3 +++ 2 files changed, 9 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index b25bc48..8a9287e 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@

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

работают в JavaScript-программах.

-
+

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

Замыкание — это функция, у которой есть доступ к области видимости, сформированной внешней по отношению к ней функции даже @@ -26,28 +26,28 @@

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

-
+

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

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

-
+
code
-
+

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

-
+
code
-
+

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

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

Практика верстки - - -
-
-
-
-
- \ No newline at end of file diff --git a/styles.css b/styles.css index 7f95ef2..7f97d39 100644 --- a/styles.css +++ b/styles.css @@ -31,6 +31,9 @@ h2 { width: 700px; } +img { + margin: 43px auto 37px; +} @media (max-width: 800px) { /* Тут пиши стили для мобилки. Стили применятся только когда страничка будет ≤800px шириной From ff1b683ea28c35ba509d8f34308de8c3f6c33772 Mon Sep 17 00:00:00 2001 From: ITSigma Date: Tue, 26 Mar 2024 18:52:33 +0500 Subject: [PATCH 06/28] fonts add --- styles.css | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/styles.css b/styles.css index 7f97d39..154a2a0 100644 --- a/styles.css +++ b/styles.css @@ -3,8 +3,9 @@ * { margin: 10px auto; } + h1 { - font-family:LucidaGrande-Bold; + 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; @@ -12,7 +13,7 @@ h1 { } h2 { - font-family:LucidaGrande-Bold; + 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; @@ -20,7 +21,7 @@ h2 { } .paragraph { - font-family:Georgia; + font-family: Georgia, Cambria, "Times New Roman", Times, serif; font-size:21px; color:rgba(0,0,0,0.84); text-align:left; @@ -31,9 +32,14 @@ h2 { width: 700px; } +span { + font-family: "Courier New", monospace; +} + img { margin: 43px auto 37px; } + @media (max-width: 800px) { /* Тут пиши стили для мобилки. Стили применятся только когда страничка будет ≤800px шириной From 24e2c0f25be3812a5da5f24f4fdf95fa9ac82af0 Mon Sep 17 00:00:00 2001 From: Evgeny Lapshin Date: Tue, 26 Mar 2024 18:53:44 +0500 Subject: [PATCH 07/28] added spans --- index.html | 12 ++++++++---- styles.css | 4 ++++ 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index b25bc48..2326f97 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,10 @@

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

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

@@ -49,9 +52,10 @@

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

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

diff --git a/styles.css b/styles.css index 7f95ef2..5822f2b 100644 --- a/styles.css +++ b/styles.css @@ -31,6 +31,10 @@ h2 { width: 700px; } +.block span { + background: #f2f2f2; +} + @media (max-width: 800px) { /* Тут пиши стили для мобилки. Стили применятся только когда страничка будет ≤800px шириной From c2b7bd605da2e56833fe3276d2cebf050e034131 Mon Sep 17 00:00:00 2001 From: Evgeny Lapshin Date: Tue, 26 Mar 2024 19:33:09 +0500 Subject: [PATCH 08/28] added header --- index.html | 120 +++++++++++++++++++++++++++++++---------------------- styles.css | 35 +++++++++++++--- 2 files changed, 101 insertions(+), 54 deletions(-) diff --git a/index.html b/index.html index d307e59..a297d8e 100644 --- a/index.html +++ b/index.html @@ -7,57 +7,79 @@ -
-

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

-

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

+
+ +
+
+ Обо мне +
+
+ Проекты +
+
+ Портфолио +
+
+ Блог +
+
+ Контакты + +
-
-

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

-

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

-
- -
-

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

-

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

+ +
+

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

+

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

-
-
- code -
-
-

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

-
-
- code -
-
-

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

-
+
+
+

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

+

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

+
+ +
+

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

+

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

+
+
+ code +
+
+

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

+
+
+ code +
+
+

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

+
diff --git a/styles.css b/styles.css index 7313529..dfc7604 100644 --- a/styles.css +++ b/styles.css @@ -4,6 +4,28 @@ margin: 10px auto; } +.header_line { + background-color: #faf9f8; + height: auto; + padding: 28px; +} +.header_line .h { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; + font-size:24px; + color:#333333; + text-align:left; + line-height:36px; + display: inline; + margin: auto 15px; +} +.header_line #blog{ + color: red; +} +.header_line #projects{ + text-decoration: underline; +} + + h1 { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-size:42px; @@ -32,7 +54,8 @@ h2 { width: 700px; } -span { +.block span { + background: #f2f2f2; font-family: "Courier New", monospace; } @@ -40,12 +63,14 @@ img { margin: 43px auto 37px; } -.block span { - background: #f2f2f2; -} - @media (max-width: 800px) { /* Тут пиши стили для мобилки. Стили применятся только когда страничка будет ≤800px шириной */ + .block { + width: auto auto; + } + .header_line .h { + display: block; + } } \ No newline at end of file From a3aed4dcc3de2c32985d1597c56adcc286faf808 Mon Sep 17 00:00:00 2001 From: Evgeny Lapshin Date: Tue, 26 Mar 2024 19:40:45 +0500 Subject: [PATCH 09/28] added adaptive features --- styles.css | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/styles.css b/styles.css index dfc7604..e1ea3a7 100644 --- a/styles.css +++ b/styles.css @@ -67,10 +67,11 @@ img { /* Тут пиши стили для мобилки. Стили применятся только когда страничка будет ≤800px шириной */ - .block { - width: auto auto; - } - .header_line .h { - display: block; - } +.block { + width: 520px; +} + +.header_line .h { + color: red; +} } \ No newline at end of file From 7327fd354e80a047a96c17929e4de41cf6fb6c24 Mon Sep 17 00:00:00 2001 From: Evgeny Lapshin Date: Wed, 27 Mar 2024 21:53:34 +0500 Subject: [PATCH 10/28] added header with nav --- index.html | 14 +++++++++++--- styles.css | 4 ++++ 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index a297d8e..a0983ba 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,16 @@
-
+ +
-
+
-->
diff --git a/styles.css b/styles.css index e1ea3a7..c5f78fd 100644 --- a/styles.css +++ b/styles.css @@ -25,6 +25,10 @@ text-decoration: underline; } +nav ul { + list-style-type: none; +} + h1 { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; From e39e63a0e23e7663401e060548db05bed3981974 Mon Sep 17 00:00:00 2001 From: ITSigma Date: Wed, 27 Mar 2024 21:54:54 +0500 Subject: [PATCH 11/28] css links --- styles.css | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/styles.css b/styles.css index e1ea3a7..c8d99f6 100644 --- a/styles.css +++ b/styles.css @@ -4,12 +4,25 @@ margin: 10px auto; } -.header_line { +nav { background-color: #faf9f8; height: auto; padding: 28px; } -.header_line .h { + +/*a { + text-decoration: none; +}*/ + +a:hover { + text-decoration: underline; +} + +a:visited { + color: red; +} + +nav li { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-size:24px; color:#333333; @@ -18,13 +31,6 @@ display: inline; margin: auto 15px; } -.header_line #blog{ - color: red; -} -.header_line #projects{ - text-decoration: underline; -} - h1 { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; From 1276ca84acc4b153a0fd5cd4a1bf2d33f231bac1 Mon Sep 17 00:00:00 2001 From: ITSigma Date: Wed, 27 Mar 2024 22:18:03 +0500 Subject: [PATCH 12/28] css logo --- styles.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/styles.css b/styles.css index 9482671..4173388 100644 --- a/styles.css +++ b/styles.css @@ -22,6 +22,11 @@ a:visited { color: red; } +#logo { + position: relative; + left: 38px; +} + nav li { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-size:24px; From b17447e5787d61b13030422c246ef06fe37d8d1f Mon Sep 17 00:00:00 2001 From: ITSigma Date: Wed, 27 Mar 2024 22:20:20 +0500 Subject: [PATCH 13/28] css logo + --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index a0983ba..61eec94 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@
- +