1 added
1 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>7 апр 2023</li>
2
<ul><li>7 апр 2023</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Знакомимся со средой визуального программирования Scratch. Научим анимированного кота мяукать, когда его гладят.</p>
4
</ul><p>Знакомимся со средой визуального программирования Scratch. Научим анимированного кота мяукать, когда его гладят.</p>
5
<p>Кадр: сериал "Любовь. Смерть. Роботы" / Netflix</p>
5
<p>Кадр: сериал "Любовь. Смерть. Роботы" / Netflix</p>
6
<p>Программист, консультант, специалист по документированию. Легко и доступно рассказывает о сложных вещах в программировании и дизайне.</p>
6
<p>Программист, консультант, специалист по документированию. Легко и доступно рассказывает о сложных вещах в программировании и дизайне.</p>
7
<p><strong>Об авторе</strong></p>
7
<p><strong>Об авторе</strong></p>
8
<p>Американский учёный, профессор информатики в Гарвардском университете. Наиболее известен как преподаватель курсов CS50.</p>
8
<p>Американский учёный, профессор информатики в Гарвардском университете. Наиболее известен как преподаватель курсов CS50.</p>
9
<p><strong>Переводчик</strong></p>
9
<p><strong>Переводчик</strong></p>
10
<p>Марина Демидова</p>
10
<p>Марина Демидова</p>
11
<p>CS50 (Computer Science 50) - легендарный курс о компьютерных технологиях Гарвардского и Йельского университетов. Практически в любом разговоре о том, как вкатиться в программирование, опытные ребята упоминают этот курс как необходимую базу. В нём последовательно разбираются логика работы компьютера, работа с визуальным программированием в Scratch, основы языка C, массивы, основные алгоритмы, работа памяти, структуры данных, основы языка Python, основы SQL, HTML, CSS, JavaScript, Python-фреймворк Flask и даже эмодзи :)</p>
11
<p>CS50 (Computer Science 50) - легендарный курс о компьютерных технологиях Гарвардского и Йельского университетов. Практически в любом разговоре о том, как вкатиться в программирование, опытные ребята упоминают этот курс как необходимую базу. В нём последовательно разбираются логика работы компьютера, работа с визуальным программированием в Scratch, основы языка C, массивы, основные алгоритмы, работа памяти, структуры данных, основы языка Python, основы SQL, HTML, CSS, JavaScript, Python-фреймворк Flask и даже эмодзи :)</p>
12
<p>Изучив материалы курса, вы разберётесь в том, как работает компьютер, узнаете универсальные принципы программирования и сможете понимать и читать код, написанный на разных языках.</p>
12
<p>Изучив материалы курса, вы разберётесь в том, как работает компьютер, узнаете универсальные принципы программирования и сможете понимать и читать код, написанный на разных языках.</p>
13
<p>В этой статье мы разберём основы программирования на примере визуальной среды Scratch - хардкор, C и прочие штуки начнутся со следующей статьи цикла.</p>
13
<p>В этой статье мы разберём основы программирования на примере визуальной среды Scratch - хардкор, C и прочие штуки начнутся со следующей статьи цикла.</p>
14
<ul><li><a>Почему мы перевели CS50 и как устроена каждая статья по курсу</a></li>
14
<ul><li><a>Почему мы перевели CS50 и как устроена каждая статья по курсу</a></li>
15
<li><a>Оригинальное видео</a></li>
15
<li><a>Оригинальное видео</a></li>
16
<li><a>Что такое Scracth</a></li>
16
<li><a>Что такое Scracth</a></li>
17
<li><a>Как устроена среда Scratch</a></li>
17
<li><a>Как устроена среда Scratch</a></li>
18
<li><a>Средства программирования Scratch</a></li>
18
<li><a>Средства программирования Scratch</a></li>
19
<li><a>Учим кошку здороваться</a></li>
19
<li><a>Учим кошку здороваться</a></li>
20
<li><a>Настройка звуков</a></li>
20
<li><a>Настройка звуков</a></li>
21
<li><a>Интерактивное общение с кошкой</a></li>
21
<li><a>Интерактивное общение с кошкой</a></li>
22
<li><a>Итоги</a></li>
22
<li><a>Итоги</a></li>
23
</ul><p>CS50 - это самый популярный курс в Гарвардском университете и самый посещаемый массовый открытый онлайн-курс на edX. Все материалы курса<a>доступны бесплатно</a>(в том числе и практические задания), но, если заплатить, можно получить сертификат и <a>разные дополнительные плюшки</a>.</p>
23
</ul><p>CS50 - это самый популярный курс в Гарвардском университете и самый посещаемый массовый открытый онлайн-курс на edX. Все материалы курса<a>доступны бесплатно</a>(в том числе и практические задания), но, если заплатить, можно получить сертификат и <a>разные дополнительные плюшки</a>.</p>
24
<p>Мы перевели видеолекции в текстовый формат, снабдили их иллюстрациями, кое-где дополнили объяснения и выкладываем в открытый доступ. Оригинальный курс доступен по лицензии<a>Attribution-NonCommercial-ShareAlike 4.0 International</a>(CC BY-NC-SA 4.0) - его можно дорабатывать и распространять бесплатно, но только под исходной лицензией. Так что этот цикл материалов вы также сможете использовать в своей работе или общественной деятельности совершенно свободно и бесплатно в рамках той же лицензии.</p>
24
<p>Мы перевели видеолекции в текстовый формат, снабдили их иллюстрациями, кое-где дополнили объяснения и выкладываем в открытый доступ. Оригинальный курс доступен по лицензии<a>Attribution-NonCommercial-ShareAlike 4.0 International</a>(CC BY-NC-SA 4.0) - его можно дорабатывать и распространять бесплатно, но только под исходной лицензией. Так что этот цикл материалов вы также сможете использовать в своей работе или общественной деятельности совершенно свободно и бесплатно в рамках той же лицензии.</p>
25
<p>Каждая статья из цикла CS50 состоит из следующих материалов:</p>
25
<p>Каждая статья из цикла CS50 состоит из следующих материалов:</p>
26
<ul><li>текстовый перевод видео (иногда - половины видео, если тема обширная);</li>
26
<ul><li>текстовый перевод видео (иногда - половины видео, если тема обширная);</li>
27
<li>ссылка на оригинальное видео на английском языке;</li>
27
<li>ссылка на оригинальное видео на английском языке;</li>
28
<li>схемы и пояснения;</li>
28
<li>схемы и пояснения;</li>
29
<li>ссылки на более подробные материалы по теме статьи;</li>
29
<li>ссылки на более подробные материалы по теме статьи;</li>
30
<li>практические задания.</li>
30
<li>практические задания.</li>
31
</ul><p><strong>Лектор</strong></p>
31
</ul><p><strong>Лектор</strong></p>
32
<p>Американский учёный, профессор Гарвардского университета.</p>
32
<p>Американский учёный, профессор Гарвардского университета.</p>
33
<p>Посмотрите на на мою первую программу - я написал её в 1996 году на языке С:</p>
33
<p>Посмотрите на на мою первую программу - я написал её в 1996 году на языке С:</p>
34
<em>Кадр:<a>CS50</a>/ YouTube</em><p>Она печатает на экране "hello, world" без кавычек. В ней довольно много символов: решётка, угловые, круглые и фигурные скобки. Новичок в них легко запутается. В этом коде больше синтаксических конструкций и символов, чем описания реальной идеи - во всём этом мы разберёмся в следующих материалах этого цикла.</p>
34
<em>Кадр:<a>CS50</a>/ YouTube</em><p>Она печатает на экране "hello, world" без кавычек. В ней довольно много символов: решётка, угловые, круглые и фигурные скобки. Новичок в них легко запутается. В этом коде больше синтаксических конструкций и символов, чем описания реальной идеи - во всём этом мы разберёмся в следующих материалах этого цикла.</p>
35
<p>Сегодня мы будем использовать язык графического программирования Scratch, разработанный в Массачусетском технологическом институте. Кто-то раньше мог работать с Logo - это где черепашка бегала по экрану и выполняла всякие команды Scratch - как раз прямой наследник Logo.</p>
35
<p>Сегодня мы будем использовать язык графического программирования Scratch, разработанный в Массачусетском технологическом институте. Кто-то раньше мог работать с Logo - это где черепашка бегала по экрану и выполняла всякие команды Scratch - как раз прямой наследник Logo.</p>
36
<p>Работа в Scracth поможет наглядно изучить основы программирования, но не думать при этом о синтаксических конструкциях. Это почти как псевдокод - только с визуальными симпатичными блоками и он на самом деле работает.</p>
36
<p>Работа в Scracth поможет наглядно изучить основы программирования, но не думать при этом о синтаксических конструкциях. Это почти как псевдокод - только с визуальными симпатичными блоками и он на самом деле работает.</p>
37
<p>Scratch позволяет собирать программы как кусочки пазла. "Hello, world!" на нём будет выглядеть так:</p>
37
<p>Scratch позволяет собирать программы как кусочки пазла. "Hello, world!" на нём будет выглядеть так:</p>
38
<em>Скриншот: Scratch / Skillbox Media</em><p>Самое классное в Scratch - его даже не надо устанавливать на компьютер, всё можно делать прямо в браузере. Просто перейдите в <a>онлайн-редактор</a>и начинайте экспериментировать!</p>
38
<em>Скриншот: Scratch / Skillbox Media</em><p>Самое классное в Scratch - его даже не надо устанавливать на компьютер, всё можно делать прямо в браузере. Просто перейдите в <a>онлайн-редактор</a>и начинайте экспериментировать!</p>
39
<p>А вот так выглядит интерфейс Scratch:</p>
39
<p>А вот так выглядит интерфейс Scratch:</p>
40
<em>Скриншот: Scratch / Skillbox Media</em><p>Так выглядит редактор Scratch по умолчанию. Разберёмся во всех вкладках внимательнее:</p>
40
<em>Скриншот: Scratch / Skillbox Media</em><p>Так выглядит редактор Scratch по умолчанию. Разберёмся во всех вкладках внимательнее:</p>
41
<p><strong>Код.</strong>Здесь мы собственно будем программировать, добавлять предметы и персонажей (спрайтов), анимацию и тому подобное - это основная рабочая вкладка.</p>
41
<p><strong>Код.</strong>Здесь мы собственно будем программировать, добавлять предметы и персонажей (спрайтов), анимацию и тому подобное - это основная рабочая вкладка.</p>
42
<p><strong>Костюмы.</strong>Здесь можно настроить выбранного нами персонажа (спрайта), изменить его цвет, форму и внешний вид.</p>
42
<p><strong>Костюмы.</strong>Здесь можно настроить выбранного нами персонажа (спрайта), изменить его цвет, форму и внешний вид.</p>
43
<em>Скриншот: Scratch / Skillbox Media</em><p><strong>Звуки.</strong>Здесь можно настроить звуки, которые будет издавать спрайт: разговор, мяуканье, пение.</p>
43
<em>Скриншот: Scratch / Skillbox Media</em><p><strong>Звуки.</strong>Здесь можно настроить звуки, которые будет издавать спрайт: разговор, мяуканье, пение.</p>
44
<em>Скриншот: Scratch / Skillbox Media</em><p>Теперь вернёмся на вкладку<strong>Код</strong>.</p>
44
<em>Скриншот: Scratch / Skillbox Media</em><p>Теперь вернёмся на вкладку<strong>Код</strong>.</p>
45
<em>Скриншот: Scratch / Skillbox Media</em><p>Мы видим, что экран разбит на пять областей:</p>
45
<em>Скриншот: Scratch / Skillbox Media</em><p>Мы видим, что экран разбит на пять областей:</p>
46
<ul><li><strong>Палитра программных блоков.</strong>Она представляет все те идеи, которые мы обсуждали в первой статье этого цикла.</li>
46
<ul><li><strong>Палитра программных блоков.</strong>Она представляет все те идеи, которые мы обсуждали в первой статье этого цикла.</li>
47
-
<li><strong>Область кода.</strong>Сюда мы будем перетаскивать программные блоки и соединять их вместе как кусочки головоломки. Это и будет программированием в среде Scratch.</li>
47
+
<li><strong>Область кода.</strong>Сюда мы будем перетаскивать программные блоки и соединять их вместе как кусочки головоломки. Это и буд��т программированием в среде Scratch.</li>
48
<li><strong>Сцена.</strong>Здесь мы может посмотреть, как работает наша программа и как выполняются команды.</li>
48
<li><strong>Сцена.</strong>Здесь мы может посмотреть, как работает наша программа и как выполняются команды.</li>
49
<li><strong>Панель спрайтов.</strong>Здесь можно добавлять и настраивать все объекты, которые помещаются на сцену.</li>
49
<li><strong>Панель спрайтов.</strong>Здесь можно добавлять и настраивать все объекты, которые помещаются на сцену.</li>
50
<li><strong>Выбор фона.</strong>На этой панели можно выбрать фон для анимации из встроенной библиотеки или загрузить свой.</li>
50
<li><strong>Выбор фона.</strong>На этой панели можно выбрать фон для анимации из встроенной библиотеки или загрузить свой.</li>
51
</ul><p>Окружение позволяет иметь несколько спрайтов, таких как эта кошка на сцене. Спрайт на сцене может двигаться вверх, вниз, влево, вправо и делать ещё много чего. Он позиционируется в обычной прямоугольной системе координат XY.</p>
51
</ul><p>Окружение позволяет иметь несколько спрайтов, таких как эта кошка на сцене. Спрайт на сцене может двигаться вверх, вниз, влево, вправо и делать ещё много чего. Он позиционируется в обычной прямоугольной системе координат XY.</p>
52
<em>Скриншот: Scratch / Skillbox Media</em><p>Позиционирование в системе координат пригодится, если вам понадобится точное расположение спрайтов на экране. Координаты задаются на панели спрайтов.</p>
52
<em>Скриншот: Scratch / Skillbox Media</em><p>Позиционирование в системе координат пригодится, если вам понадобится точное расположение спрайтов на экране. Координаты задаются на панели спрайтов.</p>
53
<p>Посмотрим на палитру программных блоков. Она содержит десять видов разноцветных блоков:</p>
53
<p>Посмотрим на палитру программных блоков. Она содержит десять видов разноцветных блоков:</p>
54
<ul><li>Синие - блоки движения. С их помощью можно заставить спрайт перемещаться по сцене, поворачиваться, плыть, идти. Это блоки по умолчанию.</li>
54
<ul><li>Синие - блоки движения. С их помощью можно заставить спрайт перемещаться по сцене, поворачиваться, плыть, идти. Это блоки по умолчанию.</li>
55
</ul><em>Скриншот: Scratch / Skillbox Media</em><ul><li>Фиолетовые - блоки внешнего вида. С их помощью можно изменять вид спрайтов, например сделать так, чтобы кошка выглядела как собака или птица. Также можно менять фон сцены, создавать для спрайтов речевые пузыри с текстом.</li>
55
</ul><em>Скриншот: Scratch / Skillbox Media</em><ul><li>Фиолетовые - блоки внешнего вида. С их помощью можно изменять вид спрайтов, например сделать так, чтобы кошка выглядела как собака или птица. Также можно менять фон сцены, создавать для спрайтов речевые пузыри с текстом.</li>
56
</ul><em>Скриншот: Scratch / Skillbox Media</em><ul><li>Пурпурные - блоки звуков. Здесь можно заставить кошку мяукать, говорить и издавать любые звуки - их можно импортировать или записать самостоятельно.</li>
56
</ul><em>Скриншот: Scratch / Skillbox Media</em><ul><li>Пурпурные - блоки звуков. Здесь можно заставить кошку мяукать, говорить и издавать любые звуки - их можно импортировать или записать самостоятельно.</li>
57
</ul><em>Скриншот: Scratch / Skillbox Media</em><ul><li>Жёлтые - блоки, позволяющие заставить спрайт реагировать на какие-то события. Самое главное из них - нажатие на зелёный флажок над панелями, который начинает воспроизведение (а красная точка - остановка выполнения). Можно настроить всё так, чтобы спрайт реагировал на нажатие разных клавиш, получение сообщений и другие события. Это подобно тому, как вы нажимаете на значок на экране своего смартфона, проводите по нему пальцем или нажимаете кнопку сбоку - для всех этих событий кто-то написал конкретную инструкцию.</li>
57
</ul><em>Скриншот: Scratch / Skillbox Media</em><ul><li>Жёлтые - блоки, позволяющие заставить спрайт реагировать на какие-то события. Самое главное из них - нажатие на зелёный флажок над панелями, который начинает воспроизведение (а красная точка - остановка выполнения). Можно настроить всё так, чтобы спрайт реагировал на нажатие разных клавиш, получение сообщений и другие события. Это подобно тому, как вы нажимаете на значок на экране своего смартфона, проводите по нему пальцем или нажимаете кнопку сбоку - для всех этих событий кто-то написал конкретную инструкцию.</li>
58
</ul><em>Скриншот: Scratch / Skillbox Media</em><ul><li>Оранжевые - блоки управления. Вы видите, что мы можем повторить что-то десять раз или подождать одну секунду, причём можно изменять значения в белых кругах. Здесь можно организовать цикл и делать что-то снова и снова, или организовать условный переход: если условие истинно - выполнять одни действия, если ложно - другие. Циклы и условия можно комбинировать, вкладывать одни в другие, задавать несколько.</li>
58
</ul><em>Скриншот: Scratch / Skillbox Media</em><ul><li>Оранжевые - блоки управления. Вы видите, что мы можем повторить что-то десять раз или подождать одну секунду, причём можно изменять значения в белых кругах. Здесь можно организовать цикл и делать что-то снова и снова, или организовать условный переход: если условие истинно - выполнять одни действия, если ложно - другие. Циклы и условия можно комбинировать, вкладывать одни в другие, задавать несколько.</li>
59
</ul><em>Скриншот: Scratch / Skillbox Media</em><ul><li>Голубые - сенсоры. Здесь вы можете задавать вопросы - логические выражения с ответами ДА/НЕТ: касается ли спрайт указателя мыши, получен ли ответ на вопрос, нажата ли клавиша или кнопка мыши. Например, вам, возможно, будет необходимо сделать какие-то вычисления, чтобы узнать, приближается ли враг к кошке.</li>
59
</ul><em>Скриншот: Scratch / Skillbox Media</em><ul><li>Голубые - сенсоры. Здесь вы можете задавать вопросы - логические выражения с ответами ДА/НЕТ: касается ли спрайт указателя мыши, получен ли ответ на вопрос, нажата ли клавиша или кнопка мыши. Например, вам, возможно, будет необходимо сделать какие-то вычисления, чтобы узнать, приближается ли враг к кошке.</li>
60
</ul><em>Скриншот: Scratch / Skillbox Media</em><ul><li>Зелёные - операторы. Они позволяют делать математические действия, объединять слова или получать случайные числа - это необходимо в играх. Операторы можно комбинировать.</li>
60
</ul><em>Скриншот: Scratch / Skillbox Media</em><ul><li>Зелёные - операторы. Они позволяют делать математические действия, объединять слова или получать случайные числа - это необходимо в играх. Операторы можно комбинировать.</li>
61
</ul><em>Скриншот: Scratch / Skillbox Media</em><ul><li>Оранжевые - блоки управления переменными. В переменных можно хранить любые нужные нам значения: числа, буквы, слова, цвета и всё что угодно. И если в математике переменные обозначаются буквами x, y, z, то в программировании принято называть их словами в единственном или множественном числе для описания того, что они собой представляют.</li>
61
</ul><em>Скриншот: Scratch / Skillbox Media</em><ul><li>Оранжевые - блоки управления переменными. В переменных можно хранить любые нужные нам значения: числа, буквы, слова, цвета и всё что угодно. И если в математике переменные обозначаются буквами x, y, z, то в программировании принято называть их словами в единственном или множественном числе для описания того, что они собой представляют.</li>
62
</ul><em>Скриншот: Scratch / Skillbox Media</em><ul><li>Розовые - другие блоки. Если вам недостаточно имеющихся блоков, вы можете создавать собственные. Это мы и проделаем в дальнейшем.</li>
62
</ul><em>Скриншот: Scratch / Skillbox Media</em><ul><li>Розовые - другие блоки. Если вам недостаточно имеющихся блоков, вы можете создавать собственные. Это мы и проделаем в дальнейшем.</li>
63
</ul><em>Скриншот: Scratch / Skillbox Media</em><p>А теперь мы попробуем создать самую простую программу. Возьмём элемент "Когда нажат зелёный флажок" с панели "События" и переместим его в область кода. Присоединим к нему фиолетовый элемент - блок "Сказать" из блоков внешнего вида. В его белой области напишем "Привет, мир!".</p>
63
</ul><em>Скриншот: Scratch / Skillbox Media</em><p>А теперь мы попробуем создать самую простую программу. Возьмём элемент "Когда нажат зелёный флажок" с панели "События" и переместим его в область кода. Присоединим к нему фиолетовый элемент - блок "Сказать" из блоков внешнего вида. В его белой области напишем "Привет, мир!".</p>
64
<em>Скриншот: Scratch / Skillbox Media</em><p>Если мы нажмём на зелёный флажок на верхней панели, то у кошки на сцене появится речевой пузырь с текстом "Привет, мир!".</p>
64
<em>Скриншот: Scratch / Skillbox Media</em><p>Если мы нажмём на зелёный флажок на верхней панели, то у кошки на сцене появится речевой пузырь с текстом "Привет, мир!".</p>
65
<em>Скриншот: Scratch / Skillbox Media</em><p>Очевидно, что такая программа гораздо понятнее для пользователя, чем загадочный текст на C, хотя в дальнейшем с ним мы также будем разбираться.</p>
65
<em>Скриншот: Scratch / Skillbox Media</em><p>Очевидно, что такая программа гораздо понятнее для пользователя, чем загадочный текст на C, хотя в дальнейшем с ним мы также будем разбираться.</p>
66
<p>Здесь блок "Сказать" - это функция, которая соответствует рассмотренной в первой части парадигме:</p>
66
<p>Здесь блок "Сказать" - это функция, которая соответствует рассмотренной в первой части парадигме:</p>
67
<em>Кадр:<a>CS50</a>/ YouTube</em><p>Действительно, на вход будет подаваться текст "Привет, мир!", его будет обрабатывать функция "Сказать", а результатом станет "побочный эффект" - появление у кошки облака речи. Побочными обычно называются визуальные эффекты или звуковые эффекты, например что-то появляется на экране или объект издаёт звук.</p>
67
<em>Кадр:<a>CS50</a>/ YouTube</em><p>Действительно, на вход будет подаваться текст "Привет, мир!", его будет обрабатывать функция "Сказать", а результатом станет "побочный эффект" - появление у кошки облака речи. Побочными обычно называются визуальные эффекты или звуковые эффекты, например что-то появляется на экране или объект издаёт звук.</p>
68
<em>Кадр:<a>CS50</a>/ YouTube</em><p>Давайте сделаем нашу программу более интерактивной, чтобы она говорила что-то вроде "Привет, Дэвид" или "Привет, Картер". Для этого перейдём на вкладку "Сенсоры" и выберем элемент "Спросить". Вопрос в белом поле мы можем заменить на любой. Если нажать на зелёный флажок, у кисы появится речевой пузырь с этим вопросом, а внизу сцены - поле ввода ответа. Компьютер будет ждать, пока человек введёт свой текст.</p>
68
<em>Кадр:<a>CS50</a>/ YouTube</em><p>Давайте сделаем нашу программу более интерактивной, чтобы она говорила что-то вроде "Привет, Дэвид" или "Привет, Картер". Для этого перейдём на вкладку "Сенсоры" и выберем элемент "Спросить". Вопрос в белом поле мы можем заменить на любой. Если нажать на зелёный флажок, у кисы появится речевой пузырь с этим вопросом, а внизу сцены - поле ввода ответа. Компьютер будет ждать, пока человек введёт свой текст.</p>
69
<em>Скриншот: Scratch / Skillbox Media</em><p>Блок "Спросить" отличается от блока "Сказать" тем, что он сохраняет введённый текст в виде так называемого возвращаемого значения. По умолчанию это называется "Ответ".</p>
69
<em>Скриншот: Scratch / Skillbox Media</em><p>Блок "Спросить" отличается от блока "Сказать" тем, что он сохраняет введённый текст в виде так называемого возвращаемого значения. По умолчанию это называется "Ответ".</p>
70
<p>Теперь добавим в нашу программу ещё один блок "Сказать" и перенесём блок "Ответ" в белое поле. Нажмём на зелёный флажок и напишем в поле ввода "Дэвид".</p>
70
<p>Теперь добавим в нашу программу ещё один блок "Сказать" и перенесём блок "Ответ" в белое поле. Нажмём на зелёный флажок и напишем в поле ввода "Дэвид".</p>
71
<em>Скриншот: Scratch / Skillbox Media</em><p>К сожалению, если мы теперь нажмём Enter, кошка пропустит слово "Привет" и произнесёт только "Дэвид".</p>
71
<em>Скриншот: Scratch / Skillbox Media</em><p>К сожалению, если мы теперь нажмём Enter, кошка пропустит слово "Привет" и произнесёт только "Дэвид".</p>
72
<em>Скриншот: Scratch / Skillbox Media</em><p>Это происходит потому, что компьютер очень быстро переходит от одной команды к другой, и слово "Привет" мгновенно заменяется следующим словом. Чтобы исправить ошибку, удалим один блок "Сказать". В белое поле другого блока "Сказать" поместим оператор "Объединить" с зелёной панели. Слово "яблоко" заменим на "Привет, ", а вместо слова "банан“ вставим блок "Ответ“.</p>
72
<em>Скриншот: Scratch / Skillbox Media</em><p>Это происходит потому, что компьютер очень быстро переходит от одной команды к другой, и слово "Привет" мгновенно заменяется следующим словом. Чтобы исправить ошибку, удалим один блок "Сказать". В белое поле другого блока "Сказать" поместим оператор "Объединить" с зелёной панели. Слово "яблоко" заменим на "Привет, ", а вместо слова "банан“ вставим блок "Ответ“.</p>
73
<em>Скриншот: Scratch / Skillbox Media</em><p>Опять нажмём на зелёный флажок и наберём в поле ввода "Дэвид". При нажатии на Enter получим нужный результат.</p>
73
<em>Скриншот: Scratch / Skillbox Media</em><p>Опять нажмём на зелёный флажок и наберём в поле ввода "Дэвид". При нажатии на Enter получим нужный результат.</p>
74
<em>Скриншот: Scratch / Skillbox Media</em><p>А теперь давайте немного оживим нашу программу. В Scratch есть интересные интерактивные функции. Чтобы увидеть их, нажмём на кнопку "Добавить расширение" в левом нижнем углу.</p>
74
<em>Скриншот: Scratch / Skillbox Media</em><p>А теперь давайте немного оживим нашу программу. В Scratch есть интересные интерактивные функции. Чтобы увидеть их, нажмём на кнопку "Добавить расширение" в левом нижнем углу.</p>
75
<em>Скриншот: Scratch / Skillbox Media</em><p>Выберем расширение "Текст в речь".</p>
75
<em>Скриншот: Scratch / Skillbox Media</em><p>Выберем расширение "Текст в речь".</p>
76
<em>Скриншот: Scratch / Skillbox Media</em><p>В нашей палитре программных блоков появился новый блок "Текст в речь".</p>
76
<em>Скриншот: Scratch / Skillbox Media</em><p>В нашей палитре программных блоков появился новый блок "Текст в речь".</p>
77
<em>Скриншот: Scratch / Skillbox Media</em><p>Перетащим в область кода блок "Сказать" с панели "Текст в речь" и перенесём на его белое поле блок "Объединить". А голубое "Сказать" удалим.</p>
77
<em>Скриншот: Scratch / Skillbox Media</em><p>Перетащим в область кода блок "Сказать" с панели "Текст в речь" и перенесём на его белое поле блок "Объединить". А голубое "Сказать" удалим.</p>
78
<em>Скриншот: Scratch / Skillbox Media</em><p>Теперь, когда мы наберём в поле ввода "Дэвид", кошка голосом скажет: "Привет, Дэвид".</p>
78
<em>Скриншот: Scratch / Skillbox Media</em><p>Теперь, когда мы наберём в поле ввода "Дэвид", кошка голосом скажет: "Привет, Дэвид".</p>
79
<p>А сейчас попробуем применить в программе циклы и условные конструкции. Пусть наша кошка будет мяукать. Для этого удалим все лишние блоки и добавим блок "Играть звук" с панели "Звук".</p>
79
<p>А сейчас попробуем применить в программе циклы и условные конструкции. Пусть наша кошка будет мяукать. Для этого удалим все лишние блоки и добавим блок "Играть звук" с панели "Звук".</p>
80
<em>Скриншот: Scratch / Skillbox Media</em><p>Если мы запустим программу, кошка мяукнет один раз. А если мы захотим, чтобы она мяукала три раза? Будем перетаскивать три блока? Нет, это плохой вариант. А вдруг нам понадобится, чтобы кошка мяукала по-другому или вообще гавкала? Нам придётся менять программу в трёх местах, что может привести к ошибке. Дублирования следует избегать.</p>
80
<em>Скриншот: Scratch / Skillbox Media</em><p>Если мы запустим программу, кошка мяукнет один раз. А если мы захотим, чтобы она мяукала три раза? Будем перетаскивать три блока? Нет, это плохой вариант. А вдруг нам понадобится, чтобы кошка мяукала по-другому или вообще гавкала? Нам придётся менять программу в трёх местах, что может привести к ошибке. Дублирования следует избегать.</p>
81
<p>Добавим в программу блок "Повторить" с панели "Управление", а чтобы мяуканье не звучало слишком пронзительно, добавим после "Играть" блок "Ждать".</p>
81
<p>Добавим в программу блок "Повторить" с панели "Управление", а чтобы мяуканье не звучало слишком пронзительно, добавим после "Играть" блок "Ждать".</p>
82
<em>Скриншот: Scratch / Skillbox Media</em><p>Теперь программу при необходимости можно легко поправить: изменить количество повторений или звуки, которые издаёт кошка, добавить ещё какие-то действия в цикле.</p>
82
<em>Скриншот: Scratch / Skillbox Media</em><p>Теперь программу при необходимости можно легко поправить: изменить количество повторений или звуки, которые издаёт кошка, добавить ещё какие-то действия в цикле.</p>
83
<p>Что ещё можно усовершенствовать? У нас есть программа для воспроизведения кошачьего мяуканья. Используем то, что в программировании называется абстракцией и объединим в один блок пошаговые инструкции: "Повторить", "Играть звук", "Ждать".</p>
83
<p>Что ещё можно усовершенствовать? У нас есть программа для воспроизведения кошачьего мяуканья. Используем то, что в программировании называется абстракцией и объединим в один блок пошаговые инструкции: "Повторить", "Играть звук", "Ждать".</p>
84
<p>Перейдём на розовую вкладку "Другие блоки" и нажмём на значок "Создать блок".</p>
84
<p>Перейдём на розовую вкладку "Другие блоки" и нажмём на значок "Создать блок".</p>
85
<em>Скриншот: Scratch / Skillbox Media</em><p>В поле "Название блока" напишем "Мяу" и нажмём "ОК".</p>
85
<em>Скриншот: Scratch / Skillbox Media</em><p>В поле "Название блока" напишем "Мяу" и нажмём "ОК".</p>
86
<p>На панели "Другие блоки" появился блок "Мяу", а на рабочей области - значок "Определить "Мяу“". Перетащим к нему блоки "Играть" и "Ждать", а в "Повторить" перетащим блок "Мяу" с панели.</p>
86
<p>На панели "Другие блоки" появился блок "Мяу", а на рабочей области - значок "Определить "Мяу“". Перетащим к нему блоки "Играть" и "Ждать", а в "Повторить" перетащим блок "Мяу" с панели.</p>
87
<em>Скриншот: Scratch / Skillbox Media</em><p>Теперь мы можем добавлять блок "Мяу" туда, куда захотим, и абстрагироваться от его содержания. Так получится код, который удобнее читать и поддерживать - особенно если вы видите его впервые или решили изменить, например, через год.</p>
87
<em>Скриншот: Scratch / Skillbox Media</em><p>Теперь мы можем добавлять блок "Мяу" туда, куда захотим, и абстрагироваться от его содержания. Так получится код, который удобнее читать и поддерживать - особенно если вы видите его впервые или решили изменить, например, через год.</p>
88
<p>Для нас неважно, из чего состоит "Мяу", - как и в блоках "Спросить", "Сказать" и других. А если нам нужно что-то изменить в этом блоке, мы просто найдём блок "Определить "Мяу“" и исправим его.</p>
88
<p>Для нас неважно, из чего состоит "Мяу", - как и в блоках "Спросить", "Сказать" и других. А если нам нужно что-то изменить в этом блоке, мы просто найдём блок "Определить "Мяу“" и исправим его.</p>
89
<p>Но здесь есть дополнительная возможность для создания абстракции и выделения некоторых функций. Это касается блока "Повторить". Было бы лучше, чтобы при вызове функции "Мяу" мы сразу сообщали в её входных данных, сколько раз кошке нужно мяукнуть. Для этого щёлкнем правой кнопкой мыши на блок "Определить "Мяу“" и выберем "Редактировать".</p>
89
<p>Но здесь есть дополнительная возможность для создания абстракции и выделения некоторых функций. Это касается блока "Повторить". Было бы лучше, чтобы при вызове функции "Мяу" мы сразу сообщали в её входных данных, сколько раз кошке нужно мяукнуть. Для этого щёлкнем правой кнопкой мыши на блок "Определить "Мяу“" и выберем "Редактировать".</p>
90
<p>В открывшемся окне нажмем на кнопку "Добавить значение" и в поле вверху введём букву n. Это будет количество раз, которое нужно мяукнуть.</p>
90
<p>В открывшемся окне нажмем на кнопку "Добавить значение" и в поле вверху введём букву n. Это будет количество раз, которое нужно мяукнуть.</p>
91
<p>Теперь нажмем на кнопку "Добавить подпись" и введём "раз" в появившемся поле. Это просто поясняющая надпись, она не имеет функционального значения.</p>
91
<p>Теперь нажмем на кнопку "Добавить подпись" и введём "раз" в появившемся поле. Это просто поясняющая надпись, она не имеет функционального значения.</p>
92
<em>Скриншот: Scratch / Skillbox Media</em><p>Нажмём ОК. Теперь блок "Определить "Мяу“" стал называться "Определить "Мяу“ n раз". Добавим к нему блок "Повторить" и перенесём в его белое поле n из "Определить "Мяу“ n раз". Из верхней части программы удалим блок "Повторить", а в белое поле блока "Мяу" поставим указание на то, сколько раз кошка должна мяукнуть.</p>
92
<em>Скриншот: Scratch / Skillbox Media</em><p>Нажмём ОК. Теперь блок "Определить "Мяу“" стал называться "Определить "Мяу“ n раз". Добавим к нему блок "Повторить" и перенесём в его белое поле n из "Определить "Мяу“ n раз". Из верхней части программы удалим блок "Повторить", а в белое поле блока "Мяу" поставим указание на то, сколько раз кошка должна мяукнуть.</p>
93
<em>Скриншот: Scratch / Skillbox Media</em><p>Вот теперь мы действительно создали хорошую программу. Её функциональность не изменилась, но она стала короче и понятнее.</p>
93
<em>Скриншот: Scratch / Skillbox Media</em><p>Вот теперь мы действительно создали хорошую программу. Её функциональность не изменилась, но она стала короче и понятнее.</p>
94
<p>Добавим возможность пообщаться с кошкой. Было бы мило, если бы кошка мяукала, когда её касается курсор - будто бы вы её погладили.</p>
94
<p>Добавим возможность пообщаться с кошкой. Было бы мило, если бы кошка мяукала, когда её касается курсор - будто бы вы её погладили.</p>
95
<p>Используем блоки:</p>
95
<p>Используем блоки:</p>
96
<ul><li>"Когда нажат зелёный флажок" с панели "События".</li>
96
<ul><li>"Когда нажат зелёный флажок" с панели "События".</li>
97
<li>"Если то" с панели "Управление".</li>
97
<li>"Если то" с панели "Управление".</li>
98
<li>"Касается указатель мыши" с панели "Сенсоры".</li>
98
<li>"Касается указатель мыши" с панели "Сенсоры".</li>
99
<li>"Играть звук "Мяу“ до конца" с панели "Звук".</li>
99
<li>"Играть звук "Мяу“ до конца" с панели "Звук".</li>
100
<li>"Повторять всегда" с панели "Управление".</li>
100
<li>"Повторять всегда" с панели "Управление".</li>
101
</ul><p>Составим программу:</p>
101
</ul><p>Составим программу:</p>
102
<em>Скриншот: Scratch / Skillbox Media</em><p>Теперь, если мы нажмём зелёный флажок, кошка будет мяукать каждый раз, когда её коснётся курсор, - до тех пор, пока мы не нажмём значок "Стоп" (красный кружок рядом с зелёным флажком).</p>
102
<em>Скриншот: Scratch / Skillbox Media</em><p>Теперь, если мы нажмём зелёный флажок, кошка будет мяукать каждый раз, когда её коснётся курсор, - до тех пор, пока мы не нажмём значок "Стоп" (красный кружок рядом с зелёным флажком).</p>
103
<p>Добавим ещё интерактивности. Нажмём на кнопку "Добавить расширение" и выберем "Видео распознавание".</p>
103
<p>Добавим ещё интерактивности. Нажмём на кнопку "Добавить расширение" и выберем "Видео распознавание".</p>
104
<em>Скриншот: Scratch / Skillbox Media</em><p>Перетащим блок "Когда скорость видео >" с панели "Видео распознавание" и добавим "Играть звук "Мяу“ до конца" с панели "Звук".</p>
104
<em>Скриншот: Scratch / Skillbox Media</em><p>Перетащим блок "Когда скорость видео >" с панели "Видео распознавание" и добавим "Играть звук "Мяу“ до конца" с панели "Звук".</p>
105
<em>Скриншот: Scratch / Skillbox Media</em><p>Теперь, когда я проведу рукой позади кошки, она мяукнет.</p>
105
<em>Скриншот: Scratch / Skillbox Media</em><p>Теперь, когда я проведу рукой позади кошки, она мяукнет.</p>
106
<em>Скриншот: Scratch / Skillbox Media</em><p>Как видите, мы постоянно разбиваем поставленную задачу на части и последовательно решаем каждую из них. Например, что кошка должна делать? Мяукать. Что это значит? Она должна произносить "Мяу" заданное количество раз. Когда она должна мяукать? Когда её погладят. Как этого добиться? Мне нужна функция "Мяу". И так далее.</p>
106
<em>Скриншот: Scratch / Skillbox Media</em><p>Как видите, мы постоянно разбиваем поставленную задачу на части и последовательно решаем каждую из них. Например, что кошка должна делать? Мяукать. Что это значит? Она должна произносить "Мяу" заданное количество раз. Когда она должна мяукать? Когда её погладят. Как этого добиться? Мне нужна функция "Мяу". И так далее.</p>
107
<p>Если вы будете рассуждать таким образом, то не растеряетесь, даже если задача будет очень объёмной или включать в себя многочисленные задачи. Я сам так делаю, когда создаю программные проекты.</p>
107
<p>Если вы будете рассуждать таким образом, то не растеряетесь, даже если задача будет очень объёмной или включать в себя многочисленные задачи. Я сам так делаю, когда создаю программные проекты.</p>
108
<p>Обдумывание проекта может занять много времени, поэтому я начинаю разбивать будущую программу на модули (декомпозировать) и записывать их в виде списка задач. Также можно оформить декомпозицию в виде псевдокода, на листе бумаги или в текстовом файле - и даже просто продумать, никуда не записывая. После этого можно начинать решать задачу.</p>
108
<p>Обдумывание проекта может занять много времени, поэтому я начинаю разбивать будущую программу на модули (декомпозировать) и записывать их в виде списка задач. Также можно оформить декомпозицию в виде псевдокода, на листе бумаги или в текстовом файле - и даже просто продумать, никуда не записывая. После этого можно начинать решать задачу.</p>
109
<p>Практическую работу можно найти на <a>сайте</a>курса. Рекомендуем выполнять практические задания, чтобы лучше усвоить материал.</p>
109
<p>Практическую работу можно найти на <a>сайте</a>курса. Рекомендуем выполнять практические задания, чтобы лучше усвоить материал.</p>
110
<ul><li>Scratch - это среда и язык для визуального программирования.</li>
110
<ul><li>Scratch - это среда и язык для визуального программирования.</li>
111
<li>Scratch помогает абстрагироваться от синтаксиса и полностью сосредоточиться на своей идее и конечном результате.</li>
111
<li>Scratch помогает абстрагироваться от синтаксиса и полностью сосредоточиться на своей идее и конечном результате.</li>
112
<li>Операторы в Scratch задаются симпатичными визуальными блоками.</li>
112
<li>Операторы в Scratch задаются симпатичными визуальными блоками.</li>
113
<li>Scratch - "игрушечный" инструмент, в реальности, конечно, на нём не создают серьёзные программные проекты.</li>
113
<li>Scratch - "игрушечный" инструмент, в реальности, конечно, на нём не создают серьёзные программные проекты.</li>
114
<li>Важный этап в создании программы - декомпозиция, то есть разбивка большой задачи на набор маленьких.</li>
114
<li>Важный этап в создании программы - декомпозиция, то есть разбивка большой задачи на набор маленьких.</li>
115
</ul><a><b>IT-курсы для детей от 7 до 17 лет в Skillbox Kids</b>Программирование, разработка игр, дизайн и нейросети. Бесплатный подбор курса по увлечениям ребёнка. Записаться</a>
115
</ul><a><b>IT-курсы для детей от 7 до 17 лет в Skillbox Kids</b>Программирование, разработка игр, дизайн и нейросети. Бесплатный подбор курса по увлечениям ребёнка. Записаться</a>