From c2fb314a98d8d36e3884718f149d45b671cd32b0 Mon Sep 17 00:00:00 2001 From: fomidon Date: Tue, 1 Apr 2025 18:19:42 +0500 Subject: [PATCH 1/5] 1 --- article-design/index.html | 9564 ++++++++++++++++++++++++++++++++----- index.html | 71 +- styles.css | 3 - 3 files changed, 8371 insertions(+), 1267 deletions(-) diff --git a/article-design/index.html b/article-design/index.html index b669d7c..ddafa2e 100644 --- a/article-design/index.html +++ b/article-design/index.html @@ -1,205 +1,956 @@ - - -Marketch(https://github.com/tudou527) - - - -
- -
- - - + + - + //鼠标经过的图层与选中图层映射到水平线上有交集只显示垂直的标尺 + if (data.tx >= data.sx && data.tx <= data.sx + data.sw) { + if (data.sy - (data.ty + data.th) >= buffer) { + this.changeRulerState("bottom", data); + } else if (data.ty - (data.sy + data.sh) >= buffer) { + this.changeRulerState("top", data); + } else { + //被选中图层(s)包含鼠标图层(t)(标尺总是由target指向selected) + this.changeRulerState("container-out", data); + } + } + }, + }; + + var xdata = document.createElement("script"); + xdata.onload = function () { + new Marketch({ + sketchData: pageData, + }).render(); + }; + xdata.src = "data.js"; + document.body.appendChild(xdata); + + diff --git a/index.html b/index.html index 5e60e40..e0f23b1 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,66 @@ - - + + Практика верстки - - - - - - \ No newline at end of file + + + +

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

+
+

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

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

+
+
+

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

+

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

+
+
+

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

+

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

+ 1 картинка +

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

Цепочка областей видимости вышеприведённого кода + будет выглядеть так: +

+ 2 картинка +

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

+
+ + diff --git a/styles.css b/styles.css index 1cbd2e0..d630df0 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,3 @@ -/* Тут пиши основные стили */ - - @media (max-width: 800px) { /* Тут пиши стили для мобилки. Стили применятся только когда страничка будет ≤800px шириной From 73e1c0bef2637c485208feb5c5a067ec99d059e4 Mon Sep 17 00:00:00 2001 From: fomidon Date: Tue, 1 Apr 2025 18:56:51 +0500 Subject: [PATCH 2/5] 2 --- index.html | 117 ++++++++++++++++++++++++++++------------------------- styles.css | 51 ++++++++++++++++++++++- 2 files changed, 110 insertions(+), 58 deletions(-) diff --git a/index.html b/index.html index e0f23b1..87e320d 100644 --- a/index.html +++ b/index.html @@ -6,61 +6,66 @@ -

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

-
-

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

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

-
-
-

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

-

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

-
-
-

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

-

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

- 1 картинка -

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

Цепочка областей видимости вышеприведённого кода - будет выглядеть так: -

- 2 картинка -

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

-
+
+

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

+
+

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

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

+
+
+

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

+

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

+
+
+

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

+

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

+ 1 картинка +

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

Цепочка областей видимости вышеприведённого кода будет + выглядеть так: +

+ 2 картинка +

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

+
+
diff --git a/styles.css b/styles.css index d630df0..560e136 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,52 @@ +main { + width: 700px; + display: flex; + margin: 0 auto; + flex-direction: column; +} + +.title { + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, + Arial, sans-serif; + margin-bottom: 10px; +} + +.simple_text { + margin-top: 0; + margin-bottom: 0; + font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 21px; + line-height: 33px; +} + +.title, +.simple_text { + color: rgba(0, 0, 0, 0.84); + text-align: left; +} + + .text_block { + margin-bottom: 30px; +} + +h1 { + font-size: 42px; + line-height: 44px; +} + +h2 { + font-size: 34px; + line-height: 39px; +} + +code { + font-family: "Courier New", monospace; + background-color: rgb(242,242,242); + color: rgb(96, 96, 96); +} + @media (max-width: 800px) { -/* Тут пиши стили для мобилки. + /* Тут пиши стили для мобилки. Стили применятся только когда страничка будет ≤800px шириной */ -} \ No newline at end of file +} From 58fa7a3db126e05339a6170c40fb07abe5cb298b Mon Sep 17 00:00:00 2001 From: fomidon Date: Tue, 1 Apr 2025 19:04:06 +0500 Subject: [PATCH 3/5] add nav --- index.html | 25 +++++++++++++++++++++++++ styles.css | 2 ++ 2 files changed, 27 insertions(+) diff --git a/index.html b/index.html index 87e320d..79a9e37 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,31 @@ +
+ + +

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

diff --git a/styles.css b/styles.css index 560e136..86752c6 100644 --- a/styles.css +++ b/styles.css @@ -5,6 +5,8 @@ main { flex-direction: column; } + + .title { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; From 0ee9113670812f86245cbbaf5d341b1e03531208 Mon Sep 17 00:00:00 2001 From: fomidon Date: Tue, 1 Apr 2025 19:30:11 +0500 Subject: [PATCH 4/5] 3 done --- index.html | 4 ++-- styles.css | 51 ++++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 50 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 79a9e37..229c807 100644 --- a/index.html +++ b/index.html @@ -17,10 +17,10 @@ Обо мне
  • - Проекты + Проекты
  • - Портфолио + Портфолио
  • Блог diff --git a/styles.css b/styles.css index 86752c6..81adc78 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,7 @@ +html, body { + margin: 0; +} + main { width: 700px; display: flex; @@ -5,6 +9,47 @@ main { flex-direction: column; } +.header_logo { + margin: 10px 0px 10px 38px; +} + +.header_menu { + background-color: lightgray; + margin: 0; + border-left: none; + border-right: none; + border: 1px black solid; +} + +.header_menu_item { + list-style: none; + padding-right: 15px; +} + +.header_menu_item { + font-family: LucidaGrande; + display: inline; + font-size: 24px; + color: #333333; + text-align: left; + line-height: 36px; + text-decoration: none; + cursor: pointer; +} + +/* .header_menu_item_link { + text-decoration: none; +} */ + +.header_menu_item_link:hover { + text-decoration: underline; +} + +.header_menu_item_link:visited { + color: red; +} + + .title { @@ -27,8 +72,8 @@ main { text-align: left; } - .text_block { - margin-bottom: 30px; +.text_block { + margin-bottom: 30px; } h1 { @@ -43,7 +88,7 @@ h2 { code { font-family: "Courier New", monospace; - background-color: rgb(242,242,242); + background-color: rgb(242, 242, 242); color: rgb(96, 96, 96); } From d91064758bd6f1db664c8029c249925520ba7697 Mon Sep 17 00:00:00 2001 From: fomidon Date: Tue, 1 Apr 2025 19:39:42 +0500 Subject: [PATCH 5/5] final --- styles.css | 29 +++++++++++++++++++++-------- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/styles.css b/styles.css index 81adc78..124452e 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,5 @@ -html, body { +html, +body { margin: 0; } @@ -9,6 +10,8 @@ main { flex-direction: column; } +/* HEADER */ + .header_logo { margin: 10px 0px 10px 38px; } @@ -37,9 +40,9 @@ main { cursor: pointer; } -/* .header_menu_item_link { +.header_menu_item_link { text-decoration: none; -} */ +} .header_menu_item_link:hover { text-decoration: underline; @@ -49,8 +52,7 @@ main { color: red; } - - +/* MAIN */ .title { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, @@ -93,7 +95,18 @@ code { } @media (max-width: 800px) { - /* Тут пиши стили для мобилки. - Стили применятся только когда страничка будет ≤800px шириной - */ + h1 { + font-family: LucidaGrande-Bold; + font-size: 26px; + color: rgba(0, 0, 0, 0.84); + text-align: left; + line-height: 28px; + } + h2 { + font-family: LucidaGrande-Bold; + font-size: 22px; + color: rgba(0, 0, 0, 0.84); + text-align: left; + line-height: 39px; + } }