Тема: втілення поняття об'єкта, його властивостей і методів мовою програмування Javascript. Створення програми, її виконання та налагодження на прикладі створення гру «Знайди скарб!».
Мета: сформувати визначення об'єкта у мові програмування, ознайомити учнів з його властивостями та методами, навчити створювати програми у cередовищі Java Script.
1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку. Перевірка виконання домашнього завдання.
Мотивація навчання. На уроці ми плануємо запрограмувати логічну іграшки. Цей гральний автомат загадує число і кожну спробу відгадати або підтверджує правильність вибору, або повідомляє, що загадане число більше (менше) від запропонованої відповіді. Такий тренер навчає логічно мислити і використовувати алгоритм двійкового (бінарного) пошуку (поділом навпіл діапазону можливих величин) для ефективного розв'язання і навчальних, і практичних задач.
2. Актуалізація опорних знань
Алгоритм створення програми мовою JavaScript у середовищі
Ввести слова about: blank у рядку адреси і натиснути клавішу Enter, щоб відкрити порожню сторінку.
Викликати JavaScript-консоль: натиснути клавіші Ctrl + Shift + J (при використанні MacOS натиснути Command + OPTION + J) і отримати таке вікно.
Праворуч від кутової дужки > має блимати вказівник | (вертикальна риска). Вказівник на те місце, де буде відображено введений текст. Цей текст у консолі буде підсвічено різними кольорами залежно від типу даних. Деякі браузери (наприклад, Mozilla Firefox) відображають консоль в окремому вікні.
Ввести код програми, натискаючи після введення кожного рядка програми клавіші Shift + Enter.
Натиснути клавішу Enter для запуску коду JavaScript на виконання.
Наприклад, після введення такого тексту:
3+4;
у наступному рядку буде виведено результат 7 (після символу <).
Приклад програми мовою JavaScript, яка друкує вказану кількість рядків (5), що містять номер рядка (починати з 0) і японський смайлик каомодзі у вигляді котячої мордочки: =^.^=
var draw = function (k)
{ for (var j = 0; j < k; j++)
console.log (j + "= ^.^ =");
}
draw(5);
Програма надрукує таке:
0= ^.^ =
1= ^.^ =
2= ^.^ =
3= ^.^ =
4= ^.^ =
Якщо при введенні програми користувач помилиться, результат може бути іншим. Наприклад, повідомлення про помилку.
Описати поняття об'єктно-орієнтованого програмування, виділені у тексті жирним шрифтом, і порівняти з очікуваним.
3. Вивчення нового матеріалу
Комп'ютери здатні робити приголомшливі речі: грати в шахи, обслуговувати одночасно тисячі клієнтів інтернет-магазину, виконувати складні розрахунки щодо стикування космічнгих кораблів. Однак вони це роблять не самостійно, а лише згідно з програмами (упорядкованими сукупностями вказівок), які для них створили люди. Комп'ютери одразу після складання не розуміють жодної з природних мов. Програми для них створюють спеціальними мовами програмування. Одним з таких мов є JavaScript.
JavaScript може керувати зовнішнім виглядом веб-сторінки або робити так, щоб сторінка реагувала на дії користувача: натискання клавіші або переміщення мишки. Навіть якщо ви чуєте про JavaScript уперше, ви вже відвідували сайти, які його використовують.
Gmail, Facebook і Twitter використовують JavaScript для полегшення роботи з поштою, запису відгуків або поліпшення навігації. Наприклад, при читанні у Twitter повідомлення від @nostarch і промотуванні сторінки вниз ви бачите все більше і більше нових повідомлень саме завдяки JavaScript.
За допомогою JavaScript можна створювати інструменти для творчості. Наприклад, Patatap видає різноманітні звуки і показує короткочасні анімації при натисканні клавіш.
JavaScript дає нам можливість грати у цікаві ігри. Наприклад, CubeSlam тривимірна версія класичної гри «Понг», схожа на аерохокей.
Позмагатися можна з ким-небудь з друзів або з ведмедем, за якого грає компьютер.
При створенні відповідних програм широко використовують поняття об'єкта зі своїми властивостями.
Створення об'єкта розглянемо на прикладі об'єкта cat, що зберігають відомості про кішку сірого кольору з трьома лапами і кличкою Гармонія.
У цьому прикладі оголошено змінну з назвою cat, якій надано значення посилання на об'єкт з трьома властивостями: лапи, кличка, колір.
При створенні об'єкта використовують фігурні дужки {}, а не квадратні (як в описі масивів). Усередині фігурних дужок перелічують пари «ключ (назва властивості) : значення». Двокрапка вказує на надання значення властивості при створенні об'єкта. Пари «ключ : значення» розділяють комами. Після останньої пари «ключ : значення» кому ставити не потрібно.
У поданому прикладі назви властивостей записано у лапках. Це не обов'язково. В інтепретатор JavaScript закладено таке: назви властивостей є рядками тексту. Тому можна обійтися без лапок. В цьому випадку назви властивостей мають відповідати тим же правилам, що й імена назви змінних. Наприклад, в них не має бути пробілів. Але, якщо ключ вказано в лапках, пробіли в його назві допустимі:
Значення властивості може бути довільного типу. Навіть змінною, в якій зберігають дані.
Весь об'єкт можна записати одним рядком:
var cat = {legs: 3, name: "Гармонія", color: "сірий"};
Але читати таку програму буде не завжди зручно.
Доступ до значень властивостей об'єкта можна отримати, вказавши у квадратних дужках назву властивості. Наприклад, програма з таким кодом:
var cat = {legs: 3, name: "Гармонія", color: "сірий"};
cat["name"];
виведе: "Гармонія"
Останній рядок останнього прикладу можна замінити на такий:
cat.name;
Такий запис називають точковою нотацією: замість запису назви властивості у лапках всередині квадратних дужок, цю назву записують після крапки після назви об'єкта через крапку. Це спрацює лише тоді, коли назва не містить пробілів.
Отримання кількості та переліку властивостей об'єкта здійснюють за допомогою вказівки Object.keys(), де у дужках записують назву об'єкта. Наприклад, код:
var cat = {legs: 3, name: "Гармонія", color: "сірий"};
Object.keys(cat)
повертає таке:
(3) ["legs", "name", "color"]
Порожній об'єкт — це об'єкт без жодної властивості:
var object = {};
Додавання властивостей розглянемо на такому прикладі:
В останньому прикладі створено порожній об’єкт з назвою cat, додано до нього три пари «ключ : значення» і виведено вміст об’єкта cat. Зауважимо: різні браузери можуть показувати об’єкти по-різному (у різній послідовності властивостей).
Припустимо, що ви позичили друзям гроші (без відсотків) і хочете облік того, хто скільки вам має повернути. це можна зробити за допомогою пар "властивість-ім'я" : значення-сума. Код:
виводить: 50. Якщо в останньому рядку "Дмитро" замінити на "Ганна", буде виведено 70. При заміні на довільне інше ім'я буде виведено: undefined (невизначено).
Збільшення боргу Дмитра на 3 грошові одиниці можна записати так:
Money["Дмитро"] += 3;
Зменшення боргу Ганни на 5 грошових одиниць можна записати так:
Money["Ганна"] -= 6;
4. Інструктаж з ТБ 5. Вироблення практичних навичок
Завдання. Створити гру «Знайди скарб!», яка має такий вигляд. Веб-сторінка відображає карту, на якій програма випадковим чином вибирає точку зі скарбом. Кожен раз, коли гравець клацає по карті, програма повідомляє, наскільки він близький до скарбу. При клацінні в околі скарбу програма виводить привітання і повідомляє, скільки клацінь пішло на пошуки.
До написання коду необхіжно визначити загальну структуру програми: перелічити завдання, які потрібно виконати для того, щоб гра адекватно реагувала на клаціння по карті.
Проектування гри (розробити, використовуючи конкурс ідей)
Створити HTML-сторінку гри, що відображає карту місцевості і місце для виведення повідомлень для гравця.
Випадковим чином вибрати на карті точку зі скарбом.
Створити обробник клацань (частину програми), який при кожному клацанні по карті робить таке:
збільшує значення лічильника клацань на 1;
визначає відстань від скарбу до точки клацання;
відображає повідомлення про відстань до скарбу;
вітає гравця при закінченні гри.
Вказівки до виконання
Створити HTML-сторінку, використавши тег img для відображення карти скарбу,
запозичену з адреси http://nostarch.com/images/treasuremap.png, а тег p — для виведення повідомлень. Для перегляду очікуваного коду перейти за гіперпосиланням і скористатися контексним меню, натиснувши праву кнопку миші.
Випадковим чином вибрати на карті точку зі скарбом. Розмір карти 400×400 пікселів, координати її верхнього лівого кута — (0, 0), а координати нижнього правого кута — (399, 399). Випадковий вибір точки t на карті означає вибір двох випадкових значень у діапазоні від 0 до 399 для координат (x, y). Його можна здійснити за допомогою функції f, яка отримує розмір s і повертає випадкове ціле число від 0 до цього розміру (не включаючи його):
var f = function (s)
{ return Math.floor(Math.random()*s);
};
var w = 400;
var h = 400;
var t =
{ x: f(w),
y: f(h)
};
Тут:
Math.random породжує випадкове число від 0 до 1;
Math.floor повертає цілу частину аргумента;
w, h — відповідно ширина й висота зображення;
t — об'єкт з двома властивостями x, y — координатами скарбу.
Створити обробник клацань, використавши такий шаблон:
$("#map").click(function (event){
// Тут буде код обробника
});
Звернення $("# map") використано, щоб вказати карту ("map" — це назва елемента img). Запис .click вказує, що далі буде код обробник клацань. Кожного разу, коли гравець клацне по карті, почнеться виконання тіла функції, розташованого між фігурними дужками. Інформацію про клацання буде передано у функцію через аргумент event.
Облік клацань. Для цього використати змінну c, яку створити на початку програми за межами коду обробника і надати їй значення 0:
var c = 0;
У код обробника клацань включити вказівку:
c++;
щоб збільшувати значання на 1 при кожному клацінні по карті.
Визначення відстані від скарбу до точки клацання за допомогою функції d:
var getD = function (event, t)
{ var dX = event.offsetX - t.x;
var dY = event.offsetY - t.y;
return Math.sqrt((dX*dX) + (dY*dY));
};
Ця функція отримує два аргументи: event і t. Об'єкт event — той самий, який передано обробнику клацань і який містить дані про подію. Зокрема, це властивості offsetX і offsetY, що зберігають координати точки клацання. У коді функції:
dX — різниця абсцис точок клацання і розташування скарбу;
dY — різниця ординат точок клацання і розташування скарбу.
На малюнку нижче показано приклад обчислення dX і dY.
Далі використано теорему Піфагора: у довільному прямокутному трикутнику, у якому катети (сторони, прилеглі до прямого кута) позначено як a, b, а гіпотенузу (сторону, протилежну до прямого кута) позначена як c, маємо:
а 2 + b 2 = c 2.
Знаючи довжини a, b, можна знайти довжину гіпотенузи, взявши квадратний корінь суми а 2 + b 2. У нашиму випадку довжини катетів дорівнюють модулям (абсолютним величинам) dX і dY. Для поданої вище ілюстрації шукана відстань становить:
________
_____
__
√
2∙2 + 1∙1
= √
4 + 1
= √
5
≈ 2.236.
Наостанок використано Math.sqrt — вбудовану функцію Javascript, що повертає (арифметичний) корінь квадратний аргумента.
Відображення повідомлення здійснити за допомогою функції hint (англійською — підказка):
var hint = function (d)
{ if (d < 10) { return "Скарб знайдено! Зроблено клацань: " + c;} else
if (d < 20) { return "Згориш!";} else
if (d < 40) { return "Дуже гаряче";} else
if (d < 80) { return "Гаряче";} else
if (d <160) { return "Тепло";} else
if (d <240) { return "Холодно";} else
if (d <320) { return "Дуже холодно";}else
{ return "Замерзнеш!";}
};
Ця функція повертає один з рядків тексту залежно від того, якому з проміжків належить відстань d до скарбу:
[0,10), [10,20), [20,40), [40,80), [80,160), [160,240), [240,320), [320,+∞).
Відображати таке повідомлення ми будемо як текстове наповнення елемента p з назвою distance. Цього можна досягнути, використавши такий код:
var d = getD(event, t);
var hint = Hint(d);
$("#distance").text(hint);
Таким чином, спочатку викликано getD. Повернене значення збережено як значення змінної d. Потім це значення передано у функцію Hint, щоб отримати потрібний
рядок підказки і зберігти його як значення змінної hint. Третій рядок змінює значення властивості text абзацу з назвою distance на значення змінної hint.
У результаті буде отримано таку сторінку (усно прокоментувати код).
6. Підведення підсумків.
Ми навчалися запускати на виконання код JavaScript у браузері Google Chrome і ввели нескладні програми-приклад. Створено справжню гру на основі опрацювання події клацання мишею. Також використано тег img для розташування на веб-сторінці зображення, формулу відстані між двома точками на координатній площині і властивості offsetX, offsetY події клаціння.
Виставлення оцінок.
7. Домашнє завдання
Вивчити матеріал уроку. У разі потреби доробити завдання, виконання якого розпочато у класі. Модифікувати код — замість текстових повідомлень:
"Згориш!", "Дуже гаряче", "Гаряче", "Тепло", "Холодно", "Дуже холодно", "Замерзнеш!" виводити зображення круга відповідно
жовтого, помаранчевого, червоного, коричневого, фіолетового, синього чи блакитного кольору.
Текст упорядкувала Коновалова Олена Володимирівна, вчитель інформатики гімназії «Міленіум» № 318 Солом`янського району міста Києва, під час виконання випускної роботи на курсах підвищення кваліфікації з 01.10.2018 по 05.10.2018.
