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

Тема: введення і виведення даних, вікна повідомлень, їхнє використання, передавання значень між вікном повідомлення і змінними мовою Javascipt.

Мета: сформувати в учнів навички кодування введення й виведення даних за допомогою вікон і файлів.

Після виконання роботи учень:

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

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

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

Хід уроку

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

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

Програму мовою JavaScript можна вставити в будь-яке місце HTML за допомогою тегу SCRIPT. Наприклад:

<!DOCTYPE HTML> <html><head><meta charset="utf-8"> </head> <body> Початок документа... <script> alert( 'Привіт, я вивчаю JavaScript!' ); </script> ...Кінець документа </body> </html>

Зазвичай код Javascript записують в окремий файл, розташування якого вказують як значення атрибута src контейнера <script>. Наприклад, таким чином:

<script src="/my/script.js"> </script> При цьому файл /my/script.js містить javascript-код, який інакше потрібно розташувати всередині контейнера <script>. Це дуже зручно, бо один і той самий файл зі скриптами можна підключити на різних сторінках.

Опис функції має такий вигляд:

function назва_функції (перелік_аргументів) {вказівки_тіла_функції}

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

Виведення даних за допомогою інформаційного вікна можна здійснити за допомогою вбудованої функції:

alert('Текст для виведення');

Функція alert() створює випадні вікна. Викликаючи її, потрібно задати у дужках рядок тексту, який може містити ознаки кінця рядка '\n'. Саме цей текст буде подано у випадному вікні.

Введення даних за допомогою вікна діалогу можна здійснити за допомогою вбудованої функції:

s=prompt('Повідомлення','Напис у полі для введення');

Після виконання поданої вище вказівки буде виведено таке вікно діалогу:

Після введення тексту і натискання кнопки OK, змінній s буде надано значення рядка тексту у полі для введення (там де 'Напис у полі для введення'). Якщо рядок потрібно розділити на кілька значень, можна використати вбудований метод рядків split, вказавши символ-роздільник її аргументом — див. приклад:

[a,b]=prompt('Введіть 2 цілих числа через пробіл','Вводити тут').split(' ');
alert('Друге число: '+b);

Завдання 1 (работа з файлами)

  1. Створити і зберегти текстовий файл (формат txt), що міститиме до 10 довільних символів.

  2. Перейти за посиланням на сторінку з формою.

  3. Натиснути кнопку з написом Огляд… і вибрати попередньо створений файл.

  4. Пересвідчитися у появі назви вибраного файлу праворуч від кнопки з написом Огляд… замість напису Файл не вибрано.

  5. Натиснути кнопку з написом Записати файл і пересвідчитися у появі посилання output.txt під цією кнопкою.

  6. Перейти за посиланням output.txt на сторінці Зчитування масиву з файлу і переглянути вміст записаного файлу. Пересвідчитися у тому, що вміст файлу той самий, що й у файлу, створеного на першому кроці.

  7. У середовищі текстового редактора використати вказівку меню Файл/Зберегти як (File/Save as) і встановити назву і розташування теки, куди було записано файл.

  8. На сторінці Зчитування масиву з файлу натисканням правої кнопки миші викликати контекстне меню і вибрати Програмний код сторінки.

  9. Проаналізувати код сторінки, використовуючи наявні коментарі.

  10. Переглянути код сторінки без коментаря, пересвідчитися у коректності його дії.

5. Закріплення вивченого матеріалу

Завдання 2. Створити сторінку HTML з кодом Javascript, яка допоможе зчитати два цілих числа з файлу і виведе їхню суму у вікно повідомлення.

Завдання 3. Створити сторінку HTML з кодом Javascript, яка допоможе зчитати два цілих числа з вікна діалогу і запише їхній добуток у файл.

Створені сторінки з назвами Ваше_прізвище1.html і Ваше_прізвище2.html записати у вказану вчителем теку.

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

7. Домашнє завдання
Повторити матеріал, вивчений на уроці. У разі потреби доробити завдання і надіслати файли на електронну адресу вчителя. Підготуватися до повного коментування коду без коментарів — навіть вказівок, непрокоментованих у коді сторінки, дослідженої при виконанні завдання 1.

Текст упорядкувала Олександр Рудик.