![Page 1: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/1.jpg)
!!"!""🌲🌲🌲🌲🌲🌲👍
битовая карта
деревья
хорошо
Игорь Алексеенкоучилка в HTML Academy
![Page 2: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/2.jpg)
Многие современные проблемы фронтендеров были решены ещё в 80-х 😎📼💾☎👾🚀Просто мы об этом не знаем 👶 👶 👶
2
![Page 3: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/3.jpg)
То, что мы разрабатываем, скорее, уже не сайты, а RIA
3
![Page 4: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/4.jpg)
RIA —(исландск. Rich Internet Applica8on, насыщенное интернет-приложение), иногда IIA — Installable Internet Application — сайт, обладающий свойствами настольного приложения
4
![Page 5: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/5.jpg)
Законы развития ПО
5
1960 1970 1980 1990 2000 2010
Закон Мура Закон Вирта (закон Пейджа)
![Page 6: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/6.jpg)
Законы развития ПО
5
1960 1970 1980 1990 2000 2010
Закон Мура Закон Вирта (закон Пейджа)1965производительностькомпьютеров удваиваетсяпримерно каждыедва года
![Page 7: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/7.jpg)
Законы развития ПО
5
1960 1970 1980 1990 2000 2010
Закон Мура Закон Вирта (закон Пейджа)1965производительностькомпьютеров удваиваетсяпримерно каждыедва года
~1995медлительность программвозрастает быстрее чемпроизводительностькомпьютеров
![Page 8: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/8.jpg)
Законы развития ПО
5
1960 1970 1980 1990 2000 2010
Закон Мура Закон Вирта (закон Пейджа)1965производительностькомпьютеров удваиваетсяпримерно каждыедва года
~1995медлительность программвозрастает быстрее чемпроизводительностькомпьютеров
System 1Windows 1.0
![Page 9: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/9.jpg)
Законы развития ПО
5
1960 1970 1980 1990 2000 2010
Закон Мура Закон Вирта (закон Пейджа)1965производительностькомпьютеров удваиваетсяпримерно каждыедва года
~1995медлительность программвозрастает быстрее чемпроизводительностькомпьютеров
Решения, придуманные в 80-х оптимизированы для выполнения на слабых компьютерах, поэтому в современном контексте будут работать очень эффективноSystem 1
Windows 1.0
![Page 10: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/10.jpg)
Компонента курильщика 🚬Интерактивная демонстрация
6
![Page 11: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/11.jpg)
Битовые карты 🏏🂡🃁
7
![Page 12: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/12.jpg)
Двоичная запись
8
В памяти компьютера все числа хранятся в двоичном виде — как последовательность нулей и единиц. Разряды читаются справа налево. Нумерация разрядов начинается с нуля. Единица в разряде означает что итоговое число содержит двойку в степени номера разряда
!""!!"
![Page 13: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/13.jpg)
Двоичная запись
8
В памяти компьютера все числа хранятся в двоичном виде — как последовательность нулей и единиц. Разряды читаются справа налево. Нумерация разрядов начинается с нуля. Единица в разряде означает что итоговое число содержит двойку в степени номера разряда
!""!!"012345
![Page 14: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/14.jpg)
Двоичная запись
8
В памяти компьютера все числа хранятся в двоичном виде — как последовательность нулей и единиц. Разряды читаются справа налево. Нумерация разрядов начинается с нуля. Единица в разряде означает что итоговое число содержит двойку в степени номера разряда
!""!!"202122232425
![Page 15: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/15.jpg)
Двоичная запись
8
В памяти компьютера все числа хранятся в двоичном виде — как последовательность нулей и единиц. Разряды читаются справа налево. Нумерация разрядов начинается с нуля. Единица в разряде означает что итоговое число содержит двойку в степени номера разряда
!""!!"12481632
![Page 16: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/16.jpg)
Двоичная запись
8
В памяти компьютера все числа хранятся в двоичном виде — как последовательность нулей и единиц. Разряды читаются справа налево. Нумерация разрядов начинается с нуля. Единица в разряде означает что итоговое число содержит двойку в степени номера разряда
!""!!"12481632
1008160 ++ + + +
![Page 17: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/17.jpg)
Двоичная запись
8
В памяти компьютера все числа хранятся в двоичном виде — как последовательность нулей и единиц. Разряды читаются справа налево. Нумерация разрядов начинается с нуля. Единица в разряде означает что итоговое число содержит двойку в степени номера разряда
!""!!"12481632
=251008160 ++ + + +
![Page 18: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/18.jpg)
Двоичная запись
8
В памяти компьютера все числа хранятся в двоичном виде — как последовательность нулей и единиц. Разряды читаются справа налево. Нумерация разрядов начинается с нуля. Единица в разряде означает что итоговое число содержит двойку в степени номера разряда
!""!!"12481632
![Page 19: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/19.jpg)
Двоичная запись
8
В памяти компьютера все числа хранятся в двоичном виде — как последовательность нулей и единиц. Разряды читаются справа налево. Нумерация разрядов начинается с нуля. Единица в разряде означает что итоговое число содержит двойку в степени номера разряда
!""!!"12481632
"!!!"!
![Page 20: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/20.jpg)
Двоичная запись
8
В памяти компьютера все числа хранятся в двоичном виде — как последовательность нулей и единиц. Разряды читаются справа налево. Нумерация разрядов начинается с нуля. Единица в разряде означает что итоговое число содержит двойку в степени номера разряда
!""!!"12481632
"!!!"!0200032 ++ + + +
![Page 21: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/21.jpg)
Двоичная запись
8
В памяти компьютера все числа хранятся в двоичном виде — как последовательность нулей и единиц. Разряды читаются справа налево. Нумерация разрядов начинается с нуля. Единица в разряде означает что итоговое число содержит двойку в степени номера разряда
!""!!"12481632
"!!!"!0200032 ++ + + + =34
![Page 22: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/22.jpg)
Битовые карты —(яп. — bitmap) они же битовые массивы (кор. — bitset, bitarray) последовательности бит, которые кодируют не степени двойки, а любую другую информацию. Хранятся в виде обычных чисел
9
![Page 23: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/23.jpg)
Битовые карты
10
Битовой картой называется последовательность бит (нулей и единиц). В битовых картах может храниться не только число, но и любой другой набор данных
![Page 24: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/24.jpg)
Битовые карты
• IP-адрес192.168.1.1 / 255.255.255.0
10
Битовой картой называется последовательность бит (нулей и единиц). В битовых картах может храниться не только число, но и любой другой набор данных
![Page 25: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/25.jpg)
Битовые карты
• IP-адрес192.168.1.1 / 255.255.255.0
• цвет #FACE8D
10
Битовой картой называется последовательность бит (нулей и единиц). В битовых картах может храниться не только число, но и любой другой набор данных
![Page 26: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/26.jpg)
Битовые карты
• IP-адрес192.168.1.1 / 255.255.255.0
• цвет #FACE8D
• права пользователяchmod -R 777 .
10
Битовой картой называется последовательность бит (нулей и единиц). В битовых картах может храниться не только число, но и любой другой набор данных
![Page 27: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/27.jpg)
Битовые карты
• IP-адрес192.168.1.1 / 255.255.255.0
• цвет #FACE8D
• права пользователяchmod -R 777 .
• карта уровня в игре или пиксели изображения
10
Битовой картой называется последовательность бит (нулей и единиц). В битовых картах может храниться не только число, но и любой другой набор данных
![Page 28: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/28.jpg)
Битовые карты
• IP-адрес192.168.1.1 / 255.255.255.0
• цвет #FACE8D
• права пользователяchmod -R 777 .
• карта уровня в игре или пиксели изображения
• состояние UX-компоненты
10
Битовой картой называется последовательность бит (нулей и единиц). В битовых картах может храниться не только число, но и любой другой набор данных
![Page 29: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/29.jpg)
Интерактивная демонстрация. Кодирование состояний в битах
11
Компонента здорового человека 🚭
![Page 30: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/30.jpg)
Битовые операции —логические операции над цепочками битов, в которых биты выступают как значения true или false
12
![Page 31: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/31.jpg)
Побитовое «или»
13
Складывает переданные значения и сохраняет включенные биты обоих операторов. Идеально подходит для сложения нескольких состояний
010OR 100 0
![Page 32: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/32.jpg)
Побитовое «или»
13
Складывает переданные значения и сохраняет включенные биты обоих операторов. Идеально подходит для сложения нескольких состояний
010OR 100 0
![Page 33: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/33.jpg)
Побитовое «или»
13
Складывает переданные значения и сохраняет включенные биты обоих операторов. Идеально подходит для сложения нескольких состояний
010OR 100 10
![Page 34: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/34.jpg)
Побитовое «или»
13
Складывает переданные значения и сохраняет включенные биты обоих операторов. Идеально подходит для сложения нескольких состояний
010OR 100 110
![Page 35: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/35.jpg)
Побитовое «или»
14
Складывает переданные значения и сохраняет включенные биты обоих операторов. Идеально подходит для сложения нескольких состояний
![Page 36: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/36.jpg)
Побитовое «или»
14
Складывает переданные значения и сохраняет включенные биты обоих операторов. Идеально подходит для сложения нескольких состояний
010 OR 100 110
![Page 37: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/37.jpg)
1010AND 1100 0
Побитовое «и»
15
Сохраняет только те биты, которые были включены в обоих операндах. Идеально подходит для проверки состояния
![Page 38: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/38.jpg)
Побитовое «и»
15
Сохраняет только те биты, которые были включены в обоих операндах. Идеально подходит для проверки состояния
1010AND 1100 0
![Page 39: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/39.jpg)
Побитовое «и»
15
Сохраняет только те биты, которые были включены в обоих операндах. Идеально подходит для проверки состояния
1010AND 1100 00
![Page 40: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/40.jpg)
Побитовое «и»
15
Сохраняет только те биты, которые были включены в обоих операндах. Идеально подходит для проверки состояния
1010AND 1100 000
![Page 41: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/41.jpg)
Побитовое «и»
15
Сохраняет только те биты, которые были включены в обоих операндах. Идеально подходит для проверки состояния
1010AND 1100 1000
![Page 42: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/42.jpg)
Побитовое «и»
16
Сохраняет только те биты, которые были включены в обоих операндах. Идеально подходит для проверки состояния
![Page 43: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/43.jpg)
Побитовое «и»
16
Сохраняет только те биты, которые были включены в обоих операндах. Идеально подходит для проверки состояния
![Page 44: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/44.jpg)
Побитовое «и»
16
Сохраняет только те биты, которые были включены в обоих операндах. Идеально подходит для проверки состояния
![Page 45: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/45.jpg)
Побитовое «и»
16
Сохраняет только те биты, которые были включены в обоих операндах. Идеально подходит для проверки состояния
![Page 46: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/46.jpg)
Побитовое «и»
16
Сохраняет только те биты, которые были включены в обоих операндах. Идеально подходит для проверки состояния
1010 AND 0010 = 0010
![Page 47: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/47.jpg)
Побитовое «и»
16
Сохраняет только те биты, которые были включены в обоих операндах. Идеально подходит для проверки состояния
1010 AND 0100 = 0000
![Page 48: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/48.jpg)
Побитовое «и»
16
Сохраняет только те биты, которые были включены в обоих операндах. Идеально подходит для проверки состояния
![Page 49: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/49.jpg)
Побитовое «и»
16
Сохраняет только те биты, которые были включены в обоих операндах. Идеально подходит для проверки состояния
![Page 50: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/50.jpg)
Компонента здорового человека 🚭Интерактивная демонстрация. Продолжение
17
![Page 51: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/51.jpg)
Декларативный стильМы описываем не последовательность шагов (императивный стиль), а реакцию на изменение состояния
18
![Page 52: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/52.jpg)
Полученный код содержит всего пять (одну) управляющих строк. Остальной код — статические словари. Вне зависимости от размеров словарей (количества состояний) размер управляющего кода меняться не будет
19
![Page 53: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/53.jpg)
Использование состояний для описания поведения
20
![Page 54: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/54.jpg)
![Page 55: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/55.jpg)
Описание поведенияВ качестве значений в словарях можно использовать не только обычные значения, но и функции. В этом случае можно описывать поведение каждого состояния независимо
![Page 56: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/56.jpg)
var Direction = { RIGHT: 0x01 };var DirectionBehaviour = { 0x01: function(character) { return Object.assign({ left: character.left + character.hSpeed }, character); }]);
Описание поведенияВ качестве значений в словарях можно использовать не только обычные значения, но и функции. В этом случае можно описывать поведение каждого состояния независимо
![Page 57: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/57.jpg)
var Direction = { RIGHT: 0x01, TOP: 0x02};var DirectionBehaviour = { 0x01: function(character) {}, 0x02: function(character) {} };
Описание поведенияВ качестве значений в словарях можно использовать не только обычные значения, но и функции. В этом случае можно описывать поведение каждого состояния независимо
![Page 58: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/58.jpg)
Даже Redux!
24
![Page 59: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/59.jpg)
Даже Redux!Можно использовать битовые маски как параметр type для управляющих объектов action. Так, за одно обращение к хранилищу можно делать несколько операций с данными
![Page 60: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/60.jpg)
const ActionType = { UPDATE_1: 0x01, UPDATE_2: 0x02 };store.dispatch({ type: ActionType.UPDATE_1 | ActionType.UPDATE_2});
Даже Redux!Можно использовать битовые маски как параметр type для управляющих объектов action. Так, за одно обращение к хранилищу можно делать несколько операций с данными
![Page 61: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/61.jpg)
И кроме этого есть ещё
26
![Page 62: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/62.jpg)
И кроме этого есть ещё
• исключающие или XOR, ^используется для переключения состояния (toggle)
26
![Page 63: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/63.jpg)
И кроме этого есть ещё
• исключающие или XOR, ^используется для переключения состояния (toggle)
• побитовый сдвиг влево <<
26
![Page 64: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/64.jpg)
И кроме этого есть ещё
• исключающие или XOR, ^используется для переключения состояния (toggle)
• побитовый сдвиг влево <<
• побитовый сдвиг вправо >>
26
![Page 65: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/65.jpg)
И кроме этого есть ещё
• исключающие или XOR, ^используется для переключения состояния (toggle)
• побитовый сдвиг влево <<
• побитовый сдвиг вправо >>
• сдвиг вправо с заполнением нулями >>>
26
![Page 66: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/66.jpg)
И кроме этого есть ещё
• исключающие или XOR, ^используется для переключения состояния (toggle)
• побитовый сдвиг влево <<
• побитовый сдвиг вправо >>
• сдвиг вправо с заполнением нулями >>>
• битовые маски когда одно состояние хранится в нескольких соседних битах используются маски, которые показывают единицами, в какие именно биты состояние записано (IP-адрес и маска подсети)
26
![Page 67: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/67.jpg)
Зависимости в форме
27
![Page 68: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/68.jpg)
🌳 Деревья
28
![Page 69: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/69.jpg)
🌳 Деревья
29
Связанная структура данных, состоящая из вложенных друг в друга повторяющихся узлов. Самый наглядный пример, для фронтенд-разработчика — DOM-дерево
document
head body
#layoutmeta title
aside main footer
![Page 70: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/70.jpg)
🌳 Деревья
29
Связанная структура данных, состоящая из вложенных друг в друга повторяющихся узлов. Самый наглядный пример, для фронтенд-разработчика — DOM-дерево
узел
document
head body
#layoutmeta title
aside main footer
![Page 71: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/71.jpg)
🌳 Деревья
29
Связанная структура данных, состоящая из вложенных друг в друга повторяющихся узлов. Самый наглядный пример, для фронтенд-разработчика — DOM-дерево
корень
узел
document
head body
#layoutmeta title
aside main footer
![Page 72: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/72.jpg)
🌳 Деревья
29
Связанная структура данных, состоящая из вложенных друг в друга повторяющихся узлов. Самый наглядный пример, для фронтенд-разработчика — DOM-дерево
корень
узел
потомки
document
head body
#layoutmeta title
aside main footer
![Page 73: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/73.jpg)
🌳 Деревья
29
Связанная структура данных, состоящая из вложенных друг в друга повторяющихся узлов. Самый наглядный пример, для фронтенд-разработчика — DOM-дерево
корень
узел
лист
потомки
document
head body
#layoutmeta title
aside main footer
![Page 74: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/74.jpg)
🌳 ДеревьяИнтерактивная демонстрация. Использование деревьев для описания зависимостей в форме
30
![Page 75: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/75.jpg)
🚶🌳 Обход дереваКакими способами можно обходить дерево и на что может повлиять изменение способа обхода
31
![Page 76: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/76.jpg)
Деревья
32
document
head body
#layoutmeta title
aside main footer
![Page 77: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/77.jpg)
Деревья
32
document
head body
#layoutmeta title
aside main footer
Существует несколько способов перебора элементов дерева:
![Page 78: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/78.jpg)
Деревья
32
document
head body
#layoutmeta title
aside main footer
Существует несколько способов перебора элементов дерева:
• DFS (поиск в глубину)
![Page 79: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/79.jpg)
Деревья
32
document
head body
#layoutmeta title
aside main footer
Существует несколько способов перебора элементов дерева:
• DFS (поиск в глубину)
• прямой
![Page 80: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/80.jpg)
Деревья
32
document
head body
#layoutmeta title
aside main footer
Существует несколько способов перебора элементов дерева:
• DFS (поиск в глубину)
• прямой
• обратный
![Page 81: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/81.jpg)
Деревья
32
document
head body
#layoutmeta title
aside main footer
Существует несколько способов перебора элементов дерева:
• DFS (поиск в глубину)
• прямой
• обратный
• симметричный
![Page 82: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/82.jpg)
Деревья
32
document
head body
#layoutmeta title
aside main footer
Существует несколько способов перебора элементов дерева:
• DFS (поиск в глубину)
• прямой
• обратный
• симметричный
• BFS (поиск в ширину)
![Page 83: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/83.jpg)
33
![Page 84: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/84.jpg)
Прямой поиск в глубину(сербохорв. — Depth-first search, DFS) если у узла есть потомки, посещаются сначала они, а только потом соседний узел (всегда идём до самого конца)
34
![Page 85: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/85.jpg)
Прямой обход в глубину
35
Сначала посещается узел, а потом его потомки
document
head body
#layoutmeta title
aside main footer
![Page 86: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/86.jpg)
Прямой обход в глубину
35
Сначала посещается узел, а потом его потомки
document
head body
#layoutmeta title
aside main footer
documentdocument
![Page 87: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/87.jpg)
Прямой обход в глубину
35
Сначала посещается узел, а потом его потомки
document
head body
#layoutmeta title
aside main footer
documentheaddocument
head
![Page 88: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/88.jpg)
Прямой обход в глубину
35
Сначала посещается узел, а потом его потомки
document
head body
#layoutmeta title
aside main footer
documentheadmeta
document
head
meta
![Page 89: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/89.jpg)
Прямой обход в глубину
35
Сначала посещается узел, а потом его потомки
document
head body
#layoutmeta title
aside main footer
documentheadmetatitle
document
head
meta title
![Page 90: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/90.jpg)
Прямой обход в глубину
35
Сначала посещается узел, а потом его потомки
document
head body
#layoutmeta title
aside main footer
documentheadmetatitlebody
document
head
meta title
body
![Page 91: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/91.jpg)
Прямой обход в глубину
35
Сначала посещается узел, а потом его потомки
document
head body
#layoutmeta title
aside main footer
documentheadmetatitlebody#layout
document
head
meta title
body
#layout
![Page 92: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/92.jpg)
Прямой обход в глубину
35
Сначала посещается узел, а потом его потомки
document
head body
#layoutmeta title
aside main footer
documentheadmetatitlebody#layoutaside
document
head
meta title
body
#layout
aside
![Page 93: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/93.jpg)
Прямой обход в глубину
35
Сначала посещается узел, а потом его потомки
document
head body
#layoutmeta title
aside main footer
documentheadmetatitlebody#layoutasidemain
document
head
meta title
body
#layout
aside main
![Page 94: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/94.jpg)
Прямой обход в глубину
35
Сначала посещается узел, а потом его потомки
document
head body
#layoutmeta title
aside main footer
documentheadmetatitlebody#layoutasidemain footer
document
head
meta title
body
#layout
aside main footer
![Page 95: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/95.jpg)
36
![Page 96: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/96.jpg)
36
![Page 97: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/97.jpg)
36
![Page 98: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/98.jpg)
36
![Page 99: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/99.jpg)
36
![Page 100: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/100.jpg)
36
![Page 101: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/101.jpg)
36
![Page 102: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/102.jpg)
36
![Page 103: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/103.jpg)
36
![Page 104: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/104.jpg)
Поиск в ширину(древнеарамейск. Breadth-first search, BFS) узлы посещаются по уровням, будто срезаются слои с торта (смотрим по верхам)
37
![Page 105: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/105.jpg)
Обход в ширину
38
Сначала посещаются все узлы на уровне, потом их потомки и так до самого низа
document
head body
#layoutmeta title
aside main footer
![Page 106: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/106.jpg)
Обход в ширину
38
Сначала посещаются все узлы на уровне, потом их потомки и так до самого низа
document
head body
#layoutmeta title
aside main footer
document document
![Page 107: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/107.jpg)
Обход в ширину
38
Сначала посещаются все узлы на уровне, потом их потомки и так до самого низа
document
head body
#layoutmeta title
aside main footer
document headdocument
head
![Page 108: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/108.jpg)
Обход в ширину
38
Сначала посещаются все узлы на уровне, потом их потомки и так до самого низа
document
head body
#layoutmeta title
aside main footer
document headbody
document
head body
![Page 109: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/109.jpg)
Обход в ширину
38
Сначала посещаются все узлы на уровне, потом их потомки и так до самого низа
document
head body
#layoutmeta title
aside main footer
document headbody meta
document
head
meta
body
![Page 110: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/110.jpg)
Обход в ширину
38
Сначала посещаются все узлы на уровне, потом их потомки и так до самого низа
document
head body
#layoutmeta title
aside main footer
document headbody metatitle
document
head
meta title
body
![Page 111: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/111.jpg)
Обход в ширину
38
Сначала посещаются все узлы на уровне, потом их потомки и так до самого низа
document
head body
#layoutmeta title
aside main footer
document headbody metatitle#layout
document
head
meta title
body
#layout
![Page 112: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/112.jpg)
Обход в ширину
38
Сначала посещаются все узлы на уровне, потом их потомки и так до самого низа
document
head body
#layoutmeta title
aside main footer
document headbody metatitle#layoutaside
document
head
meta title
body
#layout
aside
![Page 113: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/113.jpg)
Обход в ширину
38
Сначала посещаются все узлы на уровне, потом их потомки и так до самого низа
document
head body
#layoutmeta title
aside main footer
document headbody metatitle#layoutasidemain
document
head
meta title
body
#layout
aside main
![Page 114: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/114.jpg)
Обход в ширину
38
Сначала посещаются все узлы на уровне, потом их потомки и так до самого низа
document
head body
#layoutmeta title
aside main footer
document headbody metatitle#layoutasidemain footer
document
head
meta title
body
#layout
aside main footer
![Page 115: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/115.jpg)
39
![Page 116: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/116.jpg)
39
![Page 117: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/117.jpg)
39
![Page 118: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/118.jpg)
39
![Page 119: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/119.jpg)
39
![Page 120: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/120.jpg)
39
![Page 121: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/121.jpg)
39
![Page 122: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/122.jpg)
39
![Page 123: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/123.jpg)
39
![Page 124: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/124.jpg)
«Лёгкий компьютер» в играх
40
Обходит дерево сверху вниз и выбирает варианты, в которых не проиграет в ближайшие несколько шагов (BFS)
![Page 125: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/125.jpg)
«Лёгкий компьютер» в играх
40
Обходит дерево сверху вниз и выбирает варианты, в которых не проиграет в ближайшие несколько шагов (BFS)
![Page 126: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/126.jpg)
«Лёгкий компьютер» в играх
40
Обходит дерево сверху вниз и выбирает варианты, в которых не проиграет в ближайшие несколько шагов (BFS)
![Page 127: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/127.jpg)
«Лёгкий компьютер» в играх
40
Обходит дерево сверху вниз и выбирает варианты, в которых не проиграет в ближайшие несколько шагов (BFS)
![Page 128: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/128.jpg)
«Лёгкий компьютер» в играх
40
Обходит дерево сверху вниз и выбирает варианты, в которых не проиграет в ближайшие несколько шагов (BFS)
![Page 129: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/129.jpg)
«Лёгкий компьютер» в играх
40
Обходит дерево сверху вниз и выбирает варианты, в которых не проиграет в ближайшие несколько шагов (BFS)
— Лошадью ходи, век воли не видать!
![Page 130: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/130.jpg)
«Сложный компьютер» в играх
41
Обходит дерево как можно глубже и выбирает выигрышные варианты (DFS)
![Page 131: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/131.jpg)
«Сложный компьютер» в играх
41
Обходит дерево как можно глубже и выбирает выигрышные варианты (DFS)
![Page 132: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/132.jpg)
«Сложный компьютер» в играх
41
Обходит дерево как можно глубже и выбирает выигрышные варианты (DFS)
![Page 133: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/133.jpg)
«Сложный компьютер» в играх
41
Обходит дерево как можно глубже и выбирает выигрышные варианты (DFS)
— Ботвинник сдавался!
![Page 134: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/134.jpg)
«Сложный компьютер» в играх
41
Обходит дерево как можно глубже и выбирает выигрышные варианты (DFS)
— Ботвинник сдавался!
![Page 135: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/135.jpg)
«Сложный компьютер» в играх
41
Обходит дерево как можно глубже и выбирает выигрышные варианты (DFS)
— Ботвинник сдавался!
![Page 136: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/136.jpg)
«Сложный компьютер» в играх
41
Обходит дерево как можно глубже и выбирает выигрышные варианты (DFS)
— Ботвинник сдавался!
![Page 137: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/137.jpg)
«Сложный компьютер» в играх
41
Обходит дерево как можно глубже и выбирает выигрышные варианты (DFS)
— Так-так, вот тут у меня больше шансов на победу
— Ботвинник сдавался!
![Page 138: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/138.jpg)
☀🔦 Анализ рынка разработкиСтатистика требований к разработчикам на основе вакансий «Моего Круга» с помощью библиотеки d3.js
42
![Page 139: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/139.jpg)
Дерево требований к разработчикам
43
Листьями являются конкретные технологии, а узлами — группы
умения
сервер контроль версийклиент
верстка
less scss
... ...библиотеки
AngularReact
![Page 140: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/140.jpg)
44
![Page 141: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/141.jpg)
🌳 Преимущества деревьев
45
![Page 142: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/142.jpg)
🌳 Преимущества деревьев
• сохраняются и передаются в виде строковых данных
45
![Page 143: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/143.jpg)
🌳 Преимущества деревьев
• сохраняются и передаются в виде строковых данных
• легко читаются
45
![Page 144: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/144.jpg)
🌳 Преимущества деревьев
• сохраняются и передаются в виде строковых данных
• легко читаются
• быстро выполняются (нативный объект JS)
45
![Page 145: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/145.jpg)
🌳 Преимущества деревьев
• сохраняются и передаются в виде строковых данных
• легко читаются
• быстро выполняются (нативный объект JS)
• не имеют чёткого формата описания, поэтому идеально подстраиваются под задачу
45
![Page 146: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/146.jpg)
Ищите решения, а не инструментыЧерез 20 лет не будет ни Бэйбеля, ни Реакта, ни Вебпака, ни Джаваскрипта. А деревья и битовые карты — будут
46
![Page 147: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/147.jpg)
Что поизучать
47
![Page 148: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/148.jpg)
Что поизучать
• github.com/htmlacademy/bitset.js библиотека от HTML Academy для работы с битовыми массивами в JS — обёртки для добавления, удаления, проверки и получения объектов с состоянием
47
![Page 149: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/149.jpg)
Что поизучать
• github.com/htmlacademy/bitset.js библиотека от HTML Academy для работы с битовыми массивами в JS — обёртки для добавления, удаления, проверки и получения объектов с состоянием
• o0.github.io/treesинтерактивные демки, примеры для разных областей применения, больше теории, исходники
47
![Page 150: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/150.jpg)
Что поизучать
• github.com/htmlacademy/bitset.js библиотека от HTML Academy для работы с битовыми массивами в JS — обёртки для добавления, удаления, проверки и получения объектов с состоянием
• o0.github.io/treesинтерактивные демки, примеры для разных областей применения, больше теории, исходники
• github.com/thejameskyle/itsy-bitsy-data-structuresрепозиторий, с интересным и подробным рассказом про алгоритмы и структуры данных на JS
47
![Page 151: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/151.jpg)
🖖— Спасибо!
![Page 152: Классическое программирование для фронтендеровo0.github.io/share/2-classic-programming.pdf · для выполнения на слабых](https://reader034.vdocuments.net/reader034/viewer/2022042220/5ec6c1d3a89cc52f307c6491/html5/thumbnails/152.jpg)
[email protected]Наставничество — отличный способ найти себе в команду новичка и воспитать его так, как считаешь должным на готовой продуманной инфраструктуре или просто поделиться опытом
49