Тема: створення комп’ютерної моделі процесу взаємопов’язаного функціону­вання двох чи більше об’єктів за допомогою мови JavaScript.

Мета: навчитися створювати комп’ютерну модель процесу взаємопов’язаного функціонування двох чи більше об’єктів за допомогою мови JavaScript, вдосконалювати вміння визначати зв'язки між об'єктами, представляти їх у нових взаємозв'язках; формувати обізнаність про можливості ПК як інструменту навчально-пізнавальної діяльності. Після виконання роботи учень:

• описує процес розв’язування задачі з використанням комп’ютерної моделі;
• уміє:
• використовувати змінні для розв’язування задач;
• надавати значення змінним та змінювати їх;
• використовувати змінні при розгалуженні й повторенні.

Обладнання: ПК з встановленими ОС, текстовим редактороом і браузером.

Структура уроку

1. Організаційний момент
2. Актуалізація опорних знань
3. Інструктаж з ТБ
4. Вироблення практичних навичок
5. Підбиття підсумків уроку
6. Домашнє завдання

Хід уроку

1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку. Перевірка виконання домашнього завдання.

2. Актуалізація опорних знань

Розгалуження — це простий, але потужний інструмент створення нелінійних алгоритмів. Для його запису використовують оператор такого вигляду:

if (умова) {оператор₁;}

або

if (умова) {оператор₁;} else {оператор₂;}

При справдженні умови проглядач виконує оператор₁. Для другої повної форми при хибності умови проглядач виконує оператор₂.

Функція є способом зв'язати разом кілька вказівок в одне ціле для того, щоб зручним чином викликати їх з різних рядків коду. Загальний вигляд опису (означення) функції такий:

function назва ([параметр1] [,параметр2] [… , параметрN])
{ вказівки тіла функції
  [return величина]
}

Правила передавання аргументів функції

• Аргументи примітивних типів передають функції за величиною. Інакше кажучи, формальним аргументам надають величини фактичних аргументів на момент виклику. Якщо у тілі функції буде змінено величину аргумента, то ця зміна не стосується змінної, величину якої передано як аргумент.

• Об'єкти (і вбудовані, і визначені користувачем) передають за посиланням. Інакше кажучи, всі зміни властивостей об'єкту у тілі функції виконують безпосередньо в самому об'єкті, а не в його локальній копії. Такі зміни зберігаються після повернення з тіла функції.

Math.floor(x) повертає результат округлення x до цілого числа.

Math.random() повертає випадкове число з проміжку [0; 1].

setInterval(назва функції, час у мілісекундах) періодично викликає функцію через рівні проміжки часу.

3. Інструктаж з ТБ
4. Вироблення практичних навичок

Завдання 1. Створити проект «Злипання кругів»: два круги однакового розміру радіусу з випадковими початковими координатами і швидкостями рухаються квадратним полем рівномірно і прямолінійно до дзеркального відбивання від його меж або до дотику один з одним, після якого відбувається злипання і перетворення двох кругів на один при маси, що пропорційна площі, й імпульсу руху.

Вказівки до виконання можна виробити, використавши конкурс ідей.

1. Встановити колір (зелений) і розміри поля (до натискання кнопки 0×0).
2. Описати вигляд кнопки запуску (80×30).
3. Описати колір кругів.
4. Розташувати круги на полі, використавши <div id=…></div>.
5. Описати виклик функції myMove натисканням кнопки.

Всі подальші кроки, якщо не сказано інше, зробити у тілі функції myMove.


6. Періодично викликати функцію step кожні 10 мілісекунд.
7. Отримати посилання на поле та круги за допомогою document.getElementById("…").
8. Задати межі координат (0..400) на полі й початковий діаметр кругів (50).
9. Надати початкових випадкових значень коодинатам і швидкостям.
10. Відобразити початковий стан.

Всі подальші кроки зробити у тілі функції step, означеній у тілі myMove.


11. Запрограмувати зміну координат при відбиванні від країв поля.
12. Визначити, чи настала пора зиття кругів.
13. При злитті кругів для одного круга:
    • розмір збільшити у √¯2 разів;
    • колір змінити на оранжевий;
    • центр помістити у точку дотику;
    • складові швидкостей замінити на відповідні середні арифметичні.
    Для іншого круга:
    • швидкості надати нульового значення;
    • розміри зробити нульовими;
    • центр розташувати у куті поля.
14. Запрограмувати зміну координат при прямолінійному рівномірному русі.
15. Відобразити поточне розташування кругів.

5. Підбиття підсумків уроку
Виставлення оцінок.

6. Домашнє завдання
У разі потреби завершити роботу над програмою. Порівняти з демонстраційним розв'язанням.

Завдання 2. Ускладнити аналогічну програму, в якій використати більшу кількість кругів (бажано змінювану хоча б у коді). Запрограмувати зникнення з поля зору кнопки після натискання на неї.

Текст упорядкувала Власенко Юлія Миколаївна, вчитель школи І-ІІІ ступенів № 9 Оболонського району м. Києва, під час виконання випускної роботи на курсах підвищення кваліфікації з 22.10.2018 р. по 26.10.2018 р.