Розробка уроку — практичної роботи

Тема: cтворення програми мовою Javascript з розгалуженням і повторенням.

Мета: навчитися:

По завершенню вивчення учень:

Обладнання: комп’ютери IBM PC з встановленими ОС та стійким доступом до мережі Інтернет для роботи з online-компілятором (наприклад, rextester).

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

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

Хід уроку

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

Мотивація навчання: сьогодні ми навчимося складати програми мовою Javascript з розгалуженням і повторенням у середовищі. Cклавши програму один раз, можна виконати її для різних значень вхідних даних. Це може істотно зменшити час виконання завдань для багатьох варіантів вхідних даних. Сподіваюся, ви навчитеся краще логічно мислити і використовувати програмування для ефективного розв'язання і навчальних, і практичних задач.

2. Актуалізація опорних знань
(відомості щодо програмування мовою Javascript)

Змінні. У сценаріях JavaScript можна використовувати змінні, звертаючись до них за назвою. Змінні можуть бути глобальними або локальними. Глобальні змінні досяжні з довільного місця сценарію. Область дії локальних змінних обмежено кодом функції, всередині якого оголошено ці змінні. При створенні сценаріїв JavaScript рекомендовано оголошувати змінні до їхнього використання та надавання початкових величин. Це спрощує відлагодження сценаріїв і зменшує ймовірність помилки.

Оголошення змінної у JavaScript — за допомогою ключового слова var таким чином:
var назва змінної;

Тип змінної JavaScript надає лише при наданні змінній певної величини. Після такого надання назва змінної стане доступною, навіть якщо її попередньо не було оголошено.

Назва змінної:

Надання змінній величини здійснюють за допомогою оператора "=". Наприклад, оголошення змінної і надання їй величини текстового рядка можна здійснити так:

var Hello;
Hello = "Привіт!";

При цьому у довільному місці програми змінній Hello можна надати числельну величину, наприклад, так:

Hello = 4;

Після здійснення такої операції тип змінної буде змінено, але у процесі інтерпретації сценарію не буде зроблено жодного попереджувального повідомлення. Змінній можна надати спеціальну величину null. У цьому пипадку змінній не призначено жоден з типів.

Тип число допускає використання різних форматів, наприклад,:

Якщо результат виконання операцій з числами не можна подати числом, то повертається величина NaN (від англійською Not a Number).

Тип текстовий рядок описує послідовність символів між лапками (' або ", але одного вигляду). Зауважимо, порожній рядок відмінний від null.

Тип логічних даних передбачає лише дві величини: true і false.

Якщо змінну було оголошено, але їй не було надано величини, вона має невизначений тип. Якщо у виразах зустрічаються змінні різних типів, інтерпретатор JavaScript може автоматично перетворити числові дані в рядки тексту. Перетворення рядка у число виконують лише з допомогою спеціальних функцій parseInt (у ціле) і parseFloat (у дійсне).

Унарні оператори (для одного аргумента) оператори застосовують для зміни знаку, заперечення, збільшення (інкременту) чи зменшення (декременту):
- — зміна знаку на протилежний;
! — заперечення (логічної змінної);
++ — збільшення на 1 цілої величини змінної;
-- — зменшення на 1 цілої величини змінної.
Перші два оператори записують як префікс (перед операндом), останні два — і як префікс, і як суфікс (після операнда)

Бінарні оператори оператори записують між двома операндами. У мові JavaScript передбачено такі бінарні оператори:
- — віднімання;
+ — додавання;
* — множення;
/ — ділення;
% — лишок від ділення.

Оператори відношення використовують для порівняння величин змінних. Ці оператори повертають логічні величини true або false залежно від результату порівняння. Їх використовують переважно в умовних операторах. Подамо перелік операторів відношення мови JavaScript з вказанням умови повертання величини true:
> — лівий операнд більший за правий;
>= — лівий операнд не менший за правому;
< — лівий операнд менший за правий;
<= — лівий операнд не більший за правий;
== — величини операндів збігаються;
!= — величини операндів різні.

Логічні оператори:
|| — «або» — повертає true, якщо хоча б один з операндів дорівнює true;
&& — «і» — повертає true, якщо обидва операнди дорівнюють true.

Оператор надання величини у мові JavaScript, як у мові С, можна використовувати у поєднанні з іншими для зміни величини змінної. Перелічимо всі можливі такі поєднання:
= — звичайне надання величини;
+= — збільшення числової величини або злиття рядків;
-= — зменшення числової величини;
*= — множення;
/= — ділення;
%= — лишок від ділення;
>>= — зсув праворуч;
>>>= — зсув праворуч з заповненням звільнених розрядів нулями;
<<= — зсув ліворуч;
|= — «або»;
&= — «і»;
^= — «або ... або ...».

3. Вивчення нового матеріалу

Умовний оператор має такий вигляд:
if (умова) оператор1 або
if (умова) оператор1 else оператор2.
При справдженні умови проглядач виконує оператор1. Для другої повної форми при хибності умови проглядач виконує оператор2

Оператори циклу використовують для багатократного виконання послідовності операторів поки певне висловлювання не стане хибним. Схожий на оператори циклу оператор ітерації for…in, який використовують при роботі з об'єктами. JavaScript має 3 форми оператора циклу:

Мітки використовують для того, щоб вказати адресу переходу до оператора чи групи операторів. Роблять це таким чином: мітка: оператор. Міткою може бути довільна послідовність символів, що може бути назвою змінної (не є зарезервованим словом).

Оператор break перериває виконання поточного циклу, оператора switch або поміченого оператора й передає керування наступному за перериванням оператору. Його можна використосувати лише всередині циклів for, while, do…while або for…in, а також всередині оператора switch. Є дві форми цього оператора: break та break мiтка. Перша форма лише перериває виконання самого внутрішнього циклу, а друга додатково здійснює перехід на задану мітку. Подамо приклад оператора break у тілі функції, що повертає найменший номер елемента масиву, величина якого дорівнює заданій, або кількість елементів масиву, якщо такого елемента немає.

function findValue(a, theValue)
{ for (var i = 0; i < a.length; i++)
  { if (a[i] == theValue) break;
  }
  return i;
}

Оператор continue має дві форми:continue і continue мiтка. Перша форма оператора лише завершує поточну ітерацію самого внутрішнього з циклів. Друга форма оператора завершає поточну ітерацію самого внутрішнього з циклів з заданою міткою. При цьому перехід до наступної ітерації циклу здійснюється таким чином:

У наступному прикладі змінну n знайдено як суму чисел 1, 2, 4 і 5.

var i = 0;
var n = 0;
while (i < 5) { i++; if (i == 3) continue; n += i;}

Оператор for…in виконує задані дії для кожної властивості об'єкта чи для кожного елемента масиву, має такий вигляд:

for (змінна in вираз) вказівка

і діє таким чином:

  1. Змінній надають назву чергової властивості об'єкту чи чергового елемента масиву (залежно від природи виразу).

  2. Виконують вказівку.

  3. Переходять до етапу 1.

При ітерації властивостей об'єкту неможливо передбачити, в якому порядку їх буде проглянуто. Але їх буде проглянути усі без виключення. Подамо приклад створення об'єкту ob з наступним послідовним виведенням усіх його властивостей на екран користувача.

<html><script>
var ob = {"а": "Літера а", "б" : 2012};
for (var key in ob) document.write(key+": "+ob[key]+"<BR>");</script></html>

На екрані побачимо такий текст:
а: Літера а
б: 2012

4. Інструктаж з ТБ
5. Закріплення вивченого матеріалу


Програми записувати у вказану вчителем теку з назвами Ваше прізвище_№ завдання.

Завдання 1. Скласти програму, яка виводить десятковий запис числа n за відомим його двійковим записом s.

Завдання 2. Скласти програму, яка перевіряє, чи є дане число кратним 3 і/або 7 та виводить на екран монітора відповідне повідомлення.

Завдання 3. Скласти програму, яка визначає, у якої фігури площа більше і на скільки: у квадрата зі стороною x або у прямокутника зі сторонами y і z (натуральні числа x, y, z вводити з клавіатури).

Завдання 4. Скласти програму, яка для даних одновимірного масиву v і двох чисел p і q (p < q) визначить n — кількість елементів масиву v, розташованих (строго) між p і q.

Завдання 5. Скласти програму, яка визначає, чи є дана таблиця чисел 6×6 магічним квадратом, у якому суми елементів у всіх рядках і стовпчиках та на діагоналі збігаються. При створенні масивів використати конструктор для заповнення таблиці 6×6 числами магічного квадрату й лінійних масивів нулями:

var a = [
[27, 29,  2,  4, 13, 36],
[ 9, 11, 20, 22, 31, 18],
[32, 25,  7,  3, 21, 23],
[14, 16, 34, 30, 12,  5],
[28,  6, 15, 17, 26, 19],
[ 1, 24, 33, 35,  8, 10]],        
r = [0,0,0,0,0,0],
l = [0,0,0,0,0,0],
d = [0,0];

При зверненні до значень елементів масиву індекси вказувати у квадратних дужках: кожний окремо.

Порівняти складені програми з демонстраційними розв'язаннями: 1, 2, 3, 4, 5.

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

7. Домашнє завдання

  1. У разі потреби доробити завдання класної роботи.

  2. Удосконалити розв'язання завдання 5: припиняти порівнювання сум елементів у рядках і стовпчиках, щойно буде виявлено різні суми.

  3. Сформулювати й розв'язати задачу з використанням розгалуження й повторення.


Текст упорядкувала Лялько Віра Іванівна, вчитель медичної гімназія № 33 Голосіївського району міста Києва, під час виконання випускної роботи на курсах підвищення кваліфікації з 01.10.2018 по 05.10.2018.