jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-04-07 00:42:12 +03:00
parent 0d6ca23fb7
commit 59388d093e
37 changed files with 269 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

8
1-js/2-first-steps/2-external-script/article.md
View file

@ -165,12 +165,18 @@
При запуске вы увидите, что вся страница отобразилась тут же, а `alert` из внешнего скрипта появится позже, когда загрузится скрипт.
**Большинство современных системы рекламы и счётчиков знают про эти атрибуты и используют их.**
[smart header="Эти атрибуты давно \"в ходу\""]
Большинство современных системы рекламы и счётчиков знают про эти атрибуты и используют их.
Перед вставкой внешнего тега `<script>` понимающий программист всегда проверит, есть ли у него подобный атрибут. Иначе медленный скрипт может задержать загрузку страницы.
[/smart]
## Итого
<ul>
<li>Скрипты вставляются на страницу как текст в теге `<script>`, либо как внешний файл через `<script src="путь"></script>`</li>
<li>Специальные атрибуты `async` и `defer` используются для того, чтобы пока грузится внешний скрипт -- браузер показал остальную (следующую за ним) часть страницы. Без них этого не происходит.</li>
<li>Разница между `async` и `defer`: атрибут `defer` сохраняет относительную последовательность скриптов, а `async` -- нет.</li>
</ul>
Очень важно не только читать учебник, но делать что-то самостоятельно.

14
1-js/4-data-structures/7-array/array-pop.svg
View file

@ -6,19 +6,19 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="array-pop.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="102" y="81" width="37" height="54"></rect>
<rect id="Rectangle-2" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="138" y="81" width="37" height="54"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="102" y="81" width="37" height="54"></rect>
<rect id="Rectangle-2" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="138" y="81" width="37" height="54"></rect>
<text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="117" y="112">0</tspan>
</text>
<text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="154" y="112">1</tspan>
</text>
<rect id="Rectangle-3" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="174" y="81" width="37" height="54"></rect>
<rect id="Rectangle-3" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="174" y="81" width="37" height="54"></rect>
<text id="2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="190" y="112">2</tspan>
</text>
<rect id="Rectangle-4" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="210" y="81" width="37" height="54"></rect>
<rect id="Rectangle-4" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="210" y="81" width="37" height="54"></rect>
<text id="3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="226" y="112">3</tspan>
</text>
@ -41,15 +41,15 @@
<text id="очистить" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="272" y="97">очистить</tspan>
</text>
<rect id="Rectangle-7" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="362" y="81" width="37" height="54"></rect>
<rect id="Rectangle-5" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="398" y="81" width="37" height="54"></rect>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="362" y="81" width="37" height="54"></rect>
<rect id="Rectangle-5" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="398" y="81" width="37" height="54"></rect>
<text id="-1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="377" y="112">0</tspan>
</text>
<text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="414" y="112">1</tspan>
</text>
<rect id="Rectangle-6" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="434" y="81" width="37" height="54"></rect>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="434" y="81" width="37" height="54"></rect>
<text id="-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="450" y="112">2</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

Before After
Before After

22
1-js/4-data-structures/7-array/array-shift.svg
View file

@ -9,11 +9,11 @@
<text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="63" y="116.973154">1</tspan>
</text>
<rect id="Rectangle-3" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="83" y="85.973154" width="37" height="54"></rect>
<rect id="Rectangle-3" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="83" y="85.973154" width="37" height="54"></rect>
<text id="2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="99" y="116.973154">2</tspan>
</text>
<rect id="Rectangle-4" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="119" y="85.973154" width="37" height="54"></rect>
<rect id="Rectangle-4" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="119" y="85.973154" width="37" height="54"></rect>
<text id="3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="135" y="116.973154">3</tspan>
</text>
@ -29,19 +29,19 @@
<text id="length-=-4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="172" y="63.973154">length = 4</tspan>
</text>
<rect id="Rectangle-8" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="229" y="85.973154" width="37" height="54"></rect>
<rect id="Rectangle-5" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="265" y="85.973154" width="37" height="54"></rect>
<rect id="Rectangle-8" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="229" y="85.973154" width="37" height="54"></rect>
<rect id="Rectangle-5" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="265" y="85.973154" width="37" height="54"></rect>
<text id="-1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="244" y="116.973154">0</tspan>
</text>
<text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="281" y="116.973154">1</tspan>
</text>
<rect id="Rectangle-6" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="301" y="85.973154" width="37" height="54"></rect>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="301" y="85.973154" width="37" height="54"></rect>
<text id="-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="317" y="116.973154">2</tspan>
</text>
<rect id="Rectangle-7" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="337" y="85.973154" width="37" height="54"></rect>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="337" y="85.973154" width="37" height="54"></rect>
<text id="-4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="353" y="116.973154">3</tspan>
</text>
@ -67,8 +67,8 @@
<tspan x="393" y="137.973154">элементы</tspan>
<tspan x="393" y="156.973154">влево</tspan>
</text>
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="11" y="86" width="37" height="54"></rect>
<rect id="Rectangle-2" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="47" y="85.973154" width="37" height="54"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="11" y="86" width="37" height="54"></rect>
<rect id="Rectangle-2" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="47" y="85.973154" width="37" height="54"></rect>
<text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="26" y="116.973154">0</tspan>
</text>
@ -76,15 +76,15 @@
<tspan x="-1" y="53.973154">"Яблоко"</tspan>
</text>
<path d="M437,158.519052 L446,141.912886 L440,141.912886 L440,69.973154 L433.442871,69.973154 L434,141.912886 L428,141.912886 L437,158.519052 Z" id="Shape-2" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(437.000000, 114.246103) rotate(-90.000000) translate(-437.000000, -114.246103) "></path>
<rect id="Rectangle-12" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="495" y="85.973154" width="37" height="54"></rect>
<rect id="Rectangle-9" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="531" y="85.973154" width="37" height="54"></rect>
<rect id="Rectangle-12" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="495" y="85.973154" width="37" height="54"></rect>
<rect id="Rectangle-9" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="531" y="85.973154" width="37" height="54"></rect>
<text id="-5" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="510" y="116.973154">0</tspan>
</text>
<text id="-6" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="547" y="116.973154">1</tspan>
</text>
<rect id="Rectangle-10" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="567" y="85.973154" width="37" height="54"></rect>
<rect id="Rectangle-10" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="567" y="85.973154" width="37" height="54"></rect>
<text id="-7" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="583" y="116.973154">2</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB

Before After
Before After

16
1-js/4-data-structures/7-array/array-speed.svg
View file

@ -6,39 +6,39 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="array-speed.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="108" y="92" width="37" height="64"></rect>
<rect id="Rectangle-2" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="144" y="92" width="37" height="64"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="108" y="92" width="37" height="64"></rect>
<rect id="Rectangle-2" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="144" y="92" width="37" height="64"></rect>
<text id="0" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="122.5" y="128.5">0</tspan>
</text>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="159.5" y="128.5">1</tspan>
</text>
<rect id="Rectangle-3" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="180" y="92" width="37" height="64"></rect>
<rect id="Rectangle-3" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="180" y="92" width="37" height="64"></rect>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="195.5" y="128.5">2</tspan>
</text>
<rect id="Rectangle-4" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="216" y="92" width="37" height="64"></rect>
<rect id="Rectangle-4" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="216" y="92" width="37" height="64"></rect>
<text id="3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="231.5" y="128.5">3</tspan>
</text>
<path d="M326.5,117.5 L331,111.30787 L328,111.30787 L328,95.5 L325,95.5 L325,111.30787 L322,111.30787 L326.5,117.5 Z" id="Shape-5" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(326.500000, 106.500000) rotate(-90.000000) translate(-326.500000, -106.500000) "></path>
<rect id="Rectangle-5" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="263" y="94" width="48" height="24"></rect>
<rect id="Rectangle-5" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="263" y="94" width="48" height="24"></rect>
<text id="pop" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="274.001465" y="110">pop</tspan>
</text>
<path d="M94.5,117.5 L99,111.30787 L96,111.30787 L96,95.5 L93,95.5 L93,111.30787 L90,111.30787 L94.5,117.5 Z" id="Shape-2" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(94.500000, 106.500000) rotate(-90.000000) translate(-94.500000, -106.500000) "></path>
<rect id="Rectangle-6" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="18" y="95" width="63" height="24"></rect>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="18" y="95" width="63" height="24"></rect>
<text id="unshift" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="25.0195312" y="112">unshift</tspan>
</text>
<path d="M326.5,152.5 L331,146.30787 L328,146.30787 L328,130.5 L325,130.5 L325,146.30787 L322,146.30787 L326.5,152.5 Z" id="Shape-3" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(326.500000, 141.500000) scale(-1, 1) rotate(-90.000000) translate(-326.500000, -141.500000) "></path>
<rect id="Rectangle-7" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" transform="translate(287.000000, 141.000000) scale(-1, 1) translate(-287.000000, -141.000000) " x="263" y="129" width="48" height="24"></rect>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" transform="translate(287.000000, 141.000000) scale(-1, 1) translate(-287.000000, -141.000000) " x="263" y="129" width="48" height="24"></rect>
<text id="push" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="270.344238" y="146">push</tspan>
</text>
<path d="M93.5,152.5 L98,146.30787 L95,146.30787 L95,130.5 L92,130.5 L92,146.30787 L89,146.30787 L93.5,152.5 Z" id="Shape-4" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(93.500000, 141.500000) scale(-1, 1) rotate(-90.000000) translate(-93.500000, -141.500000) "></path>
<rect id="Rectangle-8" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" transform="translate(48.500000, 142.000000) scale(-1, 1) translate(-48.500000, -142.000000) " x="17" y="130" width="63" height="24"></rect>
<rect id="Rectangle-8" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" transform="translate(48.500000, 142.000000) scale(-1, 1) translate(-48.500000, -142.000000) " x="17" y="130" width="63" height="24"></rect>
<text id="shift" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="33.40625" y="147">shift</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

Before After
Before After

8
1-js/4-data-structures/8-array-methods/9-output-single-linked-list/linked-list.svg
View file

@ -6,7 +6,7 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="linked-list.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-15" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="10" y="29" width="80" height="34"></rect>
<rect id="Rectangle-15" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="10" y="29" width="80" height="34"></rect>
<text id="value" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="13" y="20">value</tspan>
</text>
@ -18,7 +18,7 @@
<text id="next" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="99" y="34">next</tspan>
</text>
<rect id="Rectangle-11" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="150" y="29" width="80" height="34"></rect>
<rect id="Rectangle-11" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="150" y="29" width="80" height="34"></rect>
<text id="value-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="153" y="20">value</tspan>
</text>
@ -30,7 +30,7 @@
<text id="next-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="239" y="34">next</tspan>
</text>
<rect id="Rectangle-13" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="289" y="29" width="80" height="34"></rect>
<rect id="Rectangle-13" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="289" y="29" width="80" height="34"></rect>
<text id="value-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="292" y="20">value</tspan>
</text>
@ -42,7 +42,7 @@
<text id="next-3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="378" y="34">next</tspan>
</text>
<rect id="Rectangle-14" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="429" y="29" width="80" height="34"></rect>
<rect id="Rectangle-14" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="429" y="29" width="80" height="34"></rect>
<text id="value-4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="432" y="20">value</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

Before After
Before After

10
1-js/4-data-structures/9-array-iteration/reduce.svg
View file

@ -6,7 +6,7 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="reduce.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="8" y="74" width="80" height="40"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="8" y="74" width="80" height="40"></rect>
<text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="44" y="99">1</tspan>
</text>
@ -16,7 +16,7 @@
<tspan x="15" y="49">current</tspan>
<tspan x="15" y="65">1</tspan>
</text>
<rect id="Rectangle-2" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="87" y="74" width="80" height="40"></rect>
<rect id="Rectangle-2" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="87" y="74" width="80" height="40"></rect>
<text id="2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="123" y="99">2</tspan>
</text>
@ -26,7 +26,7 @@
<tspan x="94" y="49">current</tspan>
<tspan x="94" y="65">2</tspan>
</text>
<rect id="Rectangle-3" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="166" y="74" width="80" height="40"></rect>
<rect id="Rectangle-3" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="166" y="74" width="80" height="40"></rect>
<text id="3" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="202" y="99">3</tspan>
</text>
@ -36,7 +36,7 @@
<tspan x="173" y="49">current</tspan>
<tspan x="173" y="65">3</tspan>
</text>
<rect id="Rectangle-5" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="245" y="74" width="80" height="40"></rect>
<rect id="Rectangle-5" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="245" y="74" width="80" height="40"></rect>
<text id="4" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="281" y="99">4</tspan>
</text>
@ -46,7 +46,7 @@
<tspan x="252" y="49">current</tspan>
<tspan x="252" y="65">4</tspan>
</text>
<rect id="Rectangle-4" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="324" y="74" width="80" height="40"></rect>
<rect id="Rectangle-4" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="324" y="74" width="80" height="40"></rect>
<text id="5" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="360" y="99">5</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

Before After
Before After

2
1-js/5-functions-closures/6-memory-management/family-no-family.svg
View file

@ -8,7 +8,7 @@
<g id="family-no-family.svg" sketch:type="MSArtboardGroup">
<path d="M256.5,233.5 L197.5,233.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M197.5,233.5 C201.28,234.55 204.52,235.45 208.3,236.5 C208.3,234.4 208.3,232.6 208.3,230.5 C204.52,231.55 201.28,232.45 197.5,233.5 C197.5,233.5 197.5,233.5 197.5,233.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="167" y="24" width="120" height="50"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="167" y="24" width="120" height="50"></rect>
<text id="window" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="201" y="17">window</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

Before After
Before After

2
1-js/5-functions-closures/6-memory-management/family-no-father-2.svg
View file

@ -6,7 +6,7 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="family-no-father-2.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="33" y="24" width="80" height="30"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="33" y="24" width="80" height="30"></rect>
<text id="window" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="33" y="17">window</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

Before After
Before After

2
1-js/5-functions-closures/6-memory-management/family-no-father.svg
View file

@ -6,7 +6,7 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="family-no-father.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="186" y="27" width="80" height="30"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="186" y="27" width="80" height="30"></rect>
<text id="window" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="186" y="20">window</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

Before After
Before After

2
1-js/5-functions-closures/6-memory-management/family.svg
View file

@ -8,7 +8,7 @@
<g id="family.svg" sketch:type="MSArtboardGroup">
<path d="M192.5,201.5 L133.5,201.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M133.5,201.5 C137.28,202.55 140.52,203.45 144.3,204.5 C144.3,202.4 144.3,200.6 144.3,198.5 C140.52,199.55 137.28,200.45 133.5,201.5 C133.5,201.5 133.5,201.5 133.5,201.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="122" y="23" width="80" height="30"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="122" y="23" width="80" height="30"></rect>
<text id="window" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="122" y="16">window</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

Before After
Before After

4
1-js/9-prototypes/1-prototype/proto-animal-rabbit.svg
View file

@ -6,14 +6,14 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="proto-animal-rabbit.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="13" y="22" width="120" height="30"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="13" y="22" width="120" height="30"></rect>
<text id="eats:-true" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="24" y="40">eats: true</tspan>
</text>
<text id="animal" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="13" y="15">animal</tspan>
</text>
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="13" y="110" width="120" height="30"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="13" y="110" width="120" height="30"></rect>
<text id="jumps:-true" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="24" y="128">jumps: true</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Before After
Before After

6
1-js/9-prototypes/3-native-prototypes/native-prototypes-array-tostring.svg
View file

@ -6,7 +6,7 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="native-prototypes-array-tostring.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="16" y="160" width="200" height="60"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="16" y="160" width="200" height="60"></rect>
<text id="toString:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="27" y="184">toString: function</tspan>
<tspan x="27" y="200">...</tspan>
@ -14,7 +14,7 @@
<text id="Array.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="16" y="153">Array.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="16" y="27" width="200" height="60"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="16" y="27" width="200" height="60"></rect>
<text id="toString:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="27" y="51">toString: function</tspan>
<tspan x="27" y="67">...</tspan>
@ -22,7 +22,7 @@
<text id="Object.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="16" y="20">Object.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="16" y="277" width="200" height="30"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="16" y="277" width="200" height="30"></rect>
<path d="M76.5,268.5 L76.5,227.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M76.5,227.5 C75.45,231.28 74.55,234.52 73.5,238.3 C75.6,238.3 77.4,238.3 79.5,238.3 C78.45,234.52 77.55,231.28 76.5,227.5 C76.5,227.5 76.5,227.5 76.5,227.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

Before After
Before After

14
1-js/9-prototypes/3-native-prototypes/native-prototypes-classes.svg
View file

@ -6,7 +6,7 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="native-prototypes-classes.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="239" y="92" width="200" height="60"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="239" y="92" width="200" height="60"></rect>
<text id="toString:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="250" y="116">toString: function</tspan>
<tspan x="250" y="132">другие методы объектов</tspan>
@ -24,7 +24,7 @@
<text id="null" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="285" y="16">null</tspan>
</text>
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="13" y="223" width="200" height="60"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="13" y="223" width="200" height="60"></rect>
<text id="slice:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="24" y="247">slice: function</tspan>
<tspan x="24" y="263">другие методы массивов</tspan>
@ -35,7 +35,7 @@
<text id="Array.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="13" y="216">Array.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="242" y="223" width="200" height="60"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="242" y="223" width="200" height="60"></rect>
<text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="309" y="182">__proto__</tspan>
</text>
@ -46,7 +46,7 @@
<text id="Function.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="242" y="216">Function.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="473" y="223" width="200" height="60"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="473" y="223" width="200" height="60"></rect>
<text id="toFixed:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="484" y="247">toFixed: function</tspan>
<tspan x="484" y="263">другие методы чисел</tspan>
@ -61,17 +61,17 @@
<path id="Line-decoration-1" d="M219.676548,157.880055 C215.80445,158.510737 212.485509,159.051323 208.613412,159.682005 C209.493434,161.58872 210.247739,163.223047 211.127761,165.129761 C214.119836,162.592364 216.684472,160.417452 219.676548,157.880055 C219.676548,157.880055 219.676548,157.880055 219.676548,157.880055 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M539.5,193.5 L462.5,157.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M462.5,157.5 C465.479529,160.052118 468.033412,162.239647 471.012941,164.791765 C471.902353,162.889412 472.664706,161.258824 473.554118,159.356471 C469.685176,158.706706 466.368941,158.149765 462.5,157.5 C462.5,157.5 462.5,157.5 462.5,157.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<rect id="Rectangle-5" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="47" y="338" width="119" height="25"></rect>
<rect id="Rectangle-5" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="47" y="338" width="119" height="25"></rect>
<text id="[1,-2,-3]" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="71" y="354">[1, 2, 3]</tspan>
</text>
<rect id="Rectangle-6" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="250" y="338" width="181" height="67"></rect>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="250" y="338" width="181" height="67"></rect>
<text id="function-f(args)-{" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="264" y="358">function f(args) {</tspan>
<tspan x="264" y="374"> ...</tspan>
<tspan x="264" y="390">}</tspan>
</text>
<rect id="Rectangle-7" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="540" y="338" width="71" height="25"></rect>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="540" y="338" width="71" height="25"></rect>
<text id="5" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="573" y="355">5</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 9.6 KiB

Before After
Before After

4
1-js/9-prototypes/3-native-prototypes/native-prototypes-object.svg
View file

@ -6,7 +6,7 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="native-prototypes-object.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="13" y="95" width="200" height="60"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="13" y="95" width="200" height="60"></rect>
<text id="toString:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="24" y="119">toString: function</tspan>
<tspan x="24" y="135">другие методы объектов</tspan>
@ -14,7 +14,7 @@
<text id="Object.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="13" y="88">Object.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="13" y="212" width="200" height="30"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="13" y="212" width="200" height="30"></rect>
<text id="obj" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="13" y="205">obj</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

Before After
Before After

6
1-js/9-prototypes/5-class-inheritance/class-inheritance-array-object.svg
View file

@ -6,7 +6,7 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="class-inheritance-array-object.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="12" y="157.109589" width="200" height="60"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="12" y="157.109589" width="200" height="60"></rect>
<text id="slice:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="23" y="181.109589">slice: function</tspan>
<tspan x="23" y="197.109589">...</tspan>
@ -17,7 +17,7 @@
<text id="arr" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="12" y="267.109589">arr</tspan>
</text>
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="12" y="24.109589" width="200" height="60"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="12" y="24.109589" width="200" height="60"></rect>
<text id="hasOwnProperty:-func" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="23" y="48.109589">hasOwnProperty: function</tspan>
<tspan x="23" y="64.109589">...</tspan>
@ -25,7 +25,7 @@
<text id="Object.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="12" y="17.109589">Object.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="12" y="274.109589" width="200" height="30"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="12" y="274.109589" width="200" height="30"></rect>
<path d="M72.5,265.609589 L72.5,224.609589" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M72.5,224.609589 C71.45,228.389589 70.55,231.629589 69.5,235.409589 C71.6,235.409589 73.4,235.409589 75.5,235.409589 C74.45,231.629589 73.55,228.389589 72.5,224.609589 C72.5,224.609589 72.5,224.609589 72.5,224.609589 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

Before After
Before After

6
1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-animal.svg
View file

@ -6,7 +6,7 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="class-inheritance-rabbit-animal.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="14" y="160" width="200" height="30"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="14" y="160" width="200" height="30"></rect>
<text id="jump:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="25" y="179">jump: function</tspan>
</text>
@ -16,7 +16,7 @@
<text id="rabbit" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="14" y="249">rabbit</tspan>
</text>
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="14" y="27" width="200" height="50"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="14" y="27" width="200" height="50"></rect>
<text id="run:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="25" y="48">run: function</tspan>
<tspan x="25" y="64">stop: function</tspan>
@ -24,7 +24,7 @@
<text id="Animal.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="14" y="20">Animal.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="14" y="257" width="200" height="50"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="14" y="257" width="200" height="50"></rect>
<path d="M74.5,244.5 L74.5,203.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M74.5,203.5 C73.45,207.28 72.55,210.52 71.5,214.3 C73.6,214.3 75.4,214.3 77.5,214.3 C76.45,210.52 75.55,207.28 74.5,203.5 C74.5,203.5 74.5,203.5 74.5,203.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

Before After
Before After

6
1-js/9-prototypes/5-class-inheritance/class-inheritance-rabbit-run-animal.svg
View file

@ -6,7 +6,7 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="class-inheritance-rabbit-run-animal.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="13" y="156" width="200" height="50"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="13" y="156" width="200" height="50"></rect>
<text id="jump:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal">
<tspan x="24" y="175" fill="#8A704D">jump: function</tspan>
<tspan x="131.761719" y="175" fill="#999647"></tspan>
@ -18,7 +18,7 @@
<text id="rabbit" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="13" y="264">rabbit</tspan>
</text>
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="13" y="23" width="200" height="50"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="13" y="23" width="200" height="50"></rect>
<text id="run:-function" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="24" y="44">run: function</tspan>
<tspan x="24" y="60">stop: function</tspan>
@ -26,7 +26,7 @@
<text id="Animal.prototype" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-style="italic" font-weight="normal" fill="#8A704D">
<tspan x="13" y="16">Animal.prototype</tspan>
</text>
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="13" y="272" width="200" height="50"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="13" y="272" width="200" height="50"></rect>
<path d="M73.5,259.5 L73.5,218.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M73.5,218.5 C72.45,222.28 71.55,225.52 70.5,229.3 C72.6,229.3 74.4,229.3 76.5,229.3 C75.45,225.52 74.55,222.28 73.5,218.5 C73.5,218.5 73.5,218.5 73.5,218.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<text id="__proto__" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#EE6B47">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4 KiB

After

Width:  |  Height:  |  Size: 4 KiB

Before After
Before After

2
11-regular-expressions-javascript/12-regexp-alternation/1-find-programming-language/solution.md
View file

@ -15,7 +15,7 @@ alert( str.match(reg) ); // Java,Java,PHP,C,C
Естественно, при этом <code class="match">JavaScript</code> не будет найдено никогда.
То же самое -- с <code class="match">C</code> и <code class="match">C++</code>.
То же самое -- с языками <code class="match">C</code> и <code class="match">C++</code>.
Есть два решения проблемы:

4
11-regular-expressions-javascript/12-regexp-alternation/2-match-quoted-string/solution.md
View file

@ -13,7 +13,7 @@
```js
//+ run
var re = /"(\\.|[^"\\])*"/g;
var str = '.. "test me" .. "Скажи \\"Привет\\"!" .. "\\r\\n" ..';
var str = '.. "test me" .. "Скажи \\"Привет\\"!" .. "\\r\\n\\\\" ..';
alert( str.match(re) ); // "test me","Скажи \"Привет\"!","\r\n"
alert( str.match(re) ); // "test me","Скажи \"Привет\"!","\r\n\\"
```

23
11-regular-expressions-javascript/12-regexp-alternation/2-match-quoted-string/task.md
View file

@ -1,27 +1,26 @@
# Найдите строки в кавычках
Найдите при помощи регэкспа строки в двойных кавычках <code class="subject">"..."</code>.
Найдите в тексте при помощи регэкспа строки в двойных кавычках <code class="subject">"..."</code>.
В строке *могут* быть любые символы, включая вложенные кавычки, заэкранированные слэшем, то есть: <code class="subject">\"</code>, <code class="subject">\n</code>. Слэш удваивается, чтобы вставить его как символ: <code class="subject">\\</code>.
В строке поддерживается экранирование при помощи слеша -- примерно в таком же виде, как в обычных строках JavaScript. То есть, строка может содержать любые символы, экранированные слэшем, в частности: <code class="subject">\"</code>, <code class="subject">\n</code>, и даже сам слэш в экранированном виде: <code class="subject">\\</code>.
Иначе говоря, синтаксис строки -- примерно соответствует используемому в JavaScript. Нужно такие строки найти.
Здесь особо важно, что двойная кавычка после слэша не оканчивает строку, а считается её частью. В этом и состоит основная сложность задачи, которая без этого условия была бы элементарной.
Пример совпадающих строк:
```js
var str = ' .. *!*"test me"*/!* .. ';
var str = ' .. *!*"Скажи \\"Привет\\"!"*/!* ... ';
var str = ' .. *!*"\\r\\n"*/!* .. ';
.. *!*"test me"*/!* .. (обычная строка)
.. *!*"Скажи \"Привет\"!"*/!* ... (строка с кавычками внутри)
.. *!*"\r\n\\"*/!* .. (строка со спец. символами и слэшем внутри)
```
Слэши в этих строках удвоены по технической причине -- в JavaScript кавычки `'...'` считают слэш специальным символом и требуют его экранировать.
Заметим, что в JavaScript такие строки удобнее всего задавать в одинарных кавычках, и слеши придётся удвоить (в одинарных кавычках они являются экранирующими символами):
Так что на самом деле, к примеру, в такой строке одинарные слэши:
Пример задания тестовой строки в JavaScript:
```js
//+ run
var str = ' .. *!*"Скажи \\"Привет\\"!"*/!* ... ';
var str = ' .. "test me" .. "Скажи \\"Привет\\"!" .. "\\r\\n\\\\" .. ';
alert(str); // .. "Скажи \"Привет\" ...
// эта строка будет такой:
alert(str); // .. "test me" .. "Скажи \"Привет\"!" .. "\r\n\\" ..
```

6
11-regular-expressions-javascript/13-regexp-ahchors/1-start-end/solution.md Normal file
View file

@ -0,0 +1,6 @@
Нам нужна строка, которая начинается -- и тут же кончается. То есть, пустая.
Или, если быть ближе к механике регэкспов, то движок сначала будет искать в тексте начальную позицию ``pattern`^`, а как только найдёт её -- будет ожидать конечной ``pattern`$`.
Заметим, что и ``pattern`^` и ``pattern`$` не требуют наличия символов. Это -- проверки. В пустой строке движок сначала проверит первую, а потом -- вторую -- и зафиксирует совпадение.

4
11-regular-expressions-javascript/13-regexp-ahchors/1-start-end/task.md Normal file
View file

@ -0,0 +1,4 @@
# Регэксп ^$
Предложите строку, которая подойдёт под регулярное выражение ``pattern`^$`.

2
11-regular-expressions-javascript/13-regexp-ahchors-and-multiline-mode/article.md → 11-regular-expressions-javascript/13-regexp-ahchors/article.md
View file

@ -1,4 +1,4 @@
# Начало ^ и конец $ строки, многострочный режим
# Начало строки ^ и конец $
Знак каретки <code class="pattern">'^'</code> и доллара <code class="pattern">'$'</code> имеют в регулярном выражении особый смысл. Их называют "якорями" (anchor - англ.).
[cut]

2
2-ui/1-document/1-browser-environment/windowObjects.svg
View file

@ -6,7 +6,7 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="windowObjects.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-1" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="135" y="9" width="80" height="30"></rect>
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="135" y="9" width="80" height="30"></rect>
<text id="window" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="normal" fill="#707175">
<tspan x="152" y="28">window</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

Before After
Before After

2
2-ui/1-document/17-coordinates/coords.svg
View file

@ -13,7 +13,7 @@
<path d="M72.2916667,32 C72.2916667,35.536 69.0566146,38.4 65.0625,38.4 C61.0683854,38.4 57.8333333,35.536 57.8333333,32 C57.8333333,28.464 61.0683854,25.6 65.0625,25.6 C69.0566146,25.6 72.2916667,28.464 72.2916667,32 L72.2916667,32 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M101.208333,32 C101.208333,35.536 97.9732812,38.4 93.9791667,38.4 C89.9850521,38.4 86.75,35.536 86.75,32 C86.75,28.464 89.9850521,25.6 93.9791667,25.6 C97.9732812,25.6 101.208333,28.464 101.208333,32 L101.208333,32 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
<rect id="Rectangle-6" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="151" y="145.957" width="75" height="29.043"></rect>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="151" y="145.957" width="75" height="29.043"></rect>
<text id="&lt;DIV&gt;" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="169.051859" y="165.543917">&lt;DIV&gt;</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

Before After
Before After

62
2-ui/1-document/4-traversing-dom/article.md
View file

@ -354,6 +354,56 @@ alert( table.*!*rows[0].cells[0]*/!*.innerHTML ) // "один"
Аналогичные полезные свойства есть у HTML-форм, они позволяют из формы получить все её элементы, а из них -- в свою очередь, форму. Мы рассмотрим их позже.
# Интерактивное путешествие
Для того, чтобы убедиться, что вы разобрались с навигацией по DOM-ссылкам -- вашему вниманию предлагается интерактивное путешествие по DOM.
Ниже вы найдёте документ (в ифрейме), и кнопки для перехода по нему.
Изначальный элемент -- `<html>`. Попробуйте по ссылкам найти "информацию". Или ещё чего-нибудь.
Вы также можете открыть документ [в отдельном окне](travel/) и походить по нему в браузерной консоли разработчика, чтобы лучше понять разницу между показанным там DOM и реальным.
Разметка:
[html src="travel/index.html"/]
Документ:
[iframe id="travel-dom-iframe" src="travel" height=150]
<div id="travel-dom-control">
Навигация:
<ul>
<li><input type="button" data-travel-dir="parentNode" value="Вверх (parentNode)">
<ul>
<li><input type="button" data-travel-dir="previousSibling" value="previousSibling"></li>
<li><b>Здесь стоите вы <code data-travel-prop="nodeText"></code></b>
<ul>
<li><input type="button" data-travel-dir="firstChild" value="firstChild"></li>
<li><input type="button" data-travel-dir="lastChild" value="lastChild"></li>
</ul>
</li>
<li><input type="button" data-travel-dir="nextSibling" value="nextSibling"></li>
</ul>
</li>
</ul>
<div id="travel-dom-comment"></div>
<!--
<div class="nodeTypeEx-readControl">
Получить:
<input placeholder="название" type="text" id="nodeTypeEx-read" style="width: 80px" value=""/><input type="button" value="атрибут" onclick="nodeTypeEx.read(true)"/><input type="button" value="свойство" onclick="nodeTypeEx.read(false)"/>
</div>
-->
</div>
<script src="https://js.cx/script/travel.js?26"></script>
# Итого
В DOM доступна навигация по соседним узлам через ссылки:
@ -368,3 +418,15 @@ alert( table.*!*rows[0].cells[0]*/!*.innerHTML ) // "один"
d3
domtree
[/libs]
[head]
<style>
#travel-dom-comment {
font-style: italic;
}
#travel-dom-control ul {
margin: 6px 0;
}
</style>
[/head]

76
2-ui/1-document/4-traversing-dom/dom-links-elements.svg
View file

@ -1,61 +1,67 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="440px" height="309px" viewBox="0 0 440 309" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<svg width="440px" height="316px" viewBox="0 0 440 316" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>dom-links-elements.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="dom-links-elements.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-8" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="131" y="5" width="194" height="24"></rect>
<rect id="Rectangle-8" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="128" y="9" width="200" height="30"></rect>
<text id="document.documentEle" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#8A704D">
<tspan x="137.692383" y="22">document.documentElement &lt;HTML&gt;</tspan>
<tspan x="136.632812" y="29">document.documentElement </tspan>
</text>
<rect id="Rectangle-7" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="165" y="73" width="113" height="24"></rect>
<text id="document.body-(если-" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#8A704D">
<tspan x="172.84375" y="90">document.body (если внутри body)</tspan>
<text id="Type-something" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#8A704D">
<tspan x="335.408203" y="29">&lt;HTML&gt;</tspan>
</text>
<path d="M221.5,67.5 L221.5,37.5" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-4-decoration-1" d="M221.5,37.5 C220.45,41.28 219.55,44.52 218.5,48.3 C220.6,48.3 222.4,48.3 224.5,48.3 C223.45,44.52 222.55,41.28 221.5,37.5 C221.5,37.5 221.5,37.5 221.5,37.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M233.2715,132.2195 C233.9275,132.2195 234.4565,132.7755 234.4565,133.4575 C234.4565,134.1385 233.9275,134.6935 233.2455,134.6935 C232.5895,134.6935 232.0595,134.1385 232.0595,133.4575 C232.0595,132.7755 232.5895,132.2195 233.2715,132.2195 L233.2715,132.2195 Z M231.1755,137.6715 C230.4935,137.6715 229.9645,137.1165 229.9645,136.4345 C229.9645,135.7535 230.4935,135.1985 231.1515,135.1985 C231.8325,135.1985 232.3625,135.7535 232.3625,136.4345 C232.3625,137.1165 231.8325,137.6715 231.1755,137.6715 L231.1755,137.6715 Z M231.1755,129.2415 C231.8325,129.2415 232.3625,129.7975 232.3625,130.4785 C232.3625,131.1605 231.8325,131.7155 231.1515,131.7155 C230.4935,131.7155 229.9645,131.1605 229.9645,130.4785 C229.9645,129.7975 230.4935,129.2415 231.1755,129.2415 L231.1755,129.2415 Z M229.6615,132.2955 C230.3185,132.2955 230.8475,132.8505 230.8475,133.5325 C230.8475,134.1885 230.3185,134.7435 229.6365,134.7435 C228.9805,134.7435 228.4495,134.1885 228.4495,133.5075 C228.4495,132.8505 228.9805,132.2955 229.6615,132.2955 L229.6615,132.2955 Z M229.0815,140.6495 C228.4245,140.6495 227.8695,140.0945 227.8695,139.4135 C227.8695,138.7315 228.4005,138.2015 229.0565,138.2015 C229.7375,138.2015 230.2675,138.7315 230.2675,139.4135 C230.2675,140.0945 229.7375,140.6495 229.0815,140.6495 L229.0815,140.6495 Z M229.0815,126.2635 C229.7375,126.2635 230.2675,126.8195 230.2675,127.5005 C230.2675,128.1815 229.7375,128.7375 229.0565,128.7375 C228.4005,128.7375 227.8695,128.1815 227.8695,127.5005 C227.8695,126.8195 228.4245,126.2635 229.0815,126.2635 L229.0815,126.2635 Z M226.9875,143.6275 C226.3305,143.6275 225.7755,143.0725 225.7755,142.3905 C225.7755,141.7105 226.3045,141.1795 226.9605,141.1795 C227.6425,141.1795 228.1725,141.7105 228.1725,142.3905 C228.1725,143.0725 227.6425,143.6275 226.9875,143.6275 L226.9875,143.6275 Z M226.9875,123.2855 C227.6425,123.2855 228.1725,123.8415 228.1725,124.5225 C228.1725,125.2035 227.6425,125.7595 226.9605,125.7595 C226.3045,125.7595 225.7755,125.2035 225.7755,124.5225 C225.7755,123.8415 226.3305,123.2855 226.9875,123.2855 L226.9875,123.2855 Z M226.0015,132.2955 C226.6575,132.2955 227.1885,132.8505 227.1885,133.5325 C227.1885,134.1885 226.6575,134.7435 225.9775,134.7435 C225.3215,134.7435 224.7905,134.1885 224.7905,133.5075 C224.7905,132.8505 225.3465,132.2955 226.0015,132.2955 L226.0015,132.2955 Z M222.3675,132.2955 C223.0245,132.2955 223.5545,132.8505 223.5545,133.5325 C223.5545,134.1885 222.9985,134.7435 222.3425,134.7435 C221.6865,134.7435 221.1305,134.1885 221.1305,133.5075 C221.1305,132.8505 221.6865,132.2955 222.3675,132.2955 L222.3675,132.2955 Z M218.7085,132.2955 C219.3645,132.2955 219.8945,132.8505 219.8945,133.5325 C219.8945,134.1885 219.3645,134.7435 218.6835,134.7435 C218.0275,134.7435 217.4965,134.1885 217.4965,133.5075 C217.4965,132.8505 218.0275,132.2955 218.7085,132.2955 L218.7085,132.2955 Z M215.0485,132.2955 C215.7045,132.2955 216.2355,132.8505 216.2355,133.5325 C216.2355,134.1885 215.7045,134.7435 215.0235,134.7435 C214.3665,134.7435 213.8365,134.1885 213.8365,133.5075 C213.8365,132.8505 214.3925,132.2955 215.0485,132.2955 L215.0485,132.2955 Z M211.4145,132.2955 C212.0705,132.2955 212.6005,132.8505 212.6005,133.5325 C212.6005,134.1885 212.0455,134.7435 211.3885,134.7435 C210.7335,134.7435 210.1775,134.1885 210.1775,133.5075 C210.1775,132.8505 210.7335,132.2955 211.4145,132.2955 L211.4145,132.2955 Z M207.7545,132.2955 C208.4105,132.2955 208.9415,132.8505 208.9415,133.5325 C208.9415,134.1885 208.4105,134.7435 207.7295,134.7435 C207.0735,134.7435 206.5435,134.1885 206.5435,133.5075 C206.5435,132.8505 207.0735,132.2955 207.7545,132.2955 L207.7545,132.2955 Z" id="Fill-7" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(220.500000, 133.456500) rotate(-90.000000) translate(-220.500000, -133.456500) "></path>
<path d="M14.5,108 L427,108" id="Line-5" stroke="#8A704D" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="162" y="77" width="119" height="30"></rect>
<text id="document.body--" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#8A704D">
<tspan x="170.967773" y="95">document.body </tspan>
</text>
<text id="Type-something" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#8A704D">
<tspan x="289.224609" y="95">(если внутри body)</tspan>
</text>
<path d="M221.5,74.5 L221.5,44.5" id="Line-4" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-4-decoration-1" d="M221.5,44.5 C220.45,48.28 219.55,51.52 218.5,55.3 C220.6,55.3 222.4,55.3 224.5,55.3 C223.45,51.52 222.55,48.28 221.5,44.5 C221.5,44.5 221.5,44.5 221.5,44.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M233.2715,139.2195 C233.9275,139.2195 234.4565,139.7755 234.4565,140.4575 C234.4565,141.1385 233.9275,141.6935 233.2455,141.6935 C232.5895,141.6935 232.0595,141.1385 232.0595,140.4575 C232.0595,139.7755 232.5895,139.2195 233.2715,139.2195 L233.2715,139.2195 Z M231.1755,144.6715 C230.4935,144.6715 229.9645,144.1165 229.9645,143.4345 C229.9645,142.7535 230.4935,142.1985 231.1515,142.1985 C231.8325,142.1985 232.3625,142.7535 232.3625,143.4345 C232.3625,144.1165 231.8325,144.6715 231.1755,144.6715 L231.1755,144.6715 Z M231.1755,136.2415 C231.8325,136.2415 232.3625,136.7975 232.3625,137.4785 C232.3625,138.1605 231.8325,138.7155 231.1515,138.7155 C230.4935,138.7155 229.9645,138.1605 229.9645,137.4785 C229.9645,136.7975 230.4935,136.2415 231.1755,136.2415 L231.1755,136.2415 Z M229.6615,139.2955 C230.3185,139.2955 230.8475,139.8505 230.8475,140.5325 C230.8475,141.1885 230.3185,141.7435 229.6365,141.7435 C228.9805,141.7435 228.4495,141.1885 228.4495,140.5075 C228.4495,139.8505 228.9805,139.2955 229.6615,139.2955 L229.6615,139.2955 Z M229.0815,147.6495 C228.4245,147.6495 227.8695,147.0945 227.8695,146.4135 C227.8695,145.7315 228.4005,145.2015 229.0565,145.2015 C229.7375,145.2015 230.2675,145.7315 230.2675,146.4135 C230.2675,147.0945 229.7375,147.6495 229.0815,147.6495 L229.0815,147.6495 Z M229.0815,133.2635 C229.7375,133.2635 230.2675,133.8195 230.2675,134.5005 C230.2675,135.1815 229.7375,135.7375 229.0565,135.7375 C228.4005,135.7375 227.8695,135.1815 227.8695,134.5005 C227.8695,133.8195 228.4245,133.2635 229.0815,133.2635 L229.0815,133.2635 Z M226.9875,150.6275 C226.3305,150.6275 225.7755,150.0725 225.7755,149.3905 C225.7755,148.7105 226.3045,148.1795 226.9605,148.1795 C227.6425,148.1795 228.1725,148.7105 228.1725,149.3905 C228.1725,150.0725 227.6425,150.6275 226.9875,150.6275 L226.9875,150.6275 Z M226.9875,130.2855 C227.6425,130.2855 228.1725,130.8415 228.1725,131.5225 C228.1725,132.2035 227.6425,132.7595 226.9605,132.7595 C226.3045,132.7595 225.7755,132.2035 225.7755,131.5225 C225.7755,130.8415 226.3305,130.2855 226.9875,130.2855 L226.9875,130.2855 Z M226.0015,139.2955 C226.6575,139.2955 227.1885,139.8505 227.1885,140.5325 C227.1885,141.1885 226.6575,141.7435 225.9775,141.7435 C225.3215,141.7435 224.7905,141.1885 224.7905,140.5075 C224.7905,139.8505 225.3465,139.2955 226.0015,139.2955 L226.0015,139.2955 Z M222.3675,139.2955 C223.0245,139.2955 223.5545,139.8505 223.5545,140.5325 C223.5545,141.1885 222.9985,141.7435 222.3425,141.7435 C221.6865,141.7435 221.1305,141.1885 221.1305,140.5075 C221.1305,139.8505 221.6865,139.2955 222.3675,139.2955 L222.3675,139.2955 Z M218.7085,139.2955 C219.3645,139.2955 219.8945,139.8505 219.8945,140.5325 C219.8945,141.1885 219.3645,141.7435 218.6835,141.7435 C218.0275,141.7435 217.4965,141.1885 217.4965,140.5075 C217.4965,139.8505 218.0275,139.2955 218.7085,139.2955 L218.7085,139.2955 Z M215.0485,139.2955 C215.7045,139.2955 216.2355,139.8505 216.2355,140.5325 C216.2355,141.1885 215.7045,141.7435 215.0235,141.7435 C214.3665,141.7435 213.8365,141.1885 213.8365,140.5075 C213.8365,139.8505 214.3925,139.2955 215.0485,139.2955 L215.0485,139.2955 Z M211.4145,139.2955 C212.0705,139.2955 212.6005,139.8505 212.6005,140.5325 C212.6005,141.1885 212.0455,141.7435 211.3885,141.7435 C210.7335,141.7435 210.1775,141.1885 210.1775,140.5075 C210.1775,139.8505 210.7335,139.2955 211.4145,139.2955 L211.4145,139.2955 Z M207.7545,139.2955 C208.4105,139.2955 208.9415,139.8505 208.9415,140.5325 C208.9415,141.1885 208.4105,141.7435 207.7295,141.7435 C207.0735,141.7435 206.5435,141.1885 206.5435,140.5075 C206.5435,139.8505 207.0735,139.2955 207.7545,139.2955 L207.7545,139.2955 Z" id="Fill-7" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(220.500000, 140.456500) rotate(-90.000000) translate(-220.500000, -140.456500) "></path>
<path d="M14.5,115 L427,115" id="Line-5" stroke="#8A704D" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<text id="parentElement" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold">
<tspan x="175" y="165" fill="#8A704D">parent</tspan>
<tspan x="221.183594" y="165" fill="#EE6B47">Element</tspan>
<tspan x="175" y="172" fill="#8A704D">parent</tspan>
<tspan x="221.183594" y="172" fill="#EE6B47">Element</tspan>
</text>
<rect id="Rectangle-6" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="183" y="208" width="75" height="24"></rect>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="179" y="212" width="82" height="30"></rect>
<text id="&lt;DIV&gt;" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="201.051859" y="225">&lt;DIV&gt;</tspan>
<tspan x="201.051859" y="232">&lt;DIV&gt;</tspan>
</text>
<path d="M220.5,200.5 L220.5,174.5" id="Line-6" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-6-decoration-1" d="M220.5,174.5 C219.45,178.28 218.55,181.52 217.5,185.3 C219.6,185.3 221.4,185.3 223.5,185.3 C222.45,181.52 221.55,178.28 220.5,174.5 C220.5,174.5 220.5,174.5 220.5,174.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M267.5,219.5 L427,219.5" id="Line-7" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-7-decoration-1" d="M426.5,219.5 C422.72,218.45 419.48,217.55 415.7,216.5 C415.7,218.6 415.7,220.4 415.7,222.5 C419.48,221.45 422.72,220.55 426.5,219.5 C426.5,219.5 426.5,219.5 426.5,219.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M220.5,207.5 L220.5,181.5" id="Line-6" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-6-decoration-1" d="M220.5,181.5 C219.45,185.28 218.55,188.52 217.5,192.3 C219.6,192.3 221.4,192.3 223.5,192.3 C222.45,188.52 221.55,185.28 220.5,181.5 C220.5,181.5 220.5,181.5 220.5,181.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M267.5,226.5 L427,226.5" id="Line-7" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-7-decoration-1" d="M426.5,226.5 C422.72,225.45 419.48,224.55 415.7,223.5 C415.7,225.6 415.7,227.4 415.7,229.5 C419.48,228.45 422.72,227.55 426.5,226.5 C426.5,226.5 426.5,226.5 426.5,226.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<text id="nextElementSibling" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold">
<tspan x="276" y="205" fill="#8A704D">next</tspan>
<tspan x="306.789062" y="205" fill="#EE6B47">Element</tspan>
<tspan x="360.669922" y="205" fill="#8A704D">Sibling</tspan>
<tspan x="276" y="212" fill="#8A704D">next</tspan>
<tspan x="306.789062" y="212" fill="#EE6B47">Element</tspan>
<tspan x="360.669922" y="212" fill="#8A704D">Sibling</tspan>
</text>
<path d="M168,219.5 L12,219.5" id="Line-8" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-8-decoration-1" d="M12,219.5 C15.78,220.55 19.02,221.45 22.8,222.5 C22.8,220.4 22.8,218.6 22.8,216.5 C19.02,217.55 15.78,218.45 12,219.5 C12,219.5 12,219.5 12,219.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M168,226.5 L12,226.5" id="Line-8" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-8-decoration-1" d="M12,226.5 C15.78,227.55 19.02,228.45 22.8,229.5 C22.8,227.4 22.8,225.6 22.8,223.5 C19.02,224.55 15.78,225.45 12,226.5 C12,226.5 12,226.5 12,226.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<text id="previousElementSibli" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold">
<tspan x="6" y="205" fill="#8A704D">previous</tspan>
<tspan x="67.578125" y="205" fill="#EE6B47">Element</tspan>
<tspan x="121.458984" y="205" fill="#8A704D">Sibling</tspan>
<tspan x="6" y="212" fill="#8A704D">previous</tspan>
<tspan x="67.578125" y="212" fill="#EE6B47">Element</tspan>
<tspan x="121.458984" y="212" fill="#8A704D">Sibling</tspan>
</text>
<path d="M116.5,278.5 L174.5,242.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M325,279 L269.5,242.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M116.5,285.5 L174.5,249.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M325,286 L269.5,249.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<text id="children" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#EE6B47">
<tspan x="188" y="266">children</tspan>
<tspan x="188" y="273">children</tspan>
</text>
<text id="firstElementChild--" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold">
<tspan x="43" y="300" fill="#8A704D">first</tspan>
<tspan x="81.4863281" y="300" fill="#EE6B47">Element</tspan>
<tspan x="135.367188" y="300" fill="#8A704D">Child </tspan>
<tspan x="43" y="307" fill="#8A704D">first</tspan>
<tspan x="81.4863281" y="307" fill="#EE6B47">Element</tspan>
<tspan x="135.367188" y="307" fill="#8A704D">Child </tspan>
</text>
<text id="lastElementChild" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold">
<tspan x="273" y="300" fill="#8A704D">last</tspan>
<tspan x="303.789062" y="300" fill="#EE6B47">Element</tspan>
<tspan x="357.669922" y="300" fill="#8A704D">Child</tspan>
<tspan x="273" y="307" fill="#8A704D">last</tspan>
<tspan x="303.789062" y="307" fill="#EE6B47">Element</tspan>
<tspan x="357.669922" y="307" fill="#8A704D">Child</tspan>
</text>
</g>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Before After
Before After

66
2-ui/1-document/4-traversing-dom/dom-links.svg
View file

@ -1,58 +1,64 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="420px" height="368px" viewBox="0 0 420 368" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<svg width="420px" height="388px" viewBox="0 0 420 388" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>dom-links.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="dom-links.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-9" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="153" y="2" width="113" height="24"></rect>
<rect id="Rectangle-7" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="153" y="136" width="113" height="24"></rect>
<rect id="Rectangle-8" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="119" y="68" width="194" height="24"></rect>
<rect id="Rectangle-9" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="149" y="19" width="119" height="30"></rect>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="150" y="153" width="119" height="30"></rect>
<rect id="Rectangle-8" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="116" y="86" width="200" height="30"></rect>
<text id="document" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#8A704D">
<tspan x="177.710938" y="18">document</tspan>
<tspan x="177.710938" y="38">document</tspan>
</text>
<text id="document.documentEle" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#8A704D">
<tspan x="125.692383" y="85">document.documentElement &lt;HTML&gt;</tspan>
<tspan x="123.632812" y="105">document.documentElement </tspan>
</text>
<text id="document.body-(если-" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#8A704D">
<tspan x="160.84375" y="153">document.body (если внутри body)</tspan>
<text id="Type-something" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#8A704D">
<tspan x="323.408203" y="105">&lt;HTML&gt;</tspan>
</text>
<path d="M209.5,130.5 L209.5,100.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M209.5,100.5 C208.45,104.28 207.55,107.52 206.5,111.3 C208.6,111.3 210.4,111.3 212.5,111.3 C211.45,107.52 210.55,104.28 209.5,100.5 C209.5,100.5 209.5,100.5 209.5,100.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M221.2715,195.2195 C221.9275,195.2195 222.4565,195.7755 222.4565,196.4575 C222.4565,197.1385 221.9275,197.6935 221.2455,197.6935 C220.5895,197.6935 220.0595,197.1385 220.0595,196.4575 C220.0595,195.7755 220.5895,195.2195 221.2715,195.2195 L221.2715,195.2195 Z M219.1755,200.6715 C218.4935,200.6715 217.9645,200.1165 217.9645,199.4345 C217.9645,198.7535 218.4935,198.1985 219.1515,198.1985 C219.8325,198.1985 220.3625,198.7535 220.3625,199.4345 C220.3625,200.1165 219.8325,200.6715 219.1755,200.6715 L219.1755,200.6715 Z M219.1755,192.2415 C219.8325,192.2415 220.3625,192.7975 220.3625,193.4785 C220.3625,194.1605 219.8325,194.7155 219.1515,194.7155 C218.4935,194.7155 217.9645,194.1605 217.9645,193.4785 C217.9645,192.7975 218.4935,192.2415 219.1755,192.2415 L219.1755,192.2415 Z M217.6615,195.2955 C218.3185,195.2955 218.8475,195.8505 218.8475,196.5325 C218.8475,197.1885 218.3185,197.7435 217.6365,197.7435 C216.9805,197.7435 216.4495,197.1885 216.4495,196.5075 C216.4495,195.8505 216.9805,195.2955 217.6615,195.2955 L217.6615,195.2955 Z M217.0815,203.6495 C216.4245,203.6495 215.8695,203.0945 215.8695,202.4135 C215.8695,201.7315 216.4005,201.2015 217.0565,201.2015 C217.7375,201.2015 218.2675,201.7315 218.2675,202.4135 C218.2675,203.0945 217.7375,203.6495 217.0815,203.6495 L217.0815,203.6495 Z M217.0815,189.2635 C217.7375,189.2635 218.2675,189.8195 218.2675,190.5005 C218.2675,191.1815 217.7375,191.7375 217.0565,191.7375 C216.4005,191.7375 215.8695,191.1815 215.8695,190.5005 C215.8695,189.8195 216.4245,189.2635 217.0815,189.2635 L217.0815,189.2635 Z M214.9875,206.6275 C214.3305,206.6275 213.7755,206.0725 213.7755,205.3905 C213.7755,204.7105 214.3045,204.1795 214.9605,204.1795 C215.6425,204.1795 216.1725,204.7105 216.1725,205.3905 C216.1725,206.0725 215.6425,206.6275 214.9875,206.6275 L214.9875,206.6275 Z M214.9875,186.2855 C215.6425,186.2855 216.1725,186.8415 216.1725,187.5225 C216.1725,188.2035 215.6425,188.7595 214.9605,188.7595 C214.3045,188.7595 213.7755,188.2035 213.7755,187.5225 C213.7755,186.8415 214.3305,186.2855 214.9875,186.2855 L214.9875,186.2855 Z M214.0015,195.2955 C214.6575,195.2955 215.1885,195.8505 215.1885,196.5325 C215.1885,197.1885 214.6575,197.7435 213.9775,197.7435 C213.3215,197.7435 212.7905,197.1885 212.7905,196.5075 C212.7905,195.8505 213.3465,195.2955 214.0015,195.2955 L214.0015,195.2955 Z M210.3675,195.2955 C211.0245,195.2955 211.5545,195.8505 211.5545,196.5325 C211.5545,197.1885 210.9985,197.7435 210.3425,197.7435 C209.6865,197.7435 209.1305,197.1885 209.1305,196.5075 C209.1305,195.8505 209.6865,195.2955 210.3675,195.2955 L210.3675,195.2955 Z M206.7085,195.2955 C207.3645,195.2955 207.8945,195.8505 207.8945,196.5325 C207.8945,197.1885 207.3645,197.7435 206.6835,197.7435 C206.0275,197.7435 205.4965,197.1885 205.4965,196.5075 C205.4965,195.8505 206.0275,195.2955 206.7085,195.2955 L206.7085,195.2955 Z M203.0485,195.2955 C203.7045,195.2955 204.2355,195.8505 204.2355,196.5325 C204.2355,197.1885 203.7045,197.7435 203.0235,197.7435 C202.3665,197.7435 201.8365,197.1885 201.8365,196.5075 C201.8365,195.8505 202.3925,195.2955 203.0485,195.2955 L203.0485,195.2955 Z M199.4145,195.2955 C200.0705,195.2955 200.6005,195.8505 200.6005,196.5325 C200.6005,197.1885 200.0455,197.7435 199.3885,197.7435 C198.7335,197.7435 198.1775,197.1885 198.1775,196.5075 C198.1775,195.8505 198.7335,195.2955 199.4145,195.2955 L199.4145,195.2955 Z M195.7545,195.2955 C196.4105,195.2955 196.9415,195.8505 196.9415,196.5325 C196.9415,197.1885 196.4105,197.7435 195.7295,197.7435 C195.0735,197.7435 194.5435,197.1885 194.5435,196.5075 C194.5435,195.8505 195.0735,195.2955 195.7545,195.2955 L195.7545,195.2955 Z" id="Fill-7" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(208.500000, 196.456500) rotate(-90.000000) translate(-208.500000, -196.456500) "></path>
<path d="M209.5,62.5 L209.5,32.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-2-decoration-1" d="M209.5,32.5 C208.45,36.28 207.55,39.52 206.5,43.3 C208.6,43.3 210.4,43.3 212.5,43.3 C211.45,39.52 210.55,36.28 209.5,32.5 C209.5,32.5 209.5,32.5 209.5,32.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M2.5,171 L415,171" id="Line" stroke="#8A704D" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<text id="document.body--" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#8A704D">
<tspan x="160.967773" y="173">document.body </tspan>
</text>
<text id="Type-something" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" sketch:alignment="middle" fill="#8A704D">
<tspan x="272.224609" y="173">(если внутри body)</tspan>
</text>
<path d="M209.5,150.5 L209.5,120.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M209.5,120.5 C208.45,124.28 207.55,127.52 206.5,131.3 C208.6,131.3 210.4,131.3 212.5,131.3 C211.45,127.52 210.55,124.28 209.5,120.5 C209.5,120.5 209.5,120.5 209.5,120.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M221.2715,215.2195 C221.9275,215.2195 222.4565,215.7755 222.4565,216.4575 C222.4565,217.1385 221.9275,217.6935 221.2455,217.6935 C220.5895,217.6935 220.0595,217.1385 220.0595,216.4575 C220.0595,215.7755 220.5895,215.2195 221.2715,215.2195 L221.2715,215.2195 Z M219.1755,220.6715 C218.4935,220.6715 217.9645,220.1165 217.9645,219.4345 C217.9645,218.7535 218.4935,218.1985 219.1515,218.1985 C219.8325,218.1985 220.3625,218.7535 220.3625,219.4345 C220.3625,220.1165 219.8325,220.6715 219.1755,220.6715 L219.1755,220.6715 Z M219.1755,212.2415 C219.8325,212.2415 220.3625,212.7975 220.3625,213.4785 C220.3625,214.1605 219.8325,214.7155 219.1515,214.7155 C218.4935,214.7155 217.9645,214.1605 217.9645,213.4785 C217.9645,212.7975 218.4935,212.2415 219.1755,212.2415 L219.1755,212.2415 Z M217.6615,215.2955 C218.3185,215.2955 218.8475,215.8505 218.8475,216.5325 C218.8475,217.1885 218.3185,217.7435 217.6365,217.7435 C216.9805,217.7435 216.4495,217.1885 216.4495,216.5075 C216.4495,215.8505 216.9805,215.2955 217.6615,215.2955 L217.6615,215.2955 Z M217.0815,223.6495 C216.4245,223.6495 215.8695,223.0945 215.8695,222.4135 C215.8695,221.7315 216.4005,221.2015 217.0565,221.2015 C217.7375,221.2015 218.2675,221.7315 218.2675,222.4135 C218.2675,223.0945 217.7375,223.6495 217.0815,223.6495 L217.0815,223.6495 Z M217.0815,209.2635 C217.7375,209.2635 218.2675,209.8195 218.2675,210.5005 C218.2675,211.1815 217.7375,211.7375 217.0565,211.7375 C216.4005,211.7375 215.8695,211.1815 215.8695,210.5005 C215.8695,209.8195 216.4245,209.2635 217.0815,209.2635 L217.0815,209.2635 Z M214.9875,226.6275 C214.3305,226.6275 213.7755,226.0725 213.7755,225.3905 C213.7755,224.7105 214.3045,224.1795 214.9605,224.1795 C215.6425,224.1795 216.1725,224.7105 216.1725,225.3905 C216.1725,226.0725 215.6425,226.6275 214.9875,226.6275 L214.9875,226.6275 Z M214.9875,206.2855 C215.6425,206.2855 216.1725,206.8415 216.1725,207.5225 C216.1725,208.2035 215.6425,208.7595 214.9605,208.7595 C214.3045,208.7595 213.7755,208.2035 213.7755,207.5225 C213.7755,206.8415 214.3305,206.2855 214.9875,206.2855 L214.9875,206.2855 Z M214.0015,215.2955 C214.6575,215.2955 215.1885,215.8505 215.1885,216.5325 C215.1885,217.1885 214.6575,217.7435 213.9775,217.7435 C213.3215,217.7435 212.7905,217.1885 212.7905,216.5075 C212.7905,215.8505 213.3465,215.2955 214.0015,215.2955 L214.0015,215.2955 Z M210.3675,215.2955 C211.0245,215.2955 211.5545,215.8505 211.5545,216.5325 C211.5545,217.1885 210.9985,217.7435 210.3425,217.7435 C209.6865,217.7435 209.1305,217.1885 209.1305,216.5075 C209.1305,215.8505 209.6865,215.2955 210.3675,215.2955 L210.3675,215.2955 Z M206.7085,215.2955 C207.3645,215.2955 207.8945,215.8505 207.8945,216.5325 C207.8945,217.1885 207.3645,217.7435 206.6835,217.7435 C206.0275,217.7435 205.4965,217.1885 205.4965,216.5075 C205.4965,215.8505 206.0275,215.2955 206.7085,215.2955 L206.7085,215.2955 Z M203.0485,215.2955 C203.7045,215.2955 204.2355,215.8505 204.2355,216.5325 C204.2355,217.1885 203.7045,217.7435 203.0235,217.7435 C202.3665,217.7435 201.8365,217.1885 201.8365,216.5075 C201.8365,215.8505 202.3925,215.2955 203.0485,215.2955 L203.0485,215.2955 Z M199.4145,215.2955 C200.0705,215.2955 200.6005,215.8505 200.6005,216.5325 C200.6005,217.1885 200.0455,217.7435 199.3885,217.7435 C198.7335,217.7435 198.1775,217.1885 198.1775,216.5075 C198.1775,215.8505 198.7335,215.2955 199.4145,215.2955 L199.4145,215.2955 Z M195.7545,215.2955 C196.4105,215.2955 196.9415,215.8505 196.9415,216.5325 C196.9415,217.1885 196.4105,217.7435 195.7295,217.7435 C195.0735,217.7435 194.5435,217.1885 194.5435,216.5075 C194.5435,215.8505 195.0735,215.2955 195.7545,215.2955 L195.7545,215.2955 Z" id="Fill-7" fill="#EE6B47" sketch:type="MSShapeGroup" transform="translate(208.500000, 216.456500) rotate(-90.000000) translate(-208.500000, -216.456500) "></path>
<path d="M209.5,83.5 L209.5,53.5" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-2-decoration-1" d="M209.5,53.5 C208.45,57.28 207.55,60.52 206.5,64.3 C208.6,64.3 210.4,64.3 212.5,64.3 C211.45,60.52 210.55,57.28 209.5,53.5 C209.5,53.5 209.5,53.5 209.5,53.5 Z" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M2.5,191 L415,191" id="Line" stroke="#8A704D" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<text id="parentNode" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="172" y="228">parentNode</tspan>
<tspan x="172" y="248">parentNode</tspan>
</text>
<rect id="Rectangle-6" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="171" y="271" width="75" height="24"></rect>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="168" y="288" width="82" height="30"></rect>
<text id="&lt;DIV&gt;" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="189.051859" y="288">&lt;DIV&gt;</tspan>
<tspan x="189.051859" y="308">&lt;DIV&gt;</tspan>
</text>
<path d="M208.5,263.5 L208.5,237.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M208.5,237.5 C207.45,241.28 206.55,244.52 205.5,248.3 C207.6,248.3 209.4,248.3 211.5,248.3 C210.45,244.52 209.55,241.28 208.5,237.5 C208.5,237.5 208.5,237.5 208.5,237.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M255.5,282.5 L368,282.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M367.5,282.5 C363.72,281.45 360.48,280.55 356.7,279.5 C356.7,281.6 356.7,283.4 356.7,285.5 C360.48,284.45 363.72,283.55 367.5,282.5 C367.5,282.5 367.5,282.5 367.5,282.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M208.5,283.5 L208.5,257.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M208.5,257.5 C207.45,261.28 206.55,264.52 205.5,268.3 C207.6,268.3 209.4,268.3 211.5,268.3 C210.45,264.52 209.55,261.28 208.5,257.5 C208.5,257.5 208.5,257.5 208.5,257.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M255.5,302.5 L368,302.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M367.5,302.5 C363.72,301.45 360.48,300.55 356.7,299.5 C356.7,301.6 356.7,303.4 356.7,305.5 C360.48,304.45 363.72,303.55 367.5,302.5 C367.5,302.5 367.5,302.5 367.5,302.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<text id="nextSibling" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="264" y="268">nextSibling</tspan>
<tspan x="264" y="288">nextSibling</tspan>
</text>
<path d="M164.5,282.5 L50,282.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M50.5,282.5 C54.28,283.55 57.52,284.45 61.3,285.5 C61.3,283.4 61.3,281.6 61.3,279.5 C57.52,280.55 54.28,281.45 50.5,282.5 C50.5,282.5 50.5,282.5 50.5,282.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<path d="M164.5,302.5 L50,302.5" id="Line" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M50.5,302.5 C54.28,303.55 57.52,304.45 61.3,305.5 C61.3,303.4 61.3,301.6 61.3,299.5 C57.52,300.55 54.28,301.45 50.5,302.5 C50.5,302.5 50.5,302.5 50.5,302.5 Z" stroke="#EE6B47" stroke-width="3" stroke-linecap="square" fill="#EE6B47"></path>
<text id="previousSibling" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="50" y="268">previousSibling</tspan>
<tspan x="50" y="288">previousSibling</tspan>
</text>
<path d="M104.5,341.5 L162.5,305.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M313,342 L257.5,305.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M104.5,361.5 L162.5,325.5" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path d="M313,362 L257.5,325.5" id="Line-3" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<text id="childNodes" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="170" y="323">childNodes</tspan>
<tspan x="170" y="343">childNodes</tspan>
</text>
<text id="firstChild--" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="64" y="359">firstChild </tspan>
<tspan x="64" y="379">firstChild </tspan>
</text>
<text id="Type-something" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="279" y="359">lastChild</tspan>
<tspan x="279" y="379">lastChild</tspan>
</text>
</g>
</g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Before After
Before After

20
2-ui/1-document/4-traversing-dom/travel.view/index.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Документ</title>
</head>
<body>
<div id="header">Шапка</div>
<ul>
<li>
<span style="background-color:red">Осторожно</span>
</li>
<li class="info"><input type="text" value="Информация"></li>
</ul>
<div id="footer">Подвал. &copy; javascript.ru</div>
<!-- комментарий -->
</body>
</html>

2
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-from-outside.svg
View file

@ -14,7 +14,7 @@
<path d="M49.7916667,21.125 C49.7916667,23.4593125 47.5634896,25.35 44.8125,25.35 C42.0615104,25.35 39.8333333,23.4593125 39.8333333,21.125 C39.8333333,18.7906875 42.0615104,16.9 44.8125,16.9 C47.5634896,16.9 49.7916667,18.7906875 49.7916667,21.125 L49.7916667,21.125 Z" id="Shape" sketch:type="MSShapeGroup"></path>
<path d="M69.7083333,21.125 C69.7083333,23.4593125 67.4801563,25.35 64.7291667,25.35 C61.9781771,25.35 59.75,23.4593125 59.75,21.125 C59.75,18.7906875 61.9781771,16.9 64.7291667,16.9 C67.4801563,16.9 69.7083333,18.7906875 69.7083333,21.125 L69.7083333,21.125 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
<rect id="Rectangle-6" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="231" y="85" width="69" height="36"></rect>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="231" y="85" width="69" height="36"></rect>
<text id="#TO" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="251.150618" y="109">#TO</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4 KiB

After

Width:  |  Height:  |  Size: 4 KiB

Before After
Before After

4
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout-over-elems.svg
View file

@ -6,11 +6,11 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="mouseover-mouseout-over-elems.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-6" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="374" y="21" width="90.0136719" height="52.4511719"></rect>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="374" y="21" width="90.0136719" height="52.4511719"></rect>
<text id="#TO" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="405.150618" y="53">#TO</tspan>
</text>
<rect id="Rectangle-7" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="16" y="21" width="90.0136719" height="52.4511719"></rect>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="16" y="21" width="90.0136719" height="52.4511719"></rect>
<text id="#FROM" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="36.8122396" y="53">#FROM</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

Before After
Before After

2
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-mouseout.svg
View file

@ -6,7 +6,7 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="mouseover-mouseout.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-6" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="94" y="24" width="90.0136719" height="52.4511719"></rect>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="94" y="24" width="90.0136719" height="52.4511719"></rect>
<text id="&lt;DIV&gt;" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="119.384505" y="56">&lt;DIV&gt;</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

Before After
Before After

4
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseover-to-child.svg
View file

@ -6,11 +6,11 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="mouseover-to-child.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-7" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="12" y="14" width="212" height="117"></rect>
<rect id="Rectangle-7" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="12" y="14" width="212" height="117"></rect>
<text id="#FROM" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="18.9784745" y="31">#FROM</tspan>
</text>
<rect id="Rectangle-6" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="140" y="64" width="69" height="36"></rect>
<rect id="Rectangle-6" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="140" y="64" width="69" height="36"></rect>
<text id="#TO" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" fill="#8A704D">
<tspan x="160.150618" y="88">#TO</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Before After
Before After

6
4-ajax/5-xhr-crossdomain/xhr-another-domain.svg
View file

@ -6,15 +6,15 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="xhr-another-domain.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-227" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="3" y="15" width="130" height="66"></rect>
<rect id="Rectangle-227" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="3" y="15" width="130" height="66"></rect>
<text id="JavaScript" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="29" y="50">JavaScript</tspan>
</text>
<rect id="Rectangle-228" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="228" y="15" width="130" height="66"></rect>
<rect id="Rectangle-228" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="228" y="15" width="130" height="66"></rect>
<text id="Браузер" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="266" y="50">Браузер</tspan>
</text>
<rect id="Rectangle-229" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="454" y="15" width="130" height="66"></rect>
<rect id="Rectangle-229" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="454" y="15" width="130" height="66"></rect>
<text id="Сервер" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="495" y="50">Сервер</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

Before After
Before After

6
4-ajax/5-xhr-crossdomain/xhr-preflight.svg
View file

@ -6,15 +6,15 @@
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="xhr-preflight.svg" sketch:type="MSArtboardGroup">
<rect id="Rectangle-227" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="3" y="15" width="130" height="66"></rect>
<rect id="Rectangle-227" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="3" y="15" width="130" height="66"></rect>
<text id="JavaScript" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="29" y="50">JavaScript</tspan>
</text>
<rect id="Rectangle-228" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="228" y="15" width="130" height="66"></rect>
<rect id="Rectangle-228" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="228" y="15" width="130" height="66"></rect>
<text id="Браузер" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="266" y="50">Браузер</tspan>
</text>
<rect id="Rectangle-229" stroke="#707175" stroke-width="2" fill="#EBEBEB" sketch:type="MSShapeGroup" x="467" y="15" width="130" height="66"></rect>
<rect id="Rectangle-229" stroke="#E8C48E" stroke-width="4" fill="#FFF9EB" sketch:type="MSShapeGroup" x="467" y="15" width="130" height="66"></rect>
<text id="Сервер" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="503" y="50">Сервер</tspan>
</text>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

Before After
Before After

2
7-frames-and-windows/1-window-open/article.md → 7-frames-and-windows/1-window-methods/article.md
View file

@ -1,4 +1,4 @@
# Открытие новых окон
# Открытие окон и методы window
Всплывающее окно ("попап" -- от англ. Popup window) -- один из старейших способов показать пользователю ещё один документ.

BIN
figures.sketch
View file

Binary file not shown.